@react-spectrum/overlays 4.1.0 → 5.0.0

package/dist/import.mjs

@@ -0,0 +1,558 @@
+import "./main.css";
+import {Provider as $fQOb3$Provider} from "@react-spectrum/provider";
+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 {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";
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : 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 child;
+    return /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $fQOb3$Transition), {
+        timeout: {
+            enter: 0,
+            exit: 350
+        },
+        ...props
+    }, (state)=>(0, $fQOb3$react).Children.map(props.children, (child)=>child && /*#__PURE__*/ (0, $fQOb3$react).cloneElement(child, {
+                isOpen: !!$bc765a7a041310da$var$OPEN_STATES[state]
+            })));
+}
+
+
+
+
+
+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 , nodeRef: nodeRef  } = props;
+    let [exited, setExited] = (0, $fQOb3$useState)(!isOpen);
+    let handleEntered = (0, $fQOb3$useCallback)(()=>{
+        setExited(false);
+        if (onEntered) onEntered();
+    }, [
+        onEntered
+    ]);
+    let handleExited = (0, $fQOb3$useCallback)(()=>{
+        setExited(true);
+        if (onExited) onExited();
+    }, [
+        onExited
+    ]);
+    // Don't un-render the overlay while it's transitioning out.
+    let mountOverlay = isOpen || !exited;
+    if (!mountOverlay) // Don't bother showing anything if we don't have to.
+    return null;
+    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"
+        },
+        isDisabled: false
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement((0, $bc765a7a041310da$export$b847a40ee92eff38), {
+        in: isOpen,
+        appear: true,
+        onExit: onExit,
+        onExiting: onExiting,
+        onExited: handleExited,
+        onEnter: onEnter,
+        onEntering: onEntering,
+        onEntered: handleEntered,
+        nodeRef: nodeRef
+    }, children)));
+}
+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 = {};
+
+$parcel$export($853e19557ad8790f$exports, "spectrum-Popover", () => $853e19557ad8790f$export$a62dc1b6ab23a7bb, (v) => $853e19557ad8790f$export$a62dc1b6ab23a7bb = v);
+$parcel$export($853e19557ad8790f$exports, "react-spectrum-Popover", () => $853e19557ad8790f$export$884f6b5065bdc41a, (v) => $853e19557ad8790f$export$884f6b5065bdc41a = v);
+$parcel$export($853e19557ad8790f$exports, "spectrum-Dialog-content", () => $853e19557ad8790f$export$cb8eccd0f3639238, (v) => $853e19557ad8790f$export$cb8eccd0f3639238 = v);
+$parcel$export($853e19557ad8790f$exports, "spectrum-Modal-wrapper", () => $853e19557ad8790f$export$35bea187ff802494, (v) => $853e19557ad8790f$export$35bea187ff802494 = v);
+$parcel$export($853e19557ad8790f$exports, "react-spectrum-Modal-wrapper", () => $853e19557ad8790f$export$e088717c213c31d7, (v) => $853e19557ad8790f$export$e088717c213c31d7 = v);
+$parcel$export($853e19557ad8790f$exports, "spectrum-Modal", () => $853e19557ad8790f$export$4c0b1e44c3834c85, (v) => $853e19557ad8790f$export$4c0b1e44c3834c85 = v);
+$parcel$export($853e19557ad8790f$exports, "react-spectrum-Modal", () => $853e19557ad8790f$export$f8edeb62d7fed8c1, (v) => $853e19557ad8790f$export$f8edeb62d7fed8c1 = v);
+$parcel$export($853e19557ad8790f$exports, "spectrum-Tray", () => $853e19557ad8790f$export$ce0704cd084c4f0d, (v) => $853e19557ad8790f$export$ce0704cd084c4f0d = v);
+$parcel$export($853e19557ad8790f$exports, "react-spectrum-Tray", () => $853e19557ad8790f$export$69dafa24343974dd, (v) => $853e19557ad8790f$export$69dafa24343974dd = v);
+var $853e19557ad8790f$export$a62dc1b6ab23a7bb;
+var $853e19557ad8790f$export$884f6b5065bdc41a;
+var $853e19557ad8790f$export$cb8eccd0f3639238;
+var $853e19557ad8790f$export$35bea187ff802494;
+var $853e19557ad8790f$export$e088717c213c31d7;
+var $853e19557ad8790f$export$4c0b1e44c3834c85;
+var $853e19557ad8790f$export$f8edeb62d7fed8c1;
+var $853e19557ad8790f$export$ce0704cd084c4f0d;
+var $853e19557ad8790f$export$69dafa24343974dd;
+$853e19557ad8790f$export$a62dc1b6ab23a7bb = "spectrum-Popover_38efea";
+$853e19557ad8790f$export$884f6b5065bdc41a = "react-spectrum-Popover_38efea";
+$853e19557ad8790f$export$cb8eccd0f3639238 = "spectrum-Dialog-content_38efea";
+$853e19557ad8790f$export$35bea187ff802494 = "spectrum-Modal-wrapper_38efea";
+$853e19557ad8790f$export$e088717c213c31d7 = "react-spectrum-Modal-wrapper_38efea";
+$853e19557ad8790f$export$4c0b1e44c3834c85 = "spectrum-Modal_38efea";
+$853e19557ad8790f$export$f8edeb62d7fed8c1 = "react-spectrum-Modal_38efea";
+$853e19557ad8790f$export$ce0704cd084c4f0d = "spectrum-Tray_38efea";
+$853e19557ad8790f$export$69dafa24343974dd = "react-spectrum-Tray_38efea";
+
+
+
+var $645594d913f34a2a$exports = {};
+
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover", () => $645594d913f34a2a$export$a62dc1b6ab23a7bb, (v) => $645594d913f34a2a$export$a62dc1b6ab23a7bb = v);
+$parcel$export($645594d913f34a2a$exports, "is-open", () => $645594d913f34a2a$export$a9781837241c946d, (v) => $645594d913f34a2a$export$a9781837241c946d = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover--bottom", () => $645594d913f34a2a$export$6a19b19b14780d4a, (v) => $645594d913f34a2a$export$6a19b19b14780d4a = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover--top", () => $645594d913f34a2a$export$f30becfb1df0cae4, (v) => $645594d913f34a2a$export$f30becfb1df0cae4 = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover--right", () => $645594d913f34a2a$export$5fc8b429396c9f58, (v) => $645594d913f34a2a$export$5fc8b429396c9f58 = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover--left", () => $645594d913f34a2a$export$79cc55906ac5b00, (v) => $645594d913f34a2a$export$79cc55906ac5b00 = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover-tip", () => $645594d913f34a2a$export$3100ec4dc1668df1, (v) => $645594d913f34a2a$export$3100ec4dc1668df1 = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover-tip-triangle", () => $645594d913f34a2a$export$ed733fa6cf19ab80, (v) => $645594d913f34a2a$export$ed733fa6cf19ab80 = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover--dialog", () => $645594d913f34a2a$export$cf634262e726cd19, (v) => $645594d913f34a2a$export$cf634262e726cd19 = v);
+$parcel$export($645594d913f34a2a$exports, "spectrum-Popover--withTip", () => $645594d913f34a2a$export$d8b16c5377728262, (v) => $645594d913f34a2a$export$d8b16c5377728262 = v);
+var $645594d913f34a2a$export$a62dc1b6ab23a7bb;
+var $645594d913f34a2a$export$a9781837241c946d;
+var $645594d913f34a2a$export$6a19b19b14780d4a;
+var $645594d913f34a2a$export$f30becfb1df0cae4;
+var $645594d913f34a2a$export$5fc8b429396c9f58;
+var $645594d913f34a2a$export$79cc55906ac5b00;
+var $645594d913f34a2a$export$3100ec4dc1668df1;
+var $645594d913f34a2a$export$ed733fa6cf19ab80;
+var $645594d913f34a2a$export$cf634262e726cd19;
+var $645594d913f34a2a$export$d8b16c5377728262;
+$645594d913f34a2a$export$a62dc1b6ab23a7bb = "spectrum-Popover_6115b8";
+$645594d913f34a2a$export$a9781837241c946d = "is-open_6115b8";
+$645594d913f34a2a$export$6a19b19b14780d4a = "spectrum-Popover--bottom_6115b8";
+$645594d913f34a2a$export$f30becfb1df0cae4 = "spectrum-Popover--top_6115b8";
+$645594d913f34a2a$export$5fc8b429396c9f58 = "spectrum-Popover--right_6115b8";
+$645594d913f34a2a$export$79cc55906ac5b00 = "spectrum-Popover--left_6115b8";
+$645594d913f34a2a$export$3100ec4dc1668df1 = "spectrum-Popover-tip_6115b8";
+$645594d913f34a2a$export$ed733fa6cf19ab80 = "spectrum-Popover-tip-triangle_6115b8";
+$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
+ * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and
+ * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that
+ * 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"
+};
+function $17b503f7de08fecc$var$Popover(props, ref) {
+    let { children: children , state: state , ...otherProps } = props;
+    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,
+        nodeRef: wrapperRef
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement($17b503f7de08fecc$var$PopoverWrapper, {
+        ref: domRef,
+        ...props,
+        wrapperRef: wrapperRef
+    }, children));
+}
+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);
+    // 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__*/ (0, $fQOb3$react).createElement("div", {
+        ...styleProps,
+        ...popoverProps,
+        style: {
+            ...styleProps.style,
+            ...popoverProps.style
+        },
+        ref: ref,
+        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__*/ (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] = (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
+    (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));
+        }
+    }, [
+        ref
+    ]);
+    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;
+    let primary = size + borderDiagonal;
+    let primaryStart = mirror ? primary : 0;
+    let primaryEnd = mirror ? halfBorderDiagonal : primary - halfBorderDiagonal;
+    let secondaryStart = halfBorderDiagonal;
+    let secondaryMiddle = secondary / 2;
+    let secondaryEnd = secondary - halfBorderDiagonal;
+    let pathData = landscape ? [
+        "M",
+        secondaryStart,
+        primaryStart,
+        "L",
+        secondaryMiddle,
+        primaryEnd,
+        "L",
+        secondaryEnd,
+        primaryStart
+    ] : [
+        "M",
+        primaryStart,
+        secondaryStart,
+        "L",
+        primaryEnd,
+        secondaryMiddle,
+        "L",
+        primaryStart,
+        secondaryEnd
+    ];
+    let arrowProps = props.arrowProps;
+    /* 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: (0, $fQOb3$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($645594d913f34a2a$exports))), "spectrum-Popover-tip"),
+        ref: ref,
+        ...arrowProps
+    }, /*#__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__*/ (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 = {};
+
+$parcel$export($f7ed9f5201273840$exports, "spectrum-Modal", () => $f7ed9f5201273840$export$4c0b1e44c3834c85, (v) => $f7ed9f5201273840$export$4c0b1e44c3834c85 = v);
+$parcel$export($f7ed9f5201273840$exports, "is-open", () => $f7ed9f5201273840$export$a9781837241c946d, (v) => $f7ed9f5201273840$export$a9781837241c946d = v);
+$parcel$export($f7ed9f5201273840$exports, "spectrum-Modal-wrapper", () => $f7ed9f5201273840$export$35bea187ff802494, (v) => $f7ed9f5201273840$export$35bea187ff802494 = v);
+$parcel$export($f7ed9f5201273840$exports, "spectrum-Modal--responsive", () => $f7ed9f5201273840$export$fd1e42aa8ea02a1, (v) => $f7ed9f5201273840$export$fd1e42aa8ea02a1 = v);
+$parcel$export($f7ed9f5201273840$exports, "spectrum-Modal--fullscreen", () => $f7ed9f5201273840$export$a4423fa77727431a, (v) => $f7ed9f5201273840$export$a4423fa77727431a = v);
+$parcel$export($f7ed9f5201273840$exports, "spectrum-Modal--fullscreenTakeover", () => $f7ed9f5201273840$export$175dd699720b5fb7, (v) => $f7ed9f5201273840$export$175dd699720b5fb7 = v);
+var $f7ed9f5201273840$export$4c0b1e44c3834c85;
+var $f7ed9f5201273840$export$a9781837241c946d;
+var $f7ed9f5201273840$export$35bea187ff802494;
+var $f7ed9f5201273840$export$fd1e42aa8ea02a1;
+var $f7ed9f5201273840$export$a4423fa77727431a;
+var $f7ed9f5201273840$export$175dd699720b5fb7;
+$f7ed9f5201273840$export$4c0b1e44c3834c85 = "spectrum-Modal_f81956";
+$f7ed9f5201273840$export$a9781837241c946d = "is-open_f81956";
+$f7ed9f5201273840$export$35bea187ff802494 = "spectrum-Modal-wrapper_f81956";
+$f7ed9f5201273840$export$fd1e42aa8ea02a1 = "spectrum-Modal--responsive_f81956";
+$f7ed9f5201273840$export$a4423fa77727431a = "spectrum-Modal--fullscreen_f81956";
+$f7ed9f5201273840$export$175dd699720b5fb7 = "spectrum-Modal--fullscreenTakeover_f81956";
+
+
+
+
+
+
+
+function $842084dfa182af65$var$Modal(props, ref) {
+    let { children: children , state: state , ...otherProps } = props;
+    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,
+        nodeRef: wrapperRef
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement($842084dfa182af65$var$ModalWrapper, {
+        ...props,
+        wrapperRef: wrapperRef,
+        ref: domRef
+    }, children));
+}
+let $842084dfa182af65$var$typeMap = {
+    fullscreen: "fullscreen",
+    fullscreenTakeover: "fullscreenTakeover"
+};
+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  } = (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 = (0, $fQOb3$useViewportSize)();
+    let style = {
+        "--spectrum-visual-viewport-height": viewport.height + "px"
+    };
+    // 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__*/ (0, $fQOb3$react).createElement("div", {
+        className: wrapperClassName,
+        style: style
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        ...styleProps,
+        ...modalProps,
+        ref: ref,
+        className: modalClassName,
+        "data-testid": "modal"
+    }, children)));
+});
+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.
+ */ 
+
+
+
+
+var $930b2f4095bb11d1$exports = {};
+
+$parcel$export($930b2f4095bb11d1$exports, "spectrum-Tray", () => $930b2f4095bb11d1$export$ce0704cd084c4f0d, (v) => $930b2f4095bb11d1$export$ce0704cd084c4f0d = v);
+$parcel$export($930b2f4095bb11d1$exports, "is-open", () => $930b2f4095bb11d1$export$a9781837241c946d, (v) => $930b2f4095bb11d1$export$a9781837241c946d = v);
+$parcel$export($930b2f4095bb11d1$exports, "spectrum-Tray-wrapper", () => $930b2f4095bb11d1$export$641b9b70c23dce66, (v) => $930b2f4095bb11d1$export$641b9b70c23dce66 = v);
+$parcel$export($930b2f4095bb11d1$exports, "spectrum-Tray--fixedHeight", () => $930b2f4095bb11d1$export$79bfb05e59a300b, (v) => $930b2f4095bb11d1$export$79bfb05e59a300b = v);
+var $930b2f4095bb11d1$export$ce0704cd084c4f0d;
+var $930b2f4095bb11d1$export$a9781837241c946d;
+var $930b2f4095bb11d1$export$641b9b70c23dce66;
+var $930b2f4095bb11d1$export$79bfb05e59a300b;
+$930b2f4095bb11d1$export$ce0704cd084c4f0d = "spectrum-Tray_23bf66";
+$930b2f4095bb11d1$export$a9781837241c946d = "is-open_23bf66";
+$930b2f4095bb11d1$export$641b9b70c23dce66 = "spectrum-Tray-wrapper_23bf66";
+$930b2f4095bb11d1$export$79bfb05e59a300b = "spectrum-Tray--fixedHeight_23bf66";
+
+
+
+
+function $1afc87f3d16a5a1c$var$Tray(props, ref) {
+    let { children: children , state: state , ...otherProps } = props;
+    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,
+        nodeRef: wrapperRef
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement($1afc87f3d16a5a1c$var$TrayWrapper, {
+        ...props,
+        wrapperRef: wrapperRef,
+        ref: domRef
+    }, children));
+}
+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);
+    // 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.
+    // We cannot use vh units because mobile browsers adjust the window height dynamically
+    // 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 = (0, $fQOb3$useViewportSize)();
+    let wrapperStyle = {
+        "--spectrum-visual-viewport-height": viewport.height + "px"
+    };
+    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__*/ (0, $fQOb3$react).createElement("div", {
+        className: wrapperClassName,
+        style: wrapperStyle
+    }, /*#__PURE__*/ (0, $fQOb3$react).createElement("div", {
+        ...styleProps,
+        ...modalProps,
+        className: className,
+        ref: ref,
+        "data-testid": "tray"
+    }, /*#__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__*/ (0, $fQOb3$forwardRef)($1afc87f3d16a5a1c$var$Tray);
+
+
+
+
+
+export {$70305dc5fb729c3b$export$c6fdb837b070b4ff as Overlay, $17b503f7de08fecc$export$5b6b19405a83ff9d as Popover, $842084dfa182af65$export$2b77a92f1a5ad772 as Modal, $1afc87f3d16a5a1c$export$4589ed81930b555c as Tray, $bc765a7a041310da$export$b847a40ee92eff38 as OpenTransition};
+//# sourceMappingURL=module.js.map