@react-aria/overlays 3.12.1 → 3.14.0

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@react-aria/overlays",
-  "version": "3.12.1",
+  "version": "3.14.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
@@ -17,16 +22,16 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.10.1",
-    "@react-aria/i18n": "^3.6.3",
-    "@react-aria/interactions": "^3.13.1",
-    "@react-aria/ssr": "^3.4.1",
-    "@react-aria/utils": "^3.14.2",
-    "@react-aria/visually-hidden": "^3.6.1",
-    "@react-stately/overlays": "^3.4.4",
-    "@react-types/button": "^3.7.0",
-    "@react-types/overlays": "^3.6.5",
-    "@react-types/shared": "^3.16.0",
+    "@react-aria/focus": "^3.12.0",
+    "@react-aria/i18n": "^3.7.1",
+    "@react-aria/interactions": "^3.15.0",
+    "@react-aria/ssr": "^3.6.0",
+    "@react-aria/utils": "^3.16.0",
+    "@react-aria/visually-hidden": "^3.8.0",
+    "@react-stately/overlays": "^3.5.1",
+    "@react-types/button": "^3.7.2",
+    "@react-types/overlays": "^3.7.1",
+    "@react-types/shared": "^3.18.0",
     "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
@@ -36,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5480d76bd815e239366f92852c76b6831ad2a4fd"
+  "gitHead": "9d1ba9bd8ebcd63bf3495ade16d349bcb71795ce"
 }

package/src/ariaHideOutside.ts

@@ -26,36 +26,55 @@ let observerStack = [];
 export function ariaHideOutside(targets: Element[], root = document.body) {
   let visibleNodes = new Set<Element>(targets);
   let hiddenNodes = new Set<Element>();
-  let walker = document.createTreeWalker(
-    root,
-    NodeFilter.SHOW_ELEMENT,
-    {
-      acceptNode(node) {
-        // If this node is a live announcer, add it to the set of nodes to keep visible.
-        if (((node instanceof HTMLElement || node instanceof SVGElement) && node.dataset.liveAnnouncer === 'true')) {
-          visibleNodes.add(node);
-        }
 
-        // Skip this node and its children if it is one of the target nodes, or a live announcer.
-        // Also skip children of already hidden nodes, as aria-hidden is recursive. An exception is
-        // made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row".
-        // For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
-        if (
-          visibleNodes.has(node as Element) ||
-          (hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row')
-        ) {
-          return NodeFilter.FILTER_REJECT;
-        }
+  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]')) {
+      visibleNodes.add(element);
+    }
+
+    let acceptNode = (node: Element) => {
+      // Skip this node and its children if it is one of the target nodes, or a live announcer.
+      // Also skip children of already hidden nodes, as aria-hidden is recursive. An exception is
+      // made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row".
+      // For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
+      if (
+        visibleNodes.has(node) ||
+        (hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row')
+      ) {
+        return NodeFilter.FILTER_REJECT;
+      }
 
-        // Skip this node but continue to children if one of the targets is inside the node.
-        if (targets.some(target => node.contains(target))) {
+      // Skip this node but continue to children if one of the targets is inside the node.
+      for (let target of visibleNodes) {
+        if (node.contains(target)) {
           return NodeFilter.FILTER_SKIP;
         }
+      }
+
+      return NodeFilter.FILTER_ACCEPT;
+    };
+
+    let walker = document.createTreeWalker(
+      root,
+      NodeFilter.SHOW_ELEMENT,
+      {acceptNode}
+    );
 
-        return NodeFilter.FILTER_ACCEPT;
+    // TreeWalker does not include the root.
+    let acceptRoot = acceptNode(root);
+    if (acceptRoot === NodeFilter.FILTER_ACCEPT) {
+      hide(root);
+    }
+
+    if (acceptRoot !== NodeFilter.FILTER_REJECT) {
+      let node = walker.nextNode() as Element;
+      while (node != null) {
+        hide(node);
+        node = walker.nextNode() as Element;
       }
     }
-  );
+  };
 
   let hide = (node: Element) => {
     let refCount = refCountMap.get(node) ?? 0;
@@ -80,11 +99,7 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
     observerStack[observerStack.length - 1].disconnect();
   }
 
-  let node = walker.nextNode() as Element;
-  while (node != null) {
-    hide(node);
-    node = walker.nextNode() as Element;
-  }
+  walk(root);
 
   let observer = new MutationObserver(changes => {
     for (let change of changes) {
@@ -95,11 +110,21 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
       // 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) && node.dataset.liveAnnouncer === 'true')) {
+          if (
+            (node instanceof HTMLElement || node instanceof SVGElement) &&
+            (node.dataset.liveAnnouncer === 'true' || node.dataset.reactAriaTopLayer === 'true')
+          ) {
             visibleNodes.add(node);
           } else if (node instanceof Element) {
-            hide(node);
+            walk(node);
           }
         }
       }

package/src/calculatePosition.ts

@@ -11,6 +11,7 @@
  */
 
 import {Axis, Placement, PlacementAxis, SizeAxis} from '@react-types/overlays';
+import {clamp} from '@react-aria/utils';
 
 interface Position {
   top?: number,
@@ -22,6 +23,8 @@ interface Position {
 interface Dimensions {
   width: number,
   height: number,
+  totalWidth: number,
+  totalHeight: number,
   top: number,
   left: number,
   scroll: Position
@@ -44,6 +47,7 @@ interface Offset {
 }
 
 interface PositionOpts {
+  arrowSize: number,
   placement: Placement,
   targetNode: Element,
   overlayNode: Element,
@@ -53,7 +57,8 @@ interface PositionOpts {
   boundaryElement: Element,
   offset: number,
   crossOffset: number,
-  maxHeight?: number
+  maxHeight?: number,
+  arrowBoundaryOffset?: number
 }
 
 export interface PositionResult {
@@ -88,19 +93,26 @@ const AXIS_SIZE = {
   left: 'width'
 };
 
+const TOTAL_SIZE = {
+  width: 'totalWidth',
+  height: 'totalHeight'
+};
+
 const PARSED_PLACEMENT_CACHE = {};
 
 // @ts-ignore
 let visualViewport = typeof window !== 'undefined' && window.visualViewport;
 
 function getContainerDimensions(containerNode: Element): Dimensions {
-  let width = 0, height = 0, top = 0, left = 0;
+  let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0;
   let scroll: Position = {};
 
   if (containerNode.tagName === 'BODY') {
     let documentElement = document.documentElement;
-    width = visualViewport?.width ?? documentElement.clientWidth;
-    height = visualViewport?.height ?? documentElement.clientHeight;
+    totalWidth = documentElement.clientWidth;
+    totalHeight = documentElement.clientHeight;
+    width = visualViewport?.width ?? totalWidth;
+    height = visualViewport?.height ?? totalHeight;
 
     scroll.top = documentElement.scrollTop || containerNode.scrollTop;
     scroll.left = documentElement.scrollLeft || containerNode.scrollLeft;
@@ -108,9 +120,11 @@ function getContainerDimensions(containerNode: Element): Dimensions {
     ({width, height, top, left} = getOffset(containerNode));
     scroll.top = containerNode.scrollTop;
     scroll.left = containerNode.scrollLeft;
+    totalWidth = width;
+    totalHeight = height;
   }
 
-  return {width, height, scroll, top, left};
+  return {width, height, totalWidth, totalHeight, scroll, top, left};
 }
 
 function getScroll(node: Element): Offset {
@@ -181,7 +195,9 @@ function computePosition(
   offset: number,
   crossOffset: number,
   containerOffsetWithBoundary: Offset,
-  isContainerPositioned: boolean
+  isContainerPositioned: boolean,
+  arrowSize: number,
+  arrowBoundaryOffset: number
 ) {
   let {placement, crossPlacement, axis, crossAxis, size, crossSize} = placementInfo;
   let position: Position = {};
@@ -202,13 +218,11 @@ function computePosition(
   // 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] = 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) {
@@ -216,7 +230,7 @@ function computePosition(
     // 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[TOTAL_SIZE[size]]);
     position[FLIPPED_DIRECTION[axis]] = Math.floor(containerHeight - childOffset[axis] + offset);
   } else {
     position[axis] = Math.floor(childOffset[axis] + childOffset[size] + offset);
@@ -277,11 +291,13 @@ export function calculatePositionInternal(
   offset: number,
   crossOffset: number,
   isContainerPositioned: boolean,
-  userSetMaxHeight?: number
+  userSetMaxHeight: number | undefined,
+  arrowSize: number,
+  arrowBoundaryOffset: number
 ): PositionResult {
   let placementInfo = parsePlacement(placementInput);
   let {size, crossAxis, crossSize, placement, crossPlacement} = placementInfo;
-  let position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
+  let position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
   let normalizedOffset = offset;
   let space = getAvailableSpace(
     boundaryDimensions,
@@ -295,7 +311,7 @@ export function calculatePositionInternal(
   // 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 = parsePlacement(`${FLIPPED_DIRECTION[placement]} ${crossPlacement}` as Placement);
-    let flippedPosition = computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
+    let flippedPosition = computePosition(childOffset, boundaryDimensions, overlaySize, flippedPlacementInfo, offset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
     let flippedSpace = getAvailableSpace(
       boundaryDimensions,
       containerOffsetWithBoundary,
@@ -331,12 +347,27 @@ export function calculatePositionInternal(
 
   overlaySize.height = Math.min(overlaySize.height, maxHeight);
 
-  position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned);
+  position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
   delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
   position[crossAxis] += delta;
 
   let arrowPosition: Position = {};
-  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 = clamp(preferredArrowPosition, arrowOverlappingChildMinEdge, arrowOverlappingChildMaxEdge);
+  arrowPosition[crossAxis] = clamp(arrowPositionOverlappingChild, arrowMinPosition, arrowMaxPosition);
 
   return {
     position,
@@ -361,16 +392,18 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
     boundaryElement,
     offset,
     crossOffset,
-    maxHeight
+    maxHeight,
+    arrowSize,
+    arrowBoundaryOffset = 0
   } = opts;
 
-  let container = ((overlayNode instanceof HTMLElement && overlayNode.offsetParent) || document.body) as Element;
-  let isBodyContainer = container.tagName === 'BODY';
+  let container = overlayNode instanceof HTMLElement ? getContainingBlock(overlayNode) : document.documentElement;
+  let isViewportContainer = container === document.documentElement;
   const containerPositionStyle = window.getComputedStyle(container).position;
   let isContainerPositioned = !!containerPositionStyle && containerPositionStyle !== 'static';
-  let childOffset: Offset = isBodyContainer ? getOffset(targetNode) : getPosition(targetNode, container);
+  let childOffset: Offset = isViewportContainer ? getOffset(targetNode) : getPosition(targetNode, container);
 
-  if (!isBodyContainer) {
+  if (!isViewportContainer) {
     let {marginTop, marginLeft} = window.getComputedStyle(targetNode);
     childOffset.top += parseInt(marginTop, 10) || 0;
     childOffset.left += parseInt(marginLeft, 10) || 0;
@@ -398,7 +431,9 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
     offset,
     crossOffset,
     isContainerPositioned,
-    maxHeight
+    maxHeight,
+    arrowSize,
+    arrowBoundaryOffset
   );
 }
 
@@ -433,3 +468,54 @@ function getPosition(node: Element, parent: Element): Offset {
   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 getContainingBlock(node: HTMLElement): Element {
+  // 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' &&
+    !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 && !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 isContainingBlock(node: Element): boolean {
+  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')
+  );
+}

package/src/index.ts

@@ -28,3 +28,4 @@ export type {DismissButtonProps} from './DismissButton';
 export type {AriaPopoverProps, PopoverAria} from './usePopover';
 export type {AriaModalOverlayProps, ModalOverlayAria} from './useModalOverlay';
 export type {OverlayProps} from './Overlay';
+export type {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';

package/src/useOverlayPosition.ts

@@ -19,6 +19,11 @@ import {useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
 
 export interface AriaPositionProps extends PositionProps {
+  /**
+   * Cross size of the overlay arrow in pixels.
+   * @default 0
+   */
+  arrowSize?: number,
   /**
    * Element that that serves as the positioning boundary.
    * @default document.body
@@ -48,7 +53,12 @@ export interface AriaPositionProps extends PositionProps {
    * The maxHeight specified for the overlay element.
    * By default, it will take all space up to the current viewport height.
    */
-  maxHeight?: number
+  maxHeight?: number,
+  /**
+   * The minimum distance the arrow's edge should be from the edge of the overlay element.
+   * @default 0
+   */
+  arrowBoundaryOffset?: number
 }
 
 export interface PositionAria {
@@ -72,6 +82,7 @@ let visualViewport = typeof window !== 'undefined' && window.visualViewport;
 export function useOverlayPosition(props: AriaPositionProps): PositionAria {
   let {direction} = useLocale();
   let {
+    arrowSize = 0,
     targetRef,
     overlayRef,
     scrollRef = overlayRef,
@@ -84,7 +95,8 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     shouldUpdatePosition = true,
     isOpen = true,
     onClose,
-    maxHeight
+    maxHeight,
+    arrowBoundaryOffset = 0
   } = props;
   let [position, setPosition] = useState<PositionResult>({
     position: {},
@@ -107,7 +119,9 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     crossOffset,
     isOpen,
     direction,
-    maxHeight
+    maxHeight,
+    arrowBoundaryOffset,
+    arrowSize
   ];
 
   let updatePosition = useCallback(() => {
@@ -115,20 +129,28 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
       return;
     }
 
-    setPosition(
-      calculatePosition({
-        placement: translateRTL(placement, direction),
-        overlayNode: overlayRef.current,
-        targetNode: targetRef.current,
-        scrollNode: scrollRef.current,
-        padding: containerPadding,
-        shouldFlip,
-        boundaryElement,
-        offset,
-        crossOffset,
-        maxHeight
-      })
-    );
+    let position = calculatePosition({
+      placement: translateRTL(placement, direction),
+      overlayNode: overlayRef.current,
+      targetNode: targetRef.current,
+      scrollNode: scrollRef.current,
+      padding: containerPadding,
+      shouldFlip,
+      boundaryElement,
+      offset,
+      crossOffset,
+      maxHeight,
+      arrowSize,
+      arrowBoundaryOffset
+    });
+
+    // Modify overlay styles directly so positioning happens immediately without the need of a second render
+    // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers
+    Object.keys(position.position).forEach(key => (overlayRef.current as HTMLElement).style[key] = position.position[key] + 'px');
+    (overlayRef.current as HTMLElement).style.maxHeight = position.maxHeight != null ?  position.maxHeight + 'px' : undefined;
+
+    // Trigger a set state for a second render anyway for arrow positioning
+    setPosition(position);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 
@@ -162,9 +184,11 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     };
 
     visualViewport?.addEventListener('resize', onResize);
+    visualViewport?.addEventListener('scroll', onResize);
 
     return () => {
       visualViewport?.removeEventListener('resize', onResize);
+      visualViewport?.removeEventListener('scroll', onResize);
     };
   }, [updatePosition]);
 

package/src/useOverlayTrigger.ts

@@ -11,7 +11,7 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
-import {DOMAttributes} from '@react-types/shared';
+import {DOMProps} from '@react-types/shared';
 import {onCloseMap} from './useCloseOnScroll';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import {RefObject, useEffect} from 'react';
@@ -27,14 +27,14 @@ export interface OverlayTriggerAria {
   triggerProps: AriaButtonProps,
 
   /** Props for the overlay container element. */
-  overlayProps: DOMAttributes
+  overlayProps: DOMProps
 }
 
 /**
  * Handles the behavior and accessibility for an overlay trigger, e.g. a button
  * that opens a popover, menu, or other overlay that is positioned relative to the trigger.
  */
-export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTriggerState, ref: RefObject<Element>): OverlayTriggerAria {
+export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTriggerState, ref?: RefObject<Element>): OverlayTriggerAria {
   let {type} = props;
   let {isOpen} = state;
 

package/src/usePopover.ts

@@ -16,7 +16,7 @@ import {DOMAttributes} from '@react-types/shared';
 import {mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import {PlacementAxis} from '@react-types/overlays';
-import {RefObject, useState} from 'react';
+import {RefObject} from 'react';
 import {useOverlay} from './useOverlay';
 import {usePreventScroll} from './usePreventScroll';
 
@@ -92,18 +92,8 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
     onClose: null
   });
 
-  // Delay preventing scroll until popover is positioned to avoid extra scroll padding.
-  // This requires a layout effect so that positioning has been committed to the DOM
-  // by the time usePreventScroll measures the element.
-  let [isPositioned, setPositioned] = useState(false);
-  useLayoutEffect(() => {
-    if (!isNonModal && placement) {
-      setPositioned(true);
-    }
-  }, [isNonModal, placement]);
-
   usePreventScroll({
-    isDisabled: isNonModal || !isPositioned
+    isDisabled: isNonModal
   });
 
   useLayoutEffect(() => {