@react-aria/overlays 3.12.1 → 3.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/import.mjs +1457 -0
- package/dist/main.js +122 -54
- package/dist/main.js.map +1 -1
- package/dist/module.js +123 -55
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +14 -3
- package/dist/types.d.ts.map +1 -1
- package/package.json +17 -12
- package/src/ariaHideOutside.ts +55 -30
- package/src/calculatePosition.ts +111 -25
- package/src/index.ts +1 -0
- package/src/useOverlayPosition.ts +41 -17
- package/src/useOverlayTrigger.ts +3 -3
- package/src/usePopover.ts +2 -12
package/dist/main.js
CHANGED
|
@@ -59,7 +59,8 @@ $parcel$export(module.exports, "useOverlayFocusContain", () => $745edbb83ab4296f
|
|
|
59
59
|
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
60
60
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
61
61
|
* governing permissions and limitations under the License.
|
|
62
|
-
*/
|
|
62
|
+
*/
|
|
63
|
+
const $5935ba4d7da2c103$var$AXIS = {
|
|
63
64
|
top: "top",
|
|
64
65
|
bottom: "top",
|
|
65
66
|
left: "left",
|
|
@@ -79,28 +80,38 @@ const $5935ba4d7da2c103$var$AXIS_SIZE = {
|
|
|
79
80
|
top: "height",
|
|
80
81
|
left: "width"
|
|
81
82
|
};
|
|
83
|
+
const $5935ba4d7da2c103$var$TOTAL_SIZE = {
|
|
84
|
+
width: "totalWidth",
|
|
85
|
+
height: "totalHeight"
|
|
86
|
+
};
|
|
82
87
|
const $5935ba4d7da2c103$var$PARSED_PLACEMENT_CACHE = {};
|
|
83
88
|
// @ts-ignore
|
|
84
89
|
let $5935ba4d7da2c103$var$visualViewport = typeof window !== "undefined" && window.visualViewport;
|
|
85
90
|
function $5935ba4d7da2c103$var$getContainerDimensions(containerNode) {
|
|
86
|
-
let width = 0, height = 0, top = 0, left = 0;
|
|
91
|
+
let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0;
|
|
87
92
|
let scroll = {};
|
|
88
93
|
if (containerNode.tagName === "BODY") {
|
|
89
94
|
let documentElement = document.documentElement;
|
|
95
|
+
totalWidth = documentElement.clientWidth;
|
|
96
|
+
totalHeight = documentElement.clientHeight;
|
|
90
97
|
var _visualViewport_width;
|
|
91
|
-
width = (_visualViewport_width = $5935ba4d7da2c103$var$visualViewport === null || $5935ba4d7da2c103$var$visualViewport === void 0 ? void 0 : $5935ba4d7da2c103$var$visualViewport.width) !== null && _visualViewport_width !== void 0 ? _visualViewport_width :
|
|
98
|
+
width = (_visualViewport_width = $5935ba4d7da2c103$var$visualViewport === null || $5935ba4d7da2c103$var$visualViewport === void 0 ? void 0 : $5935ba4d7da2c103$var$visualViewport.width) !== null && _visualViewport_width !== void 0 ? _visualViewport_width : totalWidth;
|
|
92
99
|
var _visualViewport_height;
|
|
93
|
-
height = (_visualViewport_height = $5935ba4d7da2c103$var$visualViewport === null || $5935ba4d7da2c103$var$visualViewport === void 0 ? void 0 : $5935ba4d7da2c103$var$visualViewport.height) !== null && _visualViewport_height !== void 0 ? _visualViewport_height :
|
|
100
|
+
height = (_visualViewport_height = $5935ba4d7da2c103$var$visualViewport === null || $5935ba4d7da2c103$var$visualViewport === void 0 ? void 0 : $5935ba4d7da2c103$var$visualViewport.height) !== null && _visualViewport_height !== void 0 ? _visualViewport_height : totalHeight;
|
|
94
101
|
scroll.top = documentElement.scrollTop || containerNode.scrollTop;
|
|
95
102
|
scroll.left = documentElement.scrollLeft || containerNode.scrollLeft;
|
|
96
103
|
} else {
|
|
97
104
|
({ width: width , height: height , top: top , left: left } = $5935ba4d7da2c103$var$getOffset(containerNode));
|
|
98
105
|
scroll.top = containerNode.scrollTop;
|
|
99
106
|
scroll.left = containerNode.scrollLeft;
|
|
107
|
+
totalWidth = width;
|
|
108
|
+
totalHeight = height;
|
|
100
109
|
}
|
|
101
110
|
return {
|
|
102
111
|
width: width,
|
|
103
112
|
height: height,
|
|
113
|
+
totalWidth: totalWidth,
|
|
114
|
+
totalHeight: totalHeight,
|
|
104
115
|
scroll: scroll,
|
|
105
116
|
top: top,
|
|
106
117
|
left: left
|
|
@@ -150,7 +161,7 @@ function $5935ba4d7da2c103$var$parsePlacement(input) {
|
|
|
150
161
|
};
|
|
151
162
|
return $5935ba4d7da2c103$var$PARSED_PLACEMENT_CACHE[input];
|
|
152
163
|
}
|
|
153
|
-
function $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned) {
|
|
164
|
+
function $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset) {
|
|
154
165
|
let { placement: placement , crossPlacement: crossPlacement , axis: axis , crossAxis: crossAxis , size: size , crossSize: crossSize } = placementInfo;
|
|
155
166
|
let position = {};
|
|
156
167
|
// button position
|
|
@@ -166,19 +177,18 @@ function $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions,
|
|
|
166
177
|
} */
|
|
167
178
|
// add the crossOffset from props
|
|
168
179
|
position[crossAxis] += crossOffset;
|
|
169
|
-
//
|
|
170
|
-
|
|
171
|
-
//
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
position[crossAxis] = Math.min(Math.max(minViablePosition, position[crossAxis]), maxViablePosition);
|
|
180
|
+
// overlay top overlapping arrow with button bottom
|
|
181
|
+
const minPosition = childOffset[crossAxis] - overlaySize[crossSize] + arrowSize + arrowBoundaryOffset;
|
|
182
|
+
// overlay bottom overlapping arrow with button top
|
|
183
|
+
const maxPosition = childOffset[crossAxis] + childOffset[crossSize] - arrowSize - arrowBoundaryOffset;
|
|
184
|
+
position[crossAxis] = (0, $6Zb2x$reactariautils.clamp)(position[crossAxis], minPosition, maxPosition);
|
|
175
185
|
// Floor these so the position isn't placed on a partial pixel, only whole pixels. Shouldn't matter if it was floored or ceiled, so chose one.
|
|
176
186
|
if (placement === axis) {
|
|
177
187
|
// If the container is positioned (non-static), then we use the container's actual
|
|
178
188
|
// height, as `bottom` will be relative to this height. But if the container is static,
|
|
179
189
|
// then it can only be the `document.body`, and `bottom` will be relative to _its_
|
|
180
190
|
// container, which should be as large as boundaryDimensions.
|
|
181
|
-
const containerHeight = isContainerPositioned ? containerOffsetWithBoundary[size] : boundaryDimensions[size];
|
|
191
|
+
const containerHeight = isContainerPositioned ? containerOffsetWithBoundary[size] : boundaryDimensions[$5935ba4d7da2c103$var$TOTAL_SIZE[size]];
|
|
182
192
|
position[$5935ba4d7da2c103$var$FLIPPED_DIRECTION[axis]] = Math.floor(containerHeight - childOffset[axis] + offset);
|
|
183
193
|
} else position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
|
|
184
194
|
return position;
|
|
@@ -197,16 +207,16 @@ function $5935ba4d7da2c103$var$getAvailableSpace(boundaryDimensions, containerOf
|
|
|
197
207
|
if (placement === axis) return Math.max(0, childOffset[axis] - boundaryDimensions[axis] - boundaryDimensions.scroll[axis] + containerOffsetWithBoundary[axis] - margins[axis] - margins[$5935ba4d7da2c103$var$FLIPPED_DIRECTION[axis]] - padding);
|
|
198
208
|
return Math.max(0, boundaryDimensions[size] + boundaryDimensions[axis] + boundaryDimensions.scroll[axis] - containerOffsetWithBoundary[axis] - childOffset[axis] - childOffset[size] - margins[axis] - margins[$5935ba4d7da2c103$var$FLIPPED_DIRECTION[axis]] - padding);
|
|
199
209
|
}
|
|
200
|
-
function $5935ba4d7da2c103$export$6839422d1f33cee9(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, userSetMaxHeight) {
|
|
210
|
+
function $5935ba4d7da2c103$export$6839422d1f33cee9(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, userSetMaxHeight, arrowSize, arrowBoundaryOffset) {
|
|
201
211
|
let placementInfo = $5935ba4d7da2c103$var$parsePlacement(placementInput);
|
|
202
212
|
let { size: size , crossAxis: crossAxis , crossSize: crossSize , placement: placement , crossPlacement: crossPlacement } = placementInfo;
|
|
203
|
-
let position = $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
|
|
213
|
+
let position = $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
|
|
204
214
|
let normalizedOffset = offset;
|
|
205
215
|
let space = $5935ba4d7da2c103$var$getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, placementInfo);
|
|
206
216
|
// Check if the scroll size of the overlay is greater than the available space to determine if we need to flip
|
|
207
217
|
if (flip && scrollSize[size] > space) {
|
|
208
218
|
let flippedPlacementInfo = $5935ba4d7da2c103$var$parsePlacement(`${$5935ba4d7da2c103$var$FLIPPED_DIRECTION[placement]} ${crossPlacement}`);
|
|
209
|
-
let flippedPosition = $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
|
|
219
|
+
let flippedPosition = $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
|
|
210
220
|
let flippedSpace = $5935ba4d7da2c103$var$getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, flippedPlacementInfo);
|
|
211
221
|
// If the available space for the flipped position is greater than the original available space, flip.
|
|
212
222
|
if (flippedSpace > space) {
|
|
@@ -220,11 +230,22 @@ function $5935ba4d7da2c103$export$6839422d1f33cee9(placementInput, childOffset,
|
|
|
220
230
|
let maxHeight = $5935ba4d7da2c103$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding);
|
|
221
231
|
if (userSetMaxHeight && userSetMaxHeight < maxHeight) maxHeight = userSetMaxHeight;
|
|
222
232
|
overlaySize.height = Math.min(overlaySize.height, maxHeight);
|
|
223
|
-
position = $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
|
|
233
|
+
position = $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
|
|
224
234
|
delta = $5935ba4d7da2c103$var$getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
|
|
225
235
|
position[crossAxis] += delta;
|
|
226
236
|
let arrowPosition = {};
|
|
227
|
-
|
|
237
|
+
// All values are transformed so that 0 is at the top/left of the overlay depending on the orientation
|
|
238
|
+
// Prefer the arrow being in the center of the trigger/overlay anchor element
|
|
239
|
+
let preferredArrowPosition = childOffset[crossAxis] + .5 * childOffset[crossSize] - overlaySize[crossAxis];
|
|
240
|
+
// Min/Max position limits for the arrow with respect to the overlay
|
|
241
|
+
const arrowMinPosition = arrowSize / 2 + arrowBoundaryOffset;
|
|
242
|
+
const arrowMaxPosition = overlaySize[crossSize] - arrowSize / 2 - arrowBoundaryOffset;
|
|
243
|
+
// Min/Max position limits for the arrow with respect to the trigger/overlay anchor element
|
|
244
|
+
const arrowOverlappingChildMinEdge = childOffset[crossAxis] - overlaySize[crossAxis] + arrowSize / 2;
|
|
245
|
+
const arrowOverlappingChildMaxEdge = childOffset[crossAxis] + childOffset[crossSize] - overlaySize[crossAxis] - arrowSize / 2;
|
|
246
|
+
// Clamp the arrow positioning so that it always is within the bounds of the anchor and the overlay
|
|
247
|
+
const arrowPositionOverlappingChild = (0, $6Zb2x$reactariautils.clamp)(preferredArrowPosition, arrowOverlappingChildMinEdge, arrowOverlappingChildMaxEdge);
|
|
248
|
+
arrowPosition[crossAxis] = (0, $6Zb2x$reactariautils.clamp)(arrowPositionOverlappingChild, arrowMinPosition, arrowMaxPosition);
|
|
228
249
|
return {
|
|
229
250
|
position: position,
|
|
230
251
|
maxHeight: maxHeight,
|
|
@@ -234,13 +255,13 @@ function $5935ba4d7da2c103$export$6839422d1f33cee9(placementInput, childOffset,
|
|
|
234
255
|
};
|
|
235
256
|
}
|
|
236
257
|
function $5935ba4d7da2c103$export$b3ceb0cbf1056d98(opts) {
|
|
237
|
-
let { placement: placement , targetNode: targetNode , overlayNode: overlayNode , scrollNode: scrollNode , padding: padding , shouldFlip: shouldFlip , boundaryElement: boundaryElement , offset: offset , crossOffset: crossOffset , maxHeight: maxHeight } = opts;
|
|
238
|
-
let container = overlayNode instanceof HTMLElement
|
|
239
|
-
let
|
|
258
|
+
let { placement: placement , targetNode: targetNode , overlayNode: overlayNode , scrollNode: scrollNode , padding: padding , shouldFlip: shouldFlip , boundaryElement: boundaryElement , offset: offset , crossOffset: crossOffset , maxHeight: maxHeight , arrowSize: arrowSize , arrowBoundaryOffset: arrowBoundaryOffset = 0 } = opts;
|
|
259
|
+
let container = overlayNode instanceof HTMLElement ? $5935ba4d7da2c103$var$getContainingBlock(overlayNode) : document.documentElement;
|
|
260
|
+
let isViewportContainer = container === document.documentElement;
|
|
240
261
|
const containerPositionStyle = window.getComputedStyle(container).position;
|
|
241
262
|
let isContainerPositioned = !!containerPositionStyle && containerPositionStyle !== "static";
|
|
242
|
-
let childOffset =
|
|
243
|
-
if (!
|
|
263
|
+
let childOffset = isViewportContainer ? $5935ba4d7da2c103$var$getOffset(targetNode) : $5935ba4d7da2c103$var$getPosition(targetNode, container);
|
|
264
|
+
if (!isViewportContainer) {
|
|
244
265
|
let { marginTop: marginTop , marginLeft: marginLeft } = window.getComputedStyle(targetNode);
|
|
245
266
|
childOffset.top += parseInt(marginTop, 10) || 0;
|
|
246
267
|
childOffset.left += parseInt(marginLeft, 10) || 0;
|
|
@@ -252,7 +273,7 @@ function $5935ba4d7da2c103$export$b3ceb0cbf1056d98(opts) {
|
|
|
252
273
|
let scrollSize = $5935ba4d7da2c103$var$getScroll(scrollNode);
|
|
253
274
|
let boundaryDimensions = $5935ba4d7da2c103$var$getContainerDimensions(boundaryElement);
|
|
254
275
|
let containerOffsetWithBoundary = boundaryElement.tagName === "BODY" ? $5935ba4d7da2c103$var$getOffset(container) : $5935ba4d7da2c103$var$getPosition(container, boundaryElement);
|
|
255
|
-
return $5935ba4d7da2c103$export$6839422d1f33cee9(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, maxHeight);
|
|
276
|
+
return $5935ba4d7da2c103$export$6839422d1f33cee9(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, maxHeight, arrowSize, arrowBoundaryOffset);
|
|
256
277
|
}
|
|
257
278
|
function $5935ba4d7da2c103$var$getOffset(node) {
|
|
258
279
|
let { top: top , left: left , width: width , height: height } = node.getBoundingClientRect();
|
|
@@ -288,6 +309,35 @@ function $5935ba4d7da2c103$var$getPosition(node, parent) {
|
|
|
288
309
|
offset.left -= parseInt(style.marginLeft, 10) || 0;
|
|
289
310
|
return offset;
|
|
290
311
|
}
|
|
312
|
+
// Returns the containing block of an element, which is the element that
|
|
313
|
+
// this element will be positioned relative to.
|
|
314
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
|
|
315
|
+
function $5935ba4d7da2c103$var$getContainingBlock(node) {
|
|
316
|
+
// The offsetParent of an element in most cases equals the containing block.
|
|
317
|
+
// https://w3c.github.io/csswg-drafts/cssom-view/#dom-htmlelement-offsetparent
|
|
318
|
+
let offsetParent = node.offsetParent;
|
|
319
|
+
// The offsetParent algorithm terminates at the document body,
|
|
320
|
+
// even if the body is not a containing block. Double check that
|
|
321
|
+
// and use the documentElement if so.
|
|
322
|
+
if (offsetParent && offsetParent === document.body && window.getComputedStyle(offsetParent).position === "static" && !$5935ba4d7da2c103$var$isContainingBlock(offsetParent)) offsetParent = document.documentElement;
|
|
323
|
+
// TODO(later): handle table elements?
|
|
324
|
+
// The offsetParent can be null if the element has position: fixed, or a few other cases.
|
|
325
|
+
// We have to walk up the tree manually in this case because fixed positioned elements
|
|
326
|
+
// are still positioned relative to their containing block, which is not always the viewport.
|
|
327
|
+
if (offsetParent == null) {
|
|
328
|
+
offsetParent = node.parentElement;
|
|
329
|
+
while(offsetParent && !$5935ba4d7da2c103$var$isContainingBlock(offsetParent))offsetParent = offsetParent.parentElement;
|
|
330
|
+
}
|
|
331
|
+
// Fall back to the viewport.
|
|
332
|
+
return offsetParent || document.documentElement;
|
|
333
|
+
}
|
|
334
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
335
|
+
function $5935ba4d7da2c103$var$isContainingBlock(node) {
|
|
336
|
+
let style = window.getComputedStyle(node);
|
|
337
|
+
return style.transform !== "none" || /transform|perspective/.test(style.willChange) || style.filter !== "none" || style.contain === "paint" || // @ts-ignore
|
|
338
|
+
"backdropFilter" in style && style.backdropFilter !== "none" || // @ts-ignore
|
|
339
|
+
"WebkitBackdropFilter" in style && style.WebkitBackdropFilter !== "none";
|
|
340
|
+
}
|
|
291
341
|
|
|
292
342
|
|
|
293
343
|
|
|
@@ -333,7 +383,7 @@ function $9a8aa1b0b336ea3a$export$18fc8428861184da(opts) {
|
|
|
333
383
|
let $cd94b4896dd97759$var$visualViewport = typeof window !== "undefined" && window.visualViewport;
|
|
334
384
|
function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
|
|
335
385
|
let { direction: direction } = (0, $6Zb2x$reactariai18n.useLocale)();
|
|
336
|
-
let { targetRef: targetRef , overlayRef: overlayRef , scrollRef: scrollRef = overlayRef , placement: placement = "bottom" , containerPadding: containerPadding = 12 , shouldFlip: shouldFlip = true , boundaryElement: boundaryElement = typeof document !== "undefined" ? document.body : null , offset: offset = 0 , crossOffset: crossOffset = 0 , shouldUpdatePosition: shouldUpdatePosition = true , isOpen: isOpen = true , onClose: onClose , maxHeight: maxHeight } = props;
|
|
386
|
+
let { arrowSize: arrowSize = 0 , targetRef: targetRef , overlayRef: overlayRef , scrollRef: scrollRef = overlayRef , placement: placement = "bottom" , containerPadding: containerPadding = 12 , shouldFlip: shouldFlip = true , boundaryElement: boundaryElement = typeof document !== "undefined" ? document.body : null , offset: offset = 0 , crossOffset: crossOffset = 0 , shouldUpdatePosition: shouldUpdatePosition = true , isOpen: isOpen = true , onClose: onClose , maxHeight: maxHeight , arrowBoundaryOffset: arrowBoundaryOffset = 0 } = props;
|
|
337
387
|
let [position, setPosition] = (0, $6Zb2x$react.useState)({
|
|
338
388
|
position: {},
|
|
339
389
|
arrowOffsetLeft: undefined,
|
|
@@ -354,11 +404,13 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
|
|
|
354
404
|
crossOffset,
|
|
355
405
|
isOpen,
|
|
356
406
|
direction,
|
|
357
|
-
maxHeight
|
|
407
|
+
maxHeight,
|
|
408
|
+
arrowBoundaryOffset,
|
|
409
|
+
arrowSize
|
|
358
410
|
];
|
|
359
411
|
let updatePosition = (0, $6Zb2x$react.useCallback)(()=>{
|
|
360
412
|
if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) return;
|
|
361
|
-
|
|
413
|
+
let position = (0, $5935ba4d7da2c103$export$b3ceb0cbf1056d98)({
|
|
362
414
|
placement: $cd94b4896dd97759$var$translateRTL(placement, direction),
|
|
363
415
|
overlayNode: overlayRef.current,
|
|
364
416
|
targetNode: targetRef.current,
|
|
@@ -368,8 +420,16 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
|
|
|
368
420
|
boundaryElement: boundaryElement,
|
|
369
421
|
offset: offset,
|
|
370
422
|
crossOffset: crossOffset,
|
|
371
|
-
maxHeight: maxHeight
|
|
372
|
-
|
|
423
|
+
maxHeight: maxHeight,
|
|
424
|
+
arrowSize: arrowSize,
|
|
425
|
+
arrowBoundaryOffset: arrowBoundaryOffset
|
|
426
|
+
});
|
|
427
|
+
// Modify overlay styles directly so positioning happens immediately without the need of a second render
|
|
428
|
+
// This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers
|
|
429
|
+
Object.keys(position.position).forEach((key)=>overlayRef.current.style[key] = position.position[key] + "px");
|
|
430
|
+
overlayRef.current.style.maxHeight = position.maxHeight != null ? position.maxHeight + "px" : undefined;
|
|
431
|
+
// Trigger a set state for a second render anyway for arrow positioning
|
|
432
|
+
setPosition(position);
|
|
373
433
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
374
434
|
}, deps);
|
|
375
435
|
// Update position when anything changes
|
|
@@ -396,8 +456,10 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
|
|
|
396
456
|
updatePosition();
|
|
397
457
|
};
|
|
398
458
|
$cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.addEventListener("resize", onResize);
|
|
459
|
+
$cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.addEventListener("scroll", onResize);
|
|
399
460
|
return ()=>{
|
|
400
461
|
$cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.removeEventListener("resize", onResize);
|
|
462
|
+
$cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.removeEventListener("scroll", onResize);
|
|
401
463
|
};
|
|
402
464
|
}, [
|
|
403
465
|
updatePosition
|
|
@@ -1171,20 +1233,35 @@ let $08ef1685902b6011$var$observerStack = [];
|
|
|
1171
1233
|
function $08ef1685902b6011$export$1c3ebcada18427bf(targets, root = document.body) {
|
|
1172
1234
|
let visibleNodes = new Set(targets);
|
|
1173
1235
|
let hiddenNodes = new Set();
|
|
1174
|
-
let
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1236
|
+
let walk = (root)=>{
|
|
1237
|
+
// Keep live announcer and top layer elements (e.g. toasts) visible.
|
|
1238
|
+
for (let element of root.querySelectorAll("[data-live-announcer], [data-react-aria-top-layer]"))visibleNodes.add(element);
|
|
1239
|
+
let acceptNode = (node)=>{
|
|
1178
1240
|
// Skip this node and its children if it is one of the target nodes, or a live announcer.
|
|
1179
1241
|
// Also skip children of already hidden nodes, as aria-hidden is recursive. An exception is
|
|
1180
1242
|
// made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row".
|
|
1181
1243
|
// For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
|
|
1182
1244
|
if (visibleNodes.has(node) || hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute("role") !== "row") return NodeFilter.FILTER_REJECT;
|
|
1183
1245
|
// Skip this node but continue to children if one of the targets is inside the node.
|
|
1184
|
-
|
|
1246
|
+
for (let target of visibleNodes){
|
|
1247
|
+
if (node.contains(target)) return NodeFilter.FILTER_SKIP;
|
|
1248
|
+
}
|
|
1185
1249
|
return NodeFilter.FILTER_ACCEPT;
|
|
1250
|
+
};
|
|
1251
|
+
let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
|
|
1252
|
+
acceptNode: acceptNode
|
|
1253
|
+
});
|
|
1254
|
+
// TreeWalker does not include the root.
|
|
1255
|
+
let acceptRoot = acceptNode(root);
|
|
1256
|
+
if (acceptRoot === NodeFilter.FILTER_ACCEPT) hide(root);
|
|
1257
|
+
if (acceptRoot !== NodeFilter.FILTER_REJECT) {
|
|
1258
|
+
let node = walker.nextNode();
|
|
1259
|
+
while(node != null){
|
|
1260
|
+
hide(node);
|
|
1261
|
+
node = walker.nextNode();
|
|
1262
|
+
}
|
|
1186
1263
|
}
|
|
1187
|
-
}
|
|
1264
|
+
};
|
|
1188
1265
|
let hide = (node)=>{
|
|
1189
1266
|
var _refCountMap_get;
|
|
1190
1267
|
let refCount = (_refCountMap_get = $08ef1685902b6011$var$refCountMap.get(node)) !== null && _refCountMap_get !== void 0 ? _refCountMap_get : 0;
|
|
@@ -1198,11 +1275,7 @@ function $08ef1685902b6011$export$1c3ebcada18427bf(targets, root = document.body
|
|
|
1198
1275
|
// If there is already a MutationObserver listening from a previous call,
|
|
1199
1276
|
// disconnect it so the new on takes over.
|
|
1200
1277
|
if ($08ef1685902b6011$var$observerStack.length) $08ef1685902b6011$var$observerStack[$08ef1685902b6011$var$observerStack.length - 1].disconnect();
|
|
1201
|
-
|
|
1202
|
-
while(node != null){
|
|
1203
|
-
hide(node);
|
|
1204
|
-
node = walker.nextNode();
|
|
1205
|
-
}
|
|
1278
|
+
walk(root);
|
|
1206
1279
|
let observer = new MutationObserver((changes)=>{
|
|
1207
1280
|
for (let change of changes){
|
|
1208
1281
|
if (change.type !== "childList" || change.addedNodes.length === 0) continue;
|
|
@@ -1211,9 +1284,15 @@ function $08ef1685902b6011$export$1c3ebcada18427bf(targets, root = document.body
|
|
|
1211
1284
|
if (![
|
|
1212
1285
|
...visibleNodes,
|
|
1213
1286
|
...hiddenNodes
|
|
1214
|
-
].some((node)=>node.contains(change.target)))
|
|
1215
|
-
|
|
1216
|
-
|
|
1287
|
+
].some((node)=>node.contains(change.target))) {
|
|
1288
|
+
for (let node of change.removedNodes)if (node instanceof Element) {
|
|
1289
|
+
visibleNodes.delete(node);
|
|
1290
|
+
hiddenNodes.delete(node);
|
|
1291
|
+
}
|
|
1292
|
+
for (let node1 of change.addedNodes){
|
|
1293
|
+
if ((node1 instanceof HTMLElement || node1 instanceof SVGElement) && (node1.dataset.liveAnnouncer === "true" || node1.dataset.reactAriaTopLayer === "true")) visibleNodes.add(node1);
|
|
1294
|
+
else if (node1 instanceof Element) walk(node1);
|
|
1295
|
+
}
|
|
1217
1296
|
}
|
|
1218
1297
|
}
|
|
1219
1298
|
});
|
|
@@ -1266,7 +1345,6 @@ function $08ef1685902b6011$export$1c3ebcada18427bf(targets, root = document.body
|
|
|
1266
1345
|
|
|
1267
1346
|
|
|
1268
1347
|
|
|
1269
|
-
|
|
1270
1348
|
function $6c2dfcdee3e15e20$export$542a6fd13ac93354(props, state) {
|
|
1271
1349
|
let { triggerRef: triggerRef , popoverRef: popoverRef , isNonModal: isNonModal , isKeyboardDismissDisabled: isKeyboardDismissDisabled , ...otherProps } = props;
|
|
1272
1350
|
let { overlayProps: overlayProps , underlayProps: underlayProps } = (0, $82711f9cb668ecdb$export$ea8f71083e90600f)({
|
|
@@ -1283,18 +1361,8 @@ function $6c2dfcdee3e15e20$export$542a6fd13ac93354(props, state) {
|
|
|
1283
1361
|
isOpen: state.isOpen,
|
|
1284
1362
|
onClose: null
|
|
1285
1363
|
});
|
|
1286
|
-
// Delay preventing scroll until popover is positioned to avoid extra scroll padding.
|
|
1287
|
-
// This requires a layout effect so that positioning has been committed to the DOM
|
|
1288
|
-
// by the time usePreventScroll measures the element.
|
|
1289
|
-
let [isPositioned, setPositioned] = (0, $6Zb2x$react.useState)(false);
|
|
1290
|
-
(0, $6Zb2x$reactariautils.useLayoutEffect)(()=>{
|
|
1291
|
-
if (!isNonModal && placement) setPositioned(true);
|
|
1292
|
-
}, [
|
|
1293
|
-
isNonModal,
|
|
1294
|
-
placement
|
|
1295
|
-
]);
|
|
1296
1364
|
(0, $5c2f5cd01815d369$export$ee0f7cc6afcd1c18)({
|
|
1297
|
-
isDisabled: isNonModal
|
|
1365
|
+
isDisabled: isNonModal
|
|
1298
1366
|
});
|
|
1299
1367
|
(0, $6Zb2x$reactariautils.useLayoutEffect)(()=>{
|
|
1300
1368
|
if (state.isOpen && !isNonModal && popoverRef.current) return (0, $08ef1685902b6011$export$1c3ebcada18427bf)([
|