@react-aria/overlays 3.10.1 → 3.12.0

package/dist/main.js

@@ -1,6 +1,7 @@
 var $6Zb2x$react = require("react");
 var $6Zb2x$reactariautils = require("@react-aria/utils");
 var $6Zb2x$reactariai18n = require("@react-aria/i18n");
+var $6Zb2x$reactariafocus = require("@react-aria/focus");
 var $6Zb2x$reactariainteractions = require("@react-aria/interactions");
 var $6Zb2x$reactdom = require("react-dom");
 var $6Zb2x$reactariassr = require("@react-aria/ssr");
@@ -24,6 +25,10 @@ $parcel$export(module.exports, "OverlayContainer", () => $0775ea8ea6a0565e$expor
 $parcel$export(module.exports, "useModal", () => $0775ea8ea6a0565e$export$33ffd74ebf07f060);
 $parcel$export(module.exports, "DismissButton", () => $f69bb3e6457495cc$export$2317d149ed6f78c4);
 $parcel$export(module.exports, "ariaHideOutside", () => $08ef1685902b6011$export$1c3ebcada18427bf);
+$parcel$export(module.exports, "usePopover", () => $6c2dfcdee3e15e20$export$542a6fd13ac93354);
+$parcel$export(module.exports, "useModalOverlay", () => $11b7e0b04b421e95$export$dbc0f175b25fb0fb);
+$parcel$export(module.exports, "Overlay", () => $745edbb83ab4296f$export$c6fdb837b070b4ff);
+$parcel$export(module.exports, "useOverlayFocusContain", () => $745edbb83ab4296f$export$14c98a7594375490);
 const $5935ba4d7da2c103$var$AXIS = {
     top: 'top',
     bottom: 'top',
@@ -261,7 +266,7 @@ const $9a8aa1b0b336ea3a$export$f6211563215e3b37 = new WeakMap();
 function $9a8aa1b0b336ea3a$export$18fc8428861184da(opts) {
     let { triggerRef: triggerRef , isOpen: isOpen , onClose: onClose  } = opts;
     $6Zb2x$react.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;
@@ -326,11 +331,18 @@ function $cd94b4896dd97759$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
     $6Zb2x$reactariautils.useLayoutEffect(updatePosition, deps);
     // Update position on window resize
     $cd94b4896dd97759$var$useResize(updatePosition);
+    // Update position when the overlay changes size (might need to flip).
+    $6Zb2x$reactariautils.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 = $6Zb2x$react.useRef(false);
@@ -362,7 +374,7 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
     $9a8aa1b0b336ea3a$export$18fc8428861184da({
         triggerRef: targetRef,
         isOpen: isOpen,
-        onClose: onClose ? close : undefined
+        onClose: onClose && close
     });
     return {
         overlayProps: {
@@ -401,6 +413,7 @@ function $cd94b4896dd97759$var$translateRTL(position, direction) {
 
 
 
+
 const $82711f9cb668ecdb$var$visibleOverlays = [];
 function $82711f9cb668ecdb$export$ea8f71083e90600f(props, ref) {
     let { onClose: onClose , shouldCloseOnBlur: shouldCloseOnBlur , isOpen: isOpen , isDismissable: isDismissable = false , isKeyboardDismissDisabled: isKeyboardDismissDisabled = false , shouldCloseOnInteractOutside: shouldCloseOnInteractOutside  } = props;
@@ -453,6 +466,10 @@ function $82711f9cb668ecdb$export$ea8f71083e90600f(props, ref) {
     let { focusWithinProps: focusWithinProps  } = $6Zb2x$reactariainteractions.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 && $6Zb2x$reactariafocus.isElementInChildOfActiveScope(e.relatedTarget)) return;
             if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose();
         }
     });
@@ -1056,6 +1073,7 @@ function $f69bb3e6457495cc$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 $08ef1685902b6011$var$refCountMap = new WeakMap();
+let $08ef1685902b6011$var$observerStack = [];
 function $08ef1685902b6011$export$1c3ebcada18427bf(targets, root = document.body) {
     let visibleNodes = new Set(targets);
     let hiddenNodes = new Set();
@@ -1064,11 +1082,10 @@ function $08ef1685902b6011$export$1c3ebcada18427bf(targets, root = document.body
             // If this node is a live announcer, add it to the set of nodes to keep visible.
             if ((node instanceof HTMLElement || node instanceof SVGElement) && node.dataset.liveAnnouncer === 'true') visibleNodes.add(node);
             // Skip this node and its children if it is one of the target nodes, or a live announcer.
-            // Also skip children of already hidden nodes, as aria-hidden is recursive.
-            if (visibleNodes.has(node) || hiddenNodes.has(node.parentElement)) return NodeFilter.FILTER_REJECT;
-            // VoiceOver on iOS has issues hiding elements with role="row". Hide the cells inside instead.
-            // https://bugs.webkit.org/show_bug.cgi?id=222623
-            if (node instanceof Element && node.getAttribute('role') === 'row') return NodeFilter.FILTER_SKIP;
+            // Also skip children of already hidden nodes, as aria-hidden is recursive. An exception is
+            // made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row".
+            // For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
+            if (visibleNodes.has(node) || hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row') return NodeFilter.FILTER_REJECT;
             // Skip this node but continue to children if one of the targets is inside the node.
             if (targets.some((target)=>node.contains(target)
             )) return NodeFilter.FILTER_SKIP;
@@ -1085,6 +1102,9 @@ function $08ef1685902b6011$export$1c3ebcada18427bf(targets, root = document.body
         hiddenNodes.add(node);
         $08ef1685902b6011$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 ($08ef1685902b6011$var$observerStack.length) $08ef1685902b6011$var$observerStack[$08ef1685902b6011$var$observerStack.length - 1].disconnect();
     let node1 = walker.nextNode();
     while(node1 != null){
         hide(node1);
@@ -1109,6 +1129,18 @@ function $08ef1685902b6011$export$1c3ebcada18427bf(targets, root = document.body
         childList: true,
         subtree: true
     });
+    let observerWrapper = {
+        observe () {
+            observer.observe(root, {
+                childList: true,
+                subtree: true
+            });
+        },
+        disconnect () {
+            observer.disconnect();
+        }
+    };
+    $08ef1685902b6011$var$observerStack.push(observerWrapper);
     return ()=>{
         observer.disconnect();
         for (let node of hiddenNodes){
@@ -1118,10 +1150,137 @@ function $08ef1685902b6011$export$1c3ebcada18427bf(targets, root = document.body
                 $08ef1685902b6011$var$refCountMap.delete(node);
             } else $08ef1685902b6011$var$refCountMap.set(node, count - 1);
         }
+        // Remove this observer from the stack, and start the previous one.
+        if (observerWrapper === $08ef1685902b6011$var$observerStack[$08ef1685902b6011$var$observerStack.length - 1]) {
+            $08ef1685902b6011$var$observerStack.pop();
+            if ($08ef1685902b6011$var$observerStack.length) $08ef1685902b6011$var$observerStack[$08ef1685902b6011$var$observerStack.length - 1].observe();
+        } else $08ef1685902b6011$var$observerStack.splice($08ef1685902b6011$var$observerStack.indexOf(observerWrapper), 1);
+    };
+}
+
+
+
+
+
+
+
+
+function $6c2dfcdee3e15e20$export$542a6fd13ac93354(props, state) {
+    let { triggerRef: triggerRef , popoverRef: popoverRef , isNonModal: isNonModal , isKeyboardDismissDisabled: isKeyboardDismissDisabled , ...otherProps } = props;
+    let { overlayProps: overlayProps , underlayProps: underlayProps  } = $82711f9cb668ecdb$export$ea8f71083e90600f({
+        isOpen: state.isOpen,
+        onClose: state.close,
+        shouldCloseOnBlur: true,
+        isDismissable: !isNonModal,
+        isKeyboardDismissDisabled: isKeyboardDismissDisabled
+    }, popoverRef);
+    let { overlayProps: positionProps , arrowProps: arrowProps , placement: placement  } = $cd94b4896dd97759$export$d39e1813b3bdd0e1({
+        ...otherProps,
+        targetRef: triggerRef,
+        overlayRef: popoverRef,
+        isOpen: state.isOpen,
+        onClose: null
+    });
+    // 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] = $6Zb2x$react.useState(false);
+    $6Zb2x$reactariautils.useLayoutEffect(()=>{
+        if (!isNonModal && placement) setPositioned(true);
+    }, [
+        isNonModal,
+        placement
+    ]);
+    $5c2f5cd01815d369$export$ee0f7cc6afcd1c18({
+        isDisabled: isNonModal || !isPositioned
+    });
+    $6Zb2x$reactariautils.useLayoutEffect(()=>{
+        if (state.isOpen && !isNonModal && popoverRef.current) return $08ef1685902b6011$export$1c3ebcada18427bf([
+            popoverRef.current
+        ]);
+    }, [
+        isNonModal,
+        state.isOpen,
+        popoverRef
+    ]);
+    return {
+        popoverProps: $6Zb2x$reactariautils.mergeProps(overlayProps, positionProps),
+        arrowProps: arrowProps,
+        underlayProps: underlayProps,
+        placement: placement
+    };
+}
+
+
+
+
+
+
+
+
+
+
+
+const $745edbb83ab4296f$export$a2200b96afd16271 = /*#__PURE__*/ ($parcel$interopDefault($6Zb2x$react)).createContext(null);
+function $745edbb83ab4296f$export$c6fdb837b070b4ff(props) {
+    let isSSR = $6Zb2x$reactariassr.useIsSSR();
+    let { portalContainer: portalContainer = isSSR ? null : document.body  } = props;
+    let [contain, setContain] = $6Zb2x$react.useState(false);
+    let contextValue = $6Zb2x$react.useMemo(()=>({
+            contain: contain,
+            setContain: setContain
+        })
+    , [
+        contain,
+        setContain
+    ]);
+    if (!portalContainer) return null;
+    let contents = /*#__PURE__*/ ($parcel$interopDefault($6Zb2x$react)).createElement($745edbb83ab4296f$export$a2200b96afd16271.Provider, {
+        value: contextValue
+    }, /*#__PURE__*/ ($parcel$interopDefault($6Zb2x$react)).createElement($6Zb2x$reactariafocus.FocusScope, {
+        restoreFocus: true,
+        contain: contain
+    }, props.children));
+    return(/*#__PURE__*/ ($parcel$interopDefault($6Zb2x$reactdom)).createPortal(contents, portalContainer));
+}
+function $745edbb83ab4296f$export$14c98a7594375490() {
+    let ctx = $6Zb2x$react.useContext($745edbb83ab4296f$export$a2200b96afd16271);
+    let setContain = ctx === null || ctx === void 0 ? void 0 : ctx.setContain;
+    $6Zb2x$reactariautils.useLayoutEffect(()=>{
+        setContain === null || setContain === void 0 ? void 0 : setContain(true);
+    }, [
+        setContain
+    ]);
+}
+
+
+
+function $11b7e0b04b421e95$export$dbc0f175b25fb0fb(props, state, ref) {
+    let { overlayProps: overlayProps , underlayProps: underlayProps  } = $82711f9cb668ecdb$export$ea8f71083e90600f({
+        ...props,
+        isOpen: state.isOpen,
+        onClose: state.close
+    }, ref);
+    $5c2f5cd01815d369$export$ee0f7cc6afcd1c18({
+        isDisabled: !state.isOpen
+    });
+    $745edbb83ab4296f$export$14c98a7594375490();
+    $6Zb2x$react.useEffect(()=>{
+        if (state.isOpen) return $08ef1685902b6011$export$1c3ebcada18427bf([
+            ref.current
+        ]);
+    }, [
+        state.isOpen,
+        ref
+    ]);
+    return {
+        modalProps: $6Zb2x$reactariautils.mergeProps(overlayProps),
+        underlayProps: underlayProps
     };
 }
 
 
 
 
+
 //# sourceMappingURL=main.js.map