From 8746af24b8eabd05ba8092c2dc61504c56e5f85d Mon Sep 17 00:00:00 2001
From: Niklas Mischkulnig <mischnic@users.noreply.github.com>
Date: Tue, 29 Sep 2020 12:37:56 +0200
Subject: [PATCH 01/17] Update react-transition-group

---
 yarn.lock | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/yarn.lock b/yarn.lock
index 4dfcd8d0f4d..feb8ee22edb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8405,6 +8405,14 @@ dom-helpers@^5.0.1:
     "@babel/runtime" "^7.8.7"
     csstype "^3.0.2"
 
+dom-helpers@^5.0.1:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
+  integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -17907,6 +17915,7 @@ react@^18.0.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
   integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
+
   dependencies:
     loose-envify "^1.1.0"
 

From 5388c6ee339cf356182e32aa00f6ba5efd262552 Mon Sep 17 00:00:00 2001
From: Niklas Mischkulnig <mischnic@users.noreply.github.com>
Date: Tue, 29 Sep 2020 13:16:44 +0200
Subject: [PATCH 02/17] Pass nodeRef into Transition

---
 packages/@react-spectrum/overlays/src/Modal.tsx   | 15 ++++++++++++---
 packages/@react-spectrum/overlays/src/Overlay.tsx |  2 +-
 packages/@react-spectrum/overlays/src/Popover.tsx | 12 ++++++++++--
 packages/@react-spectrum/overlays/src/Tray.tsx    | 13 +++++++++++--
 .../@react-spectrum/overlays/src/Underlay.tsx     |  3 +++
 packages/@react-types/overlays/src/index.d.ts     | 11 ++++++-----
 6 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx
index 6a386e6f078..fa1efc83065 100644
--- a/packages/@react-spectrum/overlays/src/Modal.tsx
+++ b/packages/@react-spectrum/overlays/src/Modal.tsx
@@ -18,7 +18,7 @@ import {Overlay} from './Overlay';
 import {OverlayProps} from '@react-types/overlays';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import React, {forwardRef, ReactNode, RefObject} from 'react';
+import React, {forwardRef, HTMLAttributes, ReactNode, RefObject, useRef} from 'react';
 import {Underlay} from './Underlay';
 import {useViewportSize} from '@react-aria/utils';
 
@@ -36,9 +36,18 @@ function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
   let {children, state, ...otherProps} = props;
   let domRef = useDOMRef(ref);
 
+  let underlayRef = useRef(null);
+
   return (
-    <Overlay {...otherProps} isOpen={state.isOpen}>
-      <ModalWrapper {...props} ref={domRef}>
+    <Overlay {...otherProps} nodeRef={underlayRef}>
+      <Underlay ref={underlayRef} />
+      <ModalWrapper
+        {...styleProps}
+        onClose={onClose}
+        type={type}
+        isDismissable={isDismissable}
+        isKeyboardDismissDisabled={isKeyboardDismissDisabled}
+        ref={domRef}>
         {children}
       </ModalWrapper>
     </Overlay>
diff --git a/packages/@react-spectrum/overlays/src/Overlay.tsx b/packages/@react-spectrum/overlays/src/Overlay.tsx
index 256710fd66d..c1c2c9d133b 100644
--- a/packages/@react-spectrum/overlays/src/Overlay.tsx
+++ b/packages/@react-spectrum/overlays/src/Overlay.tsx
@@ -18,7 +18,7 @@ import React, {useCallback, useState} from 'react';
 import {Overlay as ReactAriaOverlay} from '@react-aria/overlays';
 
 function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
-  let {children, isOpen, container, onEnter, onEntering, onEntered, onExit, onExiting, onExited} = props;
+  let {children, isOpen, container, onEnter, onEntering, onEntered, onExit, onExiting, onExited, nodeRef} = props;
   let [exited, setExited] = useState(!isOpen);
 
   let handleEntered = useCallback(() => {
diff --git a/packages/@react-spectrum/overlays/src/Popover.tsx b/packages/@react-spectrum/overlays/src/Popover.tsx
index 8f3a3cfe3df..6cb703871a4 100644
--- a/packages/@react-spectrum/overlays/src/Popover.tsx
+++ b/packages/@react-spectrum/overlays/src/Popover.tsx
@@ -54,8 +54,16 @@ function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
   let domRef = useDOMRef(ref);
 
   return (
-    <Overlay {...otherProps} isOpen={state.isOpen}>
-      <PopoverWrapper ref={domRef} {...props}>
+    <Overlay {...otherProps} nodeRef={domRef}>
+      <PopoverWrapper
+        {...styleProps}
+        ref={domRef}
+        placement={placement}
+        arrowProps={arrowProps}
+        onClose={onClose}
+        shouldCloseOnBlur={shouldCloseOnBlur}
+        isKeyboardDismissDisabled={isKeyboardDismissDisabled}
+        hideArrow={hideArrow}>
         {children}
       </PopoverWrapper>
     </Overlay>
diff --git a/packages/@react-spectrum/overlays/src/Tray.tsx b/packages/@react-spectrum/overlays/src/Tray.tsx
index 0db74081731..eda209cd296 100644
--- a/packages/@react-spectrum/overlays/src/Tray.tsx
+++ b/packages/@react-spectrum/overlays/src/Tray.tsx
@@ -36,9 +36,18 @@ function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
   let {children, state, ...otherProps} = props;
   let domRef = useDOMRef(ref);
 
+  let underlayRef = useRef(null);
+
   return (
-    <Overlay {...otherProps} isOpen={state.isOpen}>
-      <TrayWrapper {...props} ref={domRef}>
+    <Overlay {...otherProps} nodeRef={underlayRef}>
+      <Underlay ref={underlayRef} />
+      <TrayWrapper
+        {...styleProps}
+        onClose={onClose}
+        shouldCloseOnBlur={shouldCloseOnBlur}
+        isKeyboardDismissDisabled={isKeyboardDismissDisabled}
+        ref={domRef}
+        isFixedHeight={isFixedHeight}>
         {children}
       </TrayWrapper>
     </Overlay>
diff --git a/packages/@react-spectrum/overlays/src/Underlay.tsx b/packages/@react-spectrum/overlays/src/Underlay.tsx
index d5d7f5e163c..4bfe4f090f9 100644
--- a/packages/@react-spectrum/overlays/src/Underlay.tsx
+++ b/packages/@react-spectrum/overlays/src/Underlay.tsx
@@ -24,3 +24,6 @@ export function Underlay({isOpen, isTransparent}: UnderlayProps) {
     <div className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen, 'spectrum-Underlay--transparent': isTransparent})} />
   );
 }
+
+const _Underlay = React.forwardRef(Underlay);
+export {_Underlay as Underlay};
diff --git a/packages/@react-types/overlays/src/index.d.ts b/packages/@react-types/overlays/src/index.d.ts
index abdb5a79467..618d09ad6c2 100644
--- a/packages/@react-types/overlays/src/index.d.ts
+++ b/packages/@react-types/overlays/src/index.d.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {HTMLAttributes, ReactElement, ReactNode} from 'react';
+import React, {HTMLAttributes, ReactElement, ReactNode} from 'react';
 import {StyleProps} from '@react-types/shared';
 
 export type Placement = 'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' |
@@ -71,10 +71,11 @@ export interface OverlayProps {
   onEntered?: () => void,
   onExit?: () => void,
   onExiting?: () => void,
-  onExited?: () => void
+  onExited?: () => void,
+  nodeRef: React.MutableRefObject<HTMLElement>
 }
 
-export interface ModalProps extends StyleProps, OverlayProps {
+export interface ModalProps extends StyleProps, Omit<OverlayProps, 'nodeRef'> {
   children: ReactElement,
   isOpen?: boolean,
   onClose?: () => void,
@@ -82,7 +83,7 @@ export interface ModalProps extends StyleProps, OverlayProps {
   isDismissable?: boolean
 }
 
-export interface PopoverProps extends StyleProps, OverlayProps {
+export interface PopoverProps extends StyleProps, Omit<OverlayProps, 'nodeRef'>  {
   children: ReactNode,
   placement?: PlacementAxis,
   arrowProps?: HTMLAttributes<HTMLElement>,
@@ -94,7 +95,7 @@ export interface PopoverProps extends StyleProps, OverlayProps {
   isDismissable?: boolean
 }
 
-export interface TrayProps extends StyleProps, OverlayProps {
+export interface TrayProps extends StyleProps, Omit<OverlayProps, 'nodeRef'>  {
   children: ReactElement,
   isOpen?: boolean,
   onClose?: () => void,

From e0419ca70eb6fc450e18977013acba6977a3c1ac Mon Sep 17 00:00:00 2001
From: Niklas Mischkulnig <mischnic@users.noreply.github.com>
Date: Tue, 29 Sep 2020 16:31:32 +0200
Subject: [PATCH 03/17] WIP

---
 .../tooltip/src/TooltipTrigger.tsx              | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
index b1842cf03b4..72d3e41169e 100644
--- a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
+++ b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
@@ -15,6 +15,7 @@ import {Overlay} from '@react-spectrum/overlays';
 import React, {ReactElement, useRef} from 'react';
 import {SpectrumTooltipTriggerProps} from '@react-types/tooltip';
 import {TooltipContext} from './context';
+import {unwrapDOMRef} from '@react-spectrum/utils';
 import {useOverlayPosition} from '@react-aria/overlays';
 import {useTooltipTrigger} from '@react-aria/tooltip';
 import {useTooltipTriggerState} from '@react-stately/tooltip';
@@ -31,8 +32,19 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
     trigger: triggerAction
   } = props;
 
+  let tooltipRef = useRef();
   let [trigger, tooltip] = React.Children.toArray(children);
 
+  // @ts-ignore
+  let tooltipWithRef = React.cloneElement(tooltip, {ref: node => {
+    tooltipRef.current = node;
+    // @ts-ignore
+    if (tooltip.ref) {
+      // @ts-ignore
+      tooltip.ref.current = node;
+    }
+  }});
+
   let state = useTooltipTriggerState(props);
 
   let tooltipTriggerRef = useRef<HTMLElement>();
@@ -68,8 +80,9 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
           arrowProps,
           ...tooltipProps
         }}>
-        <Overlay isOpen={state.isOpen}>
-          {tooltip}
+        {/* @ts-ignore */}
+        <Overlay isOpen={state.isOpen} nodeRef={unwrapDOMRef(tooltipRef)}>
+          {tooltipWithRef}
         </Overlay>
       </TooltipContext.Provider>
     </FocusableProvider>

From e0f3e3190c5e74ae034d31f48ba5ddd691685e1d Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Fri, 6 Nov 2020 15:11:31 -0800
Subject: [PATCH 04/17] fix docs build

---
 packages/@react-spectrum/overlays/src/Underlay.tsx | 2 +-
 packages/@react-types/overlays/src/index.d.ts      | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/@react-spectrum/overlays/src/Underlay.tsx b/packages/@react-spectrum/overlays/src/Underlay.tsx
index 4bfe4f090f9..585dab4737e 100644
--- a/packages/@react-spectrum/overlays/src/Underlay.tsx
+++ b/packages/@react-spectrum/overlays/src/Underlay.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
-import React from 'react';
+import React, {Ref} from 'react';
 import underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';
 
 interface UnderlayProps {
diff --git a/packages/@react-types/overlays/src/index.d.ts b/packages/@react-types/overlays/src/index.d.ts
index 618d09ad6c2..83e3969803d 100644
--- a/packages/@react-types/overlays/src/index.d.ts
+++ b/packages/@react-types/overlays/src/index.d.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import React, {HTMLAttributes, ReactElement, ReactNode} from 'react';
+import {HTMLAttributes, MutableRefObject, ReactElement, ReactNode} from 'react';
 import {StyleProps} from '@react-types/shared';
 
 export type Placement = 'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' |
@@ -72,7 +72,7 @@ export interface OverlayProps {
   onExit?: () => void,
   onExiting?: () => void,
   onExited?: () => void,
-  nodeRef: React.MutableRefObject<HTMLElement>
+  nodeRef: MutableRefObject<HTMLElement>
 }
 
 export interface ModalProps extends StyleProps, Omit<OverlayProps, 'nodeRef'> {

From 07d7920cd0e6e78986f4d7f9061d9f2e74394405 Mon Sep 17 00:00:00 2001
From: Rob Snow <rsnow@adobe.com>
Date: Tue, 17 Nov 2020 15:23:43 -0800
Subject: [PATCH 05/17] Remove a few ignores and explain the last remaining one

---
 .../tooltip/src/TooltipTrigger.tsx            | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
index 72d3e41169e..bfceeed2f84 100644
--- a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
+++ b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
@@ -33,17 +33,21 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
   } = props;
 
   let tooltipRef = useRef();
-  let [trigger, tooltip] = React.Children.toArray(children);
 
-  // @ts-ignore
-  let tooltipWithRef = React.cloneElement(tooltip, {ref: node => {
-    tooltipRef.current = node;
-    // @ts-ignore
-    if (tooltip.ref) {
-      // @ts-ignore
-      tooltip.ref.current = node;
+  let [trigger, tooltip] = React.Children.toArray(children) as [ReactElement, ReactElement];
+
+  // this does mean that we can't have some element wrapping the Tooltip
+  // we'd need to do it through context if we wanted to allow for that
+  let tooltipWithRef = React.cloneElement(tooltip, {
+    ref: node => {
+      tooltipRef.current = node;
+      // @ts-ignore react forwardRef doesn't get typed quite right, so we ignore these two warnings about accessing ref
+      if (tooltip.ref) {
+        // @ts-ignore
+        tooltip.ref.current = node;
+      }
     }
-  }});
+  });
 
   let state = useTooltipTriggerState(props);
 
@@ -80,7 +84,6 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
           arrowProps,
           ...tooltipProps
         }}>
-        {/* @ts-ignore */}
         <Overlay isOpen={state.isOpen} nodeRef={unwrapDOMRef(tooltipRef)}>
           {tooltipWithRef}
         </Overlay>

From 3d788c5f1c8b803e1b9e921ba58325f018aaac96 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 19 Dec 2022 12:16:38 -0800
Subject: [PATCH 06/17] fixing some overlay refs passed to Transition

got rid of clone children in tooltip also since it would break if wrapper existed around the tooltip component
---
 .../actionbar/src/ActionBar.tsx               |  2 ++
 .../tooltip/src/TooltipTrigger.tsx            | 20 ++-----------------
 2 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/packages/@react-spectrum/actionbar/src/ActionBar.tsx b/packages/@react-spectrum/actionbar/src/ActionBar.tsx
index 2de9577cf54..aeef055a674 100644
--- a/packages/@react-spectrum/actionbar/src/ActionBar.tsx
+++ b/packages/@react-spectrum/actionbar/src/ActionBar.tsx
@@ -31,9 +31,11 @@ import {useProviderProps} from '@react-spectrum/provider';
 
 function ActionBar<T extends object>(props: SpectrumActionBarProps<T>, ref: DOMRef<HTMLDivElement>) {
   let isOpen = props.selectedItemCount !== 0;
+  let domRef = useDOMRef(ref);
 
   return (
     <OpenTransition
+      nodeRef={domRef}
       in={isOpen}
       mountOnEnter
       unmountOnExit>
diff --git a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
index bfceeed2f84..baafa6bcaf9 100644
--- a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
+++ b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
@@ -32,23 +32,7 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
     trigger: triggerAction
   } = props;
 
-  let tooltipRef = useRef();
-
   let [trigger, tooltip] = React.Children.toArray(children) as [ReactElement, ReactElement];
-
-  // this does mean that we can't have some element wrapping the Tooltip
-  // we'd need to do it through context if we wanted to allow for that
-  let tooltipWithRef = React.cloneElement(tooltip, {
-    ref: node => {
-      tooltipRef.current = node;
-      // @ts-ignore react forwardRef doesn't get typed quite right, so we ignore these two warnings about accessing ref
-      if (tooltip.ref) {
-        // @ts-ignore
-        tooltip.ref.current = node;
-      }
-    }
-  });
-
   let state = useTooltipTriggerState(props);
 
   let tooltipTriggerRef = useRef<HTMLElement>();
@@ -84,8 +68,8 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
           arrowProps,
           ...tooltipProps
         }}>
-        <Overlay isOpen={state.isOpen} nodeRef={unwrapDOMRef(tooltipRef)}>
-          {tooltipWithRef}
+        <Overlay isOpen={state.isOpen} nodeRef={overlayRef}>
+          {tooltip}
         </Overlay>
       </TooltipContext.Provider>
     </FocusableProvider>

From 976d23459e46674622f0f09023b3446f518df509 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 19 Dec 2022 15:58:24 -0800
Subject: [PATCH 07/17] fixing transition for Modal and Tray

needed to provide an actual DOM ref to OpenTransition nodeRef
---
 .../@react-spectrum/overlays/src/Modal.tsx    | 24 +++++++------------
 .../@react-spectrum/overlays/src/Tray.tsx     | 24 +++++++------------
 2 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx
index fa1efc83065..cd3e49e9d9c 100644
--- a/packages/@react-spectrum/overlays/src/Modal.tsx
+++ b/packages/@react-spectrum/overlays/src/Modal.tsx
@@ -18,7 +18,7 @@ import {Overlay} from './Overlay';
 import {OverlayProps} from '@react-types/overlays';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import React, {forwardRef, HTMLAttributes, ReactNode, RefObject, useRef} from 'react';
+import React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef} from 'react';
 import {Underlay} from './Underlay';
 import {useViewportSize} from '@react-aria/utils';
 
@@ -29,25 +29,18 @@ interface ModalProps extends AriaModalOverlayProps, StyleProps, OverlayProps {
 }
 
 interface ModalWrapperProps extends ModalProps {
-  isOpen?: boolean
+  isOpen?: boolean,
+  wrapperRef: MutableRefObject<HTMLDivElement>
 }
 
 function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
   let {children, state, ...otherProps} = props;
   let domRef = useDOMRef(ref);
-
-  let underlayRef = useRef(null);
+  let wrapperRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Overlay {...otherProps} nodeRef={underlayRef}>
-      <Underlay ref={underlayRef} />
-      <ModalWrapper
-        {...styleProps}
-        onClose={onClose}
-        type={type}
-        isDismissable={isDismissable}
-        isKeyboardDismissDisabled={isKeyboardDismissDisabled}
-        ref={domRef}>
+    <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={domRef}>
+      <ModalWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>
         {children}
       </ModalWrapper>
     </Overlay>
@@ -60,10 +53,9 @@ let typeMap = {
 };
 
 let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject<HTMLDivElement>) {
-  let {type, children, state, isOpen} = props;
+  let {type, children, state, isOpen, wrapperRef} = props;
   let typeVariant = typeMap[type];
   let {styleProps} = useStyleProps(props);
-
   let {modalProps, underlayProps} = useModalOverlay(props, state, ref);
 
   let wrapperClassName = classNames(
@@ -99,7 +91,7 @@ let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject
   return (
     <>
       <Underlay {...underlayProps} isOpen={isOpen} />
-      <div className={wrapperClassName} style={style}>
+      <div className={wrapperClassName} style={style} ref={wrapperRef}>
         <div
           {...styleProps}
           {...modalProps}
diff --git a/packages/@react-spectrum/overlays/src/Tray.tsx b/packages/@react-spectrum/overlays/src/Tray.tsx
index eda209cd296..b6b3659e2cb 100644
--- a/packages/@react-spectrum/overlays/src/Tray.tsx
+++ b/packages/@react-spectrum/overlays/src/Tray.tsx
@@ -17,7 +17,7 @@ import {Overlay} from './Overlay';
 import {OverlayProps} from '@react-types/overlays';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import React, {forwardRef, ReactNode, RefObject} from 'react';
+import React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef} from 'react';
 import trayStyles from '@adobe/spectrum-css-temp/components/tray/vars.css';
 import {Underlay} from './Underlay';
 import {useViewportSize} from '@react-aria/utils';
@@ -29,25 +29,18 @@ interface TrayProps extends AriaModalOverlayProps, StyleProps, OverlayProps {
 }
 
 interface TrayWrapperProps extends TrayProps {
-  isOpen?: boolean
+  isOpen?: boolean,
+  wrapperRef: MutableRefObject<HTMLDivElement>
 }
 
 function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
   let {children, state, ...otherProps} = props;
   let domRef = useDOMRef(ref);
-
-  let underlayRef = useRef(null);
+  let wrapperRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Overlay {...otherProps} nodeRef={underlayRef}>
-      <Underlay ref={underlayRef} />
-      <TrayWrapper
-        {...styleProps}
-        onClose={onClose}
-        shouldCloseOnBlur={shouldCloseOnBlur}
-        isKeyboardDismissDisabled={isKeyboardDismissDisabled}
-        ref={domRef}
-        isFixedHeight={isFixedHeight}>
+    <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={domRef}>
+      <TrayWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>
         {children}
       </TrayWrapper>
     </Overlay>
@@ -59,7 +52,8 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
     children,
     isOpen,
     isFixedHeight,
-    state
+    state,
+    wrapperRef
   } = props;
   let {styleProps} = useStyleProps(props);
 
@@ -103,7 +97,7 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
   return (
     <>
       <Underlay {...underlayProps} isOpen={isOpen} />
-      <div className={wrapperClassName} style={wrapperStyle}>
+      <div className={wrapperClassName} style={wrapperStyle} ref={wrapperRef}>
         <div
           {...styleProps}
           {...modalProps}

From 7285ef934d6c8ff54e091a0e18cf1cdac8331dcb Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Mon, 19 Dec 2022 16:02:58 -0800
Subject: [PATCH 08/17] actually use wrapper refs

---
 packages/@react-spectrum/overlays/src/Modal.tsx | 2 +-
 packages/@react-spectrum/overlays/src/Tray.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx
index cd3e49e9d9c..e7d0e57d831 100644
--- a/packages/@react-spectrum/overlays/src/Modal.tsx
+++ b/packages/@react-spectrum/overlays/src/Modal.tsx
@@ -39,7 +39,7 @@ function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
   let wrapperRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={domRef}>
+    <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>
       <ModalWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>
         {children}
       </ModalWrapper>
diff --git a/packages/@react-spectrum/overlays/src/Tray.tsx b/packages/@react-spectrum/overlays/src/Tray.tsx
index b6b3659e2cb..59ea2f3a399 100644
--- a/packages/@react-spectrum/overlays/src/Tray.tsx
+++ b/packages/@react-spectrum/overlays/src/Tray.tsx
@@ -39,7 +39,7 @@ function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
   let wrapperRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={domRef}>
+    <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>
       <TrayWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>
         {children}
       </TrayWrapper>

From c13b2a7103448c75d10a02184fcc3475fa728c39 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 20 Dec 2022 10:12:47 -0800
Subject: [PATCH 09/17] fixing actionbar ref to Transition

---
 packages/@react-spectrum/actionbar/src/ActionBar.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/@react-spectrum/actionbar/src/ActionBar.tsx b/packages/@react-spectrum/actionbar/src/ActionBar.tsx
index aeef055a674..5e840af63da 100644
--- a/packages/@react-spectrum/actionbar/src/ActionBar.tsx
+++ b/packages/@react-spectrum/actionbar/src/ActionBar.tsx
@@ -21,7 +21,7 @@ import {FocusScope} from '@react-aria/focus';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {OpenTransition} from '@react-spectrum/overlays';
-import React, {ReactElement, useEffect, useRef} from 'react';
+import React, {ReactElement, RefObject, useEffect, useRef} from 'react';
 import {SpectrumActionBarProps} from '@react-types/actionbar';
 import styles from './actionbar.css';
 import {Text} from '@react-spectrum/text';
@@ -39,7 +39,7 @@ function ActionBar<T extends object>(props: SpectrumActionBarProps<T>, ref: DOMR
       in={isOpen}
       mountOnEnter
       unmountOnExit>
-      <ActionBarInnerWithRef {...props} ref={ref} />
+      <ActionBarInnerWithRef {...props} ref={domRef} />
     </OpenTransition>
   );
 }
@@ -48,7 +48,7 @@ interface ActionBarInnerProps<T> extends SpectrumActionBarProps<T> {
   isOpen?: boolean
 }
 
-function ActionBarInner<T>(props: ActionBarInnerProps<T>, ref: DOMRef<HTMLDivElement>) {
+function ActionBarInner<T>(props: ActionBarInnerProps<T>, ref: RefObject<HTMLDivElement>) {
   props = useProviderProps(props);
 
   let {
@@ -61,7 +61,6 @@ function ActionBarInner<T>(props: ActionBarInnerProps<T>, ref: DOMRef<HTMLDivEle
   } = props;
 
   let {styleProps} = useStyleProps(props);
-  let domRef = useDOMRef(ref);
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
   // Store the last count greater than zero in a ref so that we can retain it while rendering the fade-out animation.
@@ -90,7 +89,7 @@ function ActionBarInner<T>(props: ActionBarInnerProps<T>, ref: DOMRef<HTMLDivEle
         {...filterDOMProps(props)}
         {...styleProps}
         {...keyboardProps}
-        ref={domRef}
+        ref={ref}
         className={classNames(
           styles,
           'react-spectrum-ActionBar', {
@@ -129,7 +128,7 @@ function ActionBarInner<T>(props: ActionBarInnerProps<T>, ref: DOMRef<HTMLDivEle
   );
 }
 
-const ActionBarInnerWithRef = React.forwardRef(ActionBarInner) as <T>(props: SpectrumActionBarProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReturnType<typeof ActionBarInner>;
+const ActionBarInnerWithRef = React.forwardRef(ActionBarInner) as <T>(props: SpectrumActionBarProps<T> & {ref?: RefObject<HTMLDivElement>}) => ReturnType<typeof ActionBarInner>;
 
 /**
  * TODO: Add description of component here.

From f2c90571366534ff912b99e0ff431d95ffab65b9 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 20 Dec 2022 10:44:21 -0800
Subject: [PATCH 10/17] adding wrapper to attach transition nodeRef

technically we could attach it to any DOM node in the Modal/Tray/Popover since we dont have a transition on enter, but for correctness with reflow/.scrollTop we want it as the wrapping element
---
 .../@react-spectrum/overlays/src/Modal.tsx    |  6 ++---
 .../@react-spectrum/overlays/src/Popover.tsx  | 26 ++++++++-----------
 .../@react-spectrum/overlays/src/Tray.tsx     |  6 ++---
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx
index e7d0e57d831..a286e299fa1 100644
--- a/packages/@react-spectrum/overlays/src/Modal.tsx
+++ b/packages/@react-spectrum/overlays/src/Modal.tsx
@@ -89,9 +89,9 @@ let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject
   };
 
   return (
-    <>
+    <div ref={wrapperRef}>
       <Underlay {...underlayProps} isOpen={isOpen} />
-      <div className={wrapperClassName} style={style} ref={wrapperRef}>
+      <div className={wrapperClassName} style={style}>
         <div
           {...styleProps}
           {...modalProps}
@@ -101,7 +101,7 @@ let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject
           {children}
         </div>
       </div>
-    </>
+    </div>
   );
 });
 
diff --git a/packages/@react-spectrum/overlays/src/Popover.tsx b/packages/@react-spectrum/overlays/src/Popover.tsx
index 6cb703871a4..881c21eb212 100644
--- a/packages/@react-spectrum/overlays/src/Popover.tsx
+++ b/packages/@react-spectrum/overlays/src/Popover.tsx
@@ -16,7 +16,7 @@ import {DOMRef, StyleProps} from '@react-types/shared';
 import {Overlay} from './Overlay';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import React, {forwardRef, ReactNode, RefObject, useRef, useState} from 'react';
+import React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef, useState} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/popover/vars.css';
 import {Underlay} from './Underlay';
 import {useLayoutEffect} from '@react-aria/utils';
@@ -28,7 +28,8 @@ interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'
 }
 
 interface PopoverWrapperProps extends PopoverProps {
-  isOpen?: boolean
+  isOpen?: boolean,
+  wrapperRef: MutableRefObject<HTMLDivElement>
 }
 
 /**
@@ -52,18 +53,11 @@ function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
     ...otherProps
   } = props;
   let domRef = useDOMRef(ref);
+  let wrapperRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Overlay {...otherProps} nodeRef={domRef}>
-      <PopoverWrapper
-        {...styleProps}
-        ref={domRef}
-        placement={placement}
-        arrowProps={arrowProps}
-        onClose={onClose}
-        shouldCloseOnBlur={shouldCloseOnBlur}
-        isKeyboardDismissDisabled={isKeyboardDismissDisabled}
-        hideArrow={hideArrow}>
+    <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>
+      <PopoverWrapper ref={domRef} {...props} wrapperRef={wrapperRef}>
         {children}
       </PopoverWrapper>
     </Overlay>
@@ -76,7 +70,8 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
     isOpen,
     hideArrow,
     isNonModal,
-    state
+    state,
+    wrapperRef
   } = props;
   let {styleProps} = useStyleProps(props);
 
@@ -86,8 +81,9 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
     maxHeight: null
   }, state);
 
+  // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
   return (
-    <>
+    <div ref={wrapperRef}>
       {!isNonModal && <Underlay isTransparent {...underlayProps} isOpen={isOpen} /> }
       <div
         {...styleProps}
@@ -123,7 +119,7 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
         )}
         <DismissButton onDismiss={state.close} />
       </div>
-    </>
+    </div>
   );
 });
 
diff --git a/packages/@react-spectrum/overlays/src/Tray.tsx b/packages/@react-spectrum/overlays/src/Tray.tsx
index 59ea2f3a399..417d2dd38c7 100644
--- a/packages/@react-spectrum/overlays/src/Tray.tsx
+++ b/packages/@react-spectrum/overlays/src/Tray.tsx
@@ -95,9 +95,9 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
   );
 
   return (
-    <>
+    <div ref={wrapperRef}>
       <Underlay {...underlayProps} isOpen={isOpen} />
-      <div className={wrapperClassName} style={wrapperStyle} ref={wrapperRef}>
+      <div className={wrapperClassName} style={wrapperStyle}>
         <div
           {...styleProps}
           {...modalProps}
@@ -109,7 +109,7 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
           <DismissButton onDismiss={state.close} />
         </div>
       </div>
-    </>
+    </div>
   );
 });
 

From ba046e20cef2054d896f932e3c544496f4e08d96 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 20 Dec 2022 11:55:14 -0800
Subject: [PATCH 11/17] fixing rebase

---
 packages/@react-spectrum/overlays/src/Overlay.tsx  | 3 ++-
 packages/@react-spectrum/overlays/src/Underlay.tsx | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/@react-spectrum/overlays/src/Overlay.tsx b/packages/@react-spectrum/overlays/src/Overlay.tsx
index c1c2c9d133b..7f5f6db031b 100644
--- a/packages/@react-spectrum/overlays/src/Overlay.tsx
+++ b/packages/@react-spectrum/overlays/src/Overlay.tsx
@@ -53,7 +53,8 @@ function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
           onExited={handleExited}
           onEnter={onEnter}
           onEntering={onEntering}
-          onEntered={handleEntered}>
+          onEntered={handleEntered}
+          nodeRef={nodeRef}>
           {children}
         </OpenTransition>
       </Provider>
diff --git a/packages/@react-spectrum/overlays/src/Underlay.tsx b/packages/@react-spectrum/overlays/src/Underlay.tsx
index 585dab4737e..04aed249546 100644
--- a/packages/@react-spectrum/overlays/src/Underlay.tsx
+++ b/packages/@react-spectrum/overlays/src/Underlay.tsx
@@ -19,9 +19,9 @@ interface UnderlayProps {
   isTransparent?: boolean
 }
 
-export function Underlay({isOpen, isTransparent}: UnderlayProps) {
+function Underlay({isOpen, isTransparent}: UnderlayProps, ref: Ref<HTMLDivElement>) {
   return (
-    <div className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen, 'spectrum-Underlay--transparent': isTransparent})} />
+    <div ref={ref} className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen, 'spectrum-Underlay--transparent': isTransparent})} />
   );
 }
 

From 4104d44386fd0702bc560b7734fa3dc69a8f793b Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 20 Dec 2022 11:58:28 -0800
Subject: [PATCH 12/17] fix lint

---
 packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
index baafa6bcaf9..dd15f7598df 100644
--- a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
+++ b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
@@ -15,7 +15,6 @@ import {Overlay} from '@react-spectrum/overlays';
 import React, {ReactElement, useRef} from 'react';
 import {SpectrumTooltipTriggerProps} from '@react-types/tooltip';
 import {TooltipContext} from './context';
-import {unwrapDOMRef} from '@react-spectrum/utils';
 import {useOverlayPosition} from '@react-aria/overlays';
 import {useTooltipTrigger} from '@react-aria/tooltip';
 import {useTooltipTriggerState} from '@react-stately/tooltip';

From 9bfbda6ae5c4c75fc9a02d5127e686ef9f3d2c64 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 20 Dec 2022 12:07:11 -0800
Subject: [PATCH 13/17] fix yarn.lock

---
 yarn.lock | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index feb8ee22edb..4dfcd8d0f4d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8405,14 +8405,6 @@ dom-helpers@^5.0.1:
     "@babel/runtime" "^7.8.7"
     csstype "^3.0.2"
 
-dom-helpers@^5.0.1:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
-  integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-    csstype "^3.0.2"
-
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -17915,7 +17907,6 @@ react@^18.0.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890"
   integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==
-
   dependencies:
     loose-envify "^1.1.0"
 

From fcc15e58ee5b09c91db25f76fbe4320be35504ed Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 20 Dec 2022 12:34:50 -0800
Subject: [PATCH 14/17] fix Tray and Modal types

---
 packages/@react-spectrum/overlays/src/Modal.tsx | 2 +-
 packages/@react-spectrum/overlays/src/Tray.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx
index a286e299fa1..48f75e1cc9b 100644
--- a/packages/@react-spectrum/overlays/src/Modal.tsx
+++ b/packages/@react-spectrum/overlays/src/Modal.tsx
@@ -22,7 +22,7 @@ import React, {forwardRef, MutableRefObject, ReactNode, RefObject, useRef} from
 import {Underlay} from './Underlay';
 import {useViewportSize} from '@react-aria/utils';
 
-interface ModalProps extends AriaModalOverlayProps, StyleProps, OverlayProps {
+interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef'> {
   children: ReactNode,
   state: OverlayTriggerState,
   type?: 'modal' | 'fullscreen' | 'fullscreenTakeover'
diff --git a/packages/@react-spectrum/overlays/src/Tray.tsx b/packages/@react-spectrum/overlays/src/Tray.tsx
index 417d2dd38c7..daf8b634feb 100644
--- a/packages/@react-spectrum/overlays/src/Tray.tsx
+++ b/packages/@react-spectrum/overlays/src/Tray.tsx
@@ -22,7 +22,7 @@ import trayStyles from '@adobe/spectrum-css-temp/components/tray/vars.css';
 import {Underlay} from './Underlay';
 import {useViewportSize} from '@react-aria/utils';
 
-interface TrayProps extends AriaModalOverlayProps, StyleProps, OverlayProps {
+interface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef'> {
   children: ReactNode,
   state: OverlayTriggerState,
   isFixedHeight?: boolean

From b04f490826e17e729216611780b71a08c062a444 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 20 Dec 2022 13:18:16 -0800
Subject: [PATCH 15/17] fix TS strict

For some reason, Ref doesnt break TS strict linter but RefObject does...
---
 packages/@react-spectrum/actionbar/src/ActionBar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/@react-spectrum/actionbar/src/ActionBar.tsx b/packages/@react-spectrum/actionbar/src/ActionBar.tsx
index 5e840af63da..5edbf80be49 100644
--- a/packages/@react-spectrum/actionbar/src/ActionBar.tsx
+++ b/packages/@react-spectrum/actionbar/src/ActionBar.tsx
@@ -21,7 +21,7 @@ import {FocusScope} from '@react-aria/focus';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {OpenTransition} from '@react-spectrum/overlays';
-import React, {ReactElement, RefObject, useEffect, useRef} from 'react';
+import React, {ReactElement, Ref, useEffect, useRef} from 'react';
 import {SpectrumActionBarProps} from '@react-types/actionbar';
 import styles from './actionbar.css';
 import {Text} from '@react-spectrum/text';
@@ -48,7 +48,7 @@ interface ActionBarInnerProps<T> extends SpectrumActionBarProps<T> {
   isOpen?: boolean
 }
 
-function ActionBarInner<T>(props: ActionBarInnerProps<T>, ref: RefObject<HTMLDivElement>) {
+function ActionBarInner<T>(props: ActionBarInnerProps<T>, ref: Ref<HTMLDivElement>) {
   props = useProviderProps(props);
 
   let {
@@ -128,7 +128,7 @@ function ActionBarInner<T>(props: ActionBarInnerProps<T>, ref: RefObject<HTMLDiv
   );
 }
 
-const ActionBarInnerWithRef = React.forwardRef(ActionBarInner) as <T>(props: SpectrumActionBarProps<T> & {ref?: RefObject<HTMLDivElement>}) => ReturnType<typeof ActionBarInner>;
+const ActionBarInnerWithRef = React.forwardRef(ActionBarInner) as <T>(props: ActionBarInnerProps<T> & {ref?: Ref<HTMLDivElement>}) => ReactElement;
 
 /**
  * TODO: Add description of component here.

From 9559afbafdd38e5690a2e943378ff6e035369cd2 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Tue, 3 Jan 2023 14:48:36 -0800
Subject: [PATCH 16/17] adding comments

---
 packages/@react-spectrum/overlays/src/Modal.tsx | 1 +
 packages/@react-spectrum/overlays/src/Tray.tsx  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx
index 48f75e1cc9b..499d30bd65e 100644
--- a/packages/@react-spectrum/overlays/src/Modal.tsx
+++ b/packages/@react-spectrum/overlays/src/Modal.tsx
@@ -88,6 +88,7 @@ let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject
     '--spectrum-visual-viewport-height': viewport.height + 'px'
   };
 
+  // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
   return (
     <div ref={wrapperRef}>
       <Underlay {...underlayProps} isOpen={isOpen} />
diff --git a/packages/@react-spectrum/overlays/src/Tray.tsx b/packages/@react-spectrum/overlays/src/Tray.tsx
index daf8b634feb..149a9d6a648 100644
--- a/packages/@react-spectrum/overlays/src/Tray.tsx
+++ b/packages/@react-spectrum/overlays/src/Tray.tsx
@@ -94,6 +94,7 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
     styleProps.className
   );
 
+  // Attach Transition's nodeRef to outer most wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
   return (
     <div ref={wrapperRef}>
       <Underlay {...underlayProps} isOpen={isOpen} />

From d8cd27e21d5e905d0f051ccfeb157d3c043ce36f Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 4 Jan 2023 15:52:51 -0800
Subject: [PATCH 17/17] remove ref from Underlay

---
 packages/@react-spectrum/overlays/src/Underlay.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/@react-spectrum/overlays/src/Underlay.tsx b/packages/@react-spectrum/overlays/src/Underlay.tsx
index 04aed249546..d5d7f5e163c 100644
--- a/packages/@react-spectrum/overlays/src/Underlay.tsx
+++ b/packages/@react-spectrum/overlays/src/Underlay.tsx
@@ -11,7 +11,7 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
-import React, {Ref} from 'react';
+import React from 'react';
 import underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';
 
 interface UnderlayProps {
@@ -19,11 +19,8 @@ interface UnderlayProps {
   isTransparent?: boolean
 }
 
-function Underlay({isOpen, isTransparent}: UnderlayProps, ref: Ref<HTMLDivElement>) {
+export function Underlay({isOpen, isTransparent}: UnderlayProps) {
   return (
-    <div ref={ref} className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen, 'spectrum-Underlay--transparent': isTransparent})} />
+    <div className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen, 'spectrum-Underlay--transparent': isTransparent})} />
   );
 }
-
-const _Underlay = React.forwardRef(Underlay);
-export {_Underlay as Underlay};