@react-spectrum/overlays 5.6.5 → 5.7.1

package/src/Modal.tsx

@@ -18,9 +18,9 @@ import {Overlay} from './Overlay';
 import {OverlayProps} from '@react-types/overlays';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import React, {forwardRef, MutableRefObject, ReactNode, useRef} from 'react';
+import React, {ForwardedRef, forwardRef, ReactNode, useRef} from 'react';
 import {Underlay} from './Underlay';
-import {useViewportSize} from '@react-aria/utils';
+import {useObjectRef, useViewportSize} from '@react-aria/utils';
 
 interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {
   children: ReactNode,
@@ -30,10 +30,11 @@ interface ModalProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProp
 
 interface ModalWrapperProps extends ModalProps {
   isOpen?: boolean,
-  wrapperRef: MutableRefObject<HTMLDivElement>
+  wrapperRef: RefObject<HTMLDivElement | null>,
+  children: ReactNode
 }
 
-function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
+export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
   let {children, state, ...otherProps} = props;
   let domRef = useDOMRef(ref);
   let wrapperRef = useRef<HTMLDivElement>(null);
@@ -45,18 +46,19 @@ function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
       </ModalWrapper>
     </Overlay>
   );
-}
+});
 
 let typeMap = {
   fullscreen: 'fullscreen',
   fullscreenTakeover: 'fullscreenTakeover'
 };
 
-let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject<HTMLDivElement | null>) {
+let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: ForwardedRef<HTMLDivElement | null>) {
   let {type, children, state, isOpen, wrapperRef} = props;
-  let typeVariant = typeMap[type];
+  let typeVariant = type != null ? typeMap[type] : undefined;
   let {styleProps} = useStyleProps(props);
-  let {modalProps, underlayProps} = useModalOverlay(props, state, ref);
+  let objRef = useObjectRef(ref);
+  let {modalProps, underlayProps} = useModalOverlay(props, state, objRef);
 
   let wrapperClassName = classNames(
     modalStyles,
@@ -96,7 +98,7 @@ let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject
         <div
           {...styleProps}
           {...modalProps}
-          ref={ref}
+          ref={objRef}
           className={modalClassName}
           data-testid="modal">
           {children}
@@ -105,6 +107,3 @@ let ModalWrapper = forwardRef(function (props: ModalWrapperProps, ref: RefObject
     </div>
   );
 });
-
-let _Modal = forwardRef(Modal);
-export {_Modal as Modal};

package/src/Overlay.tsx

@@ -17,7 +17,7 @@ import {Provider} from '@react-spectrum/provider';
 import React, {useCallback, useState} from 'react';
 import {Overlay as ReactAriaOverlay} from '@react-aria/overlays';
 
-function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
+export const Overlay = React.forwardRef(function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
   let {
     children,
     isOpen,
@@ -73,7 +73,4 @@ function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
       </Provider>
     </ReactAriaOverlay>
   );
-}
-
-let _Overlay = React.forwardRef(Overlay);
-export {_Overlay as Overlay};
+});

package/src/Popover.tsx

@@ -14,11 +14,11 @@ import {AriaPopoverProps, DismissButton, PopoverAria, usePopover} from '@react-a
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import {DOMRef, RefObject, StyleProps} from '@react-types/shared';
 import {FocusWithinProps, useFocusWithin} from '@react-aria/interactions';
-import {mergeProps, useLayoutEffect} from '@react-aria/utils';
+import {mergeProps, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import {Overlay} from './Overlay';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import React, {forwardRef, MutableRefObject, ReactNode, useRef, useState} from 'react';
+import React, {ForwardedRef, forwardRef, ReactNode, useRef, useState} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/popover/vars.css';
 import {Underlay} from './Underlay';
 
@@ -41,7 +41,7 @@ interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'
 
 interface PopoverWrapperProps extends PopoverProps, FocusWithinProps {
   isOpen?: boolean,
-  wrapperRef: MutableRefObject<HTMLDivElement>
+  wrapperRef: RefObject<HTMLDivElement | null>
 }
 
 interface ArrowProps {
@@ -67,7 +67,7 @@ let arrowPlacement = {
   bottom: 'bottom'
 };
 
-function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
+export const Popover = forwardRef(function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
   let {
     children,
     state,
@@ -83,9 +83,9 @@ function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
       </PopoverWrapper>
     </Overlay>
   );
-}
+});
 
-const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HTMLDivElement | null>) => {
+const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: ForwardedRef<HTMLDivElement | null>) => {
   let {
     children,
     isOpen,
@@ -97,9 +97,10 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
     onDismissButtonPress = () => state.close()
   } = props;
   let {styleProps} = useStyleProps(props);
+  let objRef = useObjectRef(ref);
 
   let {size, borderWidth, arrowRef} = useArrowSize();
-  const borderRadius = usePopoverBorderRadius(ref);
+  const borderRadius = usePopoverBorderRadius(objRef);
   let borderDiagonal = borderWidth * Math.SQRT2;
   let primary = size + borderDiagonal;
   let secondary = primary * 2;
@@ -110,8 +111,8 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
     placement
   } = usePopover({
     ...props,
-    popoverRef: ref,
-    maxHeight: null,
+    popoverRef: objRef,
+    maxHeight: undefined,
     arrowSize: hideArrow ? 0 : secondary,
     arrowBoundaryOffset: borderRadius
   }, state);
@@ -128,7 +129,7 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
           ...styleProps.style,
           ...popoverProps.style
         }}
-        ref={ref}
+        ref={objRef}
         className={
           classNames(
             styles,
@@ -154,7 +155,7 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
         {hideArrow ? null : (
           <Arrow
             arrowProps={arrowProps}
-            isLandscape={arrowPlacement[placement] === 'bottom'}
+            isLandscape={placement != null ? arrowPlacement[placement] === 'bottom' : false}
             arrowRef={arrowRef}
             primary={primary}
             secondary={secondary}
@@ -237,9 +238,6 @@ function Arrow(props: ArrowProps) {
   );
 }
 
-let _Popover = forwardRef(Popover);
-export {_Popover as Popover};
-
 /**
  * More explanation on popover tips.
  * - I tried changing the calculation of the popover placement in an effort to get it squarely onto the pixel grid.

package/src/Tray.tsx

@@ -17,10 +17,10 @@ import {Overlay} from './Overlay';
 import {OverlayProps} from '@react-types/overlays';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import overrideStyles from './overlays.css';
-import React, {forwardRef, MutableRefObject, ReactNode, useRef} from 'react';
+import React, {ForwardedRef, forwardRef, ReactNode, useRef} from 'react';
 import trayStyles from '@adobe/spectrum-css-temp/components/tray/vars.css';
 import {Underlay} from './Underlay';
-import {useViewportSize} from '@react-aria/utils';
+import {useObjectRef, useViewportSize} from '@react-aria/utils';
 
 interface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps, 'nodeRef' | 'shouldContainFocus'> {
   children: ReactNode,
@@ -30,10 +30,10 @@ interface TrayProps extends AriaModalOverlayProps, StyleProps, Omit<OverlayProps
 
 interface TrayWrapperProps extends TrayProps {
   isOpen?: boolean,
-  wrapperRef: MutableRefObject<HTMLDivElement>
+  wrapperRef: RefObject<HTMLDivElement | null>
 }
 
-function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
+export const Tray = forwardRef(function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
   let {children, state, ...otherProps} = props;
   let domRef = useDOMRef(ref);
   let wrapperRef = useRef<HTMLDivElement>(null);
@@ -45,9 +45,9 @@ function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
       </TrayWrapper>
     </Overlay>
   );
-}
+});
 
-let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<HTMLDivElement | null>) {
+let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: ForwardedRef<HTMLDivElement | null>) {
   let {
     children,
     isOpen,
@@ -56,11 +56,12 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
     wrapperRef
   } = props;
   let {styleProps} = useStyleProps(props);
+  let objRef = useObjectRef(ref);
 
   let {modalProps, underlayProps} = useModalOverlay({
     ...props,
     isDismissable: true
-  }, state, ref);
+  }, state, objRef);
 
   // We need to measure the window's height in JS rather than using percentages in CSS
   // so that contents (e.g. menu) can inherit the max-height properly. Using percentages
@@ -103,7 +104,7 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
           {...styleProps}
           {...modalProps}
           className={className}
-          ref={ref}
+          ref={objRef}
           data-testid="tray">
           <DismissButton onDismiss={state.close} />
           {children}
@@ -113,6 +114,3 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
     </div>
   );
 });
-
-let _Tray = forwardRef(Tray);
-export {_Tray as Tray};