@react-spectrum/overlays 4.1.0 → 5.1.0

package/src/Popover.tsx

@@ -10,13 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaPopoverProps, DismissButton, usePopover} from '@react-aria/overlays';
+import {AriaPopoverProps, DismissButton, PopoverAria, usePopover} from '@react-aria/overlays';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 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,17 @@ interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'
 }
 
 interface PopoverWrapperProps extends PopoverProps {
-  isOpen?: boolean
+  isOpen?: boolean,
+  wrapperRef: MutableRefObject<HTMLDivElement>
+}
+
+interface ArrowProps {
+  arrowProps: PopoverAria['arrowProps'],
+  isLandscape: boolean,
+  arrowRef?: RefObject<SVGSVGElement>,
+  primary: number,
+  secondary: number,
+  borderDiagonal: number
 }
 
 /**
@@ -52,10 +62,11 @@ function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
     ...otherProps
   } = props;
   let domRef = useDOMRef(ref);
+  let wrapperRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Overlay {...otherProps} isOpen={state.isOpen}>
-      <PopoverWrapper ref={domRef} {...props}>
+    <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>
+      <PopoverWrapper ref={domRef} {...props} wrapperRef={wrapperRef}>
         {children}
       </PopoverWrapper>
     </Overlay>
@@ -68,18 +79,27 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
     isOpen,
     hideArrow,
     isNonModal,
-    state
+    state,
+    wrapperRef
   } = props;
   let {styleProps} = useStyleProps(props);
 
+  let {size, borderWidth, arrowRef} = useArrowSize();
+  const borderRadius = usePopoverBorderRadius(ref);
+  let borderDiagonal = borderWidth * Math.SQRT2;
+  let primary = size + borderDiagonal;
+  let secondary = primary * 2;
   let {popoverProps, arrowProps, underlayProps, placement} = usePopover({
     ...props,
     popoverRef: ref,
-    maxHeight: null
+    maxHeight: null,
+    arrowSize: hideArrow ? 0 : secondary,
+    arrowBoundaryOffset: borderRadius
   }, state);
 
+  // Attach Transition's nodeRef to outermost 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}
@@ -111,54 +131,68 @@ const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: RefObject<HT
         {!isNonModal && <DismissButton onDismiss={state.close} />}
         {children}
         {hideArrow ? null : (
-          <Arrow arrowProps={arrowProps} direction={arrowPlacement[placement]} />
+          <Arrow
+            arrowProps={arrowProps}
+            isLandscape={arrowPlacement[placement] === 'bottom'}
+            arrowRef={arrowRef}
+            primary={primary}
+            secondary={secondary}
+            borderDiagonal={borderDiagonal} />
         )}
         <DismissButton onDismiss={state.close} />
       </div>
-    </>
+    </div>
   );
 });
 
-let ROOT_2 = Math.sqrt(2);
+function usePopoverBorderRadius(popoverRef: RefObject<HTMLDivElement>) {
+  let [borderRadius, setBorderRadius] = useState(0);
+  useLayoutEffect(() => {
+    if (popoverRef.current) {
+      let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
+      if (spectrumBorderRadius !== '') {
+        setBorderRadius(parseInt(spectrumBorderRadius, 10));
+      }
+    }
+  }, [popoverRef]);
+  return borderRadius;
+}
 
-function Arrow(props) {
+function useArrowSize() {
   let [size, setSize] = useState(20);
   let [borderWidth, setBorderWidth] = useState(1);
-  let ref = useRef();
+  let arrowRef = useRef<SVGSVGElement>(null);
   // get the css value for the tip size and divide it by 2 for this arrow implementation
   useLayoutEffect(() => {
-    if (ref.current) {
-      let spectrumTipWidth = window.getComputedStyle(ref.current)
+    if (arrowRef.current) {
+      let spectrumTipWidth = window.getComputedStyle(arrowRef.current)
         .getPropertyValue('--spectrum-popover-tip-size');
       if (spectrumTipWidth !== '') {
         setSize(parseInt(spectrumTipWidth, 10) / 2);
       }
 
-      let spectrumBorderWidth = window.getComputedStyle(ref.current)
+      let spectrumBorderWidth = window.getComputedStyle(arrowRef.current)
         .getPropertyValue('--spectrum-popover-tip-borderWidth');
       if (spectrumBorderWidth !== '') {
         setBorderWidth(parseInt(spectrumBorderWidth, 10));
       }
     }
-  }, [ref]);
-
-  let landscape = props.direction === 'top' || props.direction === 'bottom';
-  let mirror = props.direction === 'left' || props.direction === 'top';
+  }, []);
+  return {size, borderWidth, arrowRef};
+}
 
-  let borderDiagonal = borderWidth * ROOT_2;
+function Arrow(props: ArrowProps) {
+  let {primary, secondary, isLandscape, arrowProps, borderDiagonal, arrowRef} = props;
   let halfBorderDiagonal = borderDiagonal / 2;
 
-  let secondary = 2 * size + 2 * borderDiagonal;
-  let primary = size + borderDiagonal;
-
-  let primaryStart = mirror ? primary : 0;
-  let primaryEnd = mirror ? halfBorderDiagonal : primary - halfBorderDiagonal;
+  let primaryStart = 0;
+  let primaryEnd = primary - halfBorderDiagonal;
 
   let secondaryStart = halfBorderDiagonal;
   let secondaryMiddle = secondary / 2;
   let secondaryEnd = secondary - halfBorderDiagonal;
 
-  let pathData = landscape ? [
+  let pathData = isLandscape ? [
     'M', secondaryStart, primaryStart,
     'L', secondaryMiddle, primaryEnd,
     'L', secondaryEnd, primaryStart
@@ -167,17 +201,15 @@ function Arrow(props) {
     'L', primaryEnd, secondaryMiddle,
     'L', primaryStart, secondaryEnd
   ];
-  let arrowProps = props.arrowProps;
 
-  /* use ceil because the svg needs to always accomodate the path inside it */
+  /* use ceil because the svg needs to always accommodate the path inside it */
   return (
     <svg
       xmlns="http://www.w3.org/svg/2000"
-      width={Math.ceil(landscape ? secondary : primary)}
-      height={Math.ceil(landscape ? primary : secondary)}
-      style={props.style}
+      width={Math.ceil(isLandscape ? secondary : primary)}
+      height={Math.ceil(isLandscape ? primary : secondary)}
       className={classNames(styles, 'spectrum-Popover-tip')}
-      ref={ref}
+      ref={arrowRef}
       {...arrowProps}>
       <path className={classNames(styles, 'spectrum-Popover-tip-triangle')} d={pathData.join(' ')} />
     </svg>

package/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<OverlayProps, 'nodeRef'> {
   children: ReactNode,
   state: OverlayTriggerState,
   isFixedHeight?: boolean
 }
 
 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 wrapperRef = useRef<HTMLDivElement>(null);
 
   return (
-    <Overlay {...otherProps} isOpen={state.isOpen}>
-      <TrayWrapper {...props} ref={domRef}>
+    <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>
+      <TrayWrapper {...props} wrapperRef={wrapperRef} ref={domRef}>
         {children}
       </TrayWrapper>
     </Overlay>
@@ -50,7 +52,8 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
     children,
     isOpen,
     isFixedHeight,
-    state
+    state,
+    wrapperRef
   } = props;
   let {styleProps} = useStyleProps(props);
 
@@ -91,8 +94,9 @@ 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} />
       <div className={wrapperClassName} style={wrapperStyle}>
         <div
@@ -106,7 +110,7 @@ let TrayWrapper = forwardRef(function (props: TrayWrapperProps, ref: RefObject<H
           <DismissButton onDismiss={state.close} />
         </div>
       </div>
-    </>
+    </div>
   );
 });