@react-aria/overlays 3.18.1 → 3.20.0

package/dist/main.js

@@ -1,3 +1,37 @@
+var $4393d9b86d3ad278$exports = require("./ar-AE.main.js");
+var $254224013ae06959$exports = require("./bg-BG.main.js");
+var $55d3567b59d09782$exports = require("./cs-CZ.main.js");
+var $0e419a7be7773c16$exports = require("./da-DK.main.js");
+var $be606513c8356c34$exports = require("./de-DE.main.js");
+var $7d99787e5bd26f87$exports = require("./el-GR.main.js");
+var $0360f2a6534752c1$exports = require("./en-US.main.js");
+var $92bf4fdecfeb6a61$exports = require("./es-ES.main.js");
+var $7c02fa9b9c598043$exports = require("./et-EE.main.js");
+var $ba53535dcca59343$exports = require("./fi-FI.main.js");
+var $2fbbcddf7d252cb7$exports = require("./fr-FR.main.js");
+var $0a1f0520e07d3596$exports = require("./he-IL.main.js");
+var $f7be5df1487823a9$exports = require("./hr-HR.main.js");
+var $8dbe4363bfbba3f9$exports = require("./hu-HU.main.js");
+var $90a445da1ad273e7$exports = require("./it-IT.main.js");
+var $e1ebf18259c9b1ee$exports = require("./ja-JP.main.js");
+var $765893642f3b4f72$exports = require("./ko-KR.main.js");
+var $af73ba24f63febd1$exports = require("./lt-LT.main.js");
+var $97aac9f6740ee412$exports = require("./lv-LV.main.js");
+var $92fbe76e196d7e0a$exports = require("./nb-NO.main.js");
+var $44399897afb701ce$exports = require("./nl-NL.main.js");
+var $d679e258664d7384$exports = require("./pl-PL.main.js");
+var $b51fc2992648966b$exports = require("./pt-BR.main.js");
+var $6abbc540dcd5f78c$exports = require("./pt-PT.main.js");
+var $6cbc0c9bf574473b$exports = require("./ro-RO.main.js");
+var $009edbe58be6525b$exports = require("./ru-RU.main.js");
+var $01cf6095489e78f7$exports = require("./sk-SK.main.js");
+var $33fd5a1a3753e83f$exports = require("./sl-SI.main.js");
+var $6b9373a558e74e84$exports = require("./sr-SP.main.js");
+var $90008194c3db7fce$exports = require("./sv-SE.main.js");
+var $e29d21290b4ce15c$exports = require("./tr-TR.main.js");
+var $96139c59e8ba3f85$exports = require("./uk-UA.main.js");
+var $052554192ea8e826$exports = require("./zh-CN.main.js");
+var $3f3b5d798a5abdbc$exports = require("./zh-TW.main.js");
 var $6Zb2x$react = require("react");
 var $6Zb2x$reactariautils = require("@react-aria/utils");
 var $6Zb2x$reactariai18n = require("@react-aria/i18n");
@@ -7,9 +41,11 @@ var $6Zb2x$reactdom = require("react-dom");
 var $6Zb2x$reactariassr = require("@react-aria/ssr");
 var $6Zb2x$reactariavisuallyhidden = require("@react-aria/visually-hidden");
 
+
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
+
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
@@ -549,7 +585,7 @@ function $82711f9cb668ecdb$export$ea8f71083e90600f(props, ref) {
         isOpen,
         ref
     ]);
-    // Only hide the overlay when it is the topmost visible overlay in the stack.
+    // Only hide the overlay when it is the topmost visible overlay in the stack
     let onHide = ()=>{
         if ($82711f9cb668ecdb$var$visibleOverlays[$82711f9cb668ecdb$var$visibleOverlays.length - 1] === ref && onClose) onClose();
     };
@@ -581,7 +617,7 @@ function $82711f9cb668ecdb$export$ea8f71083e90600f(props, ref) {
     // Handle clicking outside the overlay to close it
     (0, $6Zb2x$reactariainteractions.useInteractOutside)({
         ref: ref,
-        onInteractOutside: isDismissable ? onInteractOutside : null,
+        onInteractOutside: isDismissable && isOpen ? onInteractOutside : null,
         onInteractOutsideStart: onInteractOutsideStart
     });
     let { focusWithinProps: focusWithinProps } = (0, $6Zb2x$reactariainteractions.useFocusWithin)({
@@ -724,8 +760,9 @@ function $5c2f5cd01815d369$var$preventScrollStandard() {
 //
 // 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
 //    on the window.
-// 2. Prevent default on `touchmove` events inside a scrollable element when the scroll position is at the
-//    top or bottom. This avoids the whole page scrolling instead, but does prevent overscrolling.
+// 2. Set `overscroll-behavior: contain` on nested scrollable regions so they do not scroll the page when at
+//    the top or bottom. Work around a bug where this does not work when the element does not actually overflow
+//    by preventing default in a `touchmove` event.
 // 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
 // 4. When focusing an input, apply a transform to trick Safari into thinking the input is at the top
 //    of the page, which prevents it from scrolling the page. After the input is focused, scroll the element
@@ -737,12 +774,15 @@ function $5c2f5cd01815d369$var$preventScrollStandard() {
 //    to navigate to an input with the next/previous buttons that's outside a modal.
 function $5c2f5cd01815d369$var$preventScrollMobileSafari() {
     let scrollable;
-    let lastY = 0;
+    let restoreScrollableStyles;
     let onTouchStart = (e)=>{
         // Store the nearest scrollable parent element from the element that the user touched.
-        scrollable = (0, $6Zb2x$reactariautils.getScrollParent)(e.target);
+        scrollable = (0, $6Zb2x$reactariautils.getScrollParent)(e.target, true);
         if (scrollable === document.documentElement && scrollable === document.body) return;
-        lastY = e.changedTouches[0].pageY;
+        // Prevent scrolling up when at the top and scrolling down when at the bottom
+        // of a nested scrollable area, otherwise mobile Safari will start scrolling
+        // the window instead.
+        if (scrollable instanceof HTMLElement && window.getComputedStyle(scrollable).overscrollBehavior === "auto") restoreScrollableStyles = $5c2f5cd01815d369$var$setStyle(scrollable, "overscrollBehavior", "contain");
     };
     let onTouchMove = (e)=>{
         // Prevent scrolling the window.
@@ -750,22 +790,20 @@ function $5c2f5cd01815d369$var$preventScrollMobileSafari() {
             e.preventDefault();
             return;
         }
-        // Prevent scrolling up when at the top and scrolling down when at the bottom
-        // of a nested scrollable area, otherwise mobile Safari will start scrolling
-        // the window instead. Unfortunately, this disables bounce scrolling when at
-        // the top but it's the best we can do.
-        let y = e.changedTouches[0].pageY;
-        let scrollTop = scrollable.scrollTop;
-        let bottom = scrollable.scrollHeight - scrollable.clientHeight;
-        if (bottom === 0) return;
-        if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) e.preventDefault();
-        lastY = y;
+        // overscroll-behavior should prevent scroll chaining, but currently does not
+        // if the element doesn't actually overflow. https://bugs.webkit.org/show_bug.cgi?id=243452
+        // This checks that both the width and height do not overflow, otherwise we might
+        // block horizontal scrolling too. In that case, adding `touch-action: pan-x` to
+        // the element will prevent vertical page scrolling. We can't add that automatically
+        // because it must be set before the touchstart event.
+        if (scrollable.scrollHeight === scrollable.clientHeight && scrollable.scrollWidth === scrollable.clientWidth) e.preventDefault();
     };
     let onTouchEnd = (e)=>{
         let target = e.target;
         // Apply this change if we're not already focused on the target element
         if ($5c2f5cd01815d369$var$willOpenKeyboard(target) && target !== document.activeElement) {
             e.preventDefault();
+            setupStyles();
             // Apply a transform to trick Safari into thinking the input is at the top of the page
             // so it doesn't try to scroll it into view. When tapping on an input, this needs to
             // be done before the "focus" event, so we have to focus the element ourselves.
@@ -775,10 +813,12 @@ function $5c2f5cd01815d369$var$preventScrollMobileSafari() {
                 target.style.transform = "";
             });
         }
+        if (restoreScrollableStyles) restoreScrollableStyles();
     };
     let onFocus = (e)=>{
         let target = e.target;
         if ($5c2f5cd01815d369$var$willOpenKeyboard(target)) {
+            setupStyles();
             // Transform also needs to be applied in the focus event in cases where focus moves
             // other than tapping on an input directly, e.g. the next/previous buttons in the
             // software keyboard. In these cases, it seems applying the transform in the focus event
@@ -803,19 +843,25 @@ function $5c2f5cd01815d369$var$preventScrollMobileSafari() {
             });
         }
     };
-    let onWindowScroll = ()=>{
-        // Last resort. If the window scrolled, scroll it back to the top.
-        // It should always be at the top because the body will have a negative margin (see below).
+    let restoreStyles = null;
+    let setupStyles = ()=>{
+        if (restoreStyles) return;
+        let onWindowScroll = ()=>{
+            // Last resort. If the window scrolled, scroll it back to the top.
+            // It should always be at the top because the body will have a negative margin (see below).
+            window.scrollTo(0, 0);
+        };
+        // Record the original scroll position so we can restore it.
+        // Then apply a negative margin to the body to offset it by the scroll position. This will
+        // enable us to scroll the window to the top, which is required for the rest of this to work.
+        let scrollX = window.pageXOffset;
+        let scrollY = window.pageYOffset;
+        restoreStyles = (0, $6Zb2x$reactariautils.chain)($5c2f5cd01815d369$var$addEvent(window, "scroll", onWindowScroll), $5c2f5cd01815d369$var$setStyle(document.documentElement, "paddingRight", `${window.innerWidth - document.documentElement.clientWidth}px`), $5c2f5cd01815d369$var$setStyle(document.documentElement, "overflow", "hidden"), $5c2f5cd01815d369$var$setStyle(document.body, "marginTop", `-${scrollY}px`), ()=>{
+            window.scrollTo(scrollX, scrollY);
+        });
+        // Scroll to the top. The negative margin on the body will make this appear the same.
         window.scrollTo(0, 0);
     };
-    // Record the original scroll position so we can restore it.
-    // Then apply a negative margin to the body to offset it by the scroll position. This will
-    // enable us to scroll the window to the top, which is required for the rest of this to work.
-    let scrollX = window.pageXOffset;
-    let scrollY = window.pageYOffset;
-    let restoreStyles = (0, $6Zb2x$reactariautils.chain)($5c2f5cd01815d369$var$setStyle(document.documentElement, "paddingRight", `${window.innerWidth - document.documentElement.clientWidth}px`), $5c2f5cd01815d369$var$setStyle(document.documentElement, "overflow", "hidden"), $5c2f5cd01815d369$var$setStyle(document.body, "marginTop", `-${scrollY}px`));
-    // Scroll to the top. The negative margin on the body will make this appear the same.
-    window.scrollTo(0, 0);
     let removeEvents = (0, $6Zb2x$reactariautils.chain)($5c2f5cd01815d369$var$addEvent(document, "touchstart", onTouchStart, {
         passive: false,
         capture: true
@@ -825,12 +871,12 @@ function $5c2f5cd01815d369$var$preventScrollMobileSafari() {
     }), $5c2f5cd01815d369$var$addEvent(document, "touchend", onTouchEnd, {
         passive: false,
         capture: true
-    }), $5c2f5cd01815d369$var$addEvent(document, "focus", onFocus, true), $5c2f5cd01815d369$var$addEvent(window, "scroll", onWindowScroll));
+    }), $5c2f5cd01815d369$var$addEvent(document, "focus", onFocus, true));
     return ()=>{
         // Restore styles and scroll the page back to where it was.
-        restoreStyles();
+        restoreScrollableStyles === null || restoreScrollableStyles === void 0 ? void 0 : restoreScrollableStyles();
+        restoreStyles === null || restoreStyles === void 0 ? void 0 : restoreStyles();
         removeEvents();
-        window.scrollTo(scrollX, scrollY);
     };
 }
 // Sets a CSS property on an element, and returns a function to revert it to the previous value.
@@ -972,209 +1018,39 @@ function $0775ea8ea6a0565e$export$33ffd74ebf07f060(options) {
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */ var $90f032faf016e1fb$exports = {};
-var $4393d9b86d3ad278$exports = {};
-$4393d9b86d3ad278$exports = {
-    "dismiss": `تجاهل`
-};
 
 
-var $254224013ae06959$exports = {};
-$254224013ae06959$exports = {
-    "dismiss": `Отхвърляне`
-};
 
 
-var $55d3567b59d09782$exports = {};
-$55d3567b59d09782$exports = {
-    "dismiss": `Odstranit`
-};
 
 
-var $0e419a7be7773c16$exports = {};
-$0e419a7be7773c16$exports = {
-    "dismiss": `Luk`
-};
 
 
-var $be606513c8356c34$exports = {};
-$be606513c8356c34$exports = {
-    "dismiss": `Schließen`
-};
 
 
-var $7d99787e5bd26f87$exports = {};
-$7d99787e5bd26f87$exports = {
-    "dismiss": `Απόρριψη`
-};
 
 
-var $0360f2a6534752c1$exports = {};
-$0360f2a6534752c1$exports = {
-    "dismiss": `Dismiss`
-};
 
 
-var $92bf4fdecfeb6a61$exports = {};
-$92bf4fdecfeb6a61$exports = {
-    "dismiss": `Descartar`
-};
 
 
-var $7c02fa9b9c598043$exports = {};
-$7c02fa9b9c598043$exports = {
-    "dismiss": `Lõpeta`
-};
 
 
-var $ba53535dcca59343$exports = {};
-$ba53535dcca59343$exports = {
-    "dismiss": `Hylkää`
-};
 
 
-var $2fbbcddf7d252cb7$exports = {};
-$2fbbcddf7d252cb7$exports = {
-    "dismiss": `Rejeter`
-};
 
 
-var $0a1f0520e07d3596$exports = {};
-$0a1f0520e07d3596$exports = {
-    "dismiss": `התעלם`
-};
 
 
-var $f7be5df1487823a9$exports = {};
-$f7be5df1487823a9$exports = {
-    "dismiss": `Odbaci`
-};
-
-
-var $8dbe4363bfbba3f9$exports = {};
-$8dbe4363bfbba3f9$exports = {
-    "dismiss": `Elutasítás`
-};
-
 
-var $90a445da1ad273e7$exports = {};
-$90a445da1ad273e7$exports = {
-    "dismiss": `Ignora`
-};
 
 
-var $e1ebf18259c9b1ee$exports = {};
-$e1ebf18259c9b1ee$exports = {
-    "dismiss": `閉じる`
-};
 
 
-var $765893642f3b4f72$exports = {};
-$765893642f3b4f72$exports = {
-    "dismiss": `무시`
-};
 
 
-var $af73ba24f63febd1$exports = {};
-$af73ba24f63febd1$exports = {
-    "dismiss": `Atmesti`
-};
 
 
-var $97aac9f6740ee412$exports = {};
-$97aac9f6740ee412$exports = {
-    "dismiss": `Nerādīt`
-};
-
-
-var $92fbe76e196d7e0a$exports = {};
-$92fbe76e196d7e0a$exports = {
-    "dismiss": `Lukk`
-};
-
-
-var $44399897afb701ce$exports = {};
-$44399897afb701ce$exports = {
-    "dismiss": `Negeren`
-};
-
-
-var $d679e258664d7384$exports = {};
-$d679e258664d7384$exports = {
-    "dismiss": `Zignoruj`
-};
-
-
-var $b51fc2992648966b$exports = {};
-$b51fc2992648966b$exports = {
-    "dismiss": `Descartar`
-};
-
-
-var $6abbc540dcd5f78c$exports = {};
-$6abbc540dcd5f78c$exports = {
-    "dismiss": `Dispensar`
-};
-
-
-var $6cbc0c9bf574473b$exports = {};
-$6cbc0c9bf574473b$exports = {
-    "dismiss": `Revocare`
-};
-
-
-var $009edbe58be6525b$exports = {};
-$009edbe58be6525b$exports = {
-    "dismiss": `Пропустить`
-};
-
-
-var $01cf6095489e78f7$exports = {};
-$01cf6095489e78f7$exports = {
-    "dismiss": `Zrušiť`
-};
-
-
-var $33fd5a1a3753e83f$exports = {};
-$33fd5a1a3753e83f$exports = {
-    "dismiss": `Opusti`
-};
-
-
-var $6b9373a558e74e84$exports = {};
-$6b9373a558e74e84$exports = {
-    "dismiss": `Odbaci`
-};
-
-
-var $90008194c3db7fce$exports = {};
-$90008194c3db7fce$exports = {
-    "dismiss": `Avvisa`
-};
-
-
-var $e29d21290b4ce15c$exports = {};
-$e29d21290b4ce15c$exports = {
-    "dismiss": `Kapat`
-};
-
-
-var $96139c59e8ba3f85$exports = {};
-$96139c59e8ba3f85$exports = {
-    "dismiss": `Скасувати`
-};
-
-
-var $052554192ea8e826$exports = {};
-$052554192ea8e826$exports = {
-    "dismiss": `取消`
-};
-
-
-var $3f3b5d798a5abdbc$exports = {};
-$3f3b5d798a5abdbc$exports = {
-    "dismiss": `關閉`
-};
-
 
 $90f032faf016e1fb$exports = {
     "ar-AE": $4393d9b86d3ad278$exports,
@@ -1220,7 +1096,7 @@ $90f032faf016e1fb$exports = {
 
 function $f69bb3e6457495cc$export$2317d149ed6f78c4(props) {
     let { onDismiss: onDismiss, ...otherProps } = props;
-    let stringFormatter = (0, $6Zb2x$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($90f032faf016e1fb$exports))));
+    let stringFormatter = (0, $6Zb2x$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($90f032faf016e1fb$exports))), "@react-aria/overlays");
     let labels = (0, $6Zb2x$reactariautils.useLabels)(otherProps, stringFormatter.format("dismiss"));
     let onClick = ()=>{
         if (onDismiss) onDismiss();
@@ -1228,7 +1104,11 @@ function $f69bb3e6457495cc$export$2317d149ed6f78c4(props) {
     return /*#__PURE__*/ (0, ($parcel$interopDefault($6Zb2x$react))).createElement((0, $6Zb2x$reactariavisuallyhidden.VisuallyHidden), null, /*#__PURE__*/ (0, ($parcel$interopDefault($6Zb2x$react))).createElement("button", {
         ...labels,
         tabIndex: -1,
-        onClick: onClick
+        onClick: onClick,
+        style: {
+            width: 1,
+            height: 1
+        }
     }));
 }
 
@@ -1363,23 +1243,24 @@ function $08ef1685902b6011$export$1c3ebcada18427bf(targets, root = document.body
 
 
 function $6c2dfcdee3e15e20$export$542a6fd13ac93354(props, state) {
-    let { triggerRef: triggerRef, popoverRef: popoverRef, isNonModal: isNonModal, isKeyboardDismissDisabled: isKeyboardDismissDisabled, ...otherProps } = props;
+    let { triggerRef: triggerRef, popoverRef: popoverRef, isNonModal: isNonModal, isKeyboardDismissDisabled: isKeyboardDismissDisabled, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, ...otherProps } = props;
     let { overlayProps: overlayProps, underlayProps: underlayProps } = (0, $82711f9cb668ecdb$export$ea8f71083e90600f)({
         isOpen: state.isOpen,
         onClose: state.close,
         shouldCloseOnBlur: true,
         isDismissable: !isNonModal,
-        isKeyboardDismissDisabled: isKeyboardDismissDisabled
+        isKeyboardDismissDisabled: isKeyboardDismissDisabled,
+        shouldCloseOnInteractOutside: shouldCloseOnInteractOutside
     }, popoverRef);
     let { overlayProps: positionProps, arrowProps: arrowProps, placement: placement } = (0, $cd94b4896dd97759$export$d39e1813b3bdd0e1)({
         ...otherProps,
         targetRef: triggerRef,
         overlayRef: popoverRef,
         isOpen: state.isOpen,
-        onClose: null
+        onClose: isNonModal ? state.close : null
     });
     (0, $5c2f5cd01815d369$export$ee0f7cc6afcd1c18)({
-        isDisabled: isNonModal
+        isDisabled: isNonModal || !state.isOpen
     });
     (0, $6Zb2x$reactariautils.useLayoutEffect)(()=>{
         if (state.isOpen && !isNonModal && popoverRef.current) return (0, $08ef1685902b6011$export$1c3ebcada18427bf)([