@react-aria/overlays 3.12.1 → 3.13.0

package/dist/main.js

@@ -358,7 +358,7 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
     ];
     let updatePosition = (0, $6Zb2x$react.useCallback)(()=>{
         if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) return;
-        setPosition((0, $5935ba4d7da2c103$export$b3ceb0cbf1056d98)({
+        let position = (0, $5935ba4d7da2c103$export$b3ceb0cbf1056d98)({
             placement: $cd94b4896dd97759$var$translateRTL(placement, direction),
             overlayNode: overlayRef.current,
             targetNode: targetRef.current,
@@ -369,7 +369,13 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
             offset: offset,
             crossOffset: crossOffset,
             maxHeight: maxHeight
-        }));
+        });
+        // Modify overlay styles directly so positioning happens immediately without the need of a second render
+        // This is so we don't have to delay autoFocus scrolling or delay applying preventScroll for popovers
+        Object.keys(position.position).forEach((key)=>overlayRef.current.style[key] = position.position[key] + "px");
+        overlayRef.current.style.maxHeight = position.maxHeight != null ? position.maxHeight + "px" : undefined;
+        // Trigger a set state for a second render anyway for arrow positioning
+        setPosition(position);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
     // Update position when anything changes
@@ -1171,20 +1177,35 @@ let $08ef1685902b6011$var$observerStack = [];
 function $08ef1685902b6011$export$1c3ebcada18427bf(targets, root = document.body) {
     let visibleNodes = new Set(targets);
     let hiddenNodes = new Set();
-    let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
-        acceptNode (node) {
-            // 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);
+    let walk = (root)=>{
+        // Keep live announcer and top layer elements (e.g. toasts) visible.
+        for (let element of root.querySelectorAll("[data-live-announcer], [data-react-aria-top-layer]"))visibleNodes.add(element);
+        let acceptNode = (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. 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;
+            for (let target of visibleNodes){
+                if (node.contains(target)) return NodeFilter.FILTER_SKIP;
+            }
             return NodeFilter.FILTER_ACCEPT;
+        };
+        let walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+            acceptNode: acceptNode
+        });
+        // TreeWalker does not include the root.
+        let acceptRoot = acceptNode(root);
+        if (acceptRoot === NodeFilter.FILTER_ACCEPT) hide(root);
+        if (acceptRoot !== NodeFilter.FILTER_REJECT) {
+            let node = walker.nextNode();
+            while(node != null){
+                hide(node);
+                node = walker.nextNode();
+            }
         }
-    });
+    };
     let hide = (node)=>{
         var _refCountMap_get;
         let refCount = (_refCountMap_get = $08ef1685902b6011$var$refCountMap.get(node)) !== null && _refCountMap_get !== void 0 ? _refCountMap_get : 0;
@@ -1198,11 +1219,7 @@ function $08ef1685902b6011$export$1c3ebcada18427bf(targets, root = document.body
     // 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 node = walker.nextNode();
-    while(node != null){
-        hide(node);
-        node = walker.nextNode();
-    }
+    walk(root);
     let observer = new MutationObserver((changes)=>{
         for (let change of changes){
             if (change.type !== "childList" || change.addedNodes.length === 0) continue;
@@ -1211,9 +1228,15 @@ function $08ef1685902b6011$export$1c3ebcada18427bf(targets, root = document.body
             if (![
                 ...visibleNodes,
                 ...hiddenNodes
-            ].some((node)=>node.contains(change.target))) for (let node of change.addedNodes){
-                if ((node instanceof HTMLElement || node instanceof SVGElement) && node.dataset.liveAnnouncer === "true") visibleNodes.add(node);
-                else if (node instanceof Element) hide(node);
+            ].some((node)=>node.contains(change.target))) {
+                for (let node of change.removedNodes)if (node instanceof Element) {
+                    visibleNodes.delete(node);
+                    hiddenNodes.delete(node);
+                }
+                for (let node1 of change.addedNodes){
+                    if ((node1 instanceof HTMLElement || node1 instanceof SVGElement) && (node1.dataset.liveAnnouncer === "true" || node1.dataset.reactAriaTopLayer === "true")) visibleNodes.add(node1);
+                    else if (node1 instanceof Element) walk(node1);
+                }
             }
         }
     });
@@ -1266,7 +1289,6 @@ 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 { overlayProps: overlayProps , underlayProps: underlayProps  } = (0, $82711f9cb668ecdb$export$ea8f71083e90600f)({
@@ -1283,18 +1305,8 @@ function $6c2dfcdee3e15e20$export$542a6fd13ac93354(props, state) {
         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] = (0, $6Zb2x$react.useState)(false);
-    (0, $6Zb2x$reactariautils.useLayoutEffect)(()=>{
-        if (!isNonModal && placement) setPositioned(true);
-    }, [
-        isNonModal,
-        placement
-    ]);
     (0, $5c2f5cd01815d369$export$ee0f7cc6afcd1c18)({
-        isDisabled: isNonModal || !isPositioned
+        isDisabled: isNonModal
     });
     (0, $6Zb2x$reactariautils.useLayoutEffect)(()=>{
         if (state.isOpen && !isNonModal && popoverRef.current) return (0, $08ef1685902b6011$export$1c3ebcada18427bf)([