@react-aria/overlays 3.15.0 → 3.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/overlays",
-  "version": "3.15.0",
+  "version": "3.17.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,16 +22,16 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.13.0",
-    "@react-aria/i18n": "^3.8.0",
-    "@react-aria/interactions": "^3.16.0",
-    "@react-aria/ssr": "^3.7.0",
-    "@react-aria/utils": "^3.18.0",
-    "@react-aria/visually-hidden": "^3.8.2",
-    "@react-stately/overlays": "^3.6.0",
-    "@react-types/button": "^3.7.3",
-    "@react-types/overlays": "^3.8.0",
-    "@react-types/shared": "^3.18.1",
+    "@react-aria/focus": "^3.14.1",
+    "@react-aria/i18n": "^3.8.2",
+    "@react-aria/interactions": "^3.18.0",
+    "@react-aria/ssr": "^3.8.0",
+    "@react-aria/utils": "^3.20.0",
+    "@react-aria/visually-hidden": "^3.8.4",
+    "@react-stately/overlays": "^3.6.2",
+    "@react-types/button": "^3.8.0",
+    "@react-types/overlays": "^3.8.2",
+    "@react-types/shared": "^3.20.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "504e40e0a50c1b20ed0fb3ba9561a263b6d5565e"
+  "gitHead": "54fbaa67cc56867506811819fef765546d403253"
 }

package/src/Overlay.tsx

@@ -29,7 +29,12 @@ export interface OverlayProps {
    * This option should be used very carefully. When focus management is disabled, you must
    * implement focus containment and restoration to ensure the overlay is keyboard accessible.
    */
-  disableFocusManagement?: boolean
+  disableFocusManagement?: boolean,
+  /**
+   * Whether the overlay is currently performing an exit animation. When true,
+   * focus is allowed to move outside.
+   */
+  isExiting?: boolean
 }
 
 export const OverlayContext = React.createContext(null);
@@ -40,7 +45,7 @@ export const OverlayContext = React.createContext(null);
  */
 export function Overlay(props: OverlayProps) {
   let isSSR = useIsSSR();
-  let {portalContainer = isSSR ? null : document.body} = props;
+  let {portalContainer = isSSR ? null : document.body, isExiting} = props;
   let [contain, setContain] = useState(false);
   let contextValue = useMemo(() => ({contain, setContain}), [contain, setContain]);
 
@@ -52,7 +57,7 @@ export function Overlay(props: OverlayProps) {
   if (!props.disableFocusManagement) {
     contents = (
       <OverlayContext.Provider value={contextValue}>
-        <FocusScope restoreFocus contain={contain}>
+        <FocusScope restoreFocus contain={contain && !isExiting}>
           {props.children}
         </FocusScope>
       </OverlayContext.Provider>

package/src/calculatePosition.ts

@@ -101,7 +101,7 @@ const TOTAL_SIZE = {
 const PARSED_PLACEMENT_CACHE = {};
 
 // @ts-ignore
-let visualViewport = typeof window !== 'undefined' && window.visualViewport;
+let visualViewport = typeof document !== 'undefined' && window.visualViewport;
 
 function getContainerDimensions(containerNode: Element): Dimensions {
   let width = 0, height = 0, totalWidth = 0, totalHeight = 0, top = 0, left = 0;
@@ -143,7 +143,9 @@ function getDelta(
   containerDimensions: Dimensions,
   padding: number
 ) {
-  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[AXIS_SIZE[axis]];
 
   let startEdgeOffset = offset - padding - containerScroll;
@@ -393,7 +395,7 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
     offset,
     crossOffset,
     maxHeight,
-    arrowSize,
+    arrowSize = 0,
     arrowBoundaryOffset = 0
   } = opts;
 

package/src/useOverlay.ts

@@ -125,10 +125,16 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element>): Ov
   let {focusWithinProps} = 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 && isElementInChildOfActiveScope(e.relatedTarget)) {
+      if (!e.relatedTarget || isElementInChildOfActiveScope(e.relatedTarget)) {
         return;
       }
 

package/src/useOverlayPosition.ts

@@ -73,7 +73,7 @@ export interface PositionAria {
 }
 
 // @ts-ignore
-let visualViewport = typeof window !== 'undefined' && window.visualViewport;
+let visualViewport = typeof document !== 'undefined' && window.visualViewport;
 
 /**
  * Handles positioning overlays like popovers and menus relative to a trigger
@@ -217,6 +217,8 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     },
     placement: position.placement,
     arrowProps: {
+      'aria-hidden': 'true',
+      role: 'presentation',
       style: {
         left: position.arrowOffsetLeft,
         top: position.arrowOffsetTop

package/src/usePreventScroll.ts

@@ -18,7 +18,7 @@ interface PreventScrollOptions {
 }
 
 // @ts-ignore
-const visualViewport = typeof window !== 'undefined' && window.visualViewport;
+const visualViewport = typeof document !== 'undefined' && window.visualViewport;
 
 // HTML input types that do not cause the software keyboard to appear.
 const nonTextInputTypes = new Set([