@react-aria/overlays 3.12.1 → 3.14.0

package/dist/module.js

@@ -1,5 +1,5 @@
 import $k7QOs$react, {useState as $k7QOs$useState, useCallback as $k7QOs$useCallback, useRef as $k7QOs$useRef, useEffect as $k7QOs$useEffect, useContext as $k7QOs$useContext, useMemo as $k7QOs$useMemo} from "react";
-import {useLayoutEffect as $k7QOs$useLayoutEffect, useResizeObserver as $k7QOs$useResizeObserver, useId as $k7QOs$useId, isIOS as $k7QOs$isIOS, chain as $k7QOs$chain, getScrollParent as $k7QOs$getScrollParent, useLabels as $k7QOs$useLabels, mergeProps as $k7QOs$mergeProps} from "@react-aria/utils";
+import {useLayoutEffect as $k7QOs$useLayoutEffect, useResizeObserver as $k7QOs$useResizeObserver, clamp as $k7QOs$clamp, useId as $k7QOs$useId, isIOS as $k7QOs$isIOS, chain as $k7QOs$chain, getScrollParent as $k7QOs$getScrollParent, useLabels as $k7QOs$useLabels, mergeProps as $k7QOs$mergeProps} from "@react-aria/utils";
 import {useLocale as $k7QOs$useLocale, useLocalizedStringFormatter as $k7QOs$useLocalizedStringFormatter} from "@react-aria/i18n";
 import {isElementInChildOfActiveScope as $k7QOs$isElementInChildOfActiveScope, FocusScope as $k7QOs$FocusScope} from "@react-aria/focus";
 import {useInteractOutside as $k7QOs$useInteractOutside, useFocusWithin as $k7QOs$useFocusWithin} from "@react-aria/interactions";
@@ -40,7 +40,8 @@ function $parcel$interopDefault(a) {
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
- */ const $edcf132a9284368a$var$AXIS = {
+ */ 
+const $edcf132a9284368a$var$AXIS = {
     top: "top",
     bottom: "top",
     left: "left",
@@ -60,28 +61,38 @@ const $edcf132a9284368a$var$AXIS_SIZE = {
     top: "height",
     left: "width"
 };
+const $edcf132a9284368a$var$TOTAL_SIZE = {
+    width: "totalWidth",
+    height: "totalHeight"
+};
 const $edcf132a9284368a$var$PARSED_PLACEMENT_CACHE = {};
 // @ts-ignore
 let $edcf132a9284368a$var$visualViewport = typeof window !== "undefined" && window.visualViewport;
 function $edcf132a9284368a$var$getContainerDimensions(containerNode) {
-    let width = 0, height = 0, top = 0, left = 0;
+    let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0;
     let scroll = {};
     if (containerNode.tagName === "BODY") {
         let documentElement = document.documentElement;
+        totalWidth = documentElement.clientWidth;
+        totalHeight = documentElement.clientHeight;
         var _visualViewport_width;
-        width = (_visualViewport_width = $edcf132a9284368a$var$visualViewport === null || $edcf132a9284368a$var$visualViewport === void 0 ? void 0 : $edcf132a9284368a$var$visualViewport.width) !== null && _visualViewport_width !== void 0 ? _visualViewport_width : documentElement.clientWidth;
+        width = (_visualViewport_width = $edcf132a9284368a$var$visualViewport === null || $edcf132a9284368a$var$visualViewport === void 0 ? void 0 : $edcf132a9284368a$var$visualViewport.width) !== null && _visualViewport_width !== void 0 ? _visualViewport_width : totalWidth;
         var _visualViewport_height;
-        height = (_visualViewport_height = $edcf132a9284368a$var$visualViewport === null || $edcf132a9284368a$var$visualViewport === void 0 ? void 0 : $edcf132a9284368a$var$visualViewport.height) !== null && _visualViewport_height !== void 0 ? _visualViewport_height : documentElement.clientHeight;
+        height = (_visualViewport_height = $edcf132a9284368a$var$visualViewport === null || $edcf132a9284368a$var$visualViewport === void 0 ? void 0 : $edcf132a9284368a$var$visualViewport.height) !== null && _visualViewport_height !== void 0 ? _visualViewport_height : totalHeight;
         scroll.top = documentElement.scrollTop || containerNode.scrollTop;
         scroll.left = documentElement.scrollLeft || containerNode.scrollLeft;
     } else {
         ({ width: width , height: height , top: top , left: left  } = $edcf132a9284368a$var$getOffset(containerNode));
         scroll.top = containerNode.scrollTop;
         scroll.left = containerNode.scrollLeft;
+        totalWidth = width;
+        totalHeight = height;
     }
     return {
         width: width,
         height: height,
+        totalWidth: totalWidth,
+        totalHeight: totalHeight,
         scroll: scroll,
         top: top,
         left: left
@@ -131,7 +142,7 @@ function $edcf132a9284368a$var$parsePlacement(input) {
     };
     return $edcf132a9284368a$var$PARSED_PLACEMENT_CACHE[input];
 }
-function $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned) {
+function $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset) {
     let { placement: placement , crossPlacement: crossPlacement , axis: axis , crossAxis: crossAxis , size: size , crossSize: crossSize  } = placementInfo;
     let position = {};
     // button position
@@ -147,19 +158,18 @@ function $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions,
   } */ 
     // add the crossOffset from props
     position[crossAxis] += crossOffset;
-    // this is button center position - the overlay size + half of the button to align bottom of overlay with button center
-    let minViablePosition = childOffset[crossAxis] + childOffset[crossSize] / 2 - overlaySize[crossSize];
-    // this is button position of center, aligns top of overlay with button center
-    let maxViablePosition = childOffset[crossAxis] + childOffset[crossSize] / 2;
-    // clamp it into the range of the min/max positions
-    position[crossAxis] = Math.min(Math.max(minViablePosition, position[crossAxis]), maxViablePosition);
+    // overlay top overlapping arrow with button bottom
+    const minPosition = childOffset[crossAxis] - overlaySize[crossSize] + arrowSize + arrowBoundaryOffset;
+    // overlay bottom overlapping arrow with button top
+    const maxPosition = childOffset[crossAxis] + childOffset[crossSize] - arrowSize - arrowBoundaryOffset;
+    position[crossAxis] = (0, $k7QOs$clamp)(position[crossAxis], minPosition, maxPosition);
     // 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.
     if (placement === axis) {
         // If the container is positioned (non-static), then we use the container's actual
         // height, as `bottom` will be relative to this height.  But if the container is static,
         // then it can only be the `document.body`, and `bottom` will be relative to _its_
         // container, which should be as large as boundaryDimensions.
-        const containerHeight = isContainerPositioned ? containerOffsetWithBoundary[size] : boundaryDimensions[size];
+        const containerHeight = isContainerPositioned ? containerOffsetWithBoundary[size] : boundaryDimensions[$edcf132a9284368a$var$TOTAL_SIZE[size]];
         position[$edcf132a9284368a$var$FLIPPED_DIRECTION[axis]] = Math.floor(containerHeight - childOffset[axis] + offset);
     } else position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
     return position;
@@ -178,16 +188,16 @@ function $edcf132a9284368a$var$getAvailableSpace(boundaryDimensions, containerOf
     if (placement === axis) return Math.max(0, childOffset[axis] - boundaryDimensions[axis] - boundaryDimensions.scroll[axis] + containerOffsetWithBoundary[axis] - margins[axis] - margins[$edcf132a9284368a$var$FLIPPED_DIRECTION[axis]] - padding);
     return Math.max(0, boundaryDimensions[size] + boundaryDimensions[axis] + boundaryDimensions.scroll[axis] - containerOffsetWithBoundary[axis] - childOffset[axis] - childOffset[size] - margins[axis] - margins[$edcf132a9284368a$var$FLIPPED_DIRECTION[axis]] - padding);
 }
-function $edcf132a9284368a$export$6839422d1f33cee9(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, userSetMaxHeight) {
+function $edcf132a9284368a$export$6839422d1f33cee9(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, userSetMaxHeight, arrowSize, arrowBoundaryOffset) {
     let placementInfo = $edcf132a9284368a$var$parsePlacement(placementInput);
     let { size: size , crossAxis: crossAxis , crossSize: crossSize , placement: placement , crossPlacement: crossPlacement  } = placementInfo;
-    let position = $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
+    let position = $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
     let normalizedOffset = offset;
     let space = $edcf132a9284368a$var$getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, placementInfo);
     // Check if the scroll size of the overlay is greater than the available space to determine if we need to flip
     if (flip && scrollSize[size] > space) {
         let flippedPlacementInfo = $edcf132a9284368a$var$parsePlacement(`${$edcf132a9284368a$var$FLIPPED_DIRECTION[placement]} ${crossPlacement}`);
-        let flippedPosition = $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
+        let flippedPosition = $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
         let flippedSpace = $edcf132a9284368a$var$getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding + offset, flippedPlacementInfo);
         // If the available space for the flipped position is greater than the original available space, flip.
         if (flippedSpace > space) {
@@ -201,11 +211,22 @@ function $edcf132a9284368a$export$6839422d1f33cee9(placementInput, childOffset,
     let maxHeight = $edcf132a9284368a$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding);
     if (userSetMaxHeight && userSetMaxHeight < maxHeight) maxHeight = userSetMaxHeight;
     overlaySize.height = Math.min(overlaySize.height, maxHeight);
-    position = $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
+    position = $edcf132a9284368a$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
     delta = $edcf132a9284368a$var$getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
     position[crossAxis] += delta;
     let arrowPosition = {};
-    arrowPosition[crossAxis] = childOffset[crossAxis] - position[crossAxis] + childOffset[crossSize] / 2;
+    // All values are transformed so that 0 is at the top/left of the overlay depending on the orientation
+    // Prefer the arrow being in the center of the trigger/overlay anchor element
+    let preferredArrowPosition = childOffset[crossAxis] + .5 * childOffset[crossSize] - overlaySize[crossAxis];
+    // Min/Max position limits for the arrow with respect to the overlay
+    const arrowMinPosition = arrowSize / 2 + arrowBoundaryOffset;
+    const arrowMaxPosition = overlaySize[crossSize] - arrowSize / 2 - arrowBoundaryOffset;
+    // Min/Max position limits for the arrow with respect to the trigger/overlay anchor element
+    const arrowOverlappingChildMinEdge = childOffset[crossAxis] - overlaySize[crossAxis] + arrowSize / 2;
+    const arrowOverlappingChildMaxEdge = childOffset[crossAxis] + childOffset[crossSize] - overlaySize[crossAxis] - arrowSize / 2;
+    // Clamp the arrow positioning so that it always is within the bounds of the anchor and the overlay
+    const arrowPositionOverlappingChild = (0, $k7QOs$clamp)(preferredArrowPosition, arrowOverlappingChildMinEdge, arrowOverlappingChildMaxEdge);
+    arrowPosition[crossAxis] = (0, $k7QOs$clamp)(arrowPositionOverlappingChild, arrowMinPosition, arrowMaxPosition);
     return {
         position: position,
         maxHeight: maxHeight,
@@ -215,13 +236,13 @@ function $edcf132a9284368a$export$6839422d1f33cee9(placementInput, childOffset,
     };
 }
 function $edcf132a9284368a$export$b3ceb0cbf1056d98(opts) {
-    let { placement: placement , targetNode: targetNode , overlayNode: overlayNode , scrollNode: scrollNode , padding: padding , shouldFlip: shouldFlip , boundaryElement: boundaryElement , offset: offset , crossOffset: crossOffset , maxHeight: maxHeight  } = opts;
-    let container = overlayNode instanceof HTMLElement && overlayNode.offsetParent || document.body;
-    let isBodyContainer = container.tagName === "BODY";
+    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;
+    let container = overlayNode instanceof HTMLElement ? $edcf132a9284368a$var$getContainingBlock(overlayNode) : document.documentElement;
+    let isViewportContainer = container === document.documentElement;
     const containerPositionStyle = window.getComputedStyle(container).position;
     let isContainerPositioned = !!containerPositionStyle && containerPositionStyle !== "static";
-    let childOffset = isBodyContainer ? $edcf132a9284368a$var$getOffset(targetNode) : $edcf132a9284368a$var$getPosition(targetNode, container);
-    if (!isBodyContainer) {
+    let childOffset = isViewportContainer ? $edcf132a9284368a$var$getOffset(targetNode) : $edcf132a9284368a$var$getPosition(targetNode, container);
+    if (!isViewportContainer) {
         let { marginTop: marginTop , marginLeft: marginLeft  } = window.getComputedStyle(targetNode);
         childOffset.top += parseInt(marginTop, 10) || 0;
         childOffset.left += parseInt(marginLeft, 10) || 0;
@@ -233,7 +254,7 @@ function $edcf132a9284368a$export$b3ceb0cbf1056d98(opts) {
     let scrollSize = $edcf132a9284368a$var$getScroll(scrollNode);
     let boundaryDimensions = $edcf132a9284368a$var$getContainerDimensions(boundaryElement);
     let containerOffsetWithBoundary = boundaryElement.tagName === "BODY" ? $edcf132a9284368a$var$getOffset(container) : $edcf132a9284368a$var$getPosition(container, boundaryElement);
-    return $edcf132a9284368a$export$6839422d1f33cee9(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, maxHeight);
+    return $edcf132a9284368a$export$6839422d1f33cee9(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, maxHeight, arrowSize, arrowBoundaryOffset);
 }
 function $edcf132a9284368a$var$getOffset(node) {
     let { top: top , left: left , width: width , height: height  } = node.getBoundingClientRect();
@@ -269,6 +290,35 @@ function $edcf132a9284368a$var$getPosition(node, parent) {
     offset.left -= parseInt(style.marginLeft, 10) || 0;
     return offset;
 }
+// Returns the containing block of an element, which is the element that
+// this element will be positioned relative to.
+// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block
+function $edcf132a9284368a$var$getContainingBlock(node) {
+    // The offsetParent of an element in most cases equals the containing block.
+    // https://w3c.github.io/csswg-drafts/cssom-view/#dom-htmlelement-offsetparent
+    let offsetParent = node.offsetParent;
+    // The offsetParent algorithm terminates at the document body,
+    // even if the body is not a containing block. Double check that
+    // and use the documentElement if so.
+    if (offsetParent && offsetParent === document.body && window.getComputedStyle(offsetParent).position === "static" && !$edcf132a9284368a$var$isContainingBlock(offsetParent)) offsetParent = document.documentElement;
+    // TODO(later): handle table elements?
+    // The offsetParent can be null if the element has position: fixed, or a few other cases.
+    // We have to walk up the tree manually in this case because fixed positioned elements
+    // are still positioned relative to their containing block, which is not always the viewport.
+    if (offsetParent == null) {
+        offsetParent = node.parentElement;
+        while(offsetParent && !$edcf132a9284368a$var$isContainingBlock(offsetParent))offsetParent = offsetParent.parentElement;
+    }
+    // Fall back to the viewport.
+    return offsetParent || document.documentElement;
+}
+// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+function $edcf132a9284368a$var$isContainingBlock(node) {
+    let style = window.getComputedStyle(node);
+    return style.transform !== "none" || /transform|perspective/.test(style.willChange) || style.filter !== "none" || style.contain === "paint" || // @ts-ignore
+    "backdropFilter" in style && style.backdropFilter !== "none" || // @ts-ignore
+    "WebkitBackdropFilter" in style && style.WebkitBackdropFilter !== "none";
+}
 
 
 
@@ -314,7 +364,7 @@ function $dd149f63282afbbf$export$18fc8428861184da(opts) {
 let $2a41e45df1593e64$var$visualViewport = typeof window !== "undefined" && window.visualViewport;
 function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
     let { direction: direction  } = (0, $k7QOs$useLocale)();
-    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;
+    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;
     let [position, setPosition] = (0, $k7QOs$useState)({
         position: {},
         arrowOffsetLeft: undefined,
@@ -335,11 +385,13 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
         crossOffset,
         isOpen,
         direction,
-        maxHeight
+        maxHeight,
+        arrowBoundaryOffset,
+        arrowSize
     ];
     let updatePosition = (0, $k7QOs$useCallback)(()=>{
         if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) return;
-        setPosition((0, $edcf132a9284368a$export$b3ceb0cbf1056d98)({
+        let position = (0, $edcf132a9284368a$export$b3ceb0cbf1056d98)({
             placement: $2a41e45df1593e64$var$translateRTL(placement, direction),
             overlayNode: overlayRef.current,
             targetNode: targetRef.current,
@@ -349,8 +401,16 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
             boundaryElement: boundaryElement,
             offset: offset,
             crossOffset: crossOffset,
-            maxHeight: maxHeight
-        }));
+            maxHeight: maxHeight,
+            arrowSize: arrowSize,
+            arrowBoundaryOffset: arrowBoundaryOffset
+        });
+        // Modify overlay styles directly so positioning happens immediately without the need of a second render
+        // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers
+        Object.keys(position.position).forEach((key)=>overlayRef.current.style[key] = position.position[key] + "px");
+        overlayRef.current.style.maxHeight = position.maxHeight != null ? position.maxHeight + "px" : undefined;
+        // Trigger a set state for a second render anyway for arrow positioning
+        setPosition(position);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
     // Update position when anything changes
@@ -377,8 +437,10 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
             updatePosition();
         };
         $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.addEventListener("resize", onResize);
+        $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.addEventListener("scroll", onResize);
         return ()=>{
             $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.removeEventListener("resize", onResize);
+            $2a41e45df1593e64$var$visualViewport === null || $2a41e45df1593e64$var$visualViewport === void 0 ? void 0 : $2a41e45df1593e64$var$visualViewport.removeEventListener("scroll", onResize);
         };
     }, [
         updatePosition
@@ -1152,20 +1214,35 @@ let $5e3802645cc19319$var$observerStack = [];
 function $5e3802645cc19319$export$1c3ebcada18427bf(targets, root = document.body) {
     let visibleNodes = new Set(targets);
     let hiddenNodes = new Set();
-    let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
-        acceptNode (node) {
-            // If this node is a live announcer, add it to the set of nodes to keep visible.
-            if ((node instanceof HTMLElement || node instanceof SVGElement) && node.dataset.liveAnnouncer === "true") visibleNodes.add(node);
+    let walk = (root)=>{
+        // Keep live announcer and top layer elements (e.g. toasts) visible.
+        for (let element of root.querySelectorAll("[data-live-announcer], [data-react-aria-top-layer]"))visibleNodes.add(element);
+        let acceptNode = (node)=>{
             // Skip this node and its children if it is one of the target nodes, or a live announcer.
             // Also skip children of already hidden nodes, as aria-hidden is recursive. An exception is
             // made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row".
             // For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
             if (visibleNodes.has(node) || hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute("role") !== "row") return NodeFilter.FILTER_REJECT;
             // Skip this node but continue to children if one of the targets is inside the node.
-            if (targets.some((target)=>node.contains(target))) return NodeFilter.FILTER_SKIP;
+            for (let target of visibleNodes){
+                if (node.contains(target)) return NodeFilter.FILTER_SKIP;
+            }
             return NodeFilter.FILTER_ACCEPT;
+        };
+        let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+            acceptNode: acceptNode
+        });
+        // TreeWalker does not include the root.
+        let acceptRoot = acceptNode(root);
+        if (acceptRoot === NodeFilter.FILTER_ACCEPT) hide(root);
+        if (acceptRoot !== NodeFilter.FILTER_REJECT) {
+            let node = walker.nextNode();
+            while(node != null){
+                hide(node);
+                node = walker.nextNode();
+            }
         }
-    });
+    };
     let hide = (node)=>{
         var _refCountMap_get;
         let refCount = (_refCountMap_get = $5e3802645cc19319$var$refCountMap.get(node)) !== null && _refCountMap_get !== void 0 ? _refCountMap_get : 0;
@@ -1179,11 +1256,7 @@ function $5e3802645cc19319$export$1c3ebcada18427bf(targets, root = document.body
     // If there is already a MutationObserver listening from a previous call,
     // disconnect it so the new on takes over.
     if ($5e3802645cc19319$var$observerStack.length) $5e3802645cc19319$var$observerStack[$5e3802645cc19319$var$observerStack.length - 1].disconnect();
-    let node = walker.nextNode();
-    while(node != null){
-        hide(node);
-        node = walker.nextNode();
-    }
+    walk(root);
     let observer = new MutationObserver((changes)=>{
         for (let change of changes){
             if (change.type !== "childList" || change.addedNodes.length === 0) continue;
@@ -1192,9 +1265,15 @@ function $5e3802645cc19319$export$1c3ebcada18427bf(targets, root = document.body
             if (![
                 ...visibleNodes,
                 ...hiddenNodes
-            ].some((node)=>node.contains(change.target))) for (let node of change.addedNodes){
-                if ((node instanceof HTMLElement || node instanceof SVGElement) && node.dataset.liveAnnouncer === "true") visibleNodes.add(node);
-                else if (node instanceof Element) hide(node);
+            ].some((node)=>node.contains(change.target))) {
+                for (let node of change.removedNodes)if (node instanceof Element) {
+                    visibleNodes.delete(node);
+                    hiddenNodes.delete(node);
+                }
+                for (let node1 of change.addedNodes){
+                    if ((node1 instanceof HTMLElement || node1 instanceof SVGElement) && (node1.dataset.liveAnnouncer === "true" || node1.dataset.reactAriaTopLayer === "true")) visibleNodes.add(node1);
+                    else if (node1 instanceof Element) walk(node1);
+                }
             }
         }
     });
@@ -1247,7 +1326,6 @@ function $5e3802645cc19319$export$1c3ebcada18427bf(targets, root = document.body
 
 
 
-
 function $f2f8a6077418541e$export$542a6fd13ac93354(props, state) {
     let { triggerRef: triggerRef , popoverRef: popoverRef , isNonModal: isNonModal , isKeyboardDismissDisabled: isKeyboardDismissDisabled , ...otherProps } = props;
     let { overlayProps: overlayProps , underlayProps: underlayProps  } = (0, $a11501f3d1d39e6c$export$ea8f71083e90600f)({
@@ -1264,18 +1342,8 @@ function $f2f8a6077418541e$export$542a6fd13ac93354(props, state) {
         isOpen: state.isOpen,
         onClose: null
     });
-    // Delay preventing scroll until popover is positioned to avoid extra scroll padding.
-    // This requires a layout effect so that positioning has been committed to the DOM
-    // by the time usePreventScroll measures the element.
-    let [isPositioned, setPositioned] = (0, $k7QOs$useState)(false);
-    (0, $k7QOs$useLayoutEffect)(()=>{
-        if (!isNonModal && placement) setPositioned(true);
-    }, [
-        isNonModal,
-        placement
-    ]);
     (0, $49c51c25361d4cd2$export$ee0f7cc6afcd1c18)({
-        isDisabled: isNonModal || !isPositioned
+        isDisabled: isNonModal
     });
     (0, $k7QOs$useLayoutEffect)(()=>{
         if (state.isOpen && !isNonModal && popoverRef.current) return (0, $5e3802645cc19319$export$1c3ebcada18427bf)([