@react-aria/overlays 3.31.0 → 3.31.2

package/src/calculatePosition.ts

@@ -11,7 +11,7 @@
  */
 
 import {Axis, Placement, PlacementAxis, SizeAxis} from '@react-types/overlays';
-import {clamp, isWebKit} from '@react-aria/utils';
+import {clamp, isWebKit, nodeContains} from '@react-aria/utils';
 
 interface Position {
   top?: number,
@@ -309,7 +309,6 @@ function getMaxHeight(
     top: Math.max(boundaryDimensions.top + boundaryToContainerTransformOffset, (visualViewport?.offsetTop ?? boundaryDimensions.top) + boundaryToContainerTransformOffset),
     bottom: Math.min((boundaryDimensions.top + boundaryDimensions.height + boundaryToContainerTransformOffset), (visualViewport?.offsetTop ?? 0) + (visualViewport?.height ?? 0))
   };
-
   let maxHeight = heightGrowthDirection !== 'top' ?
     // We want the distance between the top of the overlay to the bottom of the boundary
     Math.max(0,
@@ -558,12 +557,35 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
   // Otherwise this returns the height/width of a arbitrary boundary element, and its top/left with respect to the viewport (NOTE THIS MEANS IT DOESNT INCLUDE SCROLL)
   let boundaryDimensions = getContainerDimensions(boundaryElement, visualViewport);
   let containerDimensions = getContainerDimensions(container, visualViewport);
-  // If the container is the HTML element wrapping the body element, the retrieved scrollTop/scrollLeft will be equal to the
-  // body element's scroll. Set the container's scroll values to 0 since the overlay's edge position value in getDelta don't then need to be further offset
-  // by the container scroll since they are essentially the same containing element and thus in the same coordinate system
-  let containerOffsetWithBoundary: Offset = getPosition(boundaryElement, container,  false);
 
-  let isContainerDescendentOfBoundary = boundaryElement.contains(container);
+  // There are several difference cases of how to calculate the containerOffsetWithBoundary:
+  // - boundaryElement is body or HTML and the container is an arbitrary element in the boundary (aka submenu with parent menu as container in v3)
+  // - boundaryElement and container are both body or HTML element (aka standard popover case)
+  // - boundaryElement is customized by the user. Container can also be arbitrary (either body/HTML or some other element)
+  // containerOffsetWithBoundary should always return a value that is the boundary's coordinate offset with respect to the container coord system (container is 0, 0)
+  let containerOffsetWithBoundary: Offset;
+  if ((boundaryElement.tagName === 'BODY' || boundaryElement.tagName === 'HTML') && !isViewportContainer) {
+    // Use getRect instead of getOffset because boundaryDimensions for BODY/HTML is in viewport coordinate space,
+    // not document coordinate space
+    let containerRect = getRect(container, false);
+    // the offset should be negative because if container is at viewport position x,y, then viewport top (aka 0)
+    // is at position -x,y in container-relative coordinates
+    containerOffsetWithBoundary = {
+      top: -(containerRect.top - boundaryDimensions.top),
+      left: -(containerRect.left - boundaryDimensions.left),
+      width: 0,
+      height: 0
+    };
+  } else if ((boundaryElement.tagName === 'BODY' || boundaryElement.tagName === 'HTML') && isViewportContainer) {
+    // both are the same viewport container, no offset needed
+    containerOffsetWithBoundary = {top: 0, left: 0, width: 0, height: 0};
+  } else {
+    // This returns the boundary's coordinate with respect to the container. This case captures cases such as when you provide a custom boundary
+    // like in ScrollingBoundaryContainerExample in Popover.stories.
+    containerOffsetWithBoundary = getPosition(boundaryElement, container, false);
+  }
+
+  let isContainerDescendentOfBoundary = nodeContains(boundaryElement, container);
   return calculatePositionInternal(
     placement,
     childOffset,

package/src/useCloseOnScroll.ts

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {getEventTarget, nodeContains} from '@react-aria/utils';
 import {RefObject} from '@react-types/shared';
 import {useEffect} from 'react';
 
@@ -37,16 +38,16 @@ export function useCloseOnScroll(opts: CloseOnScrollOptions): void {
 
     let onScroll = (e: Event) => {
       // Ignore if scrolling an scrollable region outside the trigger's tree.
-      let target = e.target;
+      let target = getEventTarget(e);
       // window is not a Node and doesn't have contain, but window contains everything
-      if (!triggerRef.current || ((target instanceof Node) && !target.contains(triggerRef.current))) {
+      if (!triggerRef.current || ((target instanceof Node) && !nodeContains(target, triggerRef.current))) {
         return;
       }
 
       // Ignore scroll events on any input or textarea as the cursor position can cause it to scroll
       // such as in a combobox. Clicking the dropdown button places focus on the input, and if the
       // text inside the input extends beyond the 'end', then it will scroll so the cursor is visible at the end.
-      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+      if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
         return;
       }
 

package/src/useOverlay.ts

@@ -11,8 +11,9 @@
  */
 
 import {DOMAttributes, RefObject} from '@react-types/shared';
+import {getEventTarget} from '@react-aria/utils';
 import {isElementInChildOfActiveScope} from '@react-aria/focus';
-import {useEffect} from 'react';
+import {useEffect, useRef} from 'react';
 import {useFocusWithin, useInteractOutside} from '@react-aria/interactions';
 
 export interface AriaOverlayProps {
@@ -70,6 +71,8 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | nul
     shouldCloseOnInteractOutside
   } = props;
 
+  let lastVisibleOverlay = useRef<RefObject<Element | null>>(undefined);
+
   // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.
   useEffect(() => {
     if (isOpen && !visibleOverlays.includes(ref)) {
@@ -91,8 +94,10 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | nul
   };
 
   let onInteractOutsideStart = (e: PointerEvent) => {
-    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {
-      if (visibleOverlays[visibleOverlays.length - 1] === ref) {
+    const topMostOverlay = visibleOverlays[visibleOverlays.length - 1];
+    lastVisibleOverlay.current = topMostOverlay;
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(getEventTarget(e) as Element)) {
+      if (topMostOverlay === ref) {
         e.stopPropagation();
         e.preventDefault();
       }
@@ -100,13 +105,16 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | nul
   };
 
   let onInteractOutside = (e: PointerEvent) => {
-    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(getEventTarget(e) as Element)) {
       if (visibleOverlays[visibleOverlays.length - 1] === ref) {
         e.stopPropagation();
         e.preventDefault();
       }
-      onHide();
+      if (lastVisibleOverlay.current === ref) {
+        onHide();
+      }
     }
+    lastVisibleOverlay.current = undefined;
   };
 
   // Handle the escape key
@@ -145,7 +153,7 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | nul
 
   let onPointerDownUnderlay = e => {
     // fixes a firefox issue that starts text selection https://bugzilla.mozilla.org/show_bug.cgi?id=1675846
-    if (e.target === e.currentTarget) {
+    if (getEventTarget(e) === e.currentTarget) {
       e.preventDefault();
     }
   };

package/src/useOverlayPosition.ts

@@ -12,10 +12,10 @@
 
 import {calculatePosition, getRect, PositionResult} from './calculatePosition';
 import {DOMAttributes, RefObject} from '@react-types/shared';
+import {getActiveElement, isFocusWithin, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';
 import {useCallback, useEffect, useRef, useState} from 'react';
 import {useCloseOnScroll} from './useCloseOnScroll';
-import {useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
 
 export interface AriaPositionProps extends PositionProps {
@@ -154,8 +154,8 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     // so it can be restored after repositioning. This way if the overlay height
     // changes, the focused element appears to stay in the same position.
     let anchor: ScrollAnchor | null = null;
-    if (scrollRef.current && scrollRef.current.contains(document.activeElement)) {
-      let anchorRect = document.activeElement?.getBoundingClientRect();
+    if (scrollRef.current && isFocusWithin(scrollRef.current)) {
+      let anchorRect = getActiveElement()?.getBoundingClientRect();
       let scrollRect = scrollRef.current.getBoundingClientRect();
       // Anchor from the top if the offset is in the top half of the scrollable element,
       // otherwise anchor from the bottom.
@@ -208,8 +208,9 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     overlay.style.maxHeight = position.maxHeight != null ?  position.maxHeight + 'px' : '';
 
     // Restore scroll position relative to anchor element.
-    if (anchor && document.activeElement && scrollRef.current) {
-      let anchorRect = document.activeElement.getBoundingClientRect();
+    let activeElement = getActiveElement();
+    if (anchor && activeElement && scrollRef.current) {
+      let anchorRect = activeElement.getBoundingClientRect();
       let scrollRect = scrollRef.current.getBoundingClientRect();
       let newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];
       scrollRef.current.scrollTop += newOffset - anchor.offset;

package/src/usePreventScroll.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {chain, getScrollParent, isIOS, isScrollable, useLayoutEffect, willOpenKeyboard} from '@react-aria/utils';
+import {chain, getActiveElement, getEventTarget, getScrollParent, isIOS, isScrollable, useLayoutEffect, willOpenKeyboard} from '@react-aria/utils';
 
 interface PreventScrollOptions {
   /** Whether the scroll lock is disabled. */
@@ -88,27 +88,39 @@ function preventScrollStandard() {
 //    by preventing default in a `touchmove` event. This is best effort: we can't prevent default when pinch
 //    zooming or when an element contains text selection, which may allow scrolling in some cases.
 // 3. Prevent default on `touchend` events on input elements and handle focusing the element ourselves.
-// 4. When focus moves to an input, create an off screen input and focus that temporarily. This prevents 
+// 4. When focus moves to an input, create an off screen input and focus that temporarily. This prevents
 //    Safari from scrolling the page. After a small delay, focus the real input and scroll it into view
 //    ourselves, without scrolling the whole page.
 function preventScrollMobileSafari() {
+  // Set overflow hidden so scrollIntoViewport() (useSelectableCollection) sees isScrollPrevented and
+  // scrolls only scroll parents instead of calling native scrollIntoView() which moves the window.
+  let restoreOverflow = setStyle(document.documentElement, 'overflow', 'hidden');
+
   let scrollable: Element;
   let allowTouchMove = false;
   let onTouchStart = (e: TouchEvent) => {
     // Store the nearest scrollable parent element from the element that the user touched.
-    let target = e.target as Element;
+    let target = getEventTarget(e) as Element;
     scrollable = isScrollable(target) ? target : getScrollParent(target, true);
     allowTouchMove = false;
-    
+
     // If the target is selected, don't preventDefault in touchmove to allow user to adjust selection.
     let selection = target.ownerDocument.defaultView!.getSelection();
     if (selection && !selection.isCollapsed && selection.containsNode(target, true)) {
       allowTouchMove = true;
     }
 
+    // If this is a range input, allow touch move to allow user to adjust the slider value
+    if (e.composedPath().some((el) =>
+      el instanceof HTMLInputElement &&
+      el.type === 'range'
+    )) {
+      allowTouchMove = true;
+    }
+
     // If this is a focused input element with a selected range, allow user to drag the selection handles.
     if (
-      'selectionStart' in target && 
+      'selectionStart' in target &&
       'selectionEnd' in target &&
       (target.selectionStart as number) < (target.selectionEnd as number) &&
       target.ownerDocument.activeElement === target
@@ -154,7 +166,7 @@ function preventScrollMobileSafari() {
   };
 
   let onBlur = (e: FocusEvent) => {
-    let target = e.target as HTMLElement;
+    let target = getEventTarget(e) as HTMLElement;
     let relatedTarget = e.relatedTarget as HTMLElement | null;
     if (relatedTarget && willOpenKeyboard(relatedTarget)) {
       // Focus without scrolling the whole page, and then scroll into view manually.
@@ -175,7 +187,8 @@ function preventScrollMobileSafari() {
   let focus = HTMLElement.prototype.focus;
   HTMLElement.prototype.focus = function (opts) {
     // Track whether the keyboard was already visible before.
-    let wasKeyboardVisible = document.activeElement != null && willOpenKeyboard(document.activeElement);
+    let activeElement = getActiveElement();
+    let wasKeyboardVisible = activeElement != null && willOpenKeyboard(activeElement);
 
     // Focus the element without scrolling the page.
     focus.call(this, {...opts, preventScroll: true});
@@ -192,6 +205,7 @@ function preventScrollMobileSafari() {
   );
 
   return () => {
+    restoreOverflow();
     removeEvents();
     style.remove();
     HTMLElement.prototype.focus = focus;