@react-aria/overlays 3.13.0 → 3.14.1

package/dist/import.mjs

@@ -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,7 +385,9 @@ 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;
@@ -349,7 +401,9 @@ 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
@@ -383,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

package/dist/main.js

@@ -59,7 +59,8 @@ $parcel$export(module.exports, "useOverlayFocusContain", () => $745edbb83ab4296f
  * 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 $5935ba4d7da2c103$var$AXIS = {
+ */ 
+const $5935ba4d7da2c103$var$AXIS = {
     top: "top",
     bottom: "top",
     left: "left",
@@ -79,28 +80,38 @@ const $5935ba4d7da2c103$var$AXIS_SIZE = {
     top: "height",
     left: "width"
 };
+const $5935ba4d7da2c103$var$TOTAL_SIZE = {
+    width: "totalWidth",
+    height: "totalHeight"
+};
 const $5935ba4d7da2c103$var$PARSED_PLACEMENT_CACHE = {};
 // @ts-ignore
 let $5935ba4d7da2c103$var$visualViewport = typeof window !== "undefined" && window.visualViewport;
 function $5935ba4d7da2c103$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 = $5935ba4d7da2c103$var$visualViewport === null || $5935ba4d7da2c103$var$visualViewport === void 0 ? void 0 : $5935ba4d7da2c103$var$visualViewport.width) !== null && _visualViewport_width !== void 0 ? _visualViewport_width : documentElement.clientWidth;
+        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;
         var _visualViewport_height;
-        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 : documentElement.clientHeight;
+        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;
     } else {
         ({ width: width , height: height , top: top , left: left  } = $5935ba4d7da2c103$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
@@ -150,7 +161,7 @@ function $5935ba4d7da2c103$var$parsePlacement(input) {
     };
     return $5935ba4d7da2c103$var$PARSED_PLACEMENT_CACHE[input];
 }
-function $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned) {
+function $5935ba4d7da2c103$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
@@ -166,19 +177,18 @@ function $5935ba4d7da2c103$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, $6Zb2x$reactariautils.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[$5935ba4d7da2c103$var$TOTAL_SIZE[size]];
         position[$5935ba4d7da2c103$var$FLIPPED_DIRECTION[axis]] = Math.floor(containerHeight - childOffset[axis] + offset);
     } else position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
     return position;
@@ -197,16 +207,16 @@ function $5935ba4d7da2c103$var$getAvailableSpace(boundaryDimensions, containerOf
     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);
     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);
 }
-function $5935ba4d7da2c103$export$6839422d1f33cee9(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, userSetMaxHeight) {
+function $5935ba4d7da2c103$export$6839422d1f33cee9(placementInput, childOffset, overlaySize, scrollSize, margins, padding, flip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, userSetMaxHeight, arrowSize, arrowBoundaryOffset) {
     let placementInfo = $5935ba4d7da2c103$var$parsePlacement(placementInput);
     let { size: size , crossAxis: crossAxis , crossSize: crossSize , placement: placement , crossPlacement: crossPlacement  } = placementInfo;
-    let position = $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
+    let position = $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
     let normalizedOffset = offset;
     let space = $5935ba4d7da2c103$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 = $5935ba4d7da2c103$var$parsePlacement(`${$5935ba4d7da2c103$var$FLIPPED_DIRECTION[placement]} ${crossPlacement}`);
-        let flippedPosition = $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
+        let flippedPosition = $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
         let flippedSpace = $5935ba4d7da2c103$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) {
@@ -220,11 +230,22 @@ function $5935ba4d7da2c103$export$6839422d1f33cee9(placementInput, childOffset,
     let maxHeight = $5935ba4d7da2c103$var$getMaxHeight(position, boundaryDimensions, containerOffsetWithBoundary, childOffset, margins, padding);
     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);
+    position = $5935ba4d7da2c103$var$computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
     delta = $5935ba4d7da2c103$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, $6Zb2x$reactariautils.clamp)(preferredArrowPosition, arrowOverlappingChildMinEdge, arrowOverlappingChildMaxEdge);
+    arrowPosition[crossAxis] = (0, $6Zb2x$reactariautils.clamp)(arrowPositionOverlappingChild, arrowMinPosition, arrowMaxPosition);
     return {
         position: position,
         maxHeight: maxHeight,
@@ -234,13 +255,13 @@ function $5935ba4d7da2c103$export$6839422d1f33cee9(placementInput, childOffset,
     };
 }
 function $5935ba4d7da2c103$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 ? $5935ba4d7da2c103$var$getContainingBlock(overlayNode) : document.documentElement;
+    let isViewportContainer = container === document.documentElement;
     const containerPositionStyle = window.getComputedStyle(container).position;
     let isContainerPositioned = !!containerPositionStyle && containerPositionStyle !== "static";
-    let childOffset = isBodyContainer ? $5935ba4d7da2c103$var$getOffset(targetNode) : $5935ba4d7da2c103$var$getPosition(targetNode, container);
-    if (!isBodyContainer) {
+    let childOffset = isViewportContainer ? $5935ba4d7da2c103$var$getOffset(targetNode) : $5935ba4d7da2c103$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;
@@ -252,7 +273,7 @@ function $5935ba4d7da2c103$export$b3ceb0cbf1056d98(opts) {
     let scrollSize = $5935ba4d7da2c103$var$getScroll(scrollNode);
     let boundaryDimensions = $5935ba4d7da2c103$var$getContainerDimensions(boundaryElement);
     let containerOffsetWithBoundary = boundaryElement.tagName === "BODY" ? $5935ba4d7da2c103$var$getOffset(container) : $5935ba4d7da2c103$var$getPosition(container, boundaryElement);
-    return $5935ba4d7da2c103$export$6839422d1f33cee9(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, maxHeight);
+    return $5935ba4d7da2c103$export$6839422d1f33cee9(placement, childOffset, overlaySize, scrollSize, margins, padding, shouldFlip, boundaryDimensions, containerOffsetWithBoundary, offset, crossOffset, isContainerPositioned, maxHeight, arrowSize, arrowBoundaryOffset);
 }
 function $5935ba4d7da2c103$var$getOffset(node) {
     let { top: top , left: left , width: width , height: height  } = node.getBoundingClientRect();
@@ -288,6 +309,35 @@ function $5935ba4d7da2c103$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 $5935ba4d7da2c103$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" && !$5935ba4d7da2c103$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 && !$5935ba4d7da2c103$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 $5935ba4d7da2c103$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";
+}
 
 
 
@@ -333,7 +383,7 @@ function $9a8aa1b0b336ea3a$export$18fc8428861184da(opts) {
 let $cd94b4896dd97759$var$visualViewport = typeof window !== "undefined" && window.visualViewport;
 function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
     let { direction: direction  } = (0, $6Zb2x$reactariai18n.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, $6Zb2x$react.useState)({
         position: {},
         arrowOffsetLeft: undefined,
@@ -354,7 +404,9 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
         crossOffset,
         isOpen,
         direction,
-        maxHeight
+        maxHeight,
+        arrowBoundaryOffset,
+        arrowSize
     ];
     let updatePosition = (0, $6Zb2x$react.useCallback)(()=>{
         if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) return;
@@ -368,7 +420,9 @@ function $cd94b4896dd97759$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
@@ -402,8 +456,10 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
             updatePosition();
         };
         $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);
         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);
         };
     }, [
         updatePosition