@react-aria/overlays 3.27.3 → 3.29.0

package/dist/usePopover.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;;AAoEM,SAAS,0CAAW,KAAuB,EAAE,KAA0B;IAC5E,IAAI,cACF,UAAU,cACV,UAAU,YACV,QAAQ,cACR,UAAU,6BACV,yBAAyB,gCACzB,4BAA4B,EAC5B,GAAG,YACJ,GAAG;IAEJ,IAAI,YAAY,UAAU,CAAC,UAAU,KAAK;IAE1C,IAAI,gBAAC,YAAY,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,yCAAS,EAC3C;QACE,QAAQ,MAAM,MAAM;QACpB,SAAS,MAAM,KAAK;QACpB,mBAAmB;QACnB,eAAe,CAAC,cAAc;mCAC9B;sCACA;IACF,GACA,qBAAA,sBAAA,WAAY;IAGd,IAAI,EAAC,cAAc,aAAa,cAAE,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,yCAAiB,EAAE;QAC5E,GAAG,UAAU;QACb,WAAW;QACX,YAAY;QACZ,QAAQ,MAAM,MAAM;QACpB,SAAS,cAAc,CAAC,YAAY,MAAM,KAAK,GAAG;IACpD;IAEA,CAAA,GAAA,yCAAe,EAAE;QACf,YAAY,cAAc,CAAC,MAAM,MAAM;IACzC;IAEA,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,MAAM,MAAM,IAAI,WAAW,OAAO,EAAE;gBAEjB,mBAEK;YAH1B,IAAI,YACF,OAAO,CAAA,GAAA,yCAAU,EAAE,CAAA,oBAAA,qBAAA,+BAAA,SAAU,OAAO,cAAjB,+BAAA,oBAAqB,WAAW,OAAO;iBAE1D,OAAO,CAAA,GAAA,yCAAc,EAAE;gBAAC,CAAA,qBAAA,qBAAA,+BAAA,SAAU,OAAO,cAAjB,gCAAA,qBAAqB,WAAW,OAAO;aAAC;QAEpE;IACF,GAAG;QAAC;QAAY,MAAM,MAAM;QAAE;QAAY;KAAS;IAEnD,OAAO;QACL,cAAc,CAAA,GAAA,iBAAS,EAAE,cAAc;oBACvC;uBACA;mBACA;IACF;AACF","sources":["packages/@react-aria/overlays/src/usePopover.ts"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ariaHideOutside, keepVisible} from './ariaHideOutside';\nimport {AriaPositionProps, useOverlayPosition} from './useOverlayPosition';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {mergeProps, useLayoutEffect} from '@react-aria/utils';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport {PlacementAxis} from '@react-types/overlays';\nimport {useOverlay} from './useOverlay';\nimport {usePreventScroll} from './usePreventScroll';\n\nexport interface AriaPopoverProps extends Omit<AriaPositionProps, 'isOpen' | 'onClose' | 'targetRef' | 'overlayRef'> {\n  /**\n   * The ref for the element which the popover positions itself with respect to.\n   */\n  triggerRef: RefObject<Element | null>,\n  /**\n   * The ref for the popover element.\n   */\n  popoverRef: RefObject<Element | null>,\n  /**\n   * An optional ref for a group of popovers, e.g. submenus.\n   * When provided, this element is used to detect outside interactions\n   * and hiding elements from assistive technologies instead of the popoverRef.\n   */\n  groupRef?: RefObject<Element | null>,\n  /**\n   * Whether the popover is non-modal, i.e. elements outside the popover may be\n   * interacted with by assistive technologies.\n   *\n   * Most popovers should not use this option as it may negatively impact the screen\n   * reader experience. Only use with components such as combobox, which are designed\n   * to handle this situation carefully.\n   */\n  isNonModal?: boolean,\n  /**\n   * Whether pressing the escape key to close the popover should be disabled.\n   *\n   * Most popovers should not use this option. When set to true, an alternative\n   * way to close the popover with a keyboard must be provided.\n   *\n   * @default false\n   */\n  isKeyboardDismissDisabled?: boolean,\n  /**\n   * When user interacts with the argument element outside of the popover ref,\n   * return true if onClose should be called. This gives you a chance to filter\n   * out interaction with elements that should not dismiss the popover.\n   * By default, onClose will always be called on interaction outside the popover ref.\n   */\n  shouldCloseOnInteractOutside?: (element: Element) => boolean\n}\n\nexport interface PopoverAria {\n  /** Props for the popover element. */\n  popoverProps: DOMAttributes,\n  /** Props for the popover tip arrow if any. */\n  arrowProps: DOMAttributes,\n  /** Props to apply to the underlay element, if any. */\n  underlayProps: DOMAttributes,\n  /** Placement of the popover with respect to the trigger. */\n  placement: PlacementAxis | null\n}\n\n/**\n * Provides the behavior and accessibility implementation for a popover component.\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport function usePopover(props: AriaPopoverProps, state: OverlayTriggerState): PopoverAria {\n  let {\n    triggerRef,\n    popoverRef,\n    groupRef,\n    isNonModal,\n    isKeyboardDismissDisabled,\n    shouldCloseOnInteractOutside,\n    ...otherProps\n  } = props;\n\n  let isSubmenu = otherProps['trigger'] === 'SubmenuTrigger';\n\n  let {overlayProps, underlayProps} = useOverlay(\n    {\n      isOpen: state.isOpen,\n      onClose: state.close,\n      shouldCloseOnBlur: true,\n      isDismissable: !isNonModal || isSubmenu,\n      isKeyboardDismissDisabled,\n      shouldCloseOnInteractOutside\n    },\n    groupRef ?? popoverRef\n  );\n\n  let {overlayProps: positionProps, arrowProps, placement} = useOverlayPosition({\n    ...otherProps,\n    targetRef: triggerRef,\n    overlayRef: popoverRef,\n    isOpen: state.isOpen,\n    onClose: isNonModal && !isSubmenu ? state.close : null\n  });\n\n  usePreventScroll({\n    isDisabled: isNonModal || !state.isOpen\n  });\n\n  useLayoutEffect(() => {\n    if (state.isOpen && popoverRef.current) {\n      if (isNonModal) {\n        return keepVisible(groupRef?.current ?? popoverRef.current);\n      } else {\n        return ariaHideOutside([groupRef?.current ?? popoverRef.current]);\n      }\n    }\n  }, [isNonModal, state.isOpen, popoverRef, groupRef]);\n\n  return {\n    popoverProps: mergeProps(overlayProps, positionProps),\n    arrowProps,\n    underlayProps,\n    placement\n  };\n}\n"],"names":[],"version":3,"file":"usePopover.module.js.map"}
+{"mappings":";;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AAyEM,SAAS,0CAAW,KAAuB,EAAE,KAA0B;IAC5E,IAAI,cACF,UAAU,cACV,UAAU,YACV,QAAQ,cACR,UAAU,6BACV,yBAAyB,gCACzB,4BAA4B,EAC5B,GAAG,YACJ,GAAG;IAEJ,IAAI,YAAY,UAAU,CAAC,UAAU,KAAK;IAE1C,IAAI,gBAAC,YAAY,iBAAE,aAAa,EAAC,GAAG,CAAA,GAAA,yCAAS,EAC3C;QACE,QAAQ,MAAM,MAAM;QACpB,SAAS,MAAM,KAAK;QACpB,mBAAmB;QACnB,eAAe,CAAC,cAAc;mCAC9B;sCACA;IACF,GACA,qBAAA,sBAAA,WAAY;IAGd,IAAI,EAAC,cAAc,aAAa,cAAE,UAAU,aAAE,SAAS,EAAE,oBAAoB,MAAM,EAAC,GAAG,CAAA,GAAA,yCAAiB,EAAE;QACxG,GAAG,UAAU;QACb,WAAW;QACX,YAAY;QACZ,QAAQ,MAAM,MAAM;QACpB,SAAS,cAAc,CAAC,YAAY,MAAM,KAAK,GAAG;IACpD;IAEA,CAAA,GAAA,yCAAe,EAAE;QACf,YAAY,cAAc,CAAC,MAAM,MAAM;IACzC;IAEA,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,MAAM,MAAM,IAAI,WAAW,OAAO,EAAE;gBAEjB,mBAEK;YAH1B,IAAI,YACF,OAAO,CAAA,GAAA,yCAAU,EAAE,CAAA,oBAAA,qBAAA,+BAAA,SAAU,OAAO,cAAjB,+BAAA,oBAAqB,WAAW,OAAO;iBAE1D,OAAO,CAAA,GAAA,yCAAc,EAAE;gBAAC,CAAA,qBAAA,qBAAA,+BAAA,SAAU,OAAO,cAAjB,gCAAA,qBAAqB,WAAW,OAAO;aAAC,EAAE;gBAAC,gBAAgB;YAAI;QAE3F;IACF,GAAG;QAAC;QAAY,MAAM,MAAM;QAAE;QAAY;KAAS;IAEnD,OAAO;QACL,cAAc,CAAA,GAAA,iBAAS,EAAE,cAAc;oBACvC;uBACA;mBACA;QACA,oBAAoB;IACtB;AACF","sources":["packages/@react-aria/overlays/src/usePopover.ts"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ariaHideOutside, keepVisible} from './ariaHideOutside';\nimport {AriaPositionProps, useOverlayPosition} from './useOverlayPosition';\nimport {DOMAttributes, RefObject} from '@react-types/shared';\nimport {mergeProps} from '@react-aria/utils';\nimport {OverlayTriggerState} from '@react-stately/overlays';\nimport {PlacementAxis} from '@react-types/overlays';\nimport {useEffect} from 'react';\nimport {useOverlay} from './useOverlay';\nimport {usePreventScroll} from './usePreventScroll';\n\nexport interface AriaPopoverProps extends Omit<AriaPositionProps, 'isOpen' | 'onClose' | 'targetRef' | 'overlayRef'> {\n  /**\n   * The ref for the element which the popover positions itself with respect to.\n   */\n  triggerRef: RefObject<Element | null>,\n  /**\n   * The ref for the popover element.\n   */\n  popoverRef: RefObject<Element | null>,\n  /** A ref for the popover arrow element. */\n  arrowRef?: RefObject<Element | null>,\n  /**\n   * An optional ref for a group of popovers, e.g. submenus.\n   * When provided, this element is used to detect outside interactions\n   * and hiding elements from assistive technologies instead of the popoverRef.\n   */\n  groupRef?: RefObject<Element | null>,\n  /**\n   * Whether the popover is non-modal, i.e. elements outside the popover may be\n   * interacted with by assistive technologies.\n   *\n   * Most popovers should not use this option as it may negatively impact the screen\n   * reader experience. Only use with components such as combobox, which are designed\n   * to handle this situation carefully.\n   */\n  isNonModal?: boolean,\n  /**\n   * Whether pressing the escape key to close the popover should be disabled.\n   *\n   * Most popovers should not use this option. When set to true, an alternative\n   * way to close the popover with a keyboard must be provided.\n   *\n   * @default false\n   */\n  isKeyboardDismissDisabled?: boolean,\n  /**\n   * When user interacts with the argument element outside of the popover ref,\n   * return true if onClose should be called. This gives you a chance to filter\n   * out interaction with elements that should not dismiss the popover.\n   * By default, onClose will always be called on interaction outside the popover ref.\n   */\n  shouldCloseOnInteractOutside?: (element: Element) => boolean\n}\n\nexport interface PopoverAria {\n  /** Props for the popover element. */\n  popoverProps: DOMAttributes,\n  /** Props for the popover tip arrow if any. */\n  arrowProps: DOMAttributes,\n  /** Props to apply to the underlay element, if any. */\n  underlayProps: DOMAttributes,\n  /** Placement of the popover with respect to the trigger. */\n  placement: PlacementAxis | null,\n  /** The origin of the target in the overlay's coordinate system. Useful for animations. */\n  triggerAnchorPoint: {x: number, y: number} | null\n}\n\n/**\n * Provides the behavior and accessibility implementation for a popover component.\n * A popover is an overlay element positioned relative to a trigger.\n */\nexport function usePopover(props: AriaPopoverProps, state: OverlayTriggerState): PopoverAria {\n  let {\n    triggerRef,\n    popoverRef,\n    groupRef,\n    isNonModal,\n    isKeyboardDismissDisabled,\n    shouldCloseOnInteractOutside,\n    ...otherProps\n  } = props;\n\n  let isSubmenu = otherProps['trigger'] === 'SubmenuTrigger';\n\n  let {overlayProps, underlayProps} = useOverlay(\n    {\n      isOpen: state.isOpen,\n      onClose: state.close,\n      shouldCloseOnBlur: true,\n      isDismissable: !isNonModal || isSubmenu,\n      isKeyboardDismissDisabled,\n      shouldCloseOnInteractOutside\n    },\n    groupRef ?? popoverRef\n  );\n\n  let {overlayProps: positionProps, arrowProps, placement, triggerAnchorPoint: origin} = useOverlayPosition({\n    ...otherProps,\n    targetRef: triggerRef,\n    overlayRef: popoverRef,\n    isOpen: state.isOpen,\n    onClose: isNonModal && !isSubmenu ? state.close : null\n  });\n\n  usePreventScroll({\n    isDisabled: isNonModal || !state.isOpen\n  });\n\n  useEffect(() => {\n    if (state.isOpen && popoverRef.current) {\n      if (isNonModal) {\n        return keepVisible(groupRef?.current ?? popoverRef.current);\n      } else {\n        return ariaHideOutside([groupRef?.current ?? popoverRef.current], {shouldUseInert: true});\n      }\n    }\n  }, [isNonModal, state.isOpen, popoverRef, groupRef]);\n\n  return {\n    popoverProps: mergeProps(overlayProps, positionProps),\n    arrowProps,\n    underlayProps,\n    placement,\n    triggerAnchorPoint: origin\n  };\n}\n"],"names":[],"version":3,"file":"usePopover.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/overlays",
-  "version": "3.27.3",
+  "version": "3.29.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -26,16 +26,16 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.20.5",
-    "@react-aria/i18n": "^3.12.10",
-    "@react-aria/interactions": "^3.25.3",
-    "@react-aria/ssr": "^3.9.9",
-    "@react-aria/utils": "^3.29.1",
-    "@react-aria/visually-hidden": "^3.8.25",
-    "@react-stately/overlays": "^3.6.17",
-    "@react-types/button": "^3.12.2",
-    "@react-types/overlays": "^3.8.16",
-    "@react-types/shared": "^3.30.0",
+    "@react-aria/focus": "^3.21.1",
+    "@react-aria/i18n": "^3.12.12",
+    "@react-aria/interactions": "^3.25.5",
+    "@react-aria/ssr": "^3.9.10",
+    "@react-aria/utils": "^3.30.1",
+    "@react-aria/visually-hidden": "^3.8.27",
+    "@react-stately/overlays": "^3.6.19",
+    "@react-types/button": "^3.14.0",
+    "@react-types/overlays": "^3.9.1",
+    "@react-types/shared": "^3.32.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -45,5 +45,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a063122082d2b372e4846b58c85ae69ec73887ff"
+  "gitHead": "2c58ed3ddd9be9100af9b1d0cfd137fcdc95ba2d"
 }

package/src/Overlay.tsx

@@ -43,7 +43,8 @@ export interface OverlayProps {
   isExiting?: boolean
 }
 
-export const OverlayContext = React.createContext<{contain: boolean, setContain: React.Dispatch<React.SetStateAction<boolean>>} | null>(null);
+export const OverlayContext: React.Context<{contain: boolean, setContain: React.Dispatch<React.SetStateAction<boolean>>} | null> =
+  React.createContext<{contain: boolean, setContain: React.Dispatch<React.SetStateAction<boolean>>} | null>(null);
 
 /**
  * A container which renders an overlay such as a popover or modal in a portal,

package/src/PortalProvider.tsx

@@ -21,7 +21,7 @@ export interface PortalProviderProps {
 
 export interface PortalProviderContextValue extends Omit<PortalProviderProps, 'children'>{};
 
-export const PortalContext = createContext<PortalProviderContextValue>({});
+export const PortalContext: React.Context<PortalProviderContextValue> = createContext<PortalProviderContextValue>({});
 
 /**
  * Sets the portal container for all overlay elements rendered by its children.

package/src/ariaHideOutside.ts

@@ -10,6 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {getOwnerWindow} from '@react-aria/utils';
+const supportsInert = typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype;
+
+interface AriaHideOutsideOptions {
+  root?: Element,
+  shouldUseInert?: boolean
+}
+
 // Keeps a ref count of all hidden elements. Added to when hiding an element, and
 // subtracted from when showing it again. When it reaches zero, aria-hidden is removed.
 let refCountMap = new WeakMap<Element, number>();
@@ -29,10 +37,33 @@ let observerStack: Array<ObserverWrapper> = [];
  * @param root - Nothing will be hidden above this element.
  * @returns - A function to restore all hidden elements.
  */
-export function ariaHideOutside(targets: Element[], root = document.body) {
+export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOptions | Element) {
+  let windowObj = getOwnerWindow(targets?.[0]);
+  let opts = options instanceof windowObj.Element ? {root: options} : options;
+  let root = opts?.root ?? document.body;
+  let shouldUseInert = opts?.shouldUseInert && supportsInert;
   let visibleNodes = new Set<Element>(targets);
   let hiddenNodes = new Set<Element>();
 
+  let getHidden = (element: Element) => {
+    return shouldUseInert && element instanceof windowObj.HTMLElement ? element.inert : element.getAttribute('aria-hidden') === 'true';
+  };
+
+  let setHidden = (element: Element, hidden: boolean) => {
+    if (shouldUseInert && element instanceof windowObj.HTMLElement) {
+      element.inert = hidden;
+    } else if (hidden) {
+      element.setAttribute('aria-hidden', 'true');
+    } else {
+      element.removeAttribute('aria-hidden');
+      if (element instanceof windowObj.HTMLElement) {
+        // We only ever call setHidden with hidden = false when the nodeCount is 1 aka
+        // we are trying to make the element visible to screen readers again, so remove inert as well
+        element.inert = false;
+      }
+    }
+  };
+
   let walk = (root: Element) => {
     // 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]')) {
@@ -45,6 +76,7 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
       // 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 (
+        hiddenNodes.has(node) ||
         visibleNodes.has(node) ||
         (node.parentElement && hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row')
       ) {
@@ -87,12 +119,12 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
 
     // If already aria-hidden, and the ref count is zero, then this element
     // was already hidden and there's nothing for us to do.
-    if (node.getAttribute('aria-hidden') === 'true' && refCount === 0) {
+    if (getHidden(node) && refCount === 0) {
       return;
     }
 
     if (refCount === 0) {
-      node.setAttribute('aria-hidden', 'true');
+      setHidden(node, true);
     }
 
     hiddenNodes.add(node);
@@ -109,20 +141,13 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
 
   let observer = new MutationObserver(changes => {
     for (let change of changes) {
-      if (change.type !== 'childList' || change.addedNodes.length === 0) {
+      if (change.type !== 'childList') {
         continue;
       }
 
       // If the parent element of the added nodes is not within one of the targets,
       // and not already inside a hidden node, hide all of the new children.
       if (![...visibleNodes, ...hiddenNodes].some(node => node.contains(change.target))) {
-        for (let node of change.removedNodes) {
-          if (node instanceof Element) {
-            visibleNodes.delete(node);
-            hiddenNodes.delete(node);
-          }
-        }
-
         for (let node of change.addedNodes) {
           if (
             (node instanceof HTMLElement || node instanceof SVGElement) &&
@@ -161,7 +186,7 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
         continue;
       }
       if (count === 1) {
-        node.removeAttribute('aria-hidden');
+        setHidden(node, false);
         refCountMap.delete(node);
       } else {
         refCountMap.set(node, count - 1);
@@ -180,7 +205,7 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
   };
 }
 
-export function keepVisible(element: Element) {
+export function keepVisible(element: Element): (() => void) | undefined {
   let observer = observerStack[observerStack.length - 1];
   if (observer && !observer.visibleNodes.has(element)) {
     observer.visibleNodes.add(element);

package/src/calculatePosition.ts

@@ -67,6 +67,7 @@ export interface PositionResult {
   position: Position,
   arrowOffsetLeft?: number,
   arrowOffsetTop?: number,
+  triggerAnchorPoint: {x: number, y: number},
   maxHeight: number,
   placement: PlacementAxis
 }
@@ -419,7 +420,8 @@ export function calculatePositionInternal(
   // childOffset[crossAxis] + .5 * childOffset[crossSize] = absolute position with respect to the trigger's coordinate system that would place the arrow in the center of the trigger
   // position[crossAxis] - margins[AXIS[crossAxis]] = value use to transform the position to a value with respect to the overlay's coordinate system. A child element's (aka arrow) position absolute's "0"
   // is positioned after the margin of its parent (aka overlay) so we need to subtract it to get the proper coordinate transform
-  let preferredArrowPosition = childOffset[crossAxis] + .5 * childOffset[crossSize] - position[crossAxis]! - margins[AXIS[crossAxis]];
+  let origin = childOffset[crossAxis] - position[crossAxis]! - margins[AXIS[crossAxis]];
+  let preferredArrowPosition = origin + .5 * childOffset[crossSize];
 
   // Min/Max position limits for the arrow with respect to the overlay
   const arrowMinPosition = arrowSize / 2 + arrowBoundaryOffset;
@@ -436,12 +438,30 @@ export function calculatePositionInternal(
   const arrowPositionOverlappingChild = clamp(preferredArrowPosition, arrowOverlappingChildMinEdge, arrowOverlappingChildMaxEdge);
   arrowPosition[crossAxis] = clamp(arrowPositionOverlappingChild, arrowMinPosition, arrowMaxPosition);
 
+  // If there is an arrow, use that as the origin so that animations are smooth.
+  // Otherwise use the target edge.
+  ({placement, crossPlacement} = placementInfo);
+  if (arrowSize) {
+    origin = arrowPosition[crossAxis];
+  } else if (crossPlacement === 'right') {
+    origin += childOffset[crossSize];
+  } else if (crossPlacement === 'center') {
+    origin += childOffset[crossSize] / 2;
+  }
+
+  let crossOrigin = placement === 'left' || placement === 'top' ? overlaySize[size] : 0;
+  let triggerAnchorPoint = {
+    x: placement === 'top' || placement === 'bottom' ? origin : crossOrigin,
+    y: placement === 'left' || placement === 'right' ? origin : crossOrigin
+  };
+
   return {
     position,
     maxHeight: maxHeight,
     arrowOffsetLeft: arrowPosition.left,
     arrowOffsetTop: arrowPosition.top,
-    placement: placementInfo.placement
+    placement,
+    triggerAnchorPoint
   };
 }
 

package/src/useModalOverlay.ts

@@ -58,7 +58,7 @@ export function useModalOverlay(props: AriaModalOverlayProps, state: OverlayTrig
 
   useEffect(() => {
     if (state.isOpen && ref.current) {
-      return ariaHideOutside([ref.current]);
+      return ariaHideOutside([ref.current], {shouldUseInert: true});
     }
   }, [state.isOpen, ref]);
 

package/src/useOverlayPosition.ts

@@ -37,6 +37,10 @@ export interface AriaPositionProps extends PositionProps {
    * The ref for the overlay element.
    */
   overlayRef: RefObject<Element | null>,
+  /**
+   * The ref for the arrow element.
+   */
+  arrowRef?: RefObject<Element | null>,
   /**
    * A ref for the scrollable region within the overlay.
    * @default overlayRef
@@ -68,6 +72,8 @@ export interface PositionAria {
   arrowProps: DOMAttributes,
   /** Placement of the overlay with respect to the overlay trigger. */
   placement: PlacementAxis | null,
+  /** The origin of the target in the overlay's coordinate system. Useful for animations. */
+  triggerAnchorPoint: {x: number, y: number} | null,
   /** Updates the position of the overlay. */
   updatePosition(): void
 }
@@ -86,9 +92,10 @@ let visualViewport = typeof document !== 'undefined' ? window.visualViewport : n
 export function useOverlayPosition(props: AriaPositionProps): PositionAria {
   let {direction} = useLocale();
   let {
-    arrowSize = 0,
+    arrowSize,
     targetRef,
     overlayRef,
+    arrowRef,
     scrollRef = overlayRef,
     placement = 'bottom' as Placement,
     containerPadding = 12,
@@ -109,6 +116,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     placement,
     overlayRef.current,
     targetRef.current,
+    arrowRef?.current,
     scrollRef.current,
     containerPadding,
     shouldFlip,
@@ -141,6 +149,17 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
       return;
     }
 
+    // Delay updating the position until children are finished rendering (e.g. collections).
+    if (overlayRef.current.querySelector('[data-react-aria-incomplete]')) {
+      return;
+    }
+
+    // Don't update while the overlay is animating.
+    // Things like scale animations can mess up positioning by affecting the overlay's computed size.
+    if (overlayRef.current.getAnimations?.().length > 0) {
+      return;
+    }
+
     // Determine a scroll anchor based on the focused element.
     // This stores the offset of the anchor element from the scroll container
     // so it can be restored after repositioning. This way if the overlay height
@@ -181,7 +200,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
       offset,
       crossOffset,
       maxHeight,
-      arrowSize,
+      arrowSize: arrowSize ?? arrowRef?.current?.getBoundingClientRect().width ?? 0,
       arrowBoundaryOffset
     });
 
@@ -280,13 +299,16 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
   return {
     overlayProps: {
       style: {
-        position: 'absolute',
+        position: position ? 'absolute' : 'fixed',
+        top: !position ? 0 : undefined,
+        left: !position ? 0 : undefined,
         zIndex: 100000, // should match the z-index in ModalTrigger
         ...position?.position,
         maxHeight: position?.maxHeight ?? '100vh'
       }
     },
     placement: position?.placement ?? null,
+    triggerAnchorPoint: position?.triggerAnchorPoint ?? null,
     arrowProps: {
       'aria-hidden': 'true',
       role: 'presentation',

package/src/usePopover.ts

@@ -13,9 +13,10 @@
 import {ariaHideOutside, keepVisible} from './ariaHideOutside';
 import {AriaPositionProps, useOverlayPosition} from './useOverlayPosition';
 import {DOMAttributes, RefObject} from '@react-types/shared';
-import {mergeProps, useLayoutEffect} from '@react-aria/utils';
+import {mergeProps} from '@react-aria/utils';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import {PlacementAxis} from '@react-types/overlays';
+import {useEffect} from 'react';
 import {useOverlay} from './useOverlay';
 import {usePreventScroll} from './usePreventScroll';
 
@@ -28,6 +29,8 @@ export interface AriaPopoverProps extends Omit<AriaPositionProps, 'isOpen' | 'on
    * The ref for the popover element.
    */
   popoverRef: RefObject<Element | null>,
+  /** A ref for the popover arrow element. */
+  arrowRef?: RefObject<Element | null>,
   /**
    * An optional ref for a group of popovers, e.g. submenus.
    * When provided, this element is used to detect outside interactions
@@ -69,7 +72,9 @@ export interface PopoverAria {
   /** Props to apply to the underlay element, if any. */
   underlayProps: DOMAttributes,
   /** Placement of the popover with respect to the trigger. */
-  placement: PlacementAxis | null
+  placement: PlacementAxis | null,
+  /** The origin of the target in the overlay's coordinate system. Useful for animations. */
+  triggerAnchorPoint: {x: number, y: number} | null
 }
 
 /**
@@ -101,7 +106,7 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
     groupRef ?? popoverRef
   );
 
-  let {overlayProps: positionProps, arrowProps, placement} = useOverlayPosition({
+  let {overlayProps: positionProps, arrowProps, placement, triggerAnchorPoint: origin} = useOverlayPosition({
     ...otherProps,
     targetRef: triggerRef,
     overlayRef: popoverRef,
@@ -113,12 +118,12 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
     isDisabled: isNonModal || !state.isOpen
   });
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (state.isOpen && popoverRef.current) {
       if (isNonModal) {
         return keepVisible(groupRef?.current ?? popoverRef.current);
       } else {
-        return ariaHideOutside([groupRef?.current ?? popoverRef.current]);
+        return ariaHideOutside([groupRef?.current ?? popoverRef.current], {shouldUseInert: true});
       }
     }
   }, [isNonModal, state.isOpen, popoverRef, groupRef]);
@@ -127,6 +132,7 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
     popoverProps: mergeProps(overlayProps, positionProps),
     arrowProps,
     underlayProps,
-    placement
+    placement,
+    triggerAnchorPoint: origin
   };
 }