@teamturing/react-kit 2.45.3 → 2.46.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/OverlayPopper/index.d.ts +1 -1
- package/dist/core/Tooltip/BaseTooltip.d.ts +7 -0
- package/dist/core/Tooltip/index.d.ts +4 -19
- package/dist/core/Tooltip/useTooltip.d.ts +14 -0
- package/dist/core/Tooltip/useTooltipContext.d.ts +6 -0
- package/dist/index.js +15670 -12798
- package/esm/core/Breadcrumbs/BreadcrumbsItem.js +0 -3
- package/esm/core/OverlayPopper/index.js +2 -2
- package/esm/core/Tooltip/BaseTooltip.js +125 -0
- package/esm/core/Tooltip/index.js +21 -279
- package/esm/core/Tooltip/useTooltip.js +56 -0
- package/esm/core/Tooltip/useTooltipContext.js +12 -0
- package/esm/node_modules/@floating-ui/core/dist/floating-ui.core.js +145 -27
- package/esm/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +191 -59
- package/esm/node_modules/@floating-ui/react/dist/floating-ui.react.js +1621 -0
- package/esm/node_modules/@floating-ui/react/dist/floating-ui.react.utils.js +233 -0
- package/esm/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js +108 -16
- package/esm/node_modules/@floating-ui/utils/{dom/dist → dist}/floating-ui.utils.dom.js +48 -15
- package/esm/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +28 -13
- package/esm/node_modules/tabbable/dist/index.esm.js +560 -0
- package/esm/packages/icons/esm/AHorizontalLine.js +15 -0
- package/esm/packages/icons/esm/AVertialLine.js +15 -0
- package/esm/packages/icons/esm/BoxPlus.js +15 -0
- package/esm/packages/icons/esm/Crop.js +24 -0
- package/esm/packages/icons/esm/Cursor.js +22 -0
- package/esm/packages/icons/esm/Global.js +17 -0
- package/esm/packages/icons/esm/LandscapeArrow.js +20 -0
- package/esm/packages/icons/esm/Moon.js +15 -0
- package/esm/packages/icons/esm/PortraitArrow.js +20 -0
- package/esm/packages/icons/esm/SoundPaper.js +20 -0
- package/esm/packages/icons/esm/Sun.js +15 -0
- package/esm/packages/icons/esm/index.js +11 -0
- package/esm/packages/token-studio/esm/foundation/palette/index.js +1 -0
- package/package.json +5 -5
|
@@ -1,10 +1,9 @@
|
|
|
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';
|
|
1
|
+
import { offset as offset$1, shift as shift$1, flip as flip$1, computePosition as computePosition$1, arrow as arrow$1 } from '../../core/dist/floating-ui.core.js';
|
|
3
2
|
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,
|
|
3
|
+
import { getOverflowAncestors, isElement, getWindow, getFrameElement, getComputedStyle as getComputedStyle$1, getDocumentElement, isHTMLElement, isWebKit, isTopLayer, getNodeName, isOverflowElement, getNodeScroll, getParentNode, isLastTraversableNode, isTableElement, isContainingBlock, getContainingBlock } from '../../utils/dist/floating-ui.utils.dom.js';
|
|
5
4
|
|
|
6
5
|
function getCssDimensions(element) {
|
|
7
|
-
const css = getComputedStyle(element);
|
|
6
|
+
const css = getComputedStyle$1(element);
|
|
8
7
|
// In testing environments, the `width` and `height` properties are empty
|
|
9
8
|
// strings for SVG elements, returning NaN. Fallback to `0` in this case.
|
|
10
9
|
let width = parseFloat(css.width) || 0;
|
|
@@ -104,11 +103,12 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
104
103
|
if (domElement) {
|
|
105
104
|
const win = getWindow(domElement);
|
|
106
105
|
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
107
|
-
let
|
|
108
|
-
|
|
106
|
+
let currentWin = win;
|
|
107
|
+
let currentIFrame = getFrameElement(currentWin);
|
|
108
|
+
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
109
109
|
const iframeScale = getScale(currentIFrame);
|
|
110
110
|
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
111
|
-
const css = getComputedStyle(currentIFrame);
|
|
111
|
+
const css = getComputedStyle$1(currentIFrame);
|
|
112
112
|
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
113
113
|
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
114
114
|
x *= iframeScale.x;
|
|
@@ -117,7 +117,8 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
117
117
|
height *= iframeScale.y;
|
|
118
118
|
x += left;
|
|
119
119
|
y += top;
|
|
120
|
-
|
|
120
|
+
currentWin = getWindow(currentIFrame);
|
|
121
|
+
currentIFrame = getFrameElement(currentWin);
|
|
121
122
|
}
|
|
122
123
|
}
|
|
123
124
|
return rectToClientRect({
|
|
@@ -128,15 +129,37 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
128
129
|
});
|
|
129
130
|
}
|
|
130
131
|
|
|
132
|
+
// If <html> has a CSS width greater than the viewport, then this will be
|
|
133
|
+
// incorrect for RTL.
|
|
134
|
+
function getWindowScrollBarX(element, rect) {
|
|
135
|
+
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
136
|
+
if (!rect) {
|
|
137
|
+
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
138
|
+
}
|
|
139
|
+
return rect.left + leftScroll;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
function getHTMLOffset(documentElement, scroll) {
|
|
143
|
+
const htmlRect = documentElement.getBoundingClientRect();
|
|
144
|
+
const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
|
|
145
|
+
const y = htmlRect.top + scroll.scrollTop;
|
|
146
|
+
return {
|
|
147
|
+
x,
|
|
148
|
+
y
|
|
149
|
+
};
|
|
150
|
+
}
|
|
151
|
+
|
|
131
152
|
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
132
153
|
let {
|
|
154
|
+
elements,
|
|
133
155
|
rect,
|
|
134
156
|
offsetParent,
|
|
135
157
|
strategy
|
|
136
158
|
} = _ref;
|
|
137
|
-
const
|
|
159
|
+
const isFixed = strategy === 'fixed';
|
|
138
160
|
const documentElement = getDocumentElement(offsetParent);
|
|
139
|
-
|
|
161
|
+
const topLayer = elements ? isTopLayer(elements.floating) : false;
|
|
162
|
+
if (offsetParent === documentElement || topLayer && isFixed) {
|
|
140
163
|
return rect;
|
|
141
164
|
}
|
|
142
165
|
let scroll = {
|
|
@@ -145,7 +168,8 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
|
145
168
|
};
|
|
146
169
|
let scale = createCoords(1);
|
|
147
170
|
const offsets = createCoords(0);
|
|
148
|
-
|
|
171
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
172
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
149
173
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
150
174
|
scroll = getNodeScroll(offsetParent);
|
|
151
175
|
}
|
|
@@ -156,11 +180,12 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
|
156
180
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
157
181
|
}
|
|
158
182
|
}
|
|
183
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
159
184
|
return {
|
|
160
185
|
width: rect.width * scale.x,
|
|
161
186
|
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
|
|
187
|
+
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
|
|
188
|
+
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
|
|
164
189
|
};
|
|
165
190
|
}
|
|
166
191
|
|
|
@@ -168,12 +193,6 @@ function getClientRects(element) {
|
|
|
168
193
|
return Array.from(element.getClientRects());
|
|
169
194
|
}
|
|
170
195
|
|
|
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
196
|
// Gets the entire size of the scrollable document area, even extending outside
|
|
178
197
|
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
|
|
179
198
|
function getDocumentRect(element) {
|
|
@@ -184,7 +203,7 @@ function getDocumentRect(element) {
|
|
|
184
203
|
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
185
204
|
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
186
205
|
const y = -scroll.scrollTop;
|
|
187
|
-
if (getComputedStyle(body).direction === 'rtl') {
|
|
206
|
+
if (getComputedStyle$1(body).direction === 'rtl') {
|
|
188
207
|
x += max(html.clientWidth, body.clientWidth) - width;
|
|
189
208
|
}
|
|
190
209
|
return {
|
|
@@ -195,6 +214,10 @@ function getDocumentRect(element) {
|
|
|
195
214
|
};
|
|
196
215
|
}
|
|
197
216
|
|
|
217
|
+
// Safety check: ensure the scrollbar space is reasonable in case this
|
|
218
|
+
// calculation is affected by unusual styles.
|
|
219
|
+
// Most scrollbars leave 15-18px of space.
|
|
220
|
+
const SCROLLBAR_MAX = 25;
|
|
198
221
|
function getViewportRect(element, strategy) {
|
|
199
222
|
const win = getWindow(element);
|
|
200
223
|
const html = getDocumentElement(element);
|
|
@@ -212,6 +235,24 @@ function getViewportRect(element, strategy) {
|
|
|
212
235
|
y = visualViewport.offsetTop;
|
|
213
236
|
}
|
|
214
237
|
}
|
|
238
|
+
const windowScrollbarX = getWindowScrollBarX(html);
|
|
239
|
+
// <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
|
|
240
|
+
// visual width of the <html> but this is not considered in the size
|
|
241
|
+
// of `html.clientWidth`.
|
|
242
|
+
if (windowScrollbarX <= 0) {
|
|
243
|
+
const doc = html.ownerDocument;
|
|
244
|
+
const body = doc.body;
|
|
245
|
+
const bodyStyles = getComputedStyle(body);
|
|
246
|
+
const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
|
|
247
|
+
const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
|
|
248
|
+
if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
|
|
249
|
+
width -= clippingStableScrollbarWidth;
|
|
250
|
+
}
|
|
251
|
+
} else if (windowScrollbarX <= SCROLLBAR_MAX) {
|
|
252
|
+
// If the <body> scrollbar is on the left, the width needs to be extended
|
|
253
|
+
// by the scrollbar amount so there isn't extra space on the right.
|
|
254
|
+
width += windowScrollbarX;
|
|
255
|
+
}
|
|
215
256
|
return {
|
|
216
257
|
width,
|
|
217
258
|
height,
|
|
@@ -220,6 +261,7 @@ function getViewportRect(element, strategy) {
|
|
|
220
261
|
};
|
|
221
262
|
}
|
|
222
263
|
|
|
264
|
+
const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
|
|
223
265
|
// Returns the inner client rect, subtracting scrollbars if present.
|
|
224
266
|
function getInnerBoundingClientRect(element, strategy) {
|
|
225
267
|
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
|
@@ -248,9 +290,10 @@ function getClientRectFromClippingAncestor(element, clippingAncestor, strategy)
|
|
|
248
290
|
} else {
|
|
249
291
|
const visualOffsets = getVisualOffsets(element);
|
|
250
292
|
rect = {
|
|
251
|
-
...clippingAncestor,
|
|
252
293
|
x: clippingAncestor.x - visualOffsets.x,
|
|
253
|
-
y: clippingAncestor.y - visualOffsets.y
|
|
294
|
+
y: clippingAncestor.y - visualOffsets.y,
|
|
295
|
+
width: clippingAncestor.width,
|
|
296
|
+
height: clippingAncestor.height
|
|
254
297
|
};
|
|
255
298
|
}
|
|
256
299
|
return rectToClientRect(rect);
|
|
@@ -260,7 +303,7 @@ function hasFixedPositionAncestor(element, stopNode) {
|
|
|
260
303
|
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
261
304
|
return false;
|
|
262
305
|
}
|
|
263
|
-
return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
|
|
306
|
+
return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
|
|
264
307
|
}
|
|
265
308
|
|
|
266
309
|
// A "clipping ancestor" is an `overflow` element with the characteristic of
|
|
@@ -273,17 +316,17 @@ function getClippingElementAncestors(element, cache) {
|
|
|
273
316
|
}
|
|
274
317
|
let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
|
|
275
318
|
let currentContainingBlockComputedStyle = null;
|
|
276
|
-
const elementIsFixed = getComputedStyle(element).position === 'fixed';
|
|
319
|
+
const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
|
|
277
320
|
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
278
321
|
|
|
279
322
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
280
323
|
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
281
|
-
const computedStyle = getComputedStyle(currentNode);
|
|
324
|
+
const computedStyle = getComputedStyle$1(currentNode);
|
|
282
325
|
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
283
326
|
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
|
284
327
|
currentContainingBlockComputedStyle = null;
|
|
285
328
|
}
|
|
286
|
-
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle &&
|
|
329
|
+
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
287
330
|
if (shouldDropCurrentNode) {
|
|
288
331
|
// Drop non-containing blocks.
|
|
289
332
|
result = result.filter(ancestor => ancestor !== currentNode);
|
|
@@ -306,7 +349,7 @@ function getClippingRect(_ref) {
|
|
|
306
349
|
rootBoundary,
|
|
307
350
|
strategy
|
|
308
351
|
} = _ref;
|
|
309
|
-
const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
352
|
+
const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
310
353
|
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
311
354
|
const firstClippingAncestor = clippingAncestors[0];
|
|
312
355
|
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
|
|
@@ -326,7 +369,14 @@ function getClippingRect(_ref) {
|
|
|
326
369
|
}
|
|
327
370
|
|
|
328
371
|
function getDimensions(element) {
|
|
329
|
-
|
|
372
|
+
const {
|
|
373
|
+
width,
|
|
374
|
+
height
|
|
375
|
+
} = getCssDimensions(element);
|
|
376
|
+
return {
|
|
377
|
+
width,
|
|
378
|
+
height
|
|
379
|
+
};
|
|
330
380
|
}
|
|
331
381
|
|
|
332
382
|
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
@@ -339,6 +389,12 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
339
389
|
scrollTop: 0
|
|
340
390
|
};
|
|
341
391
|
const offsets = createCoords(0);
|
|
392
|
+
|
|
393
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
394
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
395
|
+
function setLeftRTLScrollbarOffset() {
|
|
396
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
397
|
+
}
|
|
342
398
|
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
343
399
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
344
400
|
scroll = getNodeScroll(offsetParent);
|
|
@@ -348,64 +404,90 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
348
404
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
349
405
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
350
406
|
} else if (documentElement) {
|
|
351
|
-
|
|
407
|
+
setLeftRTLScrollbarOffset();
|
|
352
408
|
}
|
|
353
409
|
}
|
|
410
|
+
if (isFixed && !isOffsetParentAnElement && documentElement) {
|
|
411
|
+
setLeftRTLScrollbarOffset();
|
|
412
|
+
}
|
|
413
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
414
|
+
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
415
|
+
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
354
416
|
return {
|
|
355
|
-
x
|
|
356
|
-
y
|
|
417
|
+
x,
|
|
418
|
+
y,
|
|
357
419
|
width: rect.width,
|
|
358
420
|
height: rect.height
|
|
359
421
|
};
|
|
360
422
|
}
|
|
361
423
|
|
|
424
|
+
function isStaticPositioned(element) {
|
|
425
|
+
return getComputedStyle$1(element).position === 'static';
|
|
426
|
+
}
|
|
427
|
+
|
|
362
428
|
function getTrueOffsetParent(element, polyfill) {
|
|
363
|
-
if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
|
|
429
|
+
if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
|
|
364
430
|
return null;
|
|
365
431
|
}
|
|
366
432
|
if (polyfill) {
|
|
367
433
|
return polyfill(element);
|
|
368
434
|
}
|
|
369
|
-
|
|
435
|
+
let rawOffsetParent = element.offsetParent;
|
|
436
|
+
|
|
437
|
+
// Firefox returns the <html> element as the offsetParent if it's non-static,
|
|
438
|
+
// while Chrome and Safari return the <body> element. The <body> element must
|
|
439
|
+
// be used to perform the correct calculations even if the <html> element is
|
|
440
|
+
// non-static.
|
|
441
|
+
if (getDocumentElement(element) === rawOffsetParent) {
|
|
442
|
+
rawOffsetParent = rawOffsetParent.ownerDocument.body;
|
|
443
|
+
}
|
|
444
|
+
return rawOffsetParent;
|
|
370
445
|
}
|
|
371
446
|
|
|
372
447
|
// Gets the closest ancestor positioned element. Handles some edge cases,
|
|
373
448
|
// such as table ancestors and cross browser bugs.
|
|
374
449
|
function getOffsetParent(element, polyfill) {
|
|
375
|
-
const
|
|
450
|
+
const win = getWindow(element);
|
|
451
|
+
if (isTopLayer(element)) {
|
|
452
|
+
return win;
|
|
453
|
+
}
|
|
376
454
|
if (!isHTMLElement(element)) {
|
|
377
|
-
|
|
455
|
+
let svgOffsetParent = getParentNode(element);
|
|
456
|
+
while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
|
|
457
|
+
if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
|
|
458
|
+
return svgOffsetParent;
|
|
459
|
+
}
|
|
460
|
+
svgOffsetParent = getParentNode(svgOffsetParent);
|
|
461
|
+
}
|
|
462
|
+
return win;
|
|
378
463
|
}
|
|
379
464
|
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
380
|
-
while (offsetParent && isTableElement(offsetParent) &&
|
|
465
|
+
while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
|
|
381
466
|
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
382
467
|
}
|
|
383
|
-
if (offsetParent && (
|
|
384
|
-
return
|
|
468
|
+
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
|
|
469
|
+
return win;
|
|
385
470
|
}
|
|
386
|
-
return offsetParent || getContainingBlock(element) ||
|
|
471
|
+
return offsetParent || getContainingBlock(element) || win;
|
|
387
472
|
}
|
|
388
473
|
|
|
389
|
-
const getElementRects = async function (
|
|
390
|
-
let {
|
|
391
|
-
reference,
|
|
392
|
-
floating,
|
|
393
|
-
strategy
|
|
394
|
-
} = _ref;
|
|
474
|
+
const getElementRects = async function (data) {
|
|
395
475
|
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
396
476
|
const getDimensionsFn = this.getDimensions;
|
|
477
|
+
const floatingDimensions = await getDimensionsFn(data.floating);
|
|
397
478
|
return {
|
|
398
|
-
reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
|
|
479
|
+
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
|
|
399
480
|
floating: {
|
|
400
481
|
x: 0,
|
|
401
482
|
y: 0,
|
|
402
|
-
|
|
483
|
+
width: floatingDimensions.width,
|
|
484
|
+
height: floatingDimensions.height
|
|
403
485
|
}
|
|
404
486
|
};
|
|
405
487
|
};
|
|
406
488
|
|
|
407
489
|
function isRTL(element) {
|
|
408
|
-
return getComputedStyle(element).direction === 'rtl';
|
|
490
|
+
return getComputedStyle$1(element).direction === 'rtl';
|
|
409
491
|
}
|
|
410
492
|
|
|
411
493
|
const platform = {
|
|
@@ -421,14 +503,19 @@ const platform = {
|
|
|
421
503
|
isRTL
|
|
422
504
|
};
|
|
423
505
|
|
|
506
|
+
function rectsAreEqual(a, b) {
|
|
507
|
+
return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
|
|
508
|
+
}
|
|
509
|
+
|
|
424
510
|
// https://samthor.au/2021/observing-dom/
|
|
425
511
|
function observeMove(element, onMove) {
|
|
426
512
|
let io = null;
|
|
427
513
|
let timeoutId;
|
|
428
514
|
const root = getDocumentElement(element);
|
|
429
515
|
function cleanup() {
|
|
516
|
+
var _io;
|
|
430
517
|
clearTimeout(timeoutId);
|
|
431
|
-
io
|
|
518
|
+
(_io = io) == null || _io.disconnect();
|
|
432
519
|
io = null;
|
|
433
520
|
}
|
|
434
521
|
function refresh(skip, threshold) {
|
|
@@ -439,12 +526,13 @@ function observeMove(element, onMove) {
|
|
|
439
526
|
threshold = 1;
|
|
440
527
|
}
|
|
441
528
|
cleanup();
|
|
529
|
+
const elementRectForRootMargin = element.getBoundingClientRect();
|
|
442
530
|
const {
|
|
443
531
|
left,
|
|
444
532
|
top,
|
|
445
533
|
width,
|
|
446
534
|
height
|
|
447
|
-
} =
|
|
535
|
+
} = elementRectForRootMargin;
|
|
448
536
|
if (!skip) {
|
|
449
537
|
onMove();
|
|
450
538
|
}
|
|
@@ -468,13 +556,25 @@ function observeMove(element, onMove) {
|
|
|
468
556
|
return refresh();
|
|
469
557
|
}
|
|
470
558
|
if (!ratio) {
|
|
559
|
+
// If the reference is clipped, the ratio is 0. Throttle the refresh
|
|
560
|
+
// to prevent an infinite loop of updates.
|
|
471
561
|
timeoutId = setTimeout(() => {
|
|
472
562
|
refresh(false, 1e-7);
|
|
473
|
-
},
|
|
563
|
+
}, 1000);
|
|
474
564
|
} else {
|
|
475
565
|
refresh(false, ratio);
|
|
476
566
|
}
|
|
477
567
|
}
|
|
568
|
+
if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
|
|
569
|
+
// It's possible that even though the ratio is reported as 1, the
|
|
570
|
+
// element is not actually fully within the IntersectionObserver's root
|
|
571
|
+
// area anymore. This can happen under performance constraints. This may
|
|
572
|
+
// be a bug in the browser's IntersectionObserver implementation. To
|
|
573
|
+
// work around this, we compare the element's bounding rect now with
|
|
574
|
+
// what it was at the time we created the IntersectionObserver. If they
|
|
575
|
+
// are not equal then the element moved, so we refresh.
|
|
576
|
+
refresh();
|
|
577
|
+
}
|
|
478
578
|
isFirstUpdate = false;
|
|
479
579
|
}
|
|
480
580
|
|
|
@@ -486,7 +586,7 @@ function observeMove(element, onMove) {
|
|
|
486
586
|
// Handle <iframe>s
|
|
487
587
|
root: root.ownerDocument
|
|
488
588
|
});
|
|
489
|
-
} catch (
|
|
589
|
+
} catch (_e) {
|
|
490
590
|
io = new IntersectionObserver(handleObserve, options);
|
|
491
591
|
}
|
|
492
592
|
io.observe(element);
|
|
@@ -534,7 +634,8 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
534
634
|
resizeObserver.unobserve(floating);
|
|
535
635
|
cancelAnimationFrame(reobserveFrame);
|
|
536
636
|
reobserveFrame = requestAnimationFrame(() => {
|
|
537
|
-
|
|
637
|
+
var _resizeObserver;
|
|
638
|
+
(_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
|
|
538
639
|
});
|
|
539
640
|
}
|
|
540
641
|
update();
|
|
@@ -551,7 +652,7 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
551
652
|
}
|
|
552
653
|
function frameLoop() {
|
|
553
654
|
const nextRefRect = getBoundingClientRect(reference);
|
|
554
|
-
if (prevRefRect && (
|
|
655
|
+
if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
|
|
555
656
|
update();
|
|
556
657
|
}
|
|
557
658
|
prevRefRect = nextRefRect;
|
|
@@ -559,12 +660,13 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
559
660
|
}
|
|
560
661
|
update();
|
|
561
662
|
return () => {
|
|
663
|
+
var _resizeObserver2;
|
|
562
664
|
ancestors.forEach(ancestor => {
|
|
563
665
|
ancestorScroll && ancestor.removeEventListener('scroll', update);
|
|
564
666
|
ancestorResize && ancestor.removeEventListener('resize', update);
|
|
565
667
|
});
|
|
566
|
-
cleanupIo
|
|
567
|
-
resizeObserver
|
|
668
|
+
cleanupIo == null || cleanupIo();
|
|
669
|
+
(_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
|
|
568
670
|
resizeObserver = null;
|
|
569
671
|
if (animationFrame) {
|
|
570
672
|
cancelAnimationFrame(frameId);
|
|
@@ -572,10 +674,40 @@ function autoUpdate(reference, floating, update, options) {
|
|
|
572
674
|
};
|
|
573
675
|
}
|
|
574
676
|
|
|
677
|
+
/**
|
|
678
|
+
* Modifies the placement by translating the floating element along the
|
|
679
|
+
* specified axes.
|
|
680
|
+
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
681
|
+
* object may be passed.
|
|
682
|
+
* @see https://floating-ui.com/docs/offset
|
|
683
|
+
*/
|
|
684
|
+
const offset = offset$1;
|
|
685
|
+
|
|
686
|
+
/**
|
|
687
|
+
* Optimizes the visibility of the floating element by shifting it in order to
|
|
688
|
+
* keep it in view when it will overflow the clipping boundary.
|
|
689
|
+
* @see https://floating-ui.com/docs/shift
|
|
690
|
+
*/
|
|
691
|
+
const shift = shift$1;
|
|
692
|
+
|
|
693
|
+
/**
|
|
694
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
695
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
696
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
697
|
+
* @see https://floating-ui.com/docs/flip
|
|
698
|
+
*/
|
|
699
|
+
const flip = flip$1;
|
|
700
|
+
|
|
701
|
+
/**
|
|
702
|
+
* Provides data to position an inner element of the floating element so that it
|
|
703
|
+
* appears centered to the reference element.
|
|
704
|
+
* @see https://floating-ui.com/docs/arrow
|
|
705
|
+
*/
|
|
706
|
+
const arrow = arrow$1;
|
|
707
|
+
|
|
575
708
|
/**
|
|
576
709
|
* Computes the `x` and `y` coordinates that will place the floating element
|
|
577
|
-
* next to a reference element
|
|
578
|
-
* strategy.
|
|
710
|
+
* next to a given reference element.
|
|
579
711
|
*/
|
|
580
712
|
const computePosition = (reference, floating, options) => {
|
|
581
713
|
// This caches the expensive `getClippingElementAncestors` function so that
|
|
@@ -596,4 +728,4 @@ const computePosition = (reference, floating, options) => {
|
|
|
596
728
|
});
|
|
597
729
|
};
|
|
598
730
|
|
|
599
|
-
export { autoUpdate, computePosition, getOverflowAncestors, platform };
|
|
731
|
+
export { arrow, autoUpdate, computePosition, flip, getOverflowAncestors, offset, platform, shift };
|