chore: Deprecate UNSTABLE_portalContainer in favor for PortalProvider #7976

LFDanLu · 2025-03-21T22:58:47Z

Closes

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

RSP

… PortalContainer

rspbot · 2025-03-22T00:01:45Z

Build successful! 🎉

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

rspbot · 2025-03-25T17:07:23Z

Build successful! 🎉

devongovett

We should add documentation for this.

packages/@react-aria/overlays/docs/PortalProvider.mdx

LFDanLu · 2025-03-26T00:18:16Z

packages/@react-aria/overlays/docs/PortalProvider.mdx

+
+## Introduction
+
+`UNSTABLE_PortalProvider` is a utility wrapper component that can be used to set where components like


I know in our other docs pages that have UNSTABLE components/utilities we often don't refer to them as UNSTABLE. However, I've opted to keep that here to further highlight that this is truly UNSTABLE as in there could be unforeseen repercussions. I've however opted to NOT highlight the concerns outright (I think we had uncertainty about ariaHideOutside/focus scoping if I remember correctly)

open to opinions

my opinion #7976 (comment) :)

thanks! I like the copy, my only other thought here would be whether UNSTABLE is the right marker since it may never move out of that sate, maybe it should be UNSAFE? We might have talked about this already actually, don't quite remember...

Yeah, we talked about it, UNSAFE would be more accurate, we were worried about changing it, though I guess it was marked as UNSTABLE... so maybe this is the "release" of it where we decided to change the API to unsafe. I'm ok with doing that

yeah i kinda like marking it as UNSAFE since it does seem more accurate. if it was UNSTABLE before and we change it now, then it lives up to its name as UNSTABLE i guess?

LFDanLu · 2025-03-26T00:20:15Z

packages/@react-aria/overlays/docs/PortalProvider.mdx

+
+<PropTable links={docs.links} component={docs.exports.UNSTABLE_PortalProvider} />
+
+## Example


Bit of a contrived simple example, open to suggestions on how complex I should make it.

Also I wasn't able to get the styles from the RAC Toast pages to work here via the @import './Button.mdx' layer(button); syntax, not quite sure why :/, still digging there.

This should work:

@import '../../../react-aria-components/docs/Button.mdx' layer(button); @import "@react-aria/example-theme";

ah derp, thanks. I didn't realize that the util pages were in a different path of the site

LFDanLu · 2025-03-26T00:21:50Z

packages/@react-aria/overlays/docs/PortalProvider.mdx

+  let container = React.useRef(null);
+  return (
+    <>
+      <UNSTABLE_PortalProvider getContainer={() => container.current}>


Would it be valuable to highlight that you can use multiple of this PortalProvider if you wanted to change up where you were portalling things on a case to case basis?

I wouldn't, would make the example too long and messy and it should be easy to figure out, also, the more you use the more likely you are to see odd behaviours if you're doing non-standard things

rspbot · 2025-03-26T00:25:54Z

Build successful! 🎉

packages/@react-aria/overlays/docs/PortalProvider.mdx

rspbot · 2025-03-27T23:15:13Z

Build successful! 🎉

devongovett · 2025-03-28T21:48:04Z

packages/@react-aria/overlays/docs/PortalProvider.mdx

+
+Please note that `UNSTABLE_PortalProvider` is considered `UNSTABLE` because it is an escape hatch, and there are
+many places that an application could portal to. Not all of them will work, either with styling, accessibility,
+or for a variety of other reasons. Typically, it is best to portal to the root of the entire application, typically the `body` element,


Suggested change

or for a variety of other reasons. Typically, it is best to portal to the root of the entire application, typically the `body` element,

or for a variety of other reasons. Typically, it is best to portal to the root of the entire application, e.g. the `body` element,

devongovett · 2025-03-28T21:51:18Z

packages/@react-aria/overlays/docs/PortalProvider.mdx

+}
+///- end collapse -///
+
+// See the above Toast docs link for the ToastRegion implementation


This comment didn't appear. Maybe split this into two blocks: tsx import to just define the components without rendering them.

packages/@react-aria/overlays/docs/PortalProvider.mdx

rspbot · 2025-03-29T00:41:05Z

Build successful! 🎉

rspbot · 2025-03-31T01:39:39Z

Build successful! 🎉

packages/@react-aria/overlays/docs/PortalProvider.mdx

snowystinger · 2025-03-31T01:35:17Z

packages/@react-aria/overlays/docs/PortalProvider.mdx

+
+The example below shows how you can use `UNSAFE_PortalProvider` to portal your Toasts to an arbitrary container. Note that
+the Toast in this example is taken directly from the [React Aria Components Toast documentation](Toast.html#example), please visit that page for
+a detailed explanation of its implementation.


add something like

"This is a contrived example, we do not recommend portalling toasts to a container in the middle of an application."

Do we really want/need to point that out? IMHO, I think it should be fairly clear that this is a contrived example for the sake of illustrating the API, I figure people who come to this page will already have a defined use case in mind for the PortalProvider.

Happy to add it if others also feel like it should be added, just trying to be as conservative as possible with the docs length as we've discussed in the past

That's fine
Would it be a shorter example to use Tooltips? Or is there a bunch of style overrides you'd need to do for it?

I mainly opted not to use tooltips because it felt like a less likely use case (at least it felt like the PortalProvider came up more in a Toast context both from external and internal users haha)

snowystinger · 2025-03-31T01:45:05Z

packages/@react-aria/overlays/docs/PortalProvider.mdx

+
+<PropTable links={docs.links} component={docs.exports.UNSTABLE_PortalProvider} />
+
+## Example


This should work:

@import '../../../react-aria-components/docs/Button.mdx' layer(button); @import "@react-aria/example-theme";

rspbot · 2025-03-31T18:35:11Z

Build successful! 🎉

rspbot · 2025-03-31T18:35:12Z

## API Changes

react-aria-components

/react-aria-components:Modal

 Modal {
-  UNSTABLE_portalContainer?: Element = document.body
   children?: ReactNode | ((ModalRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ModalRenderProps & {
 })) => string
   defaultOpen?: boolean
   isDismissable?: boolean = false
   isEntering?: boolean
   isExiting?: boolean
   isKeyboardDismissDisabled?: boolean = false
   isOpen?: boolean
   onOpenChange?: (boolean) => void
   shouldCloseOnInteractOutside?: (Element) => boolean
   slot?: string | null
   style?: CSSProperties | ((ModalRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:ModalOverlay

 ModalOverlay {
-  UNSTABLE_portalContainer?: Element = document.body
   children?: ReactNode | ((ModalRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ModalRenderProps & {
 })) => string
   defaultOpen?: boolean
   isDismissable?: boolean = false
   isEntering?: boolean
   isExiting?: boolean
   isKeyboardDismissDisabled?: boolean = false
   isOpen?: boolean
   onOpenChange?: (boolean) => void
   shouldCloseOnInteractOutside?: (Element) => boolean
   slot?: string | null
   style?: CSSProperties | ((ModalRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:Popover

 Popover {
-  UNSTABLE_portalContainer?: Element = document.body
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   boundaryElement?: Element = document.body
   children?: ReactNode | ((PopoverRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((PopoverRenderProps & {
     defaultClassName: string | undefined
 })) => string
   containerPadding?: number = 12
   crossOffset?: number = 0
   defaultOpen?: boolean
   isEntering?: boolean
   isExiting?: boolean
   isKeyboardDismissDisabled?: boolean = false
   isNonModal?: boolean
   isOpen?: boolean
   maxHeight?: number
   offset?: number = 8
   onOpenChange?: (boolean) => void
   placement?: Placement = 'bottom'
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldCloseOnInteractOutside?: (Element) => boolean
   shouldFlip?: boolean = true
   shouldUpdatePosition?: boolean = true
   slot?: string | null
   style?: CSSProperties | ((PopoverRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   trigger?: string
   triggerRef?: RefObject<Element | null>
 }

/react-aria-components:UNSTABLE_ToastRegion

 UNSTABLE_ToastRegion <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string = "Notifications"
   aria-labelledby?: string
   children: ({
     toast: QueuedToast<T>
 }) => ReactElement
   className?: string | ((ToastRegionRenderProps<T> & {
     defaultClassName: string | undefined
 })) => string
-  portalContainer?: Element = document.body
   queue: ToastQueue<T>
   style?: CSSProperties | ((ToastRegionRenderProps<T> & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined

/react-aria-components:Tooltip

 Tooltip {
-  UNSTABLE_portalContainer?: Element = document.body
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((TooltipRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((TooltipRenderProps & {
     defaultClassName: string | undefined
 })) => string
   containerPadding?: number = 12
   crossOffset?: number = 0
   defaultOpen?: boolean
   isEntering?: boolean
   isExiting?: boolean
   isOpen?: boolean
   offset?: number = 0
   onOpenChange?: (boolean) => void
   placement?: Placement = 'top'
   shouldFlip?: boolean = true
   style?: CSSProperties | ((TooltipRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   triggerRef?: RefObject<Element | null>
 }

/react-aria-components:ModalOverlayProps

 ModalOverlayProps {
-  UNSTABLE_portalContainer?: Element = document.body
   children?: ReactNode | ((ModalRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((ModalRenderProps & {
 })) => string
   defaultOpen?: boolean
   isDismissable?: boolean = false
   isEntering?: boolean
   isExiting?: boolean
   isKeyboardDismissDisabled?: boolean = false
   isOpen?: boolean
   onOpenChange?: (boolean) => void
   shouldCloseOnInteractOutside?: (Element) => boolean
   slot?: string | null
   style?: CSSProperties | ((ModalRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:PopoverProps

 PopoverProps {
-  UNSTABLE_portalContainer?: Element = document.body
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   boundaryElement?: Element = document.body
   children?: ReactNode | ((PopoverRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((PopoverRenderProps & {
     defaultClassName: string | undefined
 })) => string
   containerPadding?: number = 12
   crossOffset?: number = 0
   defaultOpen?: boolean
   isEntering?: boolean
   isExiting?: boolean
   isKeyboardDismissDisabled?: boolean = false
   isNonModal?: boolean
   isOpen?: boolean
   maxHeight?: number
   offset?: number = 8
   onOpenChange?: (boolean) => void
   placement?: Placement = 'bottom'
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldCloseOnInteractOutside?: (Element) => boolean
   shouldFlip?: boolean = true
   shouldUpdatePosition?: boolean = true
   slot?: string | null
   style?: CSSProperties | ((PopoverRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   trigger?: string
   triggerRef?: RefObject<Element | null>
 }

/react-aria-components:ToastRegionProps

 ToastRegionProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string = "Notifications"
   aria-labelledby?: string
   children: ({
     toast: QueuedToast<T>
 }) => ReactElement
   className?: string | ((ToastRegionRenderProps<T> & {
     defaultClassName: string | undefined
 })) => string
-  portalContainer?: Element = document.body
   queue: ToastQueue<T>
   style?: CSSProperties | ((ToastRegionRenderProps<T> & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined

/react-aria-components:TooltipProps

 TooltipProps {
-  UNSTABLE_portalContainer?: Element = document.body
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((TooltipRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((TooltipRenderProps & {
     defaultClassName: string | undefined
 })) => string
   containerPadding?: number = 12
   crossOffset?: number = 0
   defaultOpen?: boolean
   isEntering?: boolean
   isExiting?: boolean
   isOpen?: boolean
   offset?: number = 0
   onOpenChange?: (boolean) => void
   placement?: Placement = 'top'
   shouldFlip?: boolean = true
   style?: CSSProperties | ((TooltipRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   triggerRef?: RefObject<Element | null>
 }

@react-aria/overlays

/@react-aria/overlays:OverlayContainer

 OverlayContainer {
   children: ReactNode
   className?: string | undefined
   id?: string | undefined
-  portalContainer?: Element = document.body
   role?: AriaRole | undefined
   style?: CSSProperties | undefined
   tabIndex?: number | undefined
 }

/@react-aria/overlays:Overlay

 Overlay {
   children: ReactNode
   disableFocusManagement?: boolean
   isExiting?: boolean
-  portalContainer?: Element = document.body
   shouldContainFocus?: boolean
 }

/@react-aria/overlays:UNSTABLE_PortalProvider

-UNSTABLE_PortalProvider {
-
-}

/@react-aria/overlays:useUNSTABLE_PortalContext

-useUNSTABLE_PortalContext {
-  returnVal: undefined
-}

/@react-aria/overlays:OverlayContainerProps

 OverlayContainerProps {
   children: ReactNode
   className?: string | undefined
   id?: string | undefined
-  portalContainer?: Element = document.body
   role?: AriaRole | undefined
   style?: CSSProperties | undefined
   tabIndex?: number | undefined
 }

/@react-aria/overlays:OverlayProps

 OverlayProps {
   children: ReactNode
   disableFocusManagement?: boolean
   isExiting?: boolean
-  portalContainer?: Element = document.body
   shouldContainFocus?: boolean
 }

/@react-aria/overlays:UNSAFE_PortalProvider

+UNSAFE_PortalProvider {
+  children: ReactNode
+  getContainer?: () => HTMLElement | null
+}

/@react-aria/overlays:useUNSAFE_PortalContext

+useUNSAFE_PortalContext {
+  returnVal: undefined
+}

/@react-aria/overlays:PortalProviderProps

+PortalProviderProps {
+  children: ReactNode
+  getContainer?: () => HTMLElement | null
+}

/@react-aria/overlays:PortalProviderContextValue

+PortalProviderContextValue {
+  getContainer?: () => HTMLElement | null
+}

@react-spectrum/s2

/@react-spectrum/s2:PopoverProps

 PopoverProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
-  UNSTABLE_portalContainer?: Element = document.body
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((PopoverRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((PopoverRenderProps & {
     defaultClassName: string | undefined
 })) => string
   containerPadding?: number = 12
   crossOffset?: number = 0
   defaultOpen?: boolean
   hideArrow?: boolean = false
   isEntering?: boolean
   isExiting?: boolean
   isOpen?: boolean
   maxHeight?: number
   offset?: number = 8
   onOpenChange?: (boolean) => void
   placement?: Placement = 'bottom'
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L'
   slot?: string | null
   style?: CSSProperties | ((PopoverRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
   styles?: StyleString
   trigger?: string
   triggerRef?: RefObject<Element | null>
 }

* chore: Fix generated code sample for S2 TooltipTrigger docs (adobe#8000) * Fix generated code sample for S2 TooltipTrigger docs * review * inlining * fix: export SortDescriptor type from S2 (adobe#8030) * chore: Deprecate UNSTABLE_portalContainer in favor for PortalProvider (adobe#7976) * Initial refactor to tear out UNSTABLE_portalContainer in favor of the PortalContainer * yarn.lock update * switch to deprecating UNSTABLE_portalContainer * prefer deprecated prop over context to make this a non-breaking change * add rough docs * updating copy to include explaination of UNSTABLE * rename to UNSAFE_PortalProvider * update copy and split out example * use styles from RAC examples --------- Co-authored-by: Robert Snow <[email protected]> * feat: Add escapeKeyBehavior to GridList/ListBox/Menu/Table/Tree (adobe#7974) * Add disallowClearAll to Menu/ListBox so Autocomplete in Popover can close without clearing selection * add support for diallowClearAll to grid/tree/table * make sure RSP components also surface disallowClearAll * update api naming to escapeKeyBehavior * skip 17 tests for build, investigate later * review comments * fix: useMove broken by NODE_ENV check (adobe#8046) * fix: ColorWheel track click (adobe#8049) * fix: minor typo in CalendarDate docs (adobe#8043) * fix: minor typo in CalendarDate docs * fix second example as well --------- Co-authored-by: Robert Snow <[email protected]> * fix: Updating collection when items change parents (adobe#8052) * export Autocomplete from S2 (adobe#8050) * chore: Optimize table test performance (adobe#8051) * chore: Update typescript to 5.8 (adobe#7888) * chore: update typescript to 5.8 * fix all the types for the upgrade * fix numberfield styles * fix: Apply touch-action by default in usePress (adobe#8047) * fix: Apply touch-action by default in usePress * fix test --------- Co-authored-by: Daniel Lu <[email protected]> * fix: set some better flex behaviour (adobe#8048) * fix: Support React 19 and remove Jest reliance in test utils (adobe#7686) * attempt to get rid of jest calls in menu util * update RSP testing docs to directly mention mocks that maybe needed * bump versions of RTL to 16 * use alternative to calling jest run timers in menu option selection * fixing types and properly testing long press * fix lint * revert to pre testing library bump for clean slate * fix build and another submenu edge case now we shouldnt need to call runAllTimers after selectOption * fix react 16 bug * update return type of advanceTimer and docs copy * move some general fixes from selectionMode="replace" branch here * get rid of unneeded async * getting rid of extraneous dep * fix lint * chore: revert ts update (adobe#8060) * fix: add static color to s2 notification badge (adobe#8055) * fix: add static color to s2 notification badge * make opaque * updates * use locale * fix lint --------- Co-authored-by: Robert Snow <[email protected]> * chore: Latest translations (adobe#8036) * Latest translations * Translation correction * Couple of translation corrections * Remove å from Norwegian string --------- Co-authored-by: Yihui Liao <[email protected]> * fix: Relax Parcel version range in public plugins (adobe#8067) * Disclosure button label size update to match new sizes from Specturm (adobe#8006) Co-authored-by: Danni <[email protected]> * chore: audit 3.41 (adobe#8064) * chore: audit 3.41 * remove deprecation * chore: audit 3.41 (adobe#8064) * chore: audit 3.41 * remove deprecation * chore: Update package dependencies for @react-aria/overlays and @react-aria-components * Added @react-aria/ssr and updated @react-aria/overlays in @react-aria/overlays package.json * Added @react-aria/overlays, @react-aria/ssr, and @react-aria/utils in @react-aria-components package.json * chore: Update import paths and dependencies for @react-aria-nutrient * Refactored import statements in various components and tests to use @react-aria-nutrient/overlays instead of @react-aria/overlays. * Removed references to @react-aria/overlays from package.json and yarn.lock. * Updated documentation links to reflect the new package structure. * chore: Update import paths in TableTests to use @react-aria-nutrient * Refactored import statements in TableTests.js to replace @react-aria with @react-aria-nutrient for live-announcer, utils, and focus modules. * Ensured consistency with recent package structure changes. * fix: Add missing newline at end of test files * Ensured proper formatting by adding a newline at the end of Table.test.js and TestTableUtils.test.tsx files to comply with best practices. --------- Co-authored-by: Daniel Lu <[email protected]> Co-authored-by: Trevor Howell <[email protected]> Co-authored-by: Robert Snow <[email protected]> Co-authored-by: Devon Govett <[email protected]> Co-authored-by: DarkstarXDD <[email protected]> Co-authored-by: Robert Snow <[email protected]> Co-authored-by: Reid Barber <[email protected]> Co-authored-by: Yihui Liao <[email protected]> Co-authored-by: Richard Geraghty <[email protected]> Co-authored-by: Kyle Taborski <[email protected]> Co-authored-by: Danni <[email protected]>

LFDanLu added 3 commits March 21, 2025 15:56

Initial refactor to tear out UNSTABLE_portalContainer in favor of the…

15db448

… PortalContainer

yarn.lock update

e29a277

switch to deprecating UNSTABLE_portalContainer

72cec38

LFDanLu changed the title ~~chore: (WIP) Remove UNSTABLE_portalContainer in favor for PortalContainer~~ chore: (WIP) Deprecate UNSTABLE_portalContainer in favor for PortalContainer Mar 21, 2025

snowystinger previously approved these changes Mar 25, 2025

View reviewed changes

snowystinger reviewed Mar 25, 2025

View reviewed changes

packages/@react-aria/overlays/src/Overlay.tsx Outdated Show resolved Hide resolved

prefer deprecated prop over context to make this a non-breaking change

b9b0995

LFDanLu dismissed snowystinger’s stale review via b9b0995 March 25, 2025 16:56

LFDanLu marked this pull request as ready for review March 25, 2025 16:56

LFDanLu changed the title ~~chore: (WIP) Deprecate UNSTABLE_portalContainer in favor for PortalContainer~~ chore: Deprecate UNSTABLE_portalContainer in favor for PortalContainer Mar 25, 2025

LFDanLu added in sprint release labels Mar 25, 2025

devongovett changed the title ~~chore: Deprecate UNSTABLE_portalContainer in favor for PortalContainer~~ chore: Deprecate UNSTABLE_portalContainer in favor for PortalProvider Mar 25, 2025

devongovett previously approved these changes Mar 25, 2025

View reviewed changes

add rough docs

26a5f2f

LFDanLu dismissed devongovett’s stale review via 26a5f2f March 26, 2025 00:14

snowystinger reviewed Mar 26, 2025

View reviewed changes

packages/@react-aria/overlays/docs/PortalProvider.mdx Show resolved Hide resolved

LFDanLu commented Mar 26, 2025

View reviewed changes

snowystinger previously approved these changes Mar 26, 2025

View reviewed changes

LFDanLu commented Mar 26, 2025

View reviewed changes

updating copy to include explaination of UNSTABLE

bf0a29f

LFDanLu dismissed snowystinger’s stale review via bf0a29f March 27, 2025 23:03

snowystinger reviewed Mar 27, 2025

View reviewed changes

packages/@react-aria/overlays/docs/PortalProvider.mdx Show resolved Hide resolved

devongovett reviewed Mar 28, 2025

View reviewed changes

packages/@react-aria/overlays/docs/PortalProvider.mdx Show resolved Hide resolved

LFDanLu added 2 commits March 28, 2025 17:20

rename to UNSAFE_PortalProvider

580dbbb

update copy and split out example

0dd2ec9

Merge branch 'main' into refactor_to_use_portalProvider

f7b427c

snowystinger reviewed Mar 31, 2025

View reviewed changes

use styles from RAC examples

8baed7a

snowystinger approved these changes Mar 31, 2025

View reviewed changes

yihuiliao approved these changes Apr 7, 2025

View reviewed changes

yihuiliao added this pull request to the merge queue Apr 7, 2025

Merged via the queue into main with commit dd22a53 Apr 7, 2025
30 checks passed

yihuiliao deleted the refactor_to_use_portalProvider branch April 7, 2025 18:32

zanhk mentioned this pull request Apr 11, 2025

"useUNSTABLE_PortalContext" is not exported by "node_modules/@react-aria/overlays/dist/import.mjs" Thinkmill/keystatic#1429

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: Deprecate UNSTABLE_portalContainer in favor for PortalProvider #7976

chore: Deprecate UNSTABLE_portalContainer in favor for PortalProvider #7976

LFDanLu commented Mar 21, 2025 •

edited

Loading

rspbot commented Mar 22, 2025

rspbot commented Mar 25, 2025

devongovett left a comment

LFDanLu Mar 26, 2025

snowystinger Mar 26, 2025

LFDanLu Mar 27, 2025

snowystinger Mar 27, 2025

yihuiliao Mar 28, 2025

LFDanLu Mar 26, 2025

snowystinger Mar 31, 2025

LFDanLu Mar 31, 2025

LFDanLu Mar 26, 2025

snowystinger Mar 26, 2025

rspbot commented Mar 26, 2025

rspbot commented Mar 27, 2025

devongovett Mar 28, 2025

devongovett Mar 28, 2025

rspbot commented Mar 29, 2025

rspbot commented Mar 31, 2025

snowystinger Mar 31, 2025

LFDanLu Mar 31, 2025

snowystinger Mar 31, 2025

LFDanLu Mar 31, 2025

snowystinger Mar 31, 2025

rspbot commented Mar 31, 2025

rspbot commented Mar 31, 2025


		## Introduction

		`UNSTABLE_PortalProvider` is a utility wrapper component that can be used to set where components like


		<PropTable links={docs.links} component={docs.exports.UNSTABLE_PortalProvider} />

		## Example

	or for a variety of other reasons. Typically, it is best to portal to the root of the entire application, typically the `body` element,
	or for a variety of other reasons. Typically, it is best to portal to the root of the entire application, e.g. the `body` element,

chore: Deprecate UNSTABLE_portalContainer in favor for PortalProvider #7976

chore: Deprecate UNSTABLE_portalContainer in favor for PortalProvider #7976

Conversation

LFDanLu commented Mar 21, 2025 • edited Loading

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Mar 22, 2025

rspbot commented Mar 25, 2025

devongovett left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rspbot commented Mar 26, 2025

rspbot commented Mar 27, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rspbot commented Mar 29, 2025

rspbot commented Mar 31, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rspbot commented Mar 31, 2025

rspbot commented Mar 31, 2025

react-aria-components

/react-aria-components:Modal

/react-aria-components:ModalOverlay

/react-aria-components:Popover

/react-aria-components:UNSTABLE_ToastRegion

/react-aria-components:Tooltip

/react-aria-components:ModalOverlayProps

/react-aria-components:PopoverProps

/react-aria-components:ToastRegionProps

/react-aria-components:TooltipProps

@react-aria/overlays

/@react-aria/overlays:OverlayContainer

/@react-aria/overlays:Overlay

/@react-aria/overlays:UNSTABLE_PortalProvider

/@react-aria/overlays:useUNSTABLE_PortalContext

/@react-aria/overlays:OverlayContainerProps

/@react-aria/overlays:OverlayProps

/@react-aria/overlays:UNSAFE_PortalProvider

/@react-aria/overlays:useUNSAFE_PortalContext

/@react-aria/overlays:PortalProviderProps

/@react-aria/overlays:PortalProviderContextValue

@react-spectrum/s2

/@react-spectrum/s2:PopoverProps

LFDanLu commented Mar 21, 2025 •

edited

Loading