@react-spectrum/overlays 4.0.0 → 5.0.0

package/dist/module.js

@@ -1,8 +1,8 @@
 import "./main.css";
 import {Provider as $fQOb3$Provider} from "@react-spectrum/provider";
-import $fQOb3$react, {useState as $fQOb3$useState, useCallback as $fQOb3$useCallback, forwardRef as $fQOb3$forwardRef, useRef as $fQOb3$useRef} from "react";
+import $fQOb3$react, {useState as $fQOb3$useState, useCallback as $fQOb3$useCallback, useRef as $fQOb3$useRef, forwardRef as $fQOb3$forwardRef} from "react";
 import {Overlay as $fQOb3$Overlay, usePopover as $fQOb3$usePopover, DismissButton as $fQOb3$DismissButton, useModalOverlay as $fQOb3$useModalOverlay} from "@react-aria/overlays";
-import $fQOb3$reacttransitiongroupTransition from "react-transition-group/Transition";
+import {Transition as $fQOb3$Transition} from "react-transition-group";
 import {useDOMRef as $fQOb3$useDOMRef, useStyleProps as $fQOb3$useStyleProps, classNames as $fQOb3$classNames} from "@react-spectrum/utils";
 import {useLayoutEffect as $fQOb3$useLayoutEffect, useViewportSize as $fQOb3$useViewportSize} from "@react-aria/utils";
 
@@ -12,25 +12,54 @@ function $parcel$interopDefault(a) {
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
-
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ /// <reference types="css-module-types" />
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ /*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
 const $bc765a7a041310da$var$OPEN_STATES = {
     entering: false,
     entered: true
 };
 function $bc765a7a041310da$export$b847a40ee92eff38(props) {
-    var child1;
-    return(/*#__PURE__*/ $fQOb3$react.createElement($fQOb3$reacttransitiongroupTransition, {
+    var child;
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$Transition), {
         timeout: {
             enter: 0,
             exit: 350
         },
         ...props
-    }, (state)=>$fQOb3$react.Children.map(props.children, (child)=>child && /*#__PURE__*/ $fQOb3$react.cloneElement(child, {
+    }, (state)=>(0, $fQOb3$react).Children.map(props.children, (child)=>child && /*#__PURE__*/ (0, $fQOb3$react).cloneElement(child, {
                 isOpen: !!$bc765a7a041310da$var$OPEN_STATES[state]
-            })
-        )
-    ));
+            })));
 }
 
 
@@ -38,15 +67,15 @@ function $bc765a7a041310da$export$b847a40ee92eff38(props) {
 
 
 function $70305dc5fb729c3b$var$Overlay(props, ref) {
-    let { children: children , isOpen: isOpen , container: container , onEnter: onEnter , onEntering: onEntering , onEntered: onEntered , onExit: onExit , onExiting: onExiting , onExited: onExited  } = props;
-    let [exited, setExited] = $fQOb3$useState(!isOpen);
-    let handleEntered = $fQOb3$useCallback(()=>{
+    let { children: children , isOpen: isOpen , container: container , onEnter: onEnter , onEntering: onEntering , onEntered: onEntered , onExit: onExit , onExiting: onExiting , onExited: onExited , nodeRef: nodeRef  } = props;
+    let [exited, setExited] = (0, $fQOb3$useState)(!isOpen);
+    let handleEntered = (0, $fQOb3$useCallback)(()=>{
         setExited(false);
         if (onEntered) onEntered();
     }, [
         onEntered
     ]);
-    let handleExited = $fQOb3$useCallback(()=>{
+    let handleExited = (0, $fQOb3$useCallback)(()=>{
         setExited(true);
         if (onExited) onExited();
     }, [
@@ -56,16 +85,16 @@ function $70305dc5fb729c3b$var$Overlay(props, ref) {
     let mountOverlay = isOpen || !exited;
     if (!mountOverlay) // Don't bother showing anything if we don't have to.
     return null;
-    return(/*#__PURE__*/ $fQOb3$react.createElement($fQOb3$Overlay, {
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$Overlay), {
         portalContainer: container
-    }, /*#__PURE__*/ $fQOb3$react.createElement($fQOb3$Provider, {
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$Provider), {
         ref: ref,
         UNSAFE_style: {
-            background: 'transparent',
-            isolation: 'isolate'
+            background: "transparent",
+            isolation: "isolate"
         },
         isDisabled: false
-    }, /*#__PURE__*/ $fQOb3$react.createElement($bc765a7a041310da$export$b847a40ee92eff38, {
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $bc765a7a041310da$export$b847a40ee92eff38), {
         in: isOpen,
         appear: true,
         onExit: onExit,
@@ -73,13 +102,24 @@ function $70305dc5fb729c3b$var$Overlay(props, ref) {
         onExited: handleExited,
         onEnter: onEnter,
         onEntering: onEntering,
-        onEntered: handleEntered
-    }, children))));
+        onEntered: handleEntered,
+        nodeRef: nodeRef
+    }, children)));
 }
-let $70305dc5fb729c3b$export$c6fdb837b070b4ff = /*#__PURE__*/ $fQOb3$react.forwardRef($70305dc5fb729c3b$var$Overlay);
-
+let $70305dc5fb729c3b$export$c6fdb837b070b4ff = /*#__PURE__*/ (0, $fQOb3$react).forwardRef($70305dc5fb729c3b$var$Overlay);
 
 
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
 
 var $853e19557ad8790f$exports = {};
@@ -148,7 +188,17 @@ $645594d913f34a2a$export$cf634262e726cd19 = "spectrum-Popover--dialog_6115b8";
 $645594d913f34a2a$export$d8b16c5377728262 = "spectrum-Popover--withTip_6115b8";
 
 
-
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
 var $c77d7b73b2bbd0fb$exports = {};
 
@@ -164,12 +214,12 @@ $c77d7b73b2bbd0fb$export$8eb3860104039b44 = "spectrum-Underlay--transparent_eb76
 
 
 function $76a452f4e3df11be$export$f360afc887607b02({ isOpen: isOpen , isTransparent: isTransparent  }) {
-    return(/*#__PURE__*/ $fQOb3$react.createElement("div", {
-        className: $fQOb3$classNames((/*@__PURE__*/$parcel$interopDefault($c77d7b73b2bbd0fb$exports)), 'spectrum-Underlay', {
-            'is-open': isOpen,
-            'spectrum-Underlay--transparent': isTransparent
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        className: (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($c77d7b73b2bbd0fb$exports))), "spectrum-Underlay", {
+            "is-open": isOpen,
+            "spectrum-Underlay--transparent": isTransparent
         })
-    }));
+    });
 }
 
 
@@ -181,35 +231,41 @@ function $76a452f4e3df11be$export$f360afc887607b02({ isOpen: isOpen , isTranspar
  * the path always starts at 0 so that it perfectly overlaps the popover's border.
  * See bottom of file for more explanation.
  */ let $17b503f7de08fecc$var$arrowPlacement = {
-    left: 'right',
-    right: 'right',
-    top: 'bottom',
-    bottom: 'bottom'
+    left: "right",
+    right: "right",
+    top: "bottom",
+    bottom: "bottom"
 };
 function $17b503f7de08fecc$var$Popover(props, ref) {
     let { children: children , state: state , ...otherProps } = props;
-    let domRef = $fQOb3$useDOMRef(ref);
-    return(/*#__PURE__*/ $fQOb3$react.createElement($70305dc5fb729c3b$export$c6fdb837b070b4ff, {
+    let domRef = (0, $fQOb3$useDOMRef)(ref);
+    let wrapperRef = (0, $fQOb3$useRef)(null);
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $70305dc5fb729c3b$export$c6fdb837b070b4ff), {
         ...otherProps,
-        isOpen: state.isOpen
-    }, /*#__PURE__*/ $fQOb3$react.createElement($17b503f7de08fecc$var$PopoverWrapper, {
+        isOpen: state.isOpen,
+        nodeRef: wrapperRef
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement($17b503f7de08fecc$var$PopoverWrapper, {
         ref: domRef,
-        ...props
-    }, children)));
+        ...props,
+        wrapperRef: wrapperRef
+    }, children));
 }
-const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ $fQOb3$forwardRef((props, ref)=>{
-    let { children: children , isOpen: isOpen , hideArrow: hideArrow , isNonModal: isNonModal , state: state  } = props;
-    let { styleProps: styleProps  } = $fQOb3$useStyleProps(props);
-    let { popoverProps: popoverProps , arrowProps: arrowProps , underlayProps: underlayProps , placement: placement  } = $fQOb3$usePopover({
+const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ (0, $fQOb3$forwardRef)((props, ref)=>{
+    let { children: children , isOpen: isOpen , hideArrow: hideArrow , isNonModal: isNonModal , state: state , wrapperRef: wrapperRef  } = props;
+    let { styleProps: styleProps  } = (0, $fQOb3$useStyleProps)(props);
+    let { popoverProps: popoverProps , arrowProps: arrowProps , underlayProps: underlayProps , placement: placement  } = (0, $fQOb3$usePopover)({
         ...props,
         popoverRef: ref,
         maxHeight: null
     }, state);
-    return(/*#__PURE__*/ $fQOb3$react.createElement($fQOb3$react.Fragment, null, !isNonModal && /*#__PURE__*/ $fQOb3$react.createElement($76a452f4e3df11be$export$f360afc887607b02, {
+    // 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 /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        ref: wrapperRef
+    }, !isNonModal && /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $76a452f4e3df11be$export$f360afc887607b02), {
         isTransparent: true,
         ...underlayProps,
         isOpen: isOpen
-    }), /*#__PURE__*/ $fQOb3$react.createElement("div", {
+    }), /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
         ...styleProps,
         ...popoverProps,
         style: {
@@ -217,39 +273,39 @@ const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ $fQOb3$forwardRef((pr
             ...popoverProps.style
         },
         ref: ref,
-        className: $fQOb3$classNames((/*@__PURE__*/$parcel$interopDefault($645594d913f34a2a$exports)), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
-            'spectrum-Popover--withTip': !hideArrow,
-            'is-open': isOpen
-        }, $fQOb3$classNames((/*@__PURE__*/$parcel$interopDefault($853e19557ad8790f$exports)), 'spectrum-Popover', 'react-spectrum-Popover'), styleProps.className),
+        className: (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($645594d913f34a2a$exports))), "spectrum-Popover", `spectrum-Popover--${placement}`, {
+            "spectrum-Popover--withTip": !hideArrow,
+            "is-open": isOpen
+        }, (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($853e19557ad8790f$exports))), "spectrum-Popover", "react-spectrum-Popover"), styleProps.className),
         role: "presentation",
         "data-testid": "popover"
-    }, !isNonModal && /*#__PURE__*/ $fQOb3$react.createElement($fQOb3$DismissButton, {
+    }, !isNonModal && /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$DismissButton), {
         onDismiss: state.close
-    }), children, hideArrow ? null : /*#__PURE__*/ $fQOb3$react.createElement($17b503f7de08fecc$var$Arrow, {
+    }), children, hideArrow ? null : /*#__PURE__*/ (0, $fQOb3$react).createElement($17b503f7de08fecc$var$Arrow, {
         arrowProps: arrowProps,
         direction: $17b503f7de08fecc$var$arrowPlacement[placement]
-    }), /*#__PURE__*/ $fQOb3$react.createElement($fQOb3$DismissButton, {
+    }), /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$DismissButton), {
         onDismiss: state.close
-    }))));
+    })));
 });
 let $17b503f7de08fecc$var$ROOT_2 = Math.sqrt(2);
 function $17b503f7de08fecc$var$Arrow(props) {
-    let [size, setSize] = $fQOb3$useState(20);
-    let [borderWidth, setBorderWidth] = $fQOb3$useState(1);
-    let ref = $fQOb3$useRef();
+    let [size, setSize] = (0, $fQOb3$useState)(20);
+    let [borderWidth, setBorderWidth] = (0, $fQOb3$useState)(1);
+    let ref = (0, $fQOb3$useRef)();
     // get the css value for the tip size and divide it by 2 for this arrow implementation
-    $fQOb3$useLayoutEffect(()=>{
+    (0, $fQOb3$useLayoutEffect)(()=>{
         if (ref.current) {
-            let spectrumTipWidth = window.getComputedStyle(ref.current).getPropertyValue('--spectrum-popover-tip-size');
-            if (spectrumTipWidth !== '') setSize(parseInt(spectrumTipWidth, 10) / 2);
-            let spectrumBorderWidth = window.getComputedStyle(ref.current).getPropertyValue('--spectrum-popover-tip-borderWidth');
-            if (spectrumBorderWidth !== '') setBorderWidth(parseInt(spectrumBorderWidth, 10));
+            let spectrumTipWidth = window.getComputedStyle(ref.current).getPropertyValue("--spectrum-popover-tip-size");
+            if (spectrumTipWidth !== "") setSize(parseInt(spectrumTipWidth, 10) / 2);
+            let spectrumBorderWidth = window.getComputedStyle(ref.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';
+    let landscape = props.direction === "top" || props.direction === "bottom";
+    let mirror = props.direction === "left" || props.direction === "top";
     let borderDiagonal = borderWidth * $17b503f7de08fecc$var$ROOT_2;
     let halfBorderDiagonal = borderDiagonal / 2;
     let secondary = 2 * size + 2 * borderDiagonal;
@@ -260,44 +316,66 @@ function $17b503f7de08fecc$var$Arrow(props) {
     let secondaryMiddle = secondary / 2;
     let secondaryEnd = secondary - halfBorderDiagonal;
     let pathData = landscape ? [
-        'M',
+        "M",
         secondaryStart,
         primaryStart,
-        'L',
+        "L",
         secondaryMiddle,
         primaryEnd,
-        'L',
+        "L",
         secondaryEnd,
         primaryStart
     ] : [
-        'M',
+        "M",
         primaryStart,
         secondaryStart,
-        'L',
+        "L",
         primaryEnd,
         secondaryMiddle,
-        'L',
+        "L",
         primaryStart,
         secondaryEnd
     ];
     let arrowProps = props.arrowProps;
-    /* use ceil because the svg needs to always accomodate the path inside it */ return(/*#__PURE__*/ $fQOb3$react.createElement("svg", {
+    /* use ceil because the svg needs to always accomodate the path inside it */ return /*#__PURE__*/ (0, $fQOb3$react).createElement("svg", {
         xmlns: "http://www.w3.org/svg/2000",
         width: Math.ceil(landscape ? secondary : primary),
         height: Math.ceil(landscape ? primary : secondary),
         style: props.style,
-        className: $fQOb3$classNames((/*@__PURE__*/$parcel$interopDefault($645594d913f34a2a$exports)), 'spectrum-Popover-tip'),
+        className: (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($645594d913f34a2a$exports))), "spectrum-Popover-tip"),
         ref: ref,
         ...arrowProps
-    }, /*#__PURE__*/ $fQOb3$react.createElement("path", {
-        className: $fQOb3$classNames((/*@__PURE__*/$parcel$interopDefault($645594d913f34a2a$exports)), 'spectrum-Popover-tip-triangle'),
-        d: pathData.join(' ')
-    })));
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement("path", {
+        className: (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($645594d913f34a2a$exports))), "spectrum-Popover-tip-triangle"),
+        d: pathData.join(" ")
+    }));
 }
-let $17b503f7de08fecc$export$5b6b19405a83ff9d = /*#__PURE__*/ $fQOb3$forwardRef($17b503f7de08fecc$var$Popover);
-
-
-
+let $17b503f7de08fecc$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $fQOb3$forwardRef)($17b503f7de08fecc$var$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.
+ * This did not work because the problem was in the svg partial pixel end of the path in the popover right and popover bottom.
+ * - I tried creating an extra 'bandaid' path that matched the background color and would overlap the popover border.
+ * This didn't work because the border on the svg triangle didn't extend all the way to match nicely with the popover border.
+ * - I tried getting the client bounding box and setting the svg to that partial pixel value
+ * This didn't work because again the issue was inside the svg
+ * - I didn't try drawing the svg backwards
+ * This could still be tried
+ * - I tried changing the calculation of the popover placement AND the svg height/width so that they were all rounded
+ * This seems to have done the trick.
+ */ 
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
 var $f7ed9f5201273840$exports = {};
 
@@ -328,52 +406,68 @@ $f7ed9f5201273840$export$175dd699720b5fb7 = "spectrum-Modal--fullscreenTakeover_
 
 function $842084dfa182af65$var$Modal(props, ref) {
     let { children: children , state: state , ...otherProps } = props;
-    let domRef = $fQOb3$useDOMRef(ref);
-    return(/*#__PURE__*/ $fQOb3$react.createElement($70305dc5fb729c3b$export$c6fdb837b070b4ff, {
+    let domRef = (0, $fQOb3$useDOMRef)(ref);
+    let wrapperRef = (0, $fQOb3$useRef)(null);
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $70305dc5fb729c3b$export$c6fdb837b070b4ff), {
         ...otherProps,
-        isOpen: state.isOpen
-    }, /*#__PURE__*/ $fQOb3$react.createElement($842084dfa182af65$var$ModalWrapper, {
+        isOpen: state.isOpen,
+        nodeRef: wrapperRef
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement($842084dfa182af65$var$ModalWrapper, {
         ...props,
+        wrapperRef: wrapperRef,
         ref: domRef
-    }, children)));
+    }, children));
 }
 let $842084dfa182af65$var$typeMap = {
-    fullscreen: 'fullscreen',
-    fullscreenTakeover: 'fullscreenTakeover'
+    fullscreen: "fullscreen",
+    fullscreenTakeover: "fullscreenTakeover"
 };
-let $842084dfa182af65$var$ModalWrapper = /*#__PURE__*/ $fQOb3$forwardRef(function(props, ref) {
-    let { type: type , children: children , state: state , isOpen: isOpen  } = props;
+let $842084dfa182af65$var$ModalWrapper = /*#__PURE__*/ (0, $fQOb3$forwardRef)(function(props, ref) {
+    let { type: type , children: children , state: state , isOpen: isOpen , wrapperRef: wrapperRef  } = props;
     let typeVariant = $842084dfa182af65$var$typeMap[type];
-    let { styleProps: styleProps  } = $fQOb3$useStyleProps(props);
-    let { modalProps: modalProps , underlayProps: underlayProps  } = $fQOb3$useModalOverlay(props, state, ref);
-    let wrapperClassName = $fQOb3$classNames((/*@__PURE__*/$parcel$interopDefault($f7ed9f5201273840$exports)), 'spectrum-Modal-wrapper', $fQOb3$classNames((/*@__PURE__*/$parcel$interopDefault($853e19557ad8790f$exports)), 'spectrum-Modal-wrapper', 'react-spectrum-Modal-wrapper'));
-    let modalClassName = $fQOb3$classNames((/*@__PURE__*/$parcel$interopDefault($f7ed9f5201273840$exports)), 'spectrum-Modal', {
-        'is-open': isOpen
-    }, $fQOb3$classNames((/*@__PURE__*/$parcel$interopDefault($853e19557ad8790f$exports)), 'spectrum-Modal', 'react-spectrum-Modal'), {
+    let { styleProps: styleProps  } = (0, $fQOb3$useStyleProps)(props);
+    let { modalProps: modalProps , underlayProps: underlayProps  } = (0, $fQOb3$useModalOverlay)(props, state, ref);
+    let wrapperClassName = (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f7ed9f5201273840$exports))), "spectrum-Modal-wrapper", (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($853e19557ad8790f$exports))), "spectrum-Modal-wrapper", "react-spectrum-Modal-wrapper"));
+    let modalClassName = (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f7ed9f5201273840$exports))), "spectrum-Modal", {
+        "is-open": isOpen
+    }, (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($853e19557ad8790f$exports))), "spectrum-Modal", "react-spectrum-Modal"), {
         [`spectrum-Modal--${typeVariant}`]: typeVariant
     }, styleProps.className);
-    let viewport = $fQOb3$useViewportSize();
+    let viewport = (0, $fQOb3$useViewportSize)();
     let style = {
-        '--spectrum-visual-viewport-height': viewport.height + 'px'
+        "--spectrum-visual-viewport-height": viewport.height + "px"
     };
-    return(/*#__PURE__*/ $fQOb3$react.createElement($fQOb3$react.Fragment, null, /*#__PURE__*/ $fQOb3$react.createElement($76a452f4e3df11be$export$f360afc887607b02, {
+    // 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 /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        ref: wrapperRef
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $76a452f4e3df11be$export$f360afc887607b02), {
         ...underlayProps,
         isOpen: isOpen
-    }), /*#__PURE__*/ $fQOb3$react.createElement("div", {
+    }), /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
         className: wrapperClassName,
         style: style
-    }, /*#__PURE__*/ $fQOb3$react.createElement("div", {
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
         ...styleProps,
         ...modalProps,
         ref: ref,
         className: modalClassName,
         "data-testid": "modal"
-    }, children))));
+    }, children)));
 });
-let $842084dfa182af65$export$2b77a92f1a5ad772 = /*#__PURE__*/ $fQOb3$forwardRef($842084dfa182af65$var$Modal);
-
+let $842084dfa182af65$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $fQOb3$forwardRef)($842084dfa182af65$var$Modal);
 
 
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
 
 
@@ -398,19 +492,22 @@ $930b2f4095bb11d1$export$79bfb05e59a300b = "spectrum-Tray--fixedHeight_23bf66";
 
 function $1afc87f3d16a5a1c$var$Tray(props, ref) {
     let { children: children , state: state , ...otherProps } = props;
-    let domRef = $fQOb3$useDOMRef(ref);
-    return(/*#__PURE__*/ $fQOb3$react.createElement($70305dc5fb729c3b$export$c6fdb837b070b4ff, {
+    let domRef = (0, $fQOb3$useDOMRef)(ref);
+    let wrapperRef = (0, $fQOb3$useRef)(null);
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $70305dc5fb729c3b$export$c6fdb837b070b4ff), {
         ...otherProps,
-        isOpen: state.isOpen
-    }, /*#__PURE__*/ $fQOb3$react.createElement($1afc87f3d16a5a1c$var$TrayWrapper, {
+        isOpen: state.isOpen,
+        nodeRef: wrapperRef
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement($1afc87f3d16a5a1c$var$TrayWrapper, {
         ...props,
+        wrapperRef: wrapperRef,
         ref: domRef
-    }, children)));
+    }, children));
 }
-let $1afc87f3d16a5a1c$var$TrayWrapper = /*#__PURE__*/ $fQOb3$forwardRef(function(props, ref) {
-    let { children: children , isOpen: isOpen , isFixedHeight: isFixedHeight , state: state  } = props;
-    let { styleProps: styleProps  } = $fQOb3$useStyleProps(props);
-    let { modalProps: modalProps , underlayProps: underlayProps  } = $fQOb3$useModalOverlay({
+let $1afc87f3d16a5a1c$var$TrayWrapper = /*#__PURE__*/ (0, $fQOb3$forwardRef)(function(props, ref) {
+    let { children: children , isOpen: isOpen , isFixedHeight: isFixedHeight , state: state , wrapperRef: wrapperRef  } = props;
+    let { styleProps: styleProps  } = (0, $fQOb3$useStyleProps)(props);
+    let { modalProps: modalProps , underlayProps: underlayProps  } = (0, $fQOb3$useModalOverlay)({
         ...props,
         isDismissable: true
     }, state, ref);
@@ -421,34 +518,37 @@ let $1afc87f3d16a5a1c$var$TrayWrapper = /*#__PURE__*/ $fQOb3$forwardRef(function
     // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.
     // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard
     // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
-    let viewport = $fQOb3$useViewportSize();
+    let viewport = (0, $fQOb3$useViewportSize)();
     let wrapperStyle = {
-        '--spectrum-visual-viewport-height': viewport.height + 'px'
+        "--spectrum-visual-viewport-height": viewport.height + "px"
     };
-    let wrapperClassName = $fQOb3$classNames((/*@__PURE__*/$parcel$interopDefault($930b2f4095bb11d1$exports)), 'spectrum-Tray-wrapper');
-    let className = $fQOb3$classNames((/*@__PURE__*/$parcel$interopDefault($930b2f4095bb11d1$exports)), 'spectrum-Tray', {
-        'is-open': isOpen,
-        'spectrum-Tray--fixedHeight': isFixedHeight
-    }, $fQOb3$classNames((/*@__PURE__*/$parcel$interopDefault($853e19557ad8790f$exports)), 'spectrum-Tray', 'react-spectrum-Tray'), styleProps.className);
-    return(/*#__PURE__*/ $fQOb3$react.createElement($fQOb3$react.Fragment, null, /*#__PURE__*/ $fQOb3$react.createElement($76a452f4e3df11be$export$f360afc887607b02, {
+    let wrapperClassName = (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($930b2f4095bb11d1$exports))), "spectrum-Tray-wrapper");
+    let className = (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($930b2f4095bb11d1$exports))), "spectrum-Tray", {
+        "is-open": isOpen,
+        "spectrum-Tray--fixedHeight": isFixedHeight
+    }, (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($853e19557ad8790f$exports))), "spectrum-Tray", "react-spectrum-Tray"), 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 /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        ref: wrapperRef
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $76a452f4e3df11be$export$f360afc887607b02), {
         ...underlayProps,
         isOpen: isOpen
-    }), /*#__PURE__*/ $fQOb3$react.createElement("div", {
+    }), /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
         className: wrapperClassName,
         style: wrapperStyle
-    }, /*#__PURE__*/ $fQOb3$react.createElement("div", {
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
         ...styleProps,
         ...modalProps,
         className: className,
         ref: ref,
         "data-testid": "tray"
-    }, /*#__PURE__*/ $fQOb3$react.createElement($fQOb3$DismissButton, {
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$DismissButton), {
         onDismiss: state.close
-    }), children, /*#__PURE__*/ $fQOb3$react.createElement($fQOb3$DismissButton, {
+    }), children, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$DismissButton), {
         onDismiss: state.close
-    })))));
+    }))));
 });
-let $1afc87f3d16a5a1c$export$4589ed81930b555c = /*#__PURE__*/ $fQOb3$forwardRef($1afc87f3d16a5a1c$var$Tray);
+let $1afc87f3d16a5a1c$export$4589ed81930b555c = /*#__PURE__*/ (0, $fQOb3$forwardRef)($1afc87f3d16a5a1c$var$Tray);