@react-aria/overlays 3.22.0 → 3.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/overlays",
-  "version": "3.22.0",
+  "version": "3.23.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,24 +22,24 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.17.0",
-    "@react-aria/i18n": "^3.11.0",
-    "@react-aria/interactions": "^3.21.2",
-    "@react-aria/ssr": "^3.9.3",
-    "@react-aria/utils": "^3.24.0",
-    "@react-aria/visually-hidden": "^3.8.11",
-    "@react-stately/overlays": "^3.6.6",
-    "@react-types/button": "^3.9.3",
-    "@react-types/overlays": "^3.8.6",
-    "@react-types/shared": "^3.23.0",
+    "@react-aria/focus": "^3.18.0",
+    "@react-aria/i18n": "^3.12.0",
+    "@react-aria/interactions": "^3.22.0",
+    "@react-aria/ssr": "^3.9.5",
+    "@react-aria/utils": "^3.25.0",
+    "@react-aria/visually-hidden": "^3.8.13",
+    "@react-stately/overlays": "^3.6.8",
+    "@react-types/button": "^3.9.5",
+    "@react-types/overlays": "^3.8.8",
+    "@react-types/shared": "^3.24.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f645f29edc1322153fd60af4640cbcab1d992dbd"
+  "gitHead": "86d80e3216bc32e75108831cf3a5a720bc849206"
 }

package/src/calculatePosition.ts

@@ -417,15 +417,15 @@ export function calculatePositionInternal(
 
   // All values are transformed so that 0 is at the top/left of the overlay depending on the orientation
   // Prefer the arrow being in the center of the trigger/overlay anchor element
-  let preferredArrowPosition = childOffset[crossAxis] + .5 * childOffset[crossSize] - overlaySize[crossAxis];
+  let preferredArrowPosition = childOffset[crossAxis] + .5 * childOffset[crossSize] - position[crossAxis];
 
   // Min/Max position limits for the arrow with respect to the overlay
   const arrowMinPosition = arrowSize / 2 + arrowBoundaryOffset;
   const arrowMaxPosition = overlaySize[crossSize] - (arrowSize / 2) - arrowBoundaryOffset;
 
   // Min/Max position limits for the arrow with respect to the trigger/overlay anchor element
-  const arrowOverlappingChildMinEdge = childOffset[crossAxis] - overlaySize[crossAxis] + (arrowSize / 2);
-  const arrowOverlappingChildMaxEdge = childOffset[crossAxis] + childOffset[crossSize] - overlaySize[crossAxis] - (arrowSize / 2);
+  const arrowOverlappingChildMinEdge = childOffset[crossAxis] - position[crossAxis] + (arrowSize / 2);
+  const arrowOverlappingChildMaxEdge = childOffset[crossAxis] + childOffset[crossSize] - position[crossAxis] - (arrowSize / 2);
 
   // Clamp the arrow positioning so that it always is within the bounds of the anchor and the overlay
   const arrowPositionOverlappingChild = clamp(preferredArrowPosition, arrowOverlappingChildMinEdge, arrowOverlappingChildMaxEdge);

package/src/useCloseOnScroll.ts

@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {RefObject, useEffect} from 'react';
+import {RefObject} from '@react-types/shared';
+import {useEffect} from 'react';
 
 // This behavior moved from useOverlayTrigger to useOverlayPosition.
 // For backward compatibility, where useOverlayTrigger handled hiding the popover on close,
@@ -20,7 +21,7 @@ import {RefObject, useEffect} from 'react';
 export const onCloseMap: WeakMap<Element, () => void> = new WeakMap();
 
 interface CloseOnScrollOptions {
-  triggerRef: RefObject<Element>,
+  triggerRef: RefObject<Element | null>,
   isOpen?: boolean,
   onClose?: () => void
 }
@@ -42,6 +43,13 @@ export function useCloseOnScroll(opts: CloseOnScrollOptions) {
         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) {
+        return;
+      }
+
       let onCloseHandler = onClose || onCloseMap.get(triggerRef.current);
       if (onCloseHandler) {
         onCloseHandler();

package/src/useModalOverlay.ts

@@ -12,10 +12,10 @@
 
 import {ariaHideOutside} from './ariaHideOutside';
 import {AriaOverlayProps, useOverlay} from './useOverlay';
-import {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, RefObject} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
 import {OverlayTriggerState} from '@react-stately/overlays';
-import {RefObject, useEffect} from 'react';
+import {useEffect} from 'react';
 import {useOverlayFocusContain} from './Overlay';
 import {usePreventScroll} from './usePreventScroll';
 
@@ -43,7 +43,7 @@ export interface ModalOverlayAria {
  * Provides the behavior and accessibility implementation for a modal component.
  * A modal is an overlay element which blocks interaction with elements outside it.
  */
-export function useModalOverlay(props: AriaModalOverlayProps, state: OverlayTriggerState, ref: RefObject<HTMLElement>): ModalOverlayAria {
+export function useModalOverlay(props: AriaModalOverlayProps, state: OverlayTriggerState, ref: RefObject<HTMLElement | null>): ModalOverlayAria {
   let {overlayProps, underlayProps} = useOverlay({
     ...props,
     isOpen: state.isOpen,

package/src/useOverlay.ts

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, RefObject} from '@react-types/shared';
 import {isElementInChildOfActiveScope} from '@react-aria/focus';
-import {RefObject, useEffect} from 'react';
+import {useEffect} from 'react';
 import {useFocusWithin, useInteractOutside} from '@react-aria/interactions';
 
 export interface AriaOverlayProps {
@@ -53,14 +53,14 @@ export interface OverlayAria {
   underlayProps: DOMAttributes
 }
 
-const visibleOverlays: RefObject<Element>[] = [];
+const visibleOverlays: RefObject<Element | null>[] = [];
 
 /**
  * Provides the behavior for overlays such as dialogs, popovers, and menus.
  * Hides the overlay when the user interacts outside it, when the Escape key is pressed,
  * or optionally, on blur. Only the top-most overlay will close at once.
  */
-export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element>): OverlayAria {
+export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | null>): OverlayAria {
   let {
     onClose,
     shouldCloseOnBlur,

package/src/useOverlayPosition.ts

@@ -11,9 +11,9 @@
  */
 
 import {calculatePosition, PositionResult} from './calculatePosition';
-import {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, RefObject} from '@react-types/shared';
 import {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';
-import {RefObject, useCallback, useEffect, useRef, useState} from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
 import {useCloseOnScroll} from './useCloseOnScroll';
 import {useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
@@ -32,16 +32,16 @@ export interface AriaPositionProps extends PositionProps {
   /**
    * The ref for the element which the overlay positions itself with respect to.
    */
-  targetRef: RefObject<Element>,
+  targetRef: RefObject<Element | null>,
   /**
    * The ref for the overlay element.
    */
-  overlayRef: RefObject<Element>,
+  overlayRef: RefObject<Element | null>,
   /**
    * A ref for the scrollable region within the overlay.
    * @default overlayRef
    */
-  scrollRef?: RefObject<Element>,
+  scrollRef?: RefObject<Element | null>,
   /**
    * Whether the overlay should update its position automatically.
    * @default true
@@ -72,6 +72,11 @@ export interface PositionAria {
   updatePosition(): void
 }
 
+interface ScrollAnchor {
+  type: 'top' | 'bottom',
+  offset: number
+}
+
 // @ts-ignore
 let visualViewport = typeof document !== 'undefined' && window.visualViewport;
 
@@ -135,7 +140,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
   }, [isOpen]);
 
   let updatePosition = useCallback(() => {
-    if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !scrollRef.current || !boundaryElement) {
+    if (shouldUpdatePosition === false || !isOpen || !overlayRef.current || !targetRef.current || !boundaryElement) {
       return;
     }
 
@@ -143,17 +148,40 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
       return;
     }
 
+    // Determine a scroll anchor based on the focused element.
+    // This stores the offset of the anchor element from the scroll container
+    // 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();
+      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.
+      anchor = {
+        type: 'top',
+        offset: anchorRect.top - scrollRect.top
+      };
+      if (anchor.offset > scrollRect.height / 2) {
+        anchor.type = 'bottom';
+        anchor.offset = anchorRect.bottom - scrollRect.bottom;
+      }
+    }
+
     // Always reset the overlay's previous max height if not defined by the user so that we can compensate for
     // RAC collections populating after a second render and properly set a correct max height + positioning when it populates.
+    let overlay = (overlayRef.current as HTMLElement);
     if (!maxHeight && overlayRef.current) {
-      (overlayRef.current as HTMLElement).style.maxHeight = 'none';
+      overlay.style.top = '0px';
+      overlay.style.bottom = '';
+      overlay.style.maxHeight = (window.visualViewport?.height ?? window.innerHeight) + 'px';
     }
 
     let position = calculatePosition({
       placement: translateRTL(placement, direction),
       overlayNode: overlayRef.current,
       targetNode: targetRef.current,
-      scrollNode: scrollRef.current,
+      scrollNode: scrollRef.current || overlayRef.current,
       padding: containerPadding,
       shouldFlip,
       boundaryElement,
@@ -166,8 +194,21 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
 
     // 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 as HTMLElement).style[key] = position.position[key] + 'px');
-    (overlayRef.current as HTMLElement).style.maxHeight = position.maxHeight != null ?  position.maxHeight + 'px' : undefined;
+    overlay.style.top = '';
+    overlay.style.bottom = '';
+    overlay.style.left = '';
+    overlay.style.right = '';
+
+    Object.keys(position.position).forEach(key => overlay.style[key] = position.position[key] + 'px');
+    overlay.style.maxHeight = position.maxHeight != null ?  position.maxHeight + 'px' : undefined;
+
+    // Restore scroll position relative to anchor element.
+    if (anchor) {
+      let anchorRect = document.activeElement.getBoundingClientRect();
+      let scrollRect = scrollRef.current.getBoundingClientRect();
+      let newOffset = anchorRect[anchor.type] - scrollRect[anchor.type];
+      scrollRef.current.scrollTop += newOffset - anchor.offset;
+    }
 
     // Trigger a set state for a second render anyway for arrow positioning
     setPosition(position);
@@ -187,6 +228,12 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
     onResize: updatePosition
   });
 
+  // Update position when the target changes size (might need to flip).
+  useResizeObserver({
+    ref: targetRef,
+    onResize: updatePosition
+  });
+
   // Reposition the overlay and do not close on scroll while the visual viewport is resizing.
   // This will ensure that overlays adjust their positioning when the iOS virtual keyboard appears.
   let isResizing = useRef(false);
@@ -239,7 +286,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
         position: 'absolute',
         zIndex: 100000, // should match the z-index in ModalTrigger
         ...position.position,
-        maxHeight: position.maxHeight
+        maxHeight: position.maxHeight ?? '100vh'
       }
     },
     placement: position.placement,

package/src/useOverlayTrigger.ts

@@ -11,10 +11,10 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
-import {DOMProps} from '@react-types/shared';
+import {DOMProps, RefObject} from '@react-types/shared';
 import {onCloseMap} from './useCloseOnScroll';
 import {OverlayTriggerState} from '@react-stately/overlays';
-import {RefObject, useEffect} from 'react';
+import {useEffect} from 'react';
 import {useId} from '@react-aria/utils';
 
 export interface OverlayTriggerProps {
@@ -34,7 +34,7 @@ export interface OverlayTriggerAria {
  * Handles the behavior and accessibility for an overlay trigger, e.g. a button
  * that opens a popover, menu, or other overlay that is positioned relative to the trigger.
  */
-export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTriggerState, ref?: RefObject<Element>): OverlayTriggerAria {
+export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTriggerState, ref?: RefObject<Element | null>): OverlayTriggerAria {
   let {type} = props;
   let {isOpen} = state;
 

package/src/usePopover.ts

@@ -12,11 +12,10 @@
 
 import {ariaHideOutside} from './ariaHideOutside';
 import {AriaPositionProps, useOverlayPosition} from './useOverlayPosition';
-import {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, RefObject} from '@react-types/shared';
 import {mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {OverlayTriggerState} from '@react-stately/overlays';
 import {PlacementAxis} from '@react-types/overlays';
-import {RefObject} from 'react';
 import {useOverlay} from './useOverlay';
 import {usePreventScroll} from './usePreventScroll';
 
@@ -24,11 +23,11 @@ export interface AriaPopoverProps extends Omit<AriaPositionProps, 'isOpen' | 'on
   /**
    * The ref for the element which the popover positions itself with respect to.
    */
-  triggerRef: RefObject<Element>,
+  triggerRef: RefObject<Element | null>,
   /**
    * The ref for the popover element.
    */
-  popoverRef: RefObject<Element>,
+  popoverRef: RefObject<Element | null>,
   /**
    * Whether the popover is non-modal, i.e. elements outside the popover may be
    * interacted with by assistive technologies.