npm - @react-aria/overlays - Versions diffs - 3.19.0 → 3.21.0 - Mend

@react-aria/overlays 3.19.0 → 3.21.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.

Files changed (14) hide show

package/dist/import.mjs +135 -55
package/dist/main.js +133 -53
package/dist/main.js.map +1 -1
package/dist/module.js +135 -55
package/dist/module.js.map +1 -1
package/dist/types.d.ts +7 -0
package/dist/types.d.ts.map +1 -1
package/package.json +8 -8
package/src/DismissButton.tsx +3 -2
package/src/calculatePosition.ts +85 -24
package/src/useOverlay.ts +1 -1
package/src/useOverlayPosition.ts +31 -4
package/src/usePopover.ts +13 -4
package/src/usePreventScroll.ts +56 -41

package/dist/main.js CHANGED Viewed

@@ -92,6 +92,7 @@ let $5935ba4d7da2c103$var$visualViewport = typeof document !== "undefined" && wi
 function $5935ba4d7da2c103$var$getContainerDimensions(containerNode) {
     let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0;
     let scroll = {};
+    let isPinchZoomedIn = ($5935ba4d7da2c103$var$visualViewport === null || $5935ba4d7da2c103$var$visualViewport === void 0 ? void 0 : $5935ba4d7da2c103$var$visualViewport.scale) > 1;
     if (containerNode.tagName === "BODY") {
         let documentElement = document.documentElement;
         totalWidth = documentElement.clientWidth;
@@ -102,6 +103,13 @@ function $5935ba4d7da2c103$var$getContainerDimensions(containerNode) {
         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;
         scroll.top = documentElement.scrollTop || containerNode.scrollTop;
         scroll.left = documentElement.scrollLeft || containerNode.scrollLeft;
+        // The goal of the below is to get a top/left value that represents the top/left of the visual viewport with
+        // respect to the layout viewport origin. This combined with the scrollTop/scrollLeft will allow us to calculate
+        // coordinates/values with respect to the visual viewport or with respect to the layout viewport.
+        if ($5935ba4d7da2c103$var$visualViewport) {
+            top = $5935ba4d7da2c103$var$visualViewport.offsetTop;
+            left = $5935ba4d7da2c103$var$visualViewport.offsetLeft;
+        }
     } else {
         ({ width: width, height: height, top: top, left: left } = $5935ba4d7da2c103$var$getOffset(containerNode));
         scroll.top = containerNode.scrollTop;
@@ -109,6 +117,16 @@ function $5935ba4d7da2c103$var$getContainerDimensions(containerNode) {
         totalWidth = width;
         totalHeight = height;
     }
+    if ((0, $6Zb2x$reactariautils.isWebKit)() && (containerNode.tagName === "BODY" || containerNode.tagName === "HTML") && isPinchZoomedIn) {
+        // Safari will report a non-zero scrollTop/Left for the non-scrolling body/HTML element when pinch zoomed in unlike other browsers.
+        // Set to zero for parity calculations so we get consistent positioning of overlays across all browsers.
+        // Also switch to visualViewport.pageTop/pageLeft so that we still accomodate for scroll positioning for body/HTML elements that are actually scrollable
+        // before pinch zoom happens
+        scroll.top = 0;
+        scroll.left = 0;
+        top = $5935ba4d7da2c103$var$visualViewport.pageTop;
+        left = $5935ba4d7da2c103$var$visualViewport.pageLeft;
+    }
     return {
         width: width,
         height: height,
@@ -127,6 +145,7 @@ function $5935ba4d7da2c103$var$getScroll(node) {
         height: node.scrollHeight
     };
 }
+// Determines the amount of space required when moving the overlay to ensure it remains in the boundary
 function $5935ba4d7da2c103$var$getDelta(axis, offset, size, // The dimensions of the boundary element that the popover is
 // positioned within (most of the time this is the <body>).
 boundaryDimensions, // The dimensions of the containing block element that the popover is
@@ -134,13 +153,20 @@ boundaryDimensions, // The dimensions of the containing block element that the p
 // Usually this is the same as the boundary element, but if the popover
 // is portaled somewhere other than the body and has an ancestor with
 // position: relative/absolute, it will be different.
-containerDimensions, padding) {
+containerDimensions, padding, containerOffsetWithBoundary) {
     let containerScroll = containerDimensions.scroll[axis];
-    let boundaryHeight = boundaryDimensions[$5935ba4d7da2c103$var$AXIS_SIZE[axis]];
-    let startEdgeOffset = offset - padding - containerScroll;
-    let endEdgeOffset = offset + padding - containerScroll + size;
-    if (startEdgeOffset < 0) return -startEdgeOffset;
-    else if (endEdgeOffset > boundaryHeight) return Math.max(boundaryHeight - endEdgeOffset, -startEdgeOffset);
+    // The height/width of the boundary. Matches the axis along which we are adjusting the overlay position
+    let boundarySize = boundaryDimensions[$5935ba4d7da2c103$var$AXIS_SIZE[axis]];
+    // Calculate the edges of the boundary (accomodating for the boundary padding) and the edges of the overlay.
+    // Note that these values are with respect to the visual viewport (aka 0,0 is the top left of the viewport)
+    let boundaryStartEdge = boundaryDimensions.scroll[$5935ba4d7da2c103$var$AXIS[axis]] + padding;
+    let boundaryEndEdge = boundarySize + boundaryDimensions.scroll[$5935ba4d7da2c103$var$AXIS[axis]] - padding;
+    let startEdgeOffset = offset - containerScroll + containerOffsetWithBoundary[axis] - boundaryDimensions[$5935ba4d7da2c103$var$AXIS[axis]];
+    let endEdgeOffset = offset - containerScroll + size + containerOffsetWithBoundary[axis] - boundaryDimensions[$5935ba4d7da2c103$var$AXIS[axis]];
+    // If any of the overlay edges falls outside of the boundary, shift the overlay the required amount to align one of the overlay's
+    // edges with the closest boundary edge.
+    if (startEdgeOffset < boundaryStartEdge) return boundaryStartEdge - startEdgeOffset;
+    else if (endEdgeOffset > boundaryEndEdge) return Math.max(boundaryEndEdge - endEdgeOffset, boundaryStartEdge - startEdgeOffset);
     else return 0;
 }
 function $5935ba4d7da2c103$var$getMargins(node) {
@@ -184,7 +210,6 @@ function $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions,
      /* else {
     the overlay top should match the button top
   } */
-    // add the crossOffset from props
     position[crossAxis] += crossOffset;
     // overlay top overlapping arrow with button bottom
     const minPosition = childOffset[crossAxis] - overlaySize[crossSize] + arrowSize + arrowBoundaryOffset;
@@ -202,14 +227,20 @@ function $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions,
     } else position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
     return position;
 }
-function $5935ba4d7da2c103$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding) {
-    return position.top != null ? Math.max(0, boundaryDimensions.height + boundaryDimensions.top + boundaryDimensions.scroll.top // this is the bottom of the boundary
-     - (containerOffsetWithBoundary.top + position.top // this is the top of the overlay
-    ) - (margins.top + margins.bottom + padding // save additional space for margin and padding
-    )) : Math.max(0, childOffset.top + containerOffsetWithBoundary.top // this is the top of the trigger
+function $5935ba4d7da2c103$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, isContainerPositioned, margins, padding, overlayHeight, heightGrowthDirection) {
+    const containerHeight = isContainerPositioned ? containerOffsetWithBoundary.height : boundaryDimensions[$5935ba4d7da2c103$var$TOTAL_SIZE.height];
+    // For cases where position is set via "bottom" instead of "top", we need to calculate the true overlay top with respect to the boundary. Reverse calculate this with the same method
+    // used in computePosition.
+    let overlayTop = position.top != null ? containerOffsetWithBoundary.top + position.top : containerOffsetWithBoundary.top + (containerHeight - position.bottom - overlayHeight);
+    let maxHeight = heightGrowthDirection !== "top" ? // We want the distance between the top of the overlay to the bottom of the boundary
+    Math.max(0, boundaryDimensions.height + boundaryDimensions.top + boundaryDimensions.scroll.top // this is the bottom of the boundary
+     - overlayTop // this is the top of the overlay
+     - (margins.top + margins.bottom + padding // save additional space for margin and padding
+    )) : Math.max(0, overlayTop + overlayHeight // this is the bottom of the overlay
      - (boundaryDimensions.top + boundaryDimensions.scroll.top // this is the top of the boundary
     ) - (margins.top + margins.bottom + padding // save additional space for margin and padding
     ));
+    return Math.min(boundaryDimensions.height - padding * 2, maxHeight);
 }
 function $5935ba4d7da2c103$var$getAvailableSpace(boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding, placementInfo) {
     let { placement: placement, axis: axis, size: size } = placementInfo;
@@ -234,13 +265,22 @@ function $5935ba4d7da2c103$export$6839422d1f33cee9(placementInput, childOffset,
             normalizedOffset = offset;
         }
     }
-    let delta = $5935ba4d7da2c103$var$getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding);
+    // Determine the direction the height of the overlay can grow so that we can choose how to calculate the max height
+    let heightGrowthDirection = "bottom";
+    if (placementInfo.axis === "top") {
+        if (placementInfo.placement === "top") heightGrowthDirection = "top";
+        else if (placementInfo.placement === "bottom") heightGrowthDirection = "bottom";
+    } else if (placementInfo.crossAxis === "top") {
+        if (placementInfo.crossPlacement === "top") heightGrowthDirection = "bottom";
+        else if (placementInfo.crossPlacement === "bottom") heightGrowthDirection = "top";
+    }
+    let delta = $5935ba4d7da2c103$var$getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
     position[crossAxis] += delta;
-    let maxHeight = $5935ba4d7da2c103$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding);
+    let maxHeight = $5935ba4d7da2c103$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, isContainerPositioned, margins, padding, overlaySize.height, heightGrowthDirection);
     if (userSetMaxHeight && userSetMaxHeight < maxHeight) maxHeight = userSetMaxHeight;
     overlaySize.height = Math.min(overlaySize.height, maxHeight);
     position = $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
-    delta = $5935ba4d7da2c103$var$getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding);
+    delta = $5935ba4d7da2c103$var$getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding, containerOffsetWithBoundary);
     position[crossAxis] += delta;
     let arrowPosition = {};
     // All values are transformed so that 0 is at the top/left of the overlay depending on the orientation
@@ -282,7 +322,14 @@ function $5935ba4d7da2c103$export$b3ceb0cbf1056d98(opts) {
     let scrollSize = $5935ba4d7da2c103$var$getScroll(scrollNode);
     let boundaryDimensions = $5935ba4d7da2c103$var$getContainerDimensions(boundaryElement);
     let containerDimensions = $5935ba4d7da2c103$var$getContainerDimensions(container);
+    // If the container is the HTML element wrapping the body element, the retrieved scrollTop/scrollLeft will be equal to the
+    // body element's scroll. Set the container's scroll values to 0 since the overlay's edge position value in getDelta don't then need to be further offset
+    // by the container scroll since they are essentially the same containing element and thus in the same coordinate system
     let containerOffsetWithBoundary = boundaryElement.tagName === "BODY" ? $5935ba4d7da2c103$var$getOffset(container) : $5935ba4d7da2c103$var$getPosition(container, boundaryElement);
+    if (container.tagName === "HTML" && boundaryElement.tagName === "BODY") {
+        containerDimensions.scroll.top = 0;
+        containerDimensions.scroll.left = 0;
+    }
     return $5935ba4d7da2c103$export$6839422d1f33cee9(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, maxHeight, arrowSize, arrowBoundaryOffset);
 }
 function $5935ba4d7da2c103$var$getOffset(node) {
@@ -418,8 +465,21 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
         arrowBoundaryOffset,
         arrowSize
     ];
+    // Note, the position freezing breaks if body sizes itself dynamicly with the visual viewport but that might
+    // just be a non-realistic use case
+    // Upon opening a overlay, record the current visual viewport scale so we can freeze the overlay styles
+    let lastScale = (0, $6Zb2x$react.useRef)($cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.scale);
+    (0, $6Zb2x$react.useEffect)(()=>{
+        if (isOpen) lastScale.current = $cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.scale;
+    }, [
+        isOpen
+    ]);
     let updatePosition = (0, $6Zb2x$react.useCallback)(()=>{
         if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) return;
+        if (($cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.scale) !== lastScale.current) return;
+        // Always reset the overlay's previous max height if not defined by the user so that we can compensate for
+        // RAC collections populating after a second render and properly set a correct max height + positioning when it populates.
+        if (!maxHeight && overlayRef.current) overlayRef.current.style.maxHeight = "none";
         let position = (0, $5935ba4d7da2c103$export$b3ceb0cbf1056d98)({
             placement: $cd94b4896dd97759$var$translateRTL(placement, direction),
             overlayNode: overlayRef.current,
@@ -465,11 +525,16 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
             }, 500);
             updatePosition();
         };
+        // Only reposition the overlay if a scroll event happens immediately as a result of resize (aka the virtual keyboard has appears)
+        // We don't want to reposition the overlay if the user has pinch zoomed in and is scrolling the viewport around.
+        let onScroll = ()=>{
+            if (isResizing.current) onResize();
+        };
         $cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.addEventListener("resize", onResize);
-        $cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.addEventListener("scroll", onResize);
+        $cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.addEventListener("scroll", onScroll);
         return ()=>{
             $cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.removeEventListener("resize", onResize);
-            $cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.removeEventListener("scroll", onResize);
+            $cd94b4896dd97759$var$visualViewport === null || $cd94b4896dd97759$var$visualViewport === void 0 ? void 0 : $cd94b4896dd97759$var$visualViewport.removeEventListener("scroll", onScroll);
         };
     }, [
         updatePosition
@@ -551,7 +616,7 @@ function $82711f9cb668ecdb$export$ea8f71083e90600f(props, ref) {
         isOpen,
         ref
     ]);
-    // Only hide the overlay when it is the topmost visible overlay in the stack.
+    // Only hide the overlay when it is the topmost visible overlay in the stack
     let onHide = ()=>{
         if ($82711f9cb668ecdb$var$visibleOverlays[$82711f9cb668ecdb$var$visibleOverlays.length - 1] === ref && onClose) onClose();
     };
@@ -726,8 +791,9 @@ function $5c2f5cd01815d369$var$preventScrollStandard() {
 //
 // 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
 //    on the window.
-// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
-//    top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
+// 2. Set `overscroll-behavior: contain` on nested scrollable regions so they do not scroll the page when at
+//    the top or bottom. Work around a bug where this does not work when the element does not actually overflow
+//    by preventing default in a `touchmove` event.
 // 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
 // 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
 //    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
@@ -739,12 +805,15 @@ function $5c2f5cd01815d369$var$preventScrollStandard() {
 //    to navigate to an input with the next/previous buttons that's outside a modal.
 function $5c2f5cd01815d369$var$preventScrollMobileSafari() {
     let scrollable;
-    let lastY = 0;
+    let restoreScrollableStyles;
     let onTouchStart = (e)=>{
         // Store the nearest scrollable parent element from the element that the user touched.
-        scrollable = (0, $6Zb2x$reactariautils.getScrollParent)(e.target);
+        scrollable = (0, $6Zb2x$reactariautils.getScrollParent)(e.target, true);
         if (scrollable === document.documentElement && scrollable === document.body) return;
-        lastY = e.changedTouches[0].pageY;
+        // Prevent scrolling up when at the top and scrolling down when at the bottom
+        // of a nested scrollable area, otherwise mobile Safari will start scrolling
+        // the window instead.
+        if (scrollable instanceof HTMLElement && window.getComputedStyle(scrollable).overscrollBehavior === "auto") restoreScrollableStyles = $5c2f5cd01815d369$var$setStyle(scrollable, "overscrollBehavior", "contain");
     };
     let onTouchMove = (e)=>{
         // Prevent scrolling the window.
@@ -752,22 +821,20 @@ function $5c2f5cd01815d369$var$preventScrollMobileSafari() {
             e.preventDefault();
             return;
         }
-        // Prevent scrolling up when at the top and scrolling down when at the bottom
-        // of a nested scrollable area, otherwise mobile Safari will start scrolling
-        // the window instead. Unfortunately, this disables bounce scrolling when at
-        // the top but it's the best we can do.
-        let y = e.changedTouches[0].pageY;
-        let scrollTop = scrollable.scrollTop;
-        let bottom = scrollable.scrollHeight - scrollable.clientHeight;
-        if (bottom === 0) return;
-        if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) e.preventDefault();
-        lastY = y;
+        // overscroll-behavior should prevent scroll chaining, but currently does not
+        // if the element doesn't actually overflow. https://bugs.webkit.org/show_bug.cgi?id=243452
+        // This checks that both the width and height do not overflow, otherwise we might
+        // block horizontal scrolling too. In that case, adding `touch-action: pan-x` to
+        // the element will prevent vertical page scrolling. We can't add that automatically
+        // because it must be set before the touchstart event.
+        if (scrollable.scrollHeight === scrollable.clientHeight && scrollable.scrollWidth === scrollable.clientWidth) e.preventDefault();
     };
     let onTouchEnd = (e)=>{
         let target = e.target;
         // Apply this change if we're not already focused on the target element
         if ($5c2f5cd01815d369$var$willOpenKeyboard(target) && target !== document.activeElement) {
             e.preventDefault();
+            setupStyles();
             // Apply a transform to trick Safari into thinking the input is at the top of the page
             // so it doesn't try to scroll it into view. When tapping on an input, this needs to
             // be done before the "focus" event, so we have to focus the element ourselves.
@@ -777,10 +844,12 @@ function $5c2f5cd01815d369$var$preventScrollMobileSafari() {
                 target.style.transform = "";
             });
         }
+        if (restoreScrollableStyles) restoreScrollableStyles();
     };
     let onFocus = (e)=>{
         let target = e.target;
         if ($5c2f5cd01815d369$var$willOpenKeyboard(target)) {
+            setupStyles();
             // Transform also needs to be applied in the focus event in cases where focus moves
             // other than tapping on an input directly, e.g. the next/previous buttons in the
             // software keyboard. In these cases, it seems applying the transform in the focus event
@@ -805,19 +874,25 @@ function $5c2f5cd01815d369$var$preventScrollMobileSafari() {
             });
         }
     };
-    let onWindowScroll = ()=>{
-        // Last resort. If the window scrolled, scroll it back to the top.
-        // It should always be at the top because the body will have a negative margin (see below).
+    let restoreStyles = null;
+    let setupStyles = ()=>{
+        if (restoreStyles) return;
+        let onWindowScroll = ()=>{
+            // Last resort. If the window scrolled, scroll it back to the top.
+            // It should always be at the top because the body will have a negative margin (see below).
+            window.scrollTo(0, 0);
+        };
+        // Record the original scroll position so we can restore it.
+        // Then apply a negative margin to the body to offset it by the scroll position. This will
+        // enable us to scroll the window to the top, which is required for the rest of this to work.
+        let scrollX = window.pageXOffset;
+        let scrollY = window.pageYOffset;
+        restoreStyles = (0, $6Zb2x$reactariautils.chain)($5c2f5cd01815d369$var$addEvent(window, "scroll", onWindowScroll), $5c2f5cd01815d369$var$setStyle(document.documentElement, "paddingRight", `${window.innerWidth - document.documentElement.clientWidth}px`), $5c2f5cd01815d369$var$setStyle(document.documentElement, "overflow", "hidden"), $5c2f5cd01815d369$var$setStyle(document.body, "marginTop", `-${scrollY}px`), ()=>{
+            window.scrollTo(scrollX, scrollY);
+        });
+        // Scroll to the top. The negative margin on the body will make this appear the same.
         window.scrollTo(0, 0);
     };
-    // Record the original scroll position so we can restore it.
-    // Then apply a negative margin to the body to offset it by the scroll position. This will
-    // enable us to scroll the window to the top, which is required for the rest of this to work.
-    let scrollX = window.pageXOffset;
-    let scrollY = window.pageYOffset;
-    let restoreStyles = (0, $6Zb2x$reactariautils.chain)($5c2f5cd01815d369$var$setStyle(document.documentElement, "paddingRight", `${window.innerWidth - document.documentElement.clientWidth}px`), $5c2f5cd01815d369$var$setStyle(document.documentElement, "overflow", "hidden"), $5c2f5cd01815d369$var$setStyle(document.body, "marginTop", `-${scrollY}px`));
-    // Scroll to the top. The negative margin on the body will make this appear the same.
-    window.scrollTo(0, 0);
     let removeEvents = (0, $6Zb2x$reactariautils.chain)($5c2f5cd01815d369$var$addEvent(document, "touchstart", onTouchStart, {
         passive: false,
         capture: true
@@ -827,12 +902,12 @@ function $5c2f5cd01815d369$var$preventScrollMobileSafari() {
     }), $5c2f5cd01815d369$var$addEvent(document, "touchend", onTouchEnd, {
         passive: false,
         capture: true
-    }), $5c2f5cd01815d369$var$addEvent(document, "focus", onFocus, true), $5c2f5cd01815d369$var$addEvent(window, "scroll", onWindowScroll));
+    }), $5c2f5cd01815d369$var$addEvent(document, "focus", onFocus, true));
     return ()=>{
         // Restore styles and scroll the page back to where it was.
-        restoreStyles();
+        restoreScrollableStyles === null || restoreScrollableStyles === void 0 ? void 0 : restoreScrollableStyles();
+        restoreStyles === null || restoreStyles === void 0 ? void 0 : restoreStyles();
         removeEvents();
-        window.scrollTo(scrollX, scrollY);
     };
 }
 // Sets a CSS property on an element, and returns a function to revert it to the previous value.
@@ -1222,7 +1297,7 @@ $90f032faf016e1fb$exports = {
 function $f69bb3e6457495cc$export$2317d149ed6f78c4(props) {
     let { onDismiss: onDismiss, ...otherProps } = props;
-    let stringFormatter = (0, $6Zb2x$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($90f032faf016e1fb$exports))));
+    let stringFormatter = (0, $6Zb2x$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($90f032faf016e1fb$exports))), "@react-aria/overlays");
     let labels = (0, $6Zb2x$reactariautils.useLabels)(otherProps, stringFormatter.format("dismiss"));
     let onClick = ()=>{
         if (onDismiss) onDismiss();
@@ -1230,7 +1305,11 @@ function $f69bb3e6457495cc$export$2317d149ed6f78c4(props) {
     return /*#__PURE__*/ (0, ($parcel$interopDefault($6Zb2x$react))).createElement((0, $6Zb2x$reactariavisuallyhidden.VisuallyHidden), null, /*#__PURE__*/ (0, ($parcel$interopDefault($6Zb2x$react))).createElement("button", {
         ...labels,
         tabIndex: -1,
-        onClick: onClick
+        onClick: onClick,
+        style: {
+            width: 1,
+            height: 1
+        }
     }));
 }
@@ -1365,23 +1444,24 @@ function $08ef1685902b6011$export$1c3ebcada18427bf(targets, root = document.body
 function $6c2dfcdee3e15e20$export$542a6fd13ac93354(props, state) {
-    let { triggerRef: triggerRef, popoverRef: popoverRef, isNonModal: isNonModal, isKeyboardDismissDisabled: isKeyboardDismissDisabled, ...otherProps } = props;
+    let { triggerRef: triggerRef, popoverRef: popoverRef, isNonModal: isNonModal, isKeyboardDismissDisabled: isKeyboardDismissDisabled, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, ...otherProps } = props;
     let { overlayProps: overlayProps, underlayProps: underlayProps } = (0, $82711f9cb668ecdb$export$ea8f71083e90600f)({
         isOpen: state.isOpen,
         onClose: state.close,
         shouldCloseOnBlur: true,
         isDismissable: !isNonModal,
-        isKeyboardDismissDisabled: isKeyboardDismissDisabled
+        isKeyboardDismissDisabled: isKeyboardDismissDisabled,
+        shouldCloseOnInteractOutside: shouldCloseOnInteractOutside
     }, popoverRef);
     let { overlayProps: positionProps, arrowProps: arrowProps, placement: placement } = (0, $cd94b4896dd97759$export$d39e1813b3bdd0e1)({
         ...otherProps,
         targetRef: triggerRef,
         overlayRef: popoverRef,
         isOpen: state.isOpen,
-        onClose: null
+        onClose: isNonModal ? state.close : null
     });
     (0, $5c2f5cd01815d369$export$ee0f7cc6afcd1c18)({
-        isDisabled: isNonModal
+        isDisabled: isNonModal || !state.isOpen
     });
     (0, $6Zb2x$reactariautils.useLayoutEffect)(()=>{
         if (state.isOpen && !isNonModal && popoverRef.current) return (0, $08ef1685902b6011$export$1c3ebcada18427bf)([