diff --git a/packages/@react-spectrum/actionbar/src/ActionBar.tsx b/packages/@react-spectrum/actionbar/src/ActionBar.tsx index 2de9577cf54..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, 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'; @@ -31,13 +31,15 @@ import {useProviderProps} from '@react-spectrum/provider'; function ActionBar(props: SpectrumActionBarProps, ref: DOMRef) { let isOpen = props.selectedItemCount !== 0; + let domRef = useDOMRef(ref); return ( - + ); } @@ -46,7 +48,7 @@ interface ActionBarInnerProps extends SpectrumActionBarProps { isOpen?: boolean } -function ActionBarInner(props: ActionBarInnerProps, ref: DOMRef) { +function ActionBarInner(props: ActionBarInnerProps, ref: Ref) { props = useProviderProps(props); let { @@ -59,7 +61,6 @@ function ActionBarInner(props: ActionBarInnerProps, ref: DOMRef(props: ActionBarInnerProps, ref: DOMRef(props: ActionBarInnerProps, ref: DOMRef(props: SpectrumActionBarProps & {ref?: DOMRef}) => ReturnType; +const ActionBarInnerWithRef = React.forwardRef(ActionBarInner) as (props: ActionBarInnerProps & {ref?: Ref}) => ReactElement; /** * TODO: Add description of component here. diff --git a/packages/@react-spectrum/overlays/src/Modal.tsx b/packages/@react-spectrum/overlays/src/Modal.tsx index 6a386e6f078..499d30bd65e 100644 --- a/packages/@react-spectrum/overlays/src/Modal.tsx +++ b/packages/@react-spectrum/overlays/src/Modal.tsx @@ -18,27 +18,29 @@ 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 {Underlay} from './Underlay'; import {useViewportSize} from '@react-aria/utils'; -interface ModalProps extends AriaModalOverlayProps, StyleProps, OverlayProps { +interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit { children: ReactNode, state: OverlayTriggerState, type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' } interface ModalWrapperProps extends ModalProps { - isOpen?: boolean + isOpen?: boolean, + wrapperRef: MutableRefObject } function Modal(props: ModalProps, ref: DOMRef) { let {children, state, ...otherProps} = props; let domRef = useDOMRef(ref); + let wrapperRef = useRef(null); return ( - - + + {children} @@ -51,10 +53,9 @@ let typeMap = { }; let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject) { - 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( @@ -87,8 +88,9 @@ 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 ( - <> +
- +
); }); diff --git a/packages/@react-spectrum/overlays/src/Overlay.tsx b/packages/@react-spectrum/overlays/src/Overlay.tsx index 256710fd66d..7f5f6db031b 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) { - 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(() => { @@ -53,7 +53,8 @@ function Overlay(props: OverlayProps, ref: DOMRef) { onExited={handleExited} onEnter={onEnter} onEntering={onEntering} - onEntered={handleEntered}> + onEntered={handleEntered} + nodeRef={nodeRef}> {children} diff --git a/packages/@react-spectrum/overlays/src/Popover.tsx b/packages/@react-spectrum/overlays/src/Popover.tsx index 8f3a3cfe3df..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 } /** @@ -52,10 +53,11 @@ function Popover(props: PopoverProps, ref: DOMRef) { ...otherProps } = props; let domRef = useDOMRef(ref); + let wrapperRef = useRef(null); return ( - - + + {children} @@ -68,7 +70,8 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject +
{!isNonModal && }
- +
); }); diff --git a/packages/@react-spectrum/overlays/src/Tray.tsx b/packages/@react-spectrum/overlays/src/Tray.tsx index 0db74081731..149a9d6a648 100644 --- a/packages/@react-spectrum/overlays/src/Tray.tsx +++ b/packages/@react-spectrum/overlays/src/Tray.tsx @@ -17,28 +17,30 @@ 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'; -interface TrayProps extends AriaModalOverlayProps, StyleProps, OverlayProps { +interface TrayProps extends AriaModalOverlayProps, StyleProps, Omit { children: ReactNode, state: OverlayTriggerState, isFixedHeight?: boolean } interface TrayWrapperProps extends TrayProps { - isOpen?: boolean + isOpen?: boolean, + wrapperRef: MutableRefObject } function Tray(props: TrayProps, ref: DOMRef) { let {children, state, ...otherProps} = props; let domRef = useDOMRef(ref); + let wrapperRef = useRef(null); return ( - - + + {children} @@ -50,7 +52,8 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject +
- +
); }); diff --git a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx index b1842cf03b4..dd15f7598df 100644 --- a/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx +++ b/packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx @@ -31,8 +31,7 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) { trigger: triggerAction } = props; - let [trigger, tooltip] = React.Children.toArray(children); - + let [trigger, tooltip] = React.Children.toArray(children) as [ReactElement, ReactElement]; let state = useTooltipTriggerState(props); let tooltipTriggerRef = useRef(); @@ -68,7 +67,7 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) { arrowProps, ...tooltipProps }}> - + {tooltip} diff --git a/packages/@react-types/overlays/src/index.d.ts b/packages/@react-types/overlays/src/index.d.ts index abdb5a79467..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 {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' | @@ -71,10 +71,11 @@ export interface OverlayProps { onEntered?: () => void, onExit?: () => void, onExiting?: () => void, - onExited?: () => void + onExited?: () => void, + nodeRef: MutableRefObject } -export interface ModalProps extends StyleProps, OverlayProps { +export interface ModalProps extends StyleProps, Omit { 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 { children: ReactNode, placement?: PlacementAxis, arrowProps?: HTMLAttributes, @@ -94,7 +95,7 @@ export interface PopoverProps extends StyleProps, OverlayProps { isDismissable?: boolean } -export interface TrayProps extends StyleProps, OverlayProps { +export interface TrayProps extends StyleProps, Omit { children: ReactElement, isOpen?: boolean, onClose?: () => void,