@react-spectrum/overlays 4.0.0 → 5.0.0

package/dist/main.js

@@ -2,7 +2,7 @@ require("./main.css");
 var $eLPAa$reactspectrumprovider = require("@react-spectrum/provider");
 var $eLPAa$react = require("react");
 var $eLPAa$reactariaoverlays = require("@react-aria/overlays");
-var $eLPAa$reacttransitiongroupTransition = require("react-transition-group/Transition");
+var $eLPAa$reacttransitiongroup = require("react-transition-group");
 var $eLPAa$reactspectrumutils = require("@react-spectrum/utils");
 var $eLPAa$reactariautils = require("@react-aria/utils");
 
@@ -18,25 +18,54 @@ $parcel$export(module.exports, "Popover", () => $f02bba55a62f20dd$export$5b6b194
 $parcel$export(module.exports, "Modal", () => $fc75a6aa7a2b905b$export$2b77a92f1a5ad772);
 $parcel$export(module.exports, "Tray", () => $6b386deda21be662$export$4589ed81930b555c);
 $parcel$export(module.exports, "OpenTransition", () => $13f51cdc44d228b9$export$b847a40ee92eff38);
-
+/*
+ * 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 $13f51cdc44d228b9$var$OPEN_STATES = {
     entering: false,
     entered: true
 };
 function $13f51cdc44d228b9$export$b847a40ee92eff38(props) {
-    var child1;
-    return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement(($parcel$interopDefault($eLPAa$reacttransitiongroupTransition)), {
+    var child;
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $eLPAa$reacttransitiongroup.Transition), {
         timeout: {
             enter: 0,
             exit: 350
         },
         ...props
-    }, (state)=>($parcel$interopDefault($eLPAa$react)).Children.map(props.children, (child)=>child && /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).cloneElement(child, {
+    }, (state)=>(0, ($parcel$interopDefault($eLPAa$react))).Children.map(props.children, (child)=>child && /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).cloneElement(child, {
                 isOpen: !!$13f51cdc44d228b9$var$OPEN_STATES[state]
-            })
-        )
-    ));
+            })));
 }
 
 
@@ -44,15 +73,15 @@ function $13f51cdc44d228b9$export$b847a40ee92eff38(props) {
 
 
 function $2aebdc186fd41e87$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] = $eLPAa$react.useState(!isOpen);
-    let handleEntered = $eLPAa$react.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, $eLPAa$react.useState)(!isOpen);
+    let handleEntered = (0, $eLPAa$react.useCallback)(()=>{
         setExited(false);
         if (onEntered) onEntered();
     }, [
         onEntered
     ]);
-    let handleExited = $eLPAa$react.useCallback(()=>{
+    let handleExited = (0, $eLPAa$react.useCallback)(()=>{
         setExited(true);
         if (onExited) onExited();
     }, [
@@ -62,16 +91,16 @@ function $2aebdc186fd41e87$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__*/ ($parcel$interopDefault($eLPAa$react)).createElement($eLPAa$reactariaoverlays.Overlay, {
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $eLPAa$reactariaoverlays.Overlay), {
         portalContainer: container
-    }, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($eLPAa$reactspectrumprovider.Provider, {
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $eLPAa$reactspectrumprovider.Provider), {
         ref: ref,
         UNSAFE_style: {
-            background: 'transparent',
-            isolation: 'isolate'
+            background: "transparent",
+            isolation: "isolate"
         },
         isDisabled: false
-    }, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($13f51cdc44d228b9$export$b847a40ee92eff38, {
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $13f51cdc44d228b9$export$b847a40ee92eff38), {
         in: isOpen,
         appear: true,
         onExit: onExit,
@@ -79,13 +108,24 @@ function $2aebdc186fd41e87$var$Overlay(props, ref) {
         onExited: handleExited,
         onEnter: onEnter,
         onEntering: onEntering,
-        onEntered: handleEntered
-    }, children))));
+        onEntered: handleEntered,
+        nodeRef: nodeRef
+    }, children)));
 }
-let $2aebdc186fd41e87$export$c6fdb837b070b4ff = /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).forwardRef($2aebdc186fd41e87$var$Overlay);
-
+let $2aebdc186fd41e87$export$c6fdb837b070b4ff = /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).forwardRef($2aebdc186fd41e87$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 $e9a663ccb19ed1b0$exports = {};
@@ -154,7 +194,17 @@ $16e1dca4664d0b1c$export$cf634262e726cd19 = "spectrum-Popover--dialog_6115b8";
 $16e1dca4664d0b1c$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 $42908e91b4c5f428$exports = {};
 
@@ -170,12 +220,12 @@ $42908e91b4c5f428$export$8eb3860104039b44 = "spectrum-Underlay--transparent_eb76
 
 
 function $b900e75089bdd9cd$export$f360afc887607b02({ isOpen: isOpen , isTransparent: isTransparent  }) {
-    return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement("div", {
-        className: $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($42908e91b4c5f428$exports)), 'spectrum-Underlay', {
-            'is-open': isOpen,
-            'spectrum-Underlay--transparent': isTransparent
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
+        className: (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($42908e91b4c5f428$exports))), "spectrum-Underlay", {
+            "is-open": isOpen,
+            "spectrum-Underlay--transparent": isTransparent
         })
-    }));
+    });
 }
 
 
@@ -187,35 +237,41 @@ function $b900e75089bdd9cd$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 $f02bba55a62f20dd$var$arrowPlacement = {
-    left: 'right',
-    right: 'right',
-    top: 'bottom',
-    bottom: 'bottom'
+    left: "right",
+    right: "right",
+    top: "bottom",
+    bottom: "bottom"
 };
 function $f02bba55a62f20dd$var$Popover(props, ref) {
     let { children: children , state: state , ...otherProps } = props;
-    let domRef = $eLPAa$reactspectrumutils.useDOMRef(ref);
-    return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($2aebdc186fd41e87$export$c6fdb837b070b4ff, {
+    let domRef = (0, $eLPAa$reactspectrumutils.useDOMRef)(ref);
+    let wrapperRef = (0, $eLPAa$react.useRef)(null);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $2aebdc186fd41e87$export$c6fdb837b070b4ff), {
         ...otherProps,
-        isOpen: state.isOpen
-    }, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($f02bba55a62f20dd$var$PopoverWrapper, {
+        isOpen: state.isOpen,
+        nodeRef: wrapperRef
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement($f02bba55a62f20dd$var$PopoverWrapper, {
         ref: domRef,
-        ...props
-    }, children)));
+        ...props,
+        wrapperRef: wrapperRef
+    }, children));
 }
-const $f02bba55a62f20dd$var$PopoverWrapper = /*#__PURE__*/ $eLPAa$react.forwardRef((props, ref)=>{
-    let { children: children , isOpen: isOpen , hideArrow: hideArrow , isNonModal: isNonModal , state: state  } = props;
-    let { styleProps: styleProps  } = $eLPAa$reactspectrumutils.useStyleProps(props);
-    let { popoverProps: popoverProps , arrowProps: arrowProps , underlayProps: underlayProps , placement: placement  } = $eLPAa$reactariaoverlays.usePopover({
+const $f02bba55a62f20dd$var$PopoverWrapper = /*#__PURE__*/ (0, $eLPAa$react.forwardRef)((props, ref)=>{
+    let { children: children , isOpen: isOpen , hideArrow: hideArrow , isNonModal: isNonModal , state: state , wrapperRef: wrapperRef  } = props;
+    let { styleProps: styleProps  } = (0, $eLPAa$reactspectrumutils.useStyleProps)(props);
+    let { popoverProps: popoverProps , arrowProps: arrowProps , underlayProps: underlayProps , placement: placement  } = (0, $eLPAa$reactariaoverlays.usePopover)({
         ...props,
         popoverRef: ref,
         maxHeight: null
     }, state);
-    return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement(($parcel$interopDefault($eLPAa$react)).Fragment, null, !isNonModal && /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($b900e75089bdd9cd$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, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
+        ref: wrapperRef
+    }, !isNonModal && /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $b900e75089bdd9cd$export$f360afc887607b02), {
         isTransparent: true,
         ...underlayProps,
         isOpen: isOpen
-    }), /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement("div", {
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
         ...styleProps,
         ...popoverProps,
         style: {
@@ -223,39 +279,39 @@ const $f02bba55a62f20dd$var$PopoverWrapper = /*#__PURE__*/ $eLPAa$react.forwardR
             ...popoverProps.style
         },
         ref: ref,
-        className: $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($16e1dca4664d0b1c$exports)), 'spectrum-Popover', `spectrum-Popover--${placement}`, {
-            'spectrum-Popover--withTip': !hideArrow,
-            'is-open': isOpen
-        }, $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$exports)), 'spectrum-Popover', 'react-spectrum-Popover'), styleProps.className),
+        className: (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($16e1dca4664d0b1c$exports))), "spectrum-Popover", `spectrum-Popover--${placement}`, {
+            "spectrum-Popover--withTip": !hideArrow,
+            "is-open": isOpen
+        }, (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$exports))), "spectrum-Popover", "react-spectrum-Popover"), styleProps.className),
         role: "presentation",
         "data-testid": "popover"
-    }, !isNonModal && /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($eLPAa$reactariaoverlays.DismissButton, {
+    }, !isNonModal && /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $eLPAa$reactariaoverlays.DismissButton), {
         onDismiss: state.close
-    }), children, hideArrow ? null : /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($f02bba55a62f20dd$var$Arrow, {
+    }), children, hideArrow ? null : /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement($f02bba55a62f20dd$var$Arrow, {
         arrowProps: arrowProps,
         direction: $f02bba55a62f20dd$var$arrowPlacement[placement]
-    }), /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($eLPAa$reactariaoverlays.DismissButton, {
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $eLPAa$reactariaoverlays.DismissButton), {
         onDismiss: state.close
-    }))));
+    })));
 });
 let $f02bba55a62f20dd$var$ROOT_2 = Math.sqrt(2);
 function $f02bba55a62f20dd$var$Arrow(props) {
-    let [size, setSize] = $eLPAa$react.useState(20);
-    let [borderWidth, setBorderWidth] = $eLPAa$react.useState(1);
-    let ref = $eLPAa$react.useRef();
+    let [size, setSize] = (0, $eLPAa$react.useState)(20);
+    let [borderWidth, setBorderWidth] = (0, $eLPAa$react.useState)(1);
+    let ref = (0, $eLPAa$react.useRef)();
     // get the css value for the tip size and divide it by 2 for this arrow implementation
-    $eLPAa$reactariautils.useLayoutEffect(()=>{
+    (0, $eLPAa$reactariautils.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 * $f02bba55a62f20dd$var$ROOT_2;
     let halfBorderDiagonal = borderDiagonal / 2;
     let secondary = 2 * size + 2 * borderDiagonal;
@@ -266,44 +322,66 @@ function $f02bba55a62f20dd$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__*/ ($parcel$interopDefault($eLPAa$react)).createElement("svg", {
+    /* use ceil because the svg needs to always accomodate the path inside it */ return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$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: $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($16e1dca4664d0b1c$exports)), 'spectrum-Popover-tip'),
+        className: (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($16e1dca4664d0b1c$exports))), "spectrum-Popover-tip"),
         ref: ref,
         ...arrowProps
-    }, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement("path", {
-        className: $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($16e1dca4664d0b1c$exports)), 'spectrum-Popover-tip-triangle'),
-        d: pathData.join(' ')
-    })));
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("path", {
+        className: (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($16e1dca4664d0b1c$exports))), "spectrum-Popover-tip-triangle"),
+        d: pathData.join(" ")
+    }));
 }
-let $f02bba55a62f20dd$export$5b6b19405a83ff9d = /*#__PURE__*/ $eLPAa$react.forwardRef($f02bba55a62f20dd$var$Popover);
-
-
-
+let $f02bba55a62f20dd$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $eLPAa$react.forwardRef)($f02bba55a62f20dd$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 $86571b803f942ff3$exports = {};
 
@@ -334,52 +412,68 @@ $86571b803f942ff3$export$175dd699720b5fb7 = "spectrum-Modal--fullscreenTakeover_
 
 function $fc75a6aa7a2b905b$var$Modal(props, ref) {
     let { children: children , state: state , ...otherProps } = props;
-    let domRef = $eLPAa$reactspectrumutils.useDOMRef(ref);
-    return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($2aebdc186fd41e87$export$c6fdb837b070b4ff, {
+    let domRef = (0, $eLPAa$reactspectrumutils.useDOMRef)(ref);
+    let wrapperRef = (0, $eLPAa$react.useRef)(null);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $2aebdc186fd41e87$export$c6fdb837b070b4ff), {
         ...otherProps,
-        isOpen: state.isOpen
-    }, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($fc75a6aa7a2b905b$var$ModalWrapper, {
+        isOpen: state.isOpen,
+        nodeRef: wrapperRef
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement($fc75a6aa7a2b905b$var$ModalWrapper, {
         ...props,
+        wrapperRef: wrapperRef,
         ref: domRef
-    }, children)));
+    }, children));
 }
 let $fc75a6aa7a2b905b$var$typeMap = {
-    fullscreen: 'fullscreen',
-    fullscreenTakeover: 'fullscreenTakeover'
+    fullscreen: "fullscreen",
+    fullscreenTakeover: "fullscreenTakeover"
 };
-let $fc75a6aa7a2b905b$var$ModalWrapper = /*#__PURE__*/ $eLPAa$react.forwardRef(function(props, ref) {
-    let { type: type , children: children , state: state , isOpen: isOpen  } = props;
+let $fc75a6aa7a2b905b$var$ModalWrapper = /*#__PURE__*/ (0, $eLPAa$react.forwardRef)(function(props, ref) {
+    let { type: type , children: children , state: state , isOpen: isOpen , wrapperRef: wrapperRef  } = props;
     let typeVariant = $fc75a6aa7a2b905b$var$typeMap[type];
-    let { styleProps: styleProps  } = $eLPAa$reactspectrumutils.useStyleProps(props);
-    let { modalProps: modalProps , underlayProps: underlayProps  } = $eLPAa$reactariaoverlays.useModalOverlay(props, state, ref);
-    let wrapperClassName = $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($86571b803f942ff3$exports)), 'spectrum-Modal-wrapper', $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$exports)), 'spectrum-Modal-wrapper', 'react-spectrum-Modal-wrapper'));
-    let modalClassName = $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($86571b803f942ff3$exports)), 'spectrum-Modal', {
-        'is-open': isOpen
-    }, $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$exports)), 'spectrum-Modal', 'react-spectrum-Modal'), {
+    let { styleProps: styleProps  } = (0, $eLPAa$reactspectrumutils.useStyleProps)(props);
+    let { modalProps: modalProps , underlayProps: underlayProps  } = (0, $eLPAa$reactariaoverlays.useModalOverlay)(props, state, ref);
+    let wrapperClassName = (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($86571b803f942ff3$exports))), "spectrum-Modal-wrapper", (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$exports))), "spectrum-Modal-wrapper", "react-spectrum-Modal-wrapper"));
+    let modalClassName = (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($86571b803f942ff3$exports))), "spectrum-Modal", {
+        "is-open": isOpen
+    }, (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$exports))), "spectrum-Modal", "react-spectrum-Modal"), {
         [`spectrum-Modal--${typeVariant}`]: typeVariant
     }, styleProps.className);
-    let viewport = $eLPAa$reactariautils.useViewportSize();
+    let viewport = (0, $eLPAa$reactariautils.useViewportSize)();
     let style = {
-        '--spectrum-visual-viewport-height': viewport.height + 'px'
+        "--spectrum-visual-viewport-height": viewport.height + "px"
     };
-    return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement(($parcel$interopDefault($eLPAa$react)).Fragment, null, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($b900e75089bdd9cd$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, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
+        ref: wrapperRef
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $b900e75089bdd9cd$export$f360afc887607b02), {
         ...underlayProps,
         isOpen: isOpen
-    }), /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement("div", {
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
         className: wrapperClassName,
         style: style
-    }, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement("div", {
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
         ...styleProps,
         ...modalProps,
         ref: ref,
         className: modalClassName,
         "data-testid": "modal"
-    }, children))));
+    }, children)));
 });
-let $fc75a6aa7a2b905b$export$2b77a92f1a5ad772 = /*#__PURE__*/ $eLPAa$react.forwardRef($fc75a6aa7a2b905b$var$Modal);
-
+let $fc75a6aa7a2b905b$export$2b77a92f1a5ad772 = /*#__PURE__*/ (0, $eLPAa$react.forwardRef)($fc75a6aa7a2b905b$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.
+ */ 
 
 
 
@@ -404,19 +498,22 @@ $3ba16c5c57f2a636$export$79bfb05e59a300b = "spectrum-Tray--fixedHeight_23bf66";
 
 function $6b386deda21be662$var$Tray(props, ref) {
     let { children: children , state: state , ...otherProps } = props;
-    let domRef = $eLPAa$reactspectrumutils.useDOMRef(ref);
-    return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($2aebdc186fd41e87$export$c6fdb837b070b4ff, {
+    let domRef = (0, $eLPAa$reactspectrumutils.useDOMRef)(ref);
+    let wrapperRef = (0, $eLPAa$react.useRef)(null);
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $2aebdc186fd41e87$export$c6fdb837b070b4ff), {
         ...otherProps,
-        isOpen: state.isOpen
-    }, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($6b386deda21be662$var$TrayWrapper, {
+        isOpen: state.isOpen,
+        nodeRef: wrapperRef
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement($6b386deda21be662$var$TrayWrapper, {
         ...props,
+        wrapperRef: wrapperRef,
         ref: domRef
-    }, children)));
+    }, children));
 }
-let $6b386deda21be662$var$TrayWrapper = /*#__PURE__*/ $eLPAa$react.forwardRef(function(props, ref) {
-    let { children: children , isOpen: isOpen , isFixedHeight: isFixedHeight , state: state  } = props;
-    let { styleProps: styleProps  } = $eLPAa$reactspectrumutils.useStyleProps(props);
-    let { modalProps: modalProps , underlayProps: underlayProps  } = $eLPAa$reactariaoverlays.useModalOverlay({
+let $6b386deda21be662$var$TrayWrapper = /*#__PURE__*/ (0, $eLPAa$react.forwardRef)(function(props, ref) {
+    let { children: children , isOpen: isOpen , isFixedHeight: isFixedHeight , state: state , wrapperRef: wrapperRef  } = props;
+    let { styleProps: styleProps  } = (0, $eLPAa$reactspectrumutils.useStyleProps)(props);
+    let { modalProps: modalProps , underlayProps: underlayProps  } = (0, $eLPAa$reactariaoverlays.useModalOverlay)({
         ...props,
         isDismissable: true
     }, state, ref);
@@ -427,34 +524,37 @@ let $6b386deda21be662$var$TrayWrapper = /*#__PURE__*/ $eLPAa$react.forwardRef(fu
     // 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 = $eLPAa$reactariautils.useViewportSize();
+    let viewport = (0, $eLPAa$reactariautils.useViewportSize)();
     let wrapperStyle = {
-        '--spectrum-visual-viewport-height': viewport.height + 'px'
+        "--spectrum-visual-viewport-height": viewport.height + "px"
     };
-    let wrapperClassName = $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($3ba16c5c57f2a636$exports)), 'spectrum-Tray-wrapper');
-    let className = $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($3ba16c5c57f2a636$exports)), 'spectrum-Tray', {
-        'is-open': isOpen,
-        'spectrum-Tray--fixedHeight': isFixedHeight
-    }, $eLPAa$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$exports)), 'spectrum-Tray', 'react-spectrum-Tray'), styleProps.className);
-    return(/*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement(($parcel$interopDefault($eLPAa$react)).Fragment, null, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($b900e75089bdd9cd$export$f360afc887607b02, {
+    let wrapperClassName = (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3ba16c5c57f2a636$exports))), "spectrum-Tray-wrapper");
+    let className = (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($3ba16c5c57f2a636$exports))), "spectrum-Tray", {
+        "is-open": isOpen,
+        "spectrum-Tray--fixedHeight": isFixedHeight
+    }, (0, $eLPAa$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($e9a663ccb19ed1b0$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, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
+        ref: wrapperRef
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $b900e75089bdd9cd$export$f360afc887607b02), {
         ...underlayProps,
         isOpen: isOpen
-    }), /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement("div", {
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
         className: wrapperClassName,
         style: wrapperStyle
-    }, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement("div", {
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement("div", {
         ...styleProps,
         ...modalProps,
         className: className,
         ref: ref,
         "data-testid": "tray"
-    }, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($eLPAa$reactariaoverlays.DismissButton, {
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $eLPAa$reactariaoverlays.DismissButton), {
         onDismiss: state.close
-    }), children, /*#__PURE__*/ ($parcel$interopDefault($eLPAa$react)).createElement($eLPAa$reactariaoverlays.DismissButton, {
+    }), children, /*#__PURE__*/ (0, ($parcel$interopDefault($eLPAa$react))).createElement((0, $eLPAa$reactariaoverlays.DismissButton), {
         onDismiss: state.close
-    })))));
+    }))));
 });
-let $6b386deda21be662$export$4589ed81930b555c = /*#__PURE__*/ $eLPAa$react.forwardRef($6b386deda21be662$var$Tray);
+let $6b386deda21be662$export$4589ed81930b555c = /*#__PURE__*/ (0, $eLPAa$react.forwardRef)($6b386deda21be662$var$Tray);