@react-aria/overlays 3.11.0 → 3.12.0

package/dist/module.js

@@ -1,11 +1,11 @@
 import $k7QOs$react, {useState as $k7QOs$useState, useCallback as $k7QOs$useCallback, useRef as $k7QOs$useRef, useEffect as $k7QOs$useEffect, useContext as $k7QOs$useContext, useMemo as $k7QOs$useMemo} from "react";
-import {useLayoutEffect as $k7QOs$useLayoutEffect, useId as $k7QOs$useId, isIOS as $k7QOs$isIOS, chain as $k7QOs$chain, getScrollParent as $k7QOs$getScrollParent, useLabels as $k7QOs$useLabels, mergeProps as $k7QOs$mergeProps} from "@react-aria/utils";
+import {useLayoutEffect as $k7QOs$useLayoutEffect, useResizeObserver as $k7QOs$useResizeObserver, useId as $k7QOs$useId, isIOS as $k7QOs$isIOS, chain as $k7QOs$chain, getScrollParent as $k7QOs$getScrollParent, useLabels as $k7QOs$useLabels, mergeProps as $k7QOs$mergeProps} from "@react-aria/utils";
 import {useLocale as $k7QOs$useLocale, useLocalizedStringFormatter as $k7QOs$useLocalizedStringFormatter} from "@react-aria/i18n";
+import {isElementInChildOfActiveScope as $k7QOs$isElementInChildOfActiveScope, FocusScope as $k7QOs$FocusScope} from "@react-aria/focus";
 import {useInteractOutside as $k7QOs$useInteractOutside, useFocusWithin as $k7QOs$useFocusWithin} from "@react-aria/interactions";
 import $k7QOs$reactdom from "react-dom";
 import {useIsSSR as $k7QOs$useIsSSR} from "@react-aria/ssr";
 import {VisuallyHidden as $k7QOs$VisuallyHidden} from "@react-aria/visually-hidden";
-import {FocusScope as $k7QOs$FocusScope} from "@react-aria/focus";
 
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
@@ -247,7 +247,7 @@ const $dd149f63282afbbf$export$f6211563215e3b37 = new WeakMap();
 function $dd149f63282afbbf$export$18fc8428861184da(opts) {
     let { triggerRef: triggerRef , isOpen: isOpen , onClose: onClose  } = opts;
     $k7QOs$useEffect(()=>{
-        if (!isOpen) return;
+        if (!isOpen || onClose === null) return;
         let onScroll = (e)=>{
             // Ignore if scrolling an scrollable region outside the trigger's tree.
             let target = e.target;
@@ -312,11 +312,18 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
             crossOffset: crossOffset,
             maxHeight: maxHeight
         }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
     // Update position when anything changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     $k7QOs$useLayoutEffect(updatePosition, deps);
     // Update position on window resize
     $2a41e45df1593e64$var$useResize(updatePosition);
+    // Update position when the overlay changes size (might need to flip).
+    $k7QOs$useResizeObserver({
+        ref: overlayRef,
+        onResize: updatePosition
+    });
     // Reposition the overlay and do not close on scroll while the visual viewport is resizing.
     // This will ensure that overlays adjust their positioning when the iOS virtual keyboard appears.
     let isResizing = $k7QOs$useRef(false);
@@ -348,7 +355,7 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
     $dd149f63282afbbf$export$18fc8428861184da({
         triggerRef: targetRef,
         isOpen: isOpen,
-        onClose: onClose ? close : undefined
+        onClose: onClose && close
     });
     return {
         overlayProps: {
@@ -387,6 +394,7 @@ function $2a41e45df1593e64$var$translateRTL(position, direction) {
 
 
 
+
 const $a11501f3d1d39e6c$var$visibleOverlays = [];
 function $a11501f3d1d39e6c$export$ea8f71083e90600f(props, ref) {
     let { onClose: onClose , shouldCloseOnBlur: shouldCloseOnBlur , isOpen: isOpen , isDismissable: isDismissable = false , isKeyboardDismissDisabled: isKeyboardDismissDisabled = false , shouldCloseOnInteractOutside: shouldCloseOnInteractOutside  } = props;
@@ -439,6 +447,10 @@ function $a11501f3d1d39e6c$export$ea8f71083e90600f(props, ref) {
     let { focusWithinProps: focusWithinProps  } = $k7QOs$useFocusWithin({
         isDisabled: !shouldCloseOnBlur,
         onBlurWithin: (e)=>{
+            // If focus is moving into a child focus scope (e.g. menu inside a dialog),
+            // do not close the outer overlay. At this point, the active scope should
+            // still be the outer overlay, since blur events run before focus.
+            if (e.relatedTarget && $k7QOs$isElementInChildOfActiveScope(e.relatedTarget)) return;
             if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose();
         }
     });
@@ -1042,6 +1054,7 @@ function $86ea4cb521eb2e37$export$2317d149ed6f78c4(props) {
  */ // Keeps a ref count of all hidden elements. Added to when hiding an element, and
 // subtracted from when showing it again. When it reaches zero, aria-hidden is removed.
 let $5e3802645cc19319$var$refCountMap = new WeakMap();
+let $5e3802645cc19319$var$observerStack = [];
 function $5e3802645cc19319$export$1c3ebcada18427bf(targets, root = document.body) {
     let visibleNodes = new Set(targets);
     let hiddenNodes = new Set();
@@ -1070,6 +1083,9 @@ function $5e3802645cc19319$export$1c3ebcada18427bf(targets, root = document.body
         hiddenNodes.add(node);
         $5e3802645cc19319$var$refCountMap.set(node, refCount + 1);
     };
+    // If there is already a MutationObserver listening from a previous call,
+    // disconnect it so the new on takes over.
+    if ($5e3802645cc19319$var$observerStack.length) $5e3802645cc19319$var$observerStack[$5e3802645cc19319$var$observerStack.length - 1].disconnect();
     let node1 = walker.nextNode();
     while(node1 != null){
         hide(node1);
@@ -1094,6 +1110,18 @@ function $5e3802645cc19319$export$1c3ebcada18427bf(targets, root = document.body
         childList: true,
         subtree: true
     });
+    let observerWrapper = {
+        observe () {
+            observer.observe(root, {
+                childList: true,
+                subtree: true
+            });
+        },
+        disconnect () {
+            observer.disconnect();
+        }
+    };
+    $5e3802645cc19319$var$observerStack.push(observerWrapper);
     return ()=>{
         observer.disconnect();
         for (let node of hiddenNodes){
@@ -1103,6 +1131,11 @@ function $5e3802645cc19319$export$1c3ebcada18427bf(targets, root = document.body
                 $5e3802645cc19319$var$refCountMap.delete(node);
             } else $5e3802645cc19319$var$refCountMap.set(node, count - 1);
         }
+        // Remove this observer from the stack, and start the previous one.
+        if (observerWrapper === $5e3802645cc19319$var$observerStack[$5e3802645cc19319$var$observerStack.length - 1]) {
+            $5e3802645cc19319$var$observerStack.pop();
+            if ($5e3802645cc19319$var$observerStack.length) $5e3802645cc19319$var$observerStack[$5e3802645cc19319$var$observerStack.length - 1].observe();
+        } else $5e3802645cc19319$var$observerStack.splice($5e3802645cc19319$var$observerStack.indexOf(observerWrapper), 1);
     };
 }
 
@@ -1112,22 +1145,38 @@ function $5e3802645cc19319$export$1c3ebcada18427bf(targets, root = document.body
 
 
 
+
 function $f2f8a6077418541e$export$542a6fd13ac93354(props, state) {
-    let { triggerRef: triggerRef , popoverRef: popoverRef , isNonModal: isNonModal , ...otherProps } = props;
-    let { overlayProps: overlayProps  } = $a11501f3d1d39e6c$export$ea8f71083e90600f({
+    let { triggerRef: triggerRef , popoverRef: popoverRef , isNonModal: isNonModal , isKeyboardDismissDisabled: isKeyboardDismissDisabled , ...otherProps } = props;
+    let { overlayProps: overlayProps , underlayProps: underlayProps  } = $a11501f3d1d39e6c$export$ea8f71083e90600f({
         isOpen: state.isOpen,
         onClose: state.close,
         shouldCloseOnBlur: true,
-        isDismissable: true
+        isDismissable: !isNonModal,
+        isKeyboardDismissDisabled: isKeyboardDismissDisabled
     }, popoverRef);
-    let { overlayProps: positionProps , arrowProps: arrowProps  } = $2a41e45df1593e64$export$d39e1813b3bdd0e1({
+    let { overlayProps: positionProps , arrowProps: arrowProps , placement: placement  } = $2a41e45df1593e64$export$d39e1813b3bdd0e1({
         ...otherProps,
         targetRef: triggerRef,
         overlayRef: popoverRef,
-        isOpen: state.isOpen
+        isOpen: state.isOpen,
+        onClose: null
     });
-    $k7QOs$useEffect(()=>{
-        if (state.isOpen && !isNonModal) return $5e3802645cc19319$export$1c3ebcada18427bf([
+    // Delay preventing scroll until popover is positioned to avoid extra scroll padding.
+    // This requires a layout effect so that positioning has been committed to the DOM
+    // by the time usePreventScroll measures the element.
+    let [isPositioned, setPositioned] = $k7QOs$useState(false);
+    $k7QOs$useLayoutEffect(()=>{
+        if (!isNonModal && placement) setPositioned(true);
+    }, [
+        isNonModal,
+        placement
+    ]);
+    $49c51c25361d4cd2$export$ee0f7cc6afcd1c18({
+        isDisabled: isNonModal || !isPositioned
+    });
+    $k7QOs$useLayoutEffect(()=>{
+        if (state.isOpen && !isNonModal && popoverRef.current) return $5e3802645cc19319$export$1c3ebcada18427bf([
             popoverRef.current
         ]);
     }, [
@@ -1137,7 +1186,9 @@ function $f2f8a6077418541e$export$542a6fd13ac93354(props, state) {
     ]);
     return {
         popoverProps: $k7QOs$mergeProps(overlayProps, positionProps),
-        arrowProps: arrowProps
+        arrowProps: arrowProps,
+        underlayProps: underlayProps,
+        placement: placement
     };
 }
 
@@ -1151,14 +1202,22 @@ function $f2f8a6077418541e$export$542a6fd13ac93354(props, state) {
 
 
 
-const $337b884510726a0d$var$OverlayContext = /*#__PURE__*/ $k7QOs$react.createContext(null);
+const $337b884510726a0d$export$a2200b96afd16271 = /*#__PURE__*/ $k7QOs$react.createContext(null);
 function $337b884510726a0d$export$c6fdb837b070b4ff(props) {
     let isSSR = $k7QOs$useIsSSR();
     let { portalContainer: portalContainer = isSSR ? null : document.body  } = props;
     let [contain, setContain] = $k7QOs$useState(false);
+    let contextValue = $k7QOs$useMemo(()=>({
+            contain: contain,
+            setContain: setContain
+        })
+    , [
+        contain,
+        setContain
+    ]);
     if (!portalContainer) return null;
-    let contents = /*#__PURE__*/ $k7QOs$react.createElement($337b884510726a0d$var$OverlayContext.Provider, {
-        value: setContain
+    let contents = /*#__PURE__*/ $k7QOs$react.createElement($337b884510726a0d$export$a2200b96afd16271.Provider, {
+        value: contextValue
     }, /*#__PURE__*/ $k7QOs$react.createElement($k7QOs$FocusScope, {
         restoreFocus: true,
         contain: contain
@@ -1166,7 +1225,8 @@ function $337b884510726a0d$export$c6fdb837b070b4ff(props) {
     return(/*#__PURE__*/ $k7QOs$reactdom.createPortal(contents, portalContainer));
 }
 function $337b884510726a0d$export$14c98a7594375490() {
-    let setContain = $k7QOs$useContext($337b884510726a0d$var$OverlayContext);
+    let ctx = $k7QOs$useContext($337b884510726a0d$export$a2200b96afd16271);
+    let setContain = ctx === null || ctx === void 0 ? void 0 : ctx.setContain;
     $k7QOs$useLayoutEffect(()=>{
         setContain === null || setContain === void 0 ? void 0 : setContain(true);
     }, [