npm - @react-aria/overlays - Versions diffs - 3.16.0 → 3.18.0 - Mend

@react-aria/overlays 3.16.0 → 3.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/overlays",
-  "version": "3.16.0",
+  "version": "3.18.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.14.0",
-    "@react-aria/i18n": "^3.8.1",
-    "@react-aria/interactions": "^3.17.0",
-    "@react-aria/ssr": "^3.7.1",
-    "@react-aria/utils": "^3.19.0",
-    "@react-aria/visually-hidden": "^3.8.3",
-    "@react-stately/overlays": "^3.6.1",
-    "@react-types/button": "^3.7.4",
-    "@react-types/overlays": "^3.8.1",
-    "@react-types/shared": "^3.19.0",
+    "@react-aria/focus": "^3.14.2",
+    "@react-aria/i18n": "^3.8.3",
+    "@react-aria/interactions": "^3.19.0",
+    "@react-aria/ssr": "^3.8.0",
+    "@react-aria/utils": "^3.21.0",
+    "@react-aria/visually-hidden": "^3.8.5",
+    "@react-stately/overlays": "^3.6.3",
+    "@react-types/button": "^3.9.0",
+    "@react-types/overlays": "^3.8.3",
+    "@react-types/shared": "^3.21.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d4dfe4bb842a914f10045ee63fc6b92f034c5b30"
+  "gitHead": "4122e44d1991c90507d630d35ed297f89db435d3"
 }

package/src/Overlay.tsx CHANGED Viewed

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
+import {ClearPressResponder} from '@react-aria/interactions';
 import {FocusScope} from '@react-aria/focus';
 import React, {ReactNode, useContext, useMemo, useState} from 'react';
 import ReactDOM from 'react-dom';
@@ -53,23 +54,23 @@ export function Overlay(props: OverlayProps) {
     return null;
   }
-  let contents;
+  let contents = props.children;
   if (!props.disableFocusManagement) {
     contents = (
-      <OverlayContext.Provider value={contextValue}>
-        <FocusScope restoreFocus contain={contain && !isExiting}>
-          {props.children}
-        </FocusScope>
-      </OverlayContext.Provider>
-    );
-  } else {
-    contents = (
-      <OverlayContext.Provider value={contextValue}>
-        {props.children}
-      </OverlayContext.Provider>
+      <FocusScope restoreFocus contain={contain && !isExiting}>
+        {contents}
+      </FocusScope>
     );
   }
+  contents = (
+    <OverlayContext.Provider value={contextValue}>
+      <ClearPressResponder>
+        {contents}
+      </ClearPressResponder>
+    </OverlayContext.Provider>
+  );
   return ReactDOM.createPortal(contents, portalContainer);
 }

package/src/calculatePosition.ts CHANGED Viewed

@@ -140,19 +140,26 @@ function getDelta(
   axis: Axis,
   offset: number,
   size: number,
+  // The dimensions of the boundary element that the popover is
+  // positioned within (most of the time this is the <body>).
+  boundaryDimensions: Dimensions,
+  // The dimensions of the containing block element that the popover is
+  // positioned relative to (e.g. parent with position: relative).
+  // Usually this is the same as the boundary element, but if the popover
+  // is portaled somewhere other than the body and has an ancestor with
+  // position: relative/absolute, it will be different.
   containerDimensions: Dimensions,
   padding: number
 ) {
   let containerScroll = containerDimensions.scroll[axis];
-  let containerHeight = containerDimensions[AXIS_SIZE[axis]];
+  let boundaryHeight = boundaryDimensions[AXIS_SIZE[axis]];
   let startEdgeOffset = offset - padding - containerScroll;
   let endEdgeOffset = offset + padding - containerScroll + size;
   if (startEdgeOffset < 0) {
     return -startEdgeOffset;
-  } else if (endEdgeOffset > containerHeight) {
-    return Math.max(containerHeight - endEdgeOffset, -startEdgeOffset);
+  } else if (endEdgeOffset > boundaryHeight) {
+    return Math.max(boundaryHeight - endEdgeOffset, -startEdgeOffset);
   } else {
     return 0;
   }
@@ -287,6 +294,7 @@ export function calculatePositionInternal(
   padding: number,
   flip: boolean,
   boundaryDimensions: Dimensions,
+  containerDimensions: Dimensions,
   containerOffsetWithBoundary: Offset,
   offset: number,
   crossOffset: number,
@@ -329,7 +337,7 @@ export function calculatePositionInternal(
     }
   }
-  let delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
+  let delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding);
   position[crossAxis] += delta;
   let maxHeight = getMaxHeight(
@@ -348,7 +356,7 @@ export function calculatePositionInternal(
   overlaySize.height = Math.min(overlaySize.height, maxHeight);
   position = computePosition(childOffset, boundaryDimensions, overlaySize, placementInfo, normalizedOffset, crossOffset, containerOffsetWithBoundary, isContainerPositioned, arrowSize, arrowBoundaryOffset);
-  delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, padding);
+  delta = getDelta(crossAxis, position[crossAxis], overlaySize[crossSize], boundaryDimensions, containerDimensions, padding);
   position[crossAxis] += delta;
   let arrowPosition: Position = {};
@@ -416,6 +424,7 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
   let scrollSize = getScroll(scrollNode);
   let boundaryDimensions = getContainerDimensions(boundaryElement);
+  let containerDimensions = getContainerDimensions(container);
   let containerOffsetWithBoundary: Offset = boundaryElement.tagName === 'BODY' ? getOffset(container) : getPosition(container, boundaryElement);
   return calculatePositionInternal(
@@ -427,6 +436,7 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
     padding,
     shouldFlip,
     boundaryDimensions,
+    containerDimensions,
     containerOffsetWithBoundary,
     offset,
     crossOffset,

package/src/useOverlay.ts CHANGED Viewed

@@ -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;
       }