fix: render portals in PortalProvider's new container bounds prop

package.json

@@ -203,6 +203,7 @@
     "recursive-readdir": "^2.2.2",
     "regenerator-runtime": "0.13.3",
     "rimraf": "^2.6.3",
+    "shadow-dom-testing-library": "^1.13.1",
     "sharp": "^0.33.5",
     "sinon": "^7.3.1",
     "storybook": "^8.6.14",

packages/@react-aria/calendar/src/useRangeCalendar.ts

@@ -14,7 +14,7 @@ import {AriaRangeCalendarProps, DateValue} from '@react-types/calendar';
 import {CalendarAria, useCalendarBase} from './useCalendarBase';
 import {FocusableElement, RefObject} from '@react-types/shared';
 import {RangeCalendarState} from '@react-stately/calendar';
-import {useEvent} from '@react-aria/utils';
+import {nodeContains, useEvent} from '@react-aria/utils';
 import {useRef} from 'react';
 
 /**
@@ -66,7 +66,7 @@ export function useRangeCalendar<T extends DateValue>(props: AriaRangeCalendarPr
     if (!ref.current) {
       return;
     }
-    if ((!e.relatedTarget || !ref.current.contains(e.relatedTarget)) && state.anchorDate) {
+    if ((!e.relatedTarget || !nodeContains(ref.current, e.relatedTarget as Element)) && state.anchorDate) {
       state.selectFocusedDate();
     }
   };

packages/@react-aria/combobox/package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "@react-aria/focus": "^3.21.2",
     "@react-aria/i18n": "^3.12.13",
+    "@react-aria/interactions": "^3.25.6",
     "@react-aria/listbox": "^3.15.0",
     "@react-aria/live-announcer": "^3.4.4",
     "@react-aria/menu": "^3.19.3",

packages/@react-aria/combobox/src/useComboBox.ts

@@ -16,7 +16,7 @@ import {AriaComboBoxProps} from '@react-types/combobox';
 import {ariaHideOutside} from '@react-aria/overlays';
 import {AriaListBoxOptions, getItemId, listData} from '@react-aria/listbox';
 import {BaseEvent, DOMAttributes, KeyboardDelegate, LayoutDelegate, PressEvent, RefObject, RouterOptions, ValidationResult} from '@react-types/shared';
-import {chain, getActiveElement, getOwnerDocument, isAppleDevice, mergeProps, useEvent, useLabels, useRouter, useUpdateEffect} from '@react-aria/utils';
+import {chain, getActiveElement, getOwnerDocument, isAppleDevice, mergeProps, nodeContains, useEvent, useLabels, useRouter, useUpdateEffect} from '@react-aria/utils';
 import {ComboBoxState} from '@react-stately/combobox';
 import {dispatchVirtualFocus} from '@react-aria/focus';
 import {FocusEvent, InputHTMLAttributes, KeyboardEvent, TouchEvent, useEffect, useMemo, useRef} from 'react';
@@ -25,6 +25,7 @@ import {getChildNodes, getItemCount} from '@react-stately/collections';
 import intlMessages from '../intl/*.json';
 import {ListKeyboardDelegate, useSelectableCollection} from '@react-aria/selection';
 import {privateValidationStateProp} from '@react-stately/form';
+import {useInteractOutside} from '@react-aria/interactions';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useMenuTrigger} from '@react-aria/menu';
 import {useTextField} from '@react-aria/textfield';
@@ -181,9 +182,27 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
 
   let onBlur = (e: FocusEvent<HTMLInputElement>) => {
     let blurFromButton = buttonRef?.current && buttonRef.current === e.relatedTarget;
-    let blurIntoPopover = popoverRef.current?.contains(e.relatedTarget);
+    let blurIntoPopover = popoverRef.current && nodeContains(popoverRef.current, e.relatedTarget as Element);
+    let blurFromButton = buttonRef?.current && nodeContains(buttonRef.current, e.relatedTarget as Element);
+    let blurIntoPopover = popoverRef.current && nodeContains(popoverRef.current, e.relatedTarget as Element);
+
+    // Special handling for Shadow DOM: When focus moves into a shadow root portal,
+    // relatedTarget is retargeted to the shadow HOST, not the content inside.
+    // Check if relatedTarget is a shadow host that CONTAINS our popover.
+    let blurIntoShadowHostWithPopover = false;
+    if (!blurIntoPopover && e.relatedTarget && popoverRef.current) {
+      let relatedEl = e.relatedTarget as Element;
+      if ('shadowRoot' in relatedEl && (relatedEl as any).shadowRoot) {
+        // relatedTarget is a shadow host - check if popover is inside its shadow root
+        let shadowRoot = (relatedEl as any).shadowRoot;
+        if (nodeContains(shadowRoot, popoverRef.current) && !nodeContains(shadowRoot, inputRef.current)) {
+          blurIntoShadowHostWithPopover = true;
+        }
+      }
+    }
+
     // Ignore blur if focused moved to the button(if exists) or into the popover.
-    if (blurFromButton || blurIntoPopover) {
+    if (blurFromButton || blurIntoPopover || blurIntoShadowHostWithPopover) {
       return;
     }
 
@@ -358,6 +377,16 @@ export function useComboBox<T>(props: AriaComboBoxOptions<T>, state: ComboBoxSta
     state.close();
   } : undefined);
 
+  // Add interact outside handling for the popover to support Shadow DOM contexts
+  // where blur events don't fire when clicking non-focusable elements
+  useInteractOutside({
+    ref: popoverRef,
+    onInteractOutside: () => {
+      state.setFocused(false);
+    },
+    isDisabled: !state.isOpen
+  });
+
   return {
     labelProps,
     buttonProps: {

packages/@react-aria/datepicker/src/useDatePicker.ts

@@ -17,7 +17,7 @@ import {CalendarProps} from '@react-types/calendar';
 import {createFocusManager} from '@react-aria/focus';
 import {DatePickerState} from '@react-stately/datepicker';
 import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, nodeContains, useDescription, useId} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {privateValidationStateProp} from '@react-stately/form';
@@ -84,7 +84,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
     onBlurWithin: e => {
       // Ignore when focus moves into the popover.
       let dialog = document.getElementById(dialogId);
-      if (!dialog?.contains(e.relatedTarget)) {
+      if (!dialog || !nodeContains(dialog, e.relatedTarget as Element)) {
         isFocused.current = false;
         props.onBlur?.(e);
         props.onFocusChange?.(false);

packages/@react-aria/datepicker/src/useDateRangePicker.ts

@@ -18,7 +18,7 @@ import {DateRange, RangeCalendarProps} from '@react-types/calendar';
 import {DateRangePickerState} from '@react-stately/datepicker';
 import {DEFAULT_VALIDATION_RESULT, mergeValidation, privateValidationStateProp} from '@react-stately/form';
 import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, nodeContains, useDescription, useId} from '@react-aria/utils';
 import {focusManagerSymbol, roleSymbol} from './useDateField';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -116,7 +116,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     onBlurWithin: e => {
       // Ignore when focus moves into the popover.
       let dialog = document.getElementById(dialogId);
-      if (!dialog?.contains(e.relatedTarget)) {
+      if (!dialog || !nodeContains(dialog, e.relatedTarget as Element)) {
         isFocused.current = false;
         props.onBlur?.(e);
         props.onFocusChange?.(false);

packages/@react-aria/interactions/src/useFocusWithin.ts

@@ -61,7 +61,21 @@ export function useFocusWithin(props: FocusWithinProps): FocusWithinResult {
     // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
     // when moving focus inside the element. Only trigger if the currentTarget doesn't
     // include the relatedTarget (where focus is moving).
-    if (state.current.isFocusWithin && !(e.currentTarget as Element).contains(e.relatedTarget as Element)) {
+    let relatedTargetInside = nodeContains(e.currentTarget as Element, e.relatedTarget as Element);
+
+    // Special handling for Shadow DOM: When focus moves into a shadow root, the relatedTarget
+    // is the shadow host, not the actual element inside. Check if the shadow host's shadow root
+    // contains the currentTarget (the overlay that's inside the shadow root).
+    if (!relatedTargetInside && e.relatedTarget && 'shadowRoot' in e.relatedTarget) {
+      let shadowHost = e.relatedTarget as Element;
+      let shadowRoot = (shadowHost as any).shadowRoot;
+      if (shadowRoot && nodeContains(shadowRoot, e.currentTarget as Element)) {
+        // Focus is moving within the same shadow root that contains the overlay
+        relatedTargetInside = true;
+      }
+    }
+
+    if (state.current.isFocusWithin && !relatedTargetInside) {
       state.current.isFocusWithin = false;
       removeAllGlobalListeners();
 

packages/@react-aria/overlays/src/PortalProvider.tsx

@@ -15,6 +15,8 @@ import React, {createContext, JSX, ReactNode, useContext} from 'react';
 export interface PortalProviderProps {
   /** Should return the element where we should portal to. Can clear the context by passing null. */
   getContainer?: (() => HTMLElement | null) | null,
+  /** Returns the visual bounds of the container where overlays should be constrained. Used for shadow DOM and iframe scenarios. */
+  getContainerBounds?: (() => DOMRect | null) | null,
   /** The content of the PortalProvider. Should contain all children that want to portal their overlays to the element returned by the provided `getContainer()`. */
   children: ReactNode
 }
@@ -27,10 +29,15 @@ export const PortalContext: React.Context<PortalProviderContextValue> = createCo
  * Sets the portal container for all overlay elements rendered by its children.
  */
 export function UNSAFE_PortalProvider(props: PortalProviderProps): JSX.Element {
-  let {getContainer} = props;
-  let {getContainer: ctxGetContainer} = useUNSAFE_PortalContext();
+  let {getContainer, getContainerBounds} = props;
+  let {getContainer: ctxGetContainer, getContainerBounds: ctxGetContainerBounds} = useUNSAFE_PortalContext();
+
   return (
-    <PortalContext.Provider value={{getContainer: getContainer === null ? undefined : getContainer ?? ctxGetContainer}}>
+    <PortalContext.Provider
+      value={{
+        getContainer: getContainer === null ? undefined : getContainer ?? ctxGetContainer,
+        getContainerBounds: getContainerBounds === null ? undefined : getContainerBounds ?? ctxGetContainerBounds
+      }}>
       {props.children}
     </PortalContext.Provider>
   );

packages/@react-aria/overlays/src/ariaHideOutside.ts

@@ -71,6 +71,27 @@ export function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOpt
     }
 
     let acceptNode = (node: Element) => {
+      // Special handling for shadow hosts: If a shadow host contains a visible target,
+      // ensure it's not hidden (even if previously marked inert by parent overlays).
+      // Must check this BEFORE hiddenNodes check to handle nested overlay scenarios.
+      if ('shadowRoot' in node && (node as any).shadowRoot) {
+        let shadowRoot = (node as any).shadowRoot;
+        for (let target of visibleNodes) {
+          if (!shadowRoot.contains(target)) {
+            continue;
+          }
+          visibleNodes.add(node);
+          if (getHidden(node)) {
+            setHidden(node, false);
+            let count = refCountMap.get(node);
+            if (count && count > 0) {
+              refCountMap.set(node, count - 1);
+            }
+          }
+          return NodeFilter.FILTER_REJECT;
+        }
+      }
+
       // 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".

packages/@react-aria/overlays/src/calculatePosition.ts

@@ -58,7 +58,8 @@ interface PositionOpts {
   offset: number,
   crossOffset: number,
   maxHeight?: number,
-  arrowBoundaryOffset?: number
+  arrowBoundaryOffset?: number,
+  containerBounds?: DOMRect | null
 }
 
 type HeightGrowthDirection = 'top' | 'bottom';
@@ -105,7 +106,7 @@ const PARSED_PLACEMENT_CACHE = {};
 
 let visualViewport = typeof document !== 'undefined' ? window.visualViewport : null;
 
-function getContainerDimensions(containerNode: Element): Dimensions {
+function getContainerDimensions(containerNode: Element, visualViewport: VisualViewport | null, containerBounds?: DOMRect | null): Dimensions {
   let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0;
   let scroll: Position = {};
   let isPinchZoomedIn = (visualViewport?.scale ?? 1) > 1;
@@ -114,17 +115,32 @@ function getContainerDimensions(containerNode: Element): Dimensions {
     let documentElement = document.documentElement;
     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;
-
-    // The goal of the below is to get a top/left value that represents the top/left of the visual viewport with
-    // respect to the layout viewport origin. This combined with the scrollTop/scrollLeft will allow us to calculate
-    // coordinates/values with respect to the visual viewport or with respect to the layout viewport.
-    if (visualViewport) {
-      top = visualViewport.offsetTop;
-      left = visualViewport.offsetLeft;
+
+    // If container bounds are provided (e.g., from PortalProvider for shadow DOM/iframe scenarios),
+    // use those instead of calculating from window/document
+    if (containerBounds) {
+      width = containerBounds.width;
+      height = containerBounds.height;
+      top = containerBounds.top;
+      left = containerBounds.left;
+      // When using containerBounds, scroll should be relative to the container's position
+      scroll.top = 0;
+      scroll.left = 0;
+    } else {
+      // Default/legacy method: use visualViewport if available, otherwise use document dimensions
+      width = visualViewport?.width ?? totalWidth;
+      height = visualViewport?.height ?? totalHeight;
+
+      scroll.top = documentElement.scrollTop || containerNode.scrollTop;
+      scroll.left = documentElement.scrollLeft || containerNode.scrollLeft;
+
+      // The goal of the below is to get a top/left value that represents the top/left of the visual viewport with
+      // respect to the layout viewport origin. This combined with the scrollTop/scrollLeft will allow us to calculate
+      // coordinates/values with respect to the visual viewport or with respect to the layout viewport.
+      if (visualViewport) {
+        top = visualViewport.offsetTop;
+        left = visualViewport.offsetLeft;
+      }
     }
   } else {
     ({width, height, top, left} = getOffset(containerNode, false));
@@ -481,7 +497,8 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
     crossOffset,
     maxHeight,
     arrowSize = 0,
-    arrowBoundaryOffset = 0
+    arrowBoundaryOffset = 0,
+    containerBounds
   } = opts;
 
   let container = overlayNode instanceof HTMLElement ? getContainingBlock(overlayNode) : document.documentElement;
@@ -502,8 +519,14 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
   overlaySize.height += (margins.top ?? 0) + (margins.bottom ?? 0);
 
   let scrollSize = getScroll(scrollNode);
-  let boundaryDimensions = getContainerDimensions(boundaryElement);
-  let containerDimensions = getContainerDimensions(container);
+
+  // Note that due to logic inside getContainerDimensions, for cases where the boundary element is the body, we will return
+  // a height/width that matches the visual viewport size rather than the body's height/width (aka for zoom it will be zoom adjusted size)
+  // and a top/left that is adjusted as well (will return the top/left of the zoomed in viewport, or 0,0 for a non-zoomed body)
+  // Otherwise this returns the height/width of a arbitrary boundary element, and its top/left with respect to the viewport (NOTE THIS MEANS IT DOESNT INCLUDE SCROLL)
+  // If containerBounds are provided, use them to constrain the boundary dimensions (e.g., for shadow DOM containers)
+  let boundaryDimensions = getContainerDimensions(boundaryElement, visualViewport, containerBounds);
+  let containerDimensions = getContainerDimensions(container, visualViewport, containerBounds);
   // If the container is the HTML element wrapping the body element, the retrieved scrollTop/scrollLeft will be equal to the
   // body element's scroll. Set the container's scroll values to 0 since the overlay's edge position value in getDelta don't then need to be further offset
   // by the container scroll since they are essentially the same containing element and thus in the same coordinate system

packages/@react-aria/overlays/src/containerBoundsUtils.ts

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * 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.
+ */
+
+import React from 'react';
+
+/**
+ * Applies container bounds positioning to a style object.
+ * When containerBounds are provided, positions the element relative to the container instead of the viewport.
+ */
+export function applyContainerBounds(
+  style: React.CSSProperties,
+  containerBounds: DOMRect | null | undefined,
+  options?: {
+    /** Whether to add flexbox centering (for modals). */
+    center?: boolean
+  }
+): void {
+  if (!containerBounds) {
+    return;
+  }
+
+  const {center = false} = options || {};
+
+  // Set positioning relative to container bounds
+  style.position = 'fixed';
+  style.top = containerBounds.top + 'px';
+  style.left = containerBounds.left + 'px';
+  style.width = containerBounds.width + 'px';
+  style.height = containerBounds.height + 'px';
+
+  // Add flexbox centering if requested
+  if (center) {
+    style.display = 'flex';
+    style.flexDirection = 'column';
+  }
+}
+

packages/@react-aria/overlays/src/index.ts

@@ -20,6 +20,8 @@ export {usePopover} from './usePopover';
 export {useModalOverlay} from './useModalOverlay';
 export {Overlay, useOverlayFocusContain} from './Overlay';
 export {UNSAFE_PortalProvider, useUNSAFE_PortalContext} from './PortalProvider';
+export {useIsInShadowRoot} from './useIsInShadowRoot';
+export {applyContainerBounds} from './containerBoundsUtils';
 
 export type {AriaPositionProps, PositionAria} from './useOverlayPosition';
 export type {AriaOverlayProps, OverlayAria} from './useOverlay';