@react-aria/overlays 3.23.4 → 3.25.0

package/src/useOverlayTrigger.ts

@@ -50,7 +50,7 @@ export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTrig
   // https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup
   // However, we only add it for menus for now because screen readers often
   // announce it as a menu even for other values.
-  let ariaHasPopup = undefined;
+  let ariaHasPopup: undefined | boolean | 'listbox' = undefined;
   if (type === 'menu') {
     ariaHasPopup = true;
   } else if (type === 'listbox') {
@@ -62,7 +62,7 @@ export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTrig
     triggerProps: {
       'aria-haspopup': ariaHasPopup,
       'aria-expanded': isOpen,
-      'aria-controls': isOpen ? overlayId : null,
+      'aria-controls': isOpen ? overlayId : undefined,
       onPress: state.toggle
     },
     overlayProps: {

package/src/usePopover.ts

@@ -63,7 +63,7 @@ export interface PopoverAria {
   /** Props to apply to the underlay element, if any. */
   underlayProps: DOMAttributes,
   /** Placement of the popover with respect to the trigger. */
-  placement: PlacementAxis
+  placement: PlacementAxis | null
 }
 
 /**
@@ -82,7 +82,8 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
 
   let {overlayProps, underlayProps} = useOverlay(
     {
-      isOpen: state.isOpen,
+      // If popover is in the top layer, it should not prevent other popovers from being dismissed.
+      isOpen: state.isOpen && !otherProps['data-react-aria-top-layer'],
       onClose: state.close,
       shouldCloseOnBlur: true,
       isDismissable: !isNonModal,

package/src/usePreventScroll.ts

@@ -17,7 +17,6 @@ interface PreventScrollOptions {
   isDisabled?: boolean
 }
 
-// @ts-ignore
 const visualViewport = typeof document !== 'undefined' && window.visualViewport;
 
 // HTML input types that do not cause the software keyboard to appear.
@@ -140,24 +139,7 @@ function preventScrollMobileSafari() {
     }
   };
 
-  let onTouchEnd = (e: TouchEvent) => {
-    let target = e.target as HTMLElement;
-
-    // Apply this change if we're not already focused on the target element
-    if (willOpenKeyboard(target) && target !== document.activeElement) {
-      e.preventDefault();
-      setupStyles();
-
-      // Apply a transform to trick Safari into thinking the input is at the top of the page
-      // so it doesn't try to scroll it into view. When tapping on an input, this needs to
-      // be done before the "focus" event, so we have to focus the element ourselves.
-      target.style.transform = 'translateY(-2000px)';
-      target.focus();
-      requestAnimationFrame(() => {
-        target.style.transform = '';
-      });
-    }
-
+  let onTouchEnd = () => {
     if (restoreScrollableStyles) {
       restoreScrollableStyles();
     }
@@ -168,10 +150,8 @@ function preventScrollMobileSafari() {
     if (willOpenKeyboard(target)) {
       setupStyles();
 
-      // Transform also needs to be applied in the focus event in cases where focus moves
-      // other than tapping on an input directly, e.g. the next/previous buttons in the
-      // software keyboard. In these cases, it seems applying the transform in the focus event
-      // is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
+      // Apply a transform to trick Safari into thinking the input is at the top of the page
+      // so it doesn't try to scroll it into view.
       target.style.transform = 'translateY(-2000px)';
       requestAnimationFrame(() => {
         target.style.transform = '';
@@ -195,7 +175,7 @@ function preventScrollMobileSafari() {
     }
   };
 
-  let restoreStyles = null;
+  let restoreStyles: null | (() => void) = null;
   let setupStyles = () => {
     if (restoreStyles) {
       return;
@@ -254,31 +234,35 @@ function setStyle(element: HTMLElement, style: string, value: string) {
 
 // Adds an event listener to an element, and returns a function to remove it.
 function addEvent<K extends keyof GlobalEventHandlersEventMap>(
-  target: EventTarget,
+  target: Document | Window,
   event: K,
-  handler: (this: Document, ev: GlobalEventHandlersEventMap[K]) => any,
+  handler: (this: Document | Window, ev: GlobalEventHandlersEventMap[K]) => any,
   options?: boolean | AddEventListenerOptions
 ) {
+  // internal function, so it's ok to ignore the difficult to fix type error
+  // @ts-ignore
   target.addEventListener(event, handler, options);
   return () => {
+    // @ts-ignore
     target.removeEventListener(event, handler, options);
   };
 }
 
 function scrollIntoView(target: Element) {
   let root = document.scrollingElement || document.documentElement;
-  while (target && target !== root) {
+  let nextTarget: Element | null = target;
+  while (nextTarget && nextTarget !== root) {
     // Find the parent scrollable element and adjust the scroll position if the target is not already in view.
-    let scrollable = getScrollParent(target);
-    if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== target) {
+    let scrollable = getScrollParent(nextTarget);
+    if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== nextTarget) {
       let scrollableTop = scrollable.getBoundingClientRect().top;
-      let targetTop = target.getBoundingClientRect().top;
-      if (targetTop > scrollableTop + target.clientHeight) {
+      let targetTop = nextTarget.getBoundingClientRect().top;
+      if (targetTop > scrollableTop + nextTarget.clientHeight) {
         scrollable.scrollTop += targetTop - scrollableTop;
       }
     }
 
-    target = scrollable.parentElement;
+    nextTarget = scrollable.parentElement;
   }
 }