@react-aria/overlays 3.15.0 → 3.17.0

package/dist/import.mjs

@@ -67,7 +67,7 @@ const $edcf132a9284368a$var$TOTAL_SIZE = {
 };
 const $edcf132a9284368a$var$PARSED_PLACEMENT_CACHE = {};
 // @ts-ignore
-let $edcf132a9284368a$var$visualViewport = typeof window !== "undefined" && window.visualViewport;
+let $edcf132a9284368a$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
 function $edcf132a9284368a$var$getContainerDimensions(containerNode) {
     let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0;
     let scroll = {};
@@ -107,7 +107,9 @@ function $edcf132a9284368a$var$getScroll(node) {
     };
 }
 function $edcf132a9284368a$var$getDelta(axis, offset, size, containerDimensions, padding) {
-    let containerScroll = containerDimensions.scroll[axis];
+    let root = document.scrollingElement || document.documentElement;
+    let isScrollPrevented = window.getComputedStyle(root).overflow === "hidden";
+    let containerScroll = isScrollPrevented ? 0 : containerDimensions.scroll[axis];
     let containerHeight = containerDimensions[$edcf132a9284368a$var$AXIS_SIZE[axis]];
     let startEdgeOffset = offset - padding - containerScroll;
     let endEdgeOffset = offset + padding - containerScroll + size;
@@ -236,7 +238,7 @@ function $edcf132a9284368a$export$6839422d1f33cee9(placementInput, childOffset,
     };
 }
 function $edcf132a9284368a$export$b3ceb0cbf1056d98(opts) {
-    let { placement: placement , targetNode: targetNode , overlayNode: overlayNode , scrollNode: scrollNode , padding: padding , shouldFlip: shouldFlip , boundaryElement: boundaryElement , offset: offset , crossOffset: crossOffset , maxHeight: maxHeight , arrowSize: arrowSize , arrowBoundaryOffset: arrowBoundaryOffset = 0  } = opts;
+    let { placement: placement , targetNode: targetNode , overlayNode: overlayNode , scrollNode: scrollNode , padding: padding , shouldFlip: shouldFlip , boundaryElement: boundaryElement , offset: offset , crossOffset: crossOffset , maxHeight: maxHeight , arrowSize: arrowSize = 0 , arrowBoundaryOffset: arrowBoundaryOffset = 0  } = opts;
     let container = overlayNode instanceof HTMLElement ? $edcf132a9284368a$var$getContainingBlock(overlayNode) : document.documentElement;
     let isViewportContainer = container === document.documentElement;
     const containerPositionStyle = window.getComputedStyle(container).position;
@@ -361,7 +363,7 @@ function $dd149f63282afbbf$export$18fc8428861184da(opts) {
 
 
 // @ts-ignore
-let $2a41e45df1593e64$var$visualViewport = typeof window !== "undefined" && window.visualViewport;
+let $2a41e45df1593e64$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
 function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
     let { direction: direction  } = (0, $k7QOs$useLocale)();
     let { arrowSize: arrowSize = 0 , targetRef: targetRef , overlayRef: overlayRef , scrollRef: scrollRef = overlayRef , placement: placement = "bottom" , containerPadding: containerPadding = 12 , shouldFlip: shouldFlip = true , boundaryElement: boundaryElement = typeof document !== "undefined" ? document.body : null , offset: offset = 0 , crossOffset: crossOffset = 0 , shouldUpdatePosition: shouldUpdatePosition = true , isOpen: isOpen = true , onClose: onClose , maxHeight: maxHeight , arrowBoundaryOffset: arrowBoundaryOffset = 0  } = props;
@@ -469,6 +471,8 @@ function $2a41e45df1593e64$export$d39e1813b3bdd0e1(props) {
         },
         placement: position.placement,
         arrowProps: {
+            "aria-hidden": "true",
+            role: "presentation",
             style: {
                 left: position.arrowOffsetLeft,
                 top: position.arrowOffsetTop
@@ -558,10 +562,16 @@ function $a11501f3d1d39e6c$export$ea8f71083e90600f(props, ref) {
     let { focusWithinProps: focusWithinProps  } = (0, $k7QOs$useFocusWithin)({
         isDisabled: !shouldCloseOnBlur,
         onBlurWithin: (e)=>{
+            // Do not close if relatedTarget is null, which means focus is lost to the body.
+            // That can happen when switching tabs, or due to a VoiceOver/Chrome bug with Control+Option+Arrow navigation.
+            // Clicking on the body to close the overlay should already be handled by useInteractOutside.
+            // https://github.com/adobe/react-spectrum/issues/4130
+            // https://github.com/adobe/react-spectrum/issues/4922
+            //
             // 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 && (0, $k7QOs$isElementInChildOfActiveScope)(e.relatedTarget)) return;
+            if (!e.relatedTarget || (0, $k7QOs$isElementInChildOfActiveScope)(e.relatedTarget)) return;
             if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose();
         }
     });
@@ -636,7 +646,7 @@ function $628037886ba31236$export$f9d5c8beee7d008d(props, state, ref) {
  * governing permissions and limitations under the License.
  */ 
 // @ts-ignore
-const $49c51c25361d4cd2$var$visualViewport = typeof window !== "undefined" && window.visualViewport;
+const $49c51c25361d4cd2$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
 // HTML input types that do not cause the software keyboard to appear.
 const $49c51c25361d4cd2$var$nonTextInputTypes = new Set([
     "checkbox",
@@ -1396,7 +1406,7 @@ function $f2f8a6077418541e$export$542a6fd13ac93354(props, state) {
 const $337b884510726a0d$export$a2200b96afd16271 = /*#__PURE__*/ (0, $k7QOs$react).createContext(null);
 function $337b884510726a0d$export$c6fdb837b070b4ff(props) {
     let isSSR = (0, $k7QOs$useIsSSR)();
-    let { portalContainer: portalContainer = isSSR ? null : document.body  } = props;
+    let { portalContainer: portalContainer = isSSR ? null : document.body , isExiting: isExiting  } = props;
     let [contain, setContain] = (0, $k7QOs$useState)(false);
     let contextValue = (0, $k7QOs$useMemo)(()=>({
             contain: contain,
@@ -1411,7 +1421,7 @@ function $337b884510726a0d$export$c6fdb837b070b4ff(props) {
         value: contextValue
     }, /*#__PURE__*/ (0, $k7QOs$react).createElement((0, $k7QOs$FocusScope), {
         restoreFocus: true,
-        contain: contain
+        contain: contain && !isExiting
     }, props.children));
     else contents = /*#__PURE__*/ (0, $k7QOs$react).createElement($337b884510726a0d$export$a2200b96afd16271.Provider, {
         value: contextValue

package/dist/main.js

@@ -86,7 +86,7 @@ const $5935ba4d7da2c103$var$TOTAL_SIZE = {
 };
 const $5935ba4d7da2c103$var$PARSED_PLACEMENT_CACHE = {};
 // @ts-ignore
-let $5935ba4d7da2c103$var$visualViewport = typeof window !== "undefined" && window.visualViewport;
+let $5935ba4d7da2c103$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
 function $5935ba4d7da2c103$var$getContainerDimensions(containerNode) {
     let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0;
     let scroll = {};
@@ -126,7 +126,9 @@ function $5935ba4d7da2c103$var$getScroll(node) {
     };
 }
 function $5935ba4d7da2c103$var$getDelta(axis, offset, size, containerDimensions, padding) {
-    let containerScroll = containerDimensions.scroll[axis];
+    let root = document.scrollingElement || document.documentElement;
+    let isScrollPrevented = window.getComputedStyle(root).overflow === "hidden";
+    let containerScroll = isScrollPrevented ? 0 : containerDimensions.scroll[axis];
     let containerHeight = containerDimensions[$5935ba4d7da2c103$var$AXIS_SIZE[axis]];
     let startEdgeOffset = offset - padding - containerScroll;
     let endEdgeOffset = offset + padding - containerScroll + size;
@@ -255,7 +257,7 @@ function $5935ba4d7da2c103$export$6839422d1f33cee9(placementInput, childOffset,
     };
 }
 function $5935ba4d7da2c103$export$b3ceb0cbf1056d98(opts) {
-    let { placement: placement , targetNode: targetNode , overlayNode: overlayNode , scrollNode: scrollNode , padding: padding , shouldFlip: shouldFlip , boundaryElement: boundaryElement , offset: offset , crossOffset: crossOffset , maxHeight: maxHeight , arrowSize: arrowSize , arrowBoundaryOffset: arrowBoundaryOffset = 0  } = opts;
+    let { placement: placement , targetNode: targetNode , overlayNode: overlayNode , scrollNode: scrollNode , padding: padding , shouldFlip: shouldFlip , boundaryElement: boundaryElement , offset: offset , crossOffset: crossOffset , maxHeight: maxHeight , arrowSize: arrowSize = 0 , arrowBoundaryOffset: arrowBoundaryOffset = 0  } = opts;
     let container = overlayNode instanceof HTMLElement ? $5935ba4d7da2c103$var$getContainingBlock(overlayNode) : document.documentElement;
     let isViewportContainer = container === document.documentElement;
     const containerPositionStyle = window.getComputedStyle(container).position;
@@ -380,7 +382,7 @@ function $9a8aa1b0b336ea3a$export$18fc8428861184da(opts) {
 
 
 // @ts-ignore
-let $cd94b4896dd97759$var$visualViewport = typeof window !== "undefined" && window.visualViewport;
+let $cd94b4896dd97759$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
 function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
     let { direction: direction  } = (0, $6Zb2x$reactariai18n.useLocale)();
     let { arrowSize: arrowSize = 0 , targetRef: targetRef , overlayRef: overlayRef , scrollRef: scrollRef = overlayRef , placement: placement = "bottom" , containerPadding: containerPadding = 12 , shouldFlip: shouldFlip = true , boundaryElement: boundaryElement = typeof document !== "undefined" ? document.body : null , offset: offset = 0 , crossOffset: crossOffset = 0 , shouldUpdatePosition: shouldUpdatePosition = true , isOpen: isOpen = true , onClose: onClose , maxHeight: maxHeight , arrowBoundaryOffset: arrowBoundaryOffset = 0  } = props;
@@ -488,6 +490,8 @@ function $cd94b4896dd97759$export$d39e1813b3bdd0e1(props) {
         },
         placement: position.placement,
         arrowProps: {
+            "aria-hidden": "true",
+            role: "presentation",
             style: {
                 left: position.arrowOffsetLeft,
                 top: position.arrowOffsetTop
@@ -577,10 +581,16 @@ function $82711f9cb668ecdb$export$ea8f71083e90600f(props, ref) {
     let { focusWithinProps: focusWithinProps  } = (0, $6Zb2x$reactariainteractions.useFocusWithin)({
         isDisabled: !shouldCloseOnBlur,
         onBlurWithin: (e)=>{
+            // Do not close if relatedTarget is null, which means focus is lost to the body.
+            // That can happen when switching tabs, or due to a VoiceOver/Chrome bug with Control+Option+Arrow navigation.
+            // Clicking on the body to close the overlay should already be handled by useInteractOutside.
+            // https://github.com/adobe/react-spectrum/issues/4130
+            // https://github.com/adobe/react-spectrum/issues/4922
+            //
             // 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 && (0, $6Zb2x$reactariafocus.isElementInChildOfActiveScope)(e.relatedTarget)) return;
+            if (!e.relatedTarget || (0, $6Zb2x$reactariafocus.isElementInChildOfActiveScope)(e.relatedTarget)) return;
             if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget)) onClose();
         }
     });
@@ -655,7 +665,7 @@ function $b4878eb6316f670a$export$f9d5c8beee7d008d(props, state, ref) {
  * governing permissions and limitations under the License.
  */ 
 // @ts-ignore
-const $5c2f5cd01815d369$var$visualViewport = typeof window !== "undefined" && window.visualViewport;
+const $5c2f5cd01815d369$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
 // HTML input types that do not cause the software keyboard to appear.
 const $5c2f5cd01815d369$var$nonTextInputTypes = new Set([
     "checkbox",
@@ -1415,7 +1425,7 @@ function $6c2dfcdee3e15e20$export$542a6fd13ac93354(props, state) {
 const $745edbb83ab4296f$export$a2200b96afd16271 = /*#__PURE__*/ (0, ($parcel$interopDefault($6Zb2x$react))).createContext(null);
 function $745edbb83ab4296f$export$c6fdb837b070b4ff(props) {
     let isSSR = (0, $6Zb2x$reactariassr.useIsSSR)();
-    let { portalContainer: portalContainer = isSSR ? null : document.body  } = props;
+    let { portalContainer: portalContainer = isSSR ? null : document.body , isExiting: isExiting  } = props;
     let [contain, setContain] = (0, $6Zb2x$react.useState)(false);
     let contextValue = (0, $6Zb2x$react.useMemo)(()=>({
             contain: contain,
@@ -1430,7 +1440,7 @@ function $745edbb83ab4296f$export$c6fdb837b070b4ff(props) {
         value: contextValue
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($6Zb2x$react))).createElement((0, $6Zb2x$reactariafocus.FocusScope), {
         restoreFocus: true,
-        contain: contain
+        contain: contain && !isExiting
     }, props.children));
     else contents = /*#__PURE__*/ (0, ($parcel$interopDefault($6Zb2x$react))).createElement($745edbb83ab4296f$export$a2200b96afd16271.Provider, {
         value: contextValue