@react-spectrum/overlays 3.8.0 → 4.1.0

package/dist/module.js

@@ -1,11 +1,10 @@
 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$reactdom from "react-dom";
-import $fQOb3$reacttransitiongroupTransition from "react-transition-group/Transition";
+import {Overlay as $fQOb3$Overlay, usePopover as $fQOb3$usePopover, DismissButton as $fQOb3$DismissButton, useModalOverlay as $fQOb3$useModalOverlay} from "@react-aria/overlays";
+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 {mergeProps as $fQOb3$mergeProps, useLayoutEffect as $fQOb3$useLayoutEffect, useViewportSize as $fQOb3$useViewportSize} from "@react-aria/utils";
-import {useOverlay as $fQOb3$useOverlay, useModal as $fQOb3$useModal, usePreventScroll as $fQOb3$usePreventScroll} from "@react-aria/overlays";
+import {useLayoutEffect as $fQOb3$useLayoutEffect, useViewportSize as $fQOb3$useViewportSize} from "@react-aria/utils";
 
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
@@ -13,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]
-            })
-        )
-    ));
+            })));
 }
 
 
@@ -40,14 +68,14 @@ 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 [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();
     }, [
@@ -57,14 +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;
-    let contents = /*#__PURE__*/ $fQOb3$react.createElement($fQOb3$Provider, {
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$Overlay), {
+        portalContainer: container
+    }, /*#__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 +103,22 @@ function $70305dc5fb729c3b$var$Overlay(props, ref) {
         onEnter: onEnter,
         onEntering: onEntering,
         onEntered: handleEntered
-    }, children));
-    return(/*#__PURE__*/ $fQOb3$reactdom.createPortal(contents, container || document.body));
+    }, 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,6 +187,41 @@ $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 = {};
+
+$parcel$export($c77d7b73b2bbd0fb$exports, "spectrum-Underlay", () => $c77d7b73b2bbd0fb$export$74470528f463af97, (v) => $c77d7b73b2bbd0fb$export$74470528f463af97 = v);
+$parcel$export($c77d7b73b2bbd0fb$exports, "is-open", () => $c77d7b73b2bbd0fb$export$a9781837241c946d, (v) => $c77d7b73b2bbd0fb$export$a9781837241c946d = v);
+$parcel$export($c77d7b73b2bbd0fb$exports, "spectrum-Underlay--transparent", () => $c77d7b73b2bbd0fb$export$8eb3860104039b44, (v) => $c77d7b73b2bbd0fb$export$8eb3860104039b44 = v);
+var $c77d7b73b2bbd0fb$export$74470528f463af97;
+var $c77d7b73b2bbd0fb$export$a9781837241c946d;
+var $c77d7b73b2bbd0fb$export$8eb3860104039b44;
+$c77d7b73b2bbd0fb$export$74470528f463af97 = "spectrum-Underlay_eb7615";
+$c77d7b73b2bbd0fb$export$a9781837241c946d = "is-open_eb7615";
+$c77d7b73b2bbd0fb$export$8eb3860104039b44 = "spectrum-Underlay--transparent_eb7615";
+
+
+function $76a452f4e3df11be$export$f360afc887607b02({ isOpen: isOpen , isTransparent: 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
+        })
+    });
+}
+
+
 
 /**
  * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the
@@ -156,72 +230,75 @@ $645594d913f34a2a$export$d8b16c5377728262 = "spectrum-Popover--withTip_6115b8";
  * 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 , placement: placement , arrowProps: arrowProps , onClose: onClose , shouldCloseOnBlur: shouldCloseOnBlur , hideArrow: hideArrow , isKeyboardDismissDisabled: isKeyboardDismissDisabled , isNonModal: isNonModal , isDismissable: isDismissable = true , ...otherProps } = props;
-    let domRef = $fQOb3$useDOMRef(ref);
-    let { styleProps: styleProps  } = $fQOb3$useStyleProps(props);
-    return(/*#__PURE__*/ $fQOb3$react.createElement($70305dc5fb729c3b$export$c6fdb837b070b4ff, otherProps, /*#__PURE__*/ $fQOb3$react.createElement($17b503f7de08fecc$var$PopoverWrapper, {
-        ...styleProps,
+    let { children: children , state: state , ...otherProps } = props;
+    let domRef = (0, $fQOb3$useDOMRef)(ref);
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $70305dc5fb729c3b$export$c6fdb837b070b4ff), {
+        ...otherProps,
+        isOpen: state.isOpen
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement($17b503f7de08fecc$var$PopoverWrapper, {
         ref: domRef,
-        placement: placement,
-        arrowProps: arrowProps,
-        onClose: onClose,
-        shouldCloseOnBlur: shouldCloseOnBlur,
-        isKeyboardDismissDisabled: isKeyboardDismissDisabled,
-        hideArrow: hideArrow,
-        isNonModal: isNonModal,
-        isDismissable: isDismissable
-    }, children)));
+        ...props
+    }, children));
 }
-const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ $fQOb3$forwardRef((props, ref)=>{
-    let { children: children , placement: placement = 'bottom' , arrowProps: arrowProps , isOpen: isOpen , hideArrow: hideArrow , shouldCloseOnBlur: // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    shouldCloseOnBlur , isKeyboardDismissDisabled: // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isKeyboardDismissDisabled , isNonModal: isNonModal , isDismissable: // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    isDismissable , ...otherProps } = props;
-    let { overlayProps: overlayProps  } = $fQOb3$useOverlay({
+const $17b503f7de08fecc$var$PopoverWrapper = /*#__PURE__*/ (0, $fQOb3$forwardRef)((props, ref)=>{
+    let { children: children , isOpen: isOpen , hideArrow: hideArrow , isNonModal: isNonModal , state: state  } = props;
+    let { styleProps: styleProps  } = (0, $fQOb3$useStyleProps)(props);
+    let { popoverProps: popoverProps , arrowProps: arrowProps , underlayProps: underlayProps , placement: placement  } = (0, $fQOb3$usePopover)({
         ...props,
-        isDismissable: isDismissable && isOpen
-    }, ref);
-    let { modalProps: modalProps  } = $fQOb3$useModal({
-        isDisabled: isNonModal
-    });
-    return(/*#__PURE__*/ $fQOb3$react.createElement("div", {
-        ...$fQOb3$mergeProps(otherProps, overlayProps, modalProps),
+        popoverRef: ref,
+        maxHeight: null
+    }, state);
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$react).Fragment, null, !isNonModal && /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $76a452f4e3df11be$export$f360afc887607b02), {
+        isTransparent: true,
+        ...underlayProps,
+        isOpen: isOpen
+    }), /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        ...styleProps,
+        ...popoverProps,
+        style: {
+            ...styleProps.style,
+            ...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'), otherProps.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"
-    }, children, hideArrow ? null : /*#__PURE__*/ $fQOb3$react.createElement($17b503f7de08fecc$var$Arrow, {
+    }, !isNonModal && /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$DismissButton), {
+        onDismiss: state.close
+    }), children, hideArrow ? null : /*#__PURE__*/ (0, $fQOb3$react).createElement($17b503f7de08fecc$var$Arrow, {
         arrowProps: arrowProps,
         direction: $17b503f7de08fecc$var$arrowPlacement[placement]
+    }), /*#__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;
@@ -232,44 +309,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 = {};
 
@@ -298,73 +397,64 @@ $f7ed9f5201273840$export$175dd699720b5fb7 = "spectrum-Modal--fullscreenTakeover_
 
 
 
-var $c77d7b73b2bbd0fb$exports = {};
-
-$parcel$export($c77d7b73b2bbd0fb$exports, "spectrum-Underlay", () => $c77d7b73b2bbd0fb$export$74470528f463af97, (v) => $c77d7b73b2bbd0fb$export$74470528f463af97 = v);
-$parcel$export($c77d7b73b2bbd0fb$exports, "is-open", () => $c77d7b73b2bbd0fb$export$a9781837241c946d, (v) => $c77d7b73b2bbd0fb$export$a9781837241c946d = v);
-var $c77d7b73b2bbd0fb$export$74470528f463af97;
-var $c77d7b73b2bbd0fb$export$a9781837241c946d;
-$c77d7b73b2bbd0fb$export$74470528f463af97 = "spectrum-Underlay_eb7615";
-$c77d7b73b2bbd0fb$export$a9781837241c946d = "is-open_eb7615";
-
-
-function $76a452f4e3df11be$export$f360afc887607b02({ isOpen: isOpen  }) {
-    return(/*#__PURE__*/ $fQOb3$react.createElement("div", {
-        className: $fQOb3$classNames((/*@__PURE__*/$parcel$interopDefault($c77d7b73b2bbd0fb$exports)), 'spectrum-Underlay', {
-            'is-open': isOpen
-        })
-    }));
-}
-
-
-
 function $842084dfa182af65$var$Modal(props, ref) {
-    let { children: children , onClose: onClose , type: type , ...otherProps } = props;
-    let domRef = $fQOb3$useDOMRef(ref);
-    let { styleProps: styleProps  } = $fQOb3$useStyleProps(props);
-    let { overlayProps: overlayProps , underlayProps: underlayProps  } = $fQOb3$useOverlay(props, domRef);
-    return(/*#__PURE__*/ $fQOb3$react.createElement($70305dc5fb729c3b$export$c6fdb837b070b4ff, otherProps, /*#__PURE__*/ $fQOb3$react.createElement($76a452f4e3df11be$export$f360afc887607b02, underlayProps), /*#__PURE__*/ $fQOb3$react.createElement($842084dfa182af65$var$ModalWrapper, {
-        ...styleProps,
-        onClose: onClose,
-        type: type,
-        ref: domRef,
-        overlayProps: overlayProps
-    }, children)));
+    let { children: children , state: state , ...otherProps } = props;
+    let domRef = (0, $fQOb3$useDOMRef)(ref);
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $70305dc5fb729c3b$export$c6fdb837b070b4ff), {
+        ...otherProps,
+        isOpen: state.isOpen
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement($842084dfa182af65$var$ModalWrapper, {
+        ...props,
+        ref: domRef
+    }, children));
 }
 let $842084dfa182af65$var$typeMap = {
-    fullscreen: 'fullscreen',
-    fullscreenTakeover: 'fullscreenTakeover'
+    fullscreen: "fullscreen",
+    fullscreenTakeover: "fullscreenTakeover"
 };
-let $842084dfa182af65$var$ModalWrapper = /*#__PURE__*/ $fQOb3$forwardRef(function(props, ref) {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    let { children: children , isOpen: isOpen , type: type , overlayProps: overlayProps , ...otherProps } = props;
+let $842084dfa182af65$var$ModalWrapper = /*#__PURE__*/ (0, $fQOb3$forwardRef)(function(props, ref) {
+    let { type: type , children: children , state: state , isOpen: isOpen  } = props;
     let typeVariant = $842084dfa182af65$var$typeMap[type];
-    $fQOb3$usePreventScroll();
-    let { modalProps: modalProps  } = $fQOb3$useModal();
-    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
-    }, otherProps.className);
-    let viewport = $fQOb3$useViewportSize();
+    }, styleProps.className);
+    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("div", {
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$react).Fragment, null, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $76a452f4e3df11be$export$f360afc887607b02), {
+        ...underlayProps,
+        isOpen: isOpen
+    }), /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
         className: wrapperClassName,
         style: style
-    }, /*#__PURE__*/ $fQOb3$react.createElement("div", {
-        ...$fQOb3$mergeProps(otherProps, overlayProps, modalProps),
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        ...styleProps,
+        ...modalProps,
         ref: ref,
         className: modalClassName,
         "data-testid": "modal"
     }, 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.
+ */ 
 
 
 
@@ -388,28 +478,23 @@ $930b2f4095bb11d1$export$79bfb05e59a300b = "spectrum-Tray--fixedHeight_23bf66";
 
 
 function $1afc87f3d16a5a1c$var$Tray(props, ref) {
-    let { children: children , onClose: onClose , isFixedHeight: isFixedHeight , isNonModal: isNonModal , ...otherProps } = props;
-    let domRef = $fQOb3$useDOMRef(ref);
-    let { styleProps: styleProps  } = $fQOb3$useStyleProps(props);
-    let { overlayProps: overlayProps , underlayProps: underlayProps  } = $fQOb3$useOverlay({
+    let { children: children , state: state , ...otherProps } = props;
+    let domRef = (0, $fQOb3$useDOMRef)(ref);
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $70305dc5fb729c3b$export$c6fdb837b070b4ff), {
+        ...otherProps,
+        isOpen: state.isOpen
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement($1afc87f3d16a5a1c$var$TrayWrapper, {
         ...props,
-        isDismissable: true
-    }, domRef);
-    return(/*#__PURE__*/ $fQOb3$react.createElement($70305dc5fb729c3b$export$c6fdb837b070b4ff, otherProps, /*#__PURE__*/ $fQOb3$react.createElement($76a452f4e3df11be$export$f360afc887607b02, underlayProps), /*#__PURE__*/ $fQOb3$react.createElement($1afc87f3d16a5a1c$var$TrayWrapper, {
-        ...styleProps,
-        onClose: onClose,
-        ref: domRef,
-        overlayProps: overlayProps,
-        isFixedHeight: isFixedHeight,
-        isNonModal: isNonModal
-    }, children)));
+        ref: domRef
+    }, children));
 }
-let $1afc87f3d16a5a1c$var$TrayWrapper = /*#__PURE__*/ $fQOb3$forwardRef(function(props, ref) {
-    let { children: children , isOpen: isOpen , isFixedHeight: isFixedHeight , isNonModal: isNonModal , overlayProps: overlayProps , ...otherProps } = props;
-    $fQOb3$usePreventScroll();
-    let { modalProps: modalProps  } = $fQOb3$useModal({
-        isDisabled: isNonModal
-    });
+let $1afc87f3d16a5a1c$var$TrayWrapper = /*#__PURE__*/ (0, $fQOb3$forwardRef)(function(props, ref) {
+    let { children: children , isOpen: isOpen , isFixedHeight: isFixedHeight , state: state  } = props;
+    let { styleProps: styleProps  } = (0, $fQOb3$useStyleProps)(props);
+    let { modalProps: modalProps , underlayProps: underlayProps  } = (0, $fQOb3$useModalOverlay)({
+        ...props,
+        isDismissable: true
+    }, state, ref);
     // 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
     // does not work properly because there is nothing to base the percentage on.
@@ -417,28 +502,34 @@ 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'), otherProps.className);
-    let domProps = $fQOb3$mergeProps(otherProps, overlayProps);
-    return(/*#__PURE__*/ $fQOb3$react.createElement("div", {
+    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);
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$react).Fragment, null, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $76a452f4e3df11be$export$f360afc887607b02), {
+        ...underlayProps,
+        isOpen: isOpen
+    }), /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
         className: wrapperClassName,
         style: wrapperStyle
-    }, /*#__PURE__*/ $fQOb3$react.createElement("div", {
-        ...domProps,
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        ...styleProps,
         ...modalProps,
         className: className,
         ref: ref,
         "data-testid": "tray"
-    }, children)));
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$DismissButton), {
+        onDismiss: state.close
+    }), 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);