@react-aria/overlays 3.12.0 → 3.13.0

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@react-aria/overlays",
-  "version": "3.12.0",
+  "version": "3.13.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
@@ -17,17 +22,17 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "^3.10.0",
-    "@react-aria/i18n": "^3.6.2",
-    "@react-aria/interactions": "^3.13.0",
-    "@react-aria/ssr": "^3.4.0",
-    "@react-aria/utils": "^3.14.1",
-    "@react-aria/visually-hidden": "^3.6.0",
-    "@react-stately/overlays": "^3.4.3",
-    "@react-types/button": "^3.7.0",
-    "@react-types/overlays": "^3.6.5",
-    "@react-types/shared": "^3.16.0"
+    "@react-aria/focus": "^3.11.0",
+    "@react-aria/i18n": "^3.7.0",
+    "@react-aria/interactions": "^3.14.0",
+    "@react-aria/ssr": "^3.5.0",
+    "@react-aria/utils": "^3.15.0",
+    "@react-aria/visually-hidden": "^3.7.0",
+    "@react-stately/overlays": "^3.5.0",
+    "@react-types/button": "^3.7.1",
+    "@react-types/overlays": "^3.7.0",
+    "@react-types/shared": "^3.17.0",
+    "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
@@ -36,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2954307ddbefe149241685440c81f80ece6b2c83"
+  "gitHead": "a0efee84aa178cb1a202951dfd6d8de02b292307"
 }

package/src/ariaHideOutside.ts

@@ -26,36 +26,55 @@ let observerStack = [];
 export function ariaHideOutside(targets: Element[], root = document.body) {
   let visibleNodes = new Set<Element>(targets);
   let hiddenNodes = new Set<Element>();
-  let walker = document.createTreeWalker(
-    root,
-    NodeFilter.SHOW_ELEMENT,
-    {
-      acceptNode(node) {
-        // If this node is a live announcer, add it to the set of nodes to keep visible.
-        if (((node instanceof HTMLElement || node instanceof SVGElement) && node.dataset.liveAnnouncer === 'true')) {
-          visibleNodes.add(node);
-        }
 
-        // Skip this node and its children if it is one of the target nodes, or a live announcer.
-        // Also skip children of already hidden nodes, as aria-hidden is recursive. An exception is
-        // made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row".
-        // For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
-        if (
-          visibleNodes.has(node as Element) ||
-          (hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row')
-        ) {
-          return NodeFilter.FILTER_REJECT;
-        }
+  let walk = (root: Element) => {
+    // Keep live announcer and top layer elements (e.g. toasts) visible.
+    for (let element of root.querySelectorAll('[data-live-announcer], [data-react-aria-top-layer]')) {
+      visibleNodes.add(element);
+    }
+
+    let acceptNode = (node: Element) => {
+      // Skip this node and its children if it is one of the target nodes, or a live announcer.
+      // Also skip children of already hidden nodes, as aria-hidden is recursive. An exception is
+      // made for elements with role="row" since VoiceOver on iOS has issues hiding elements with role="row".
+      // For that case we want to hide the cells inside as well (https://bugs.webkit.org/show_bug.cgi?id=222623).
+      if (
+        visibleNodes.has(node) ||
+        (hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row')
+      ) {
+        return NodeFilter.FILTER_REJECT;
+      }
 
-        // Skip this node but continue to children if one of the targets is inside the node.
-        if (targets.some(target => node.contains(target))) {
+      // Skip this node but continue to children if one of the targets is inside the node.
+      for (let target of visibleNodes) {
+        if (node.contains(target)) {
           return NodeFilter.FILTER_SKIP;
         }
+      }
+
+      return NodeFilter.FILTER_ACCEPT;
+    };
+
+    let walker = document.createTreeWalker(
+      root,
+      NodeFilter.SHOW_ELEMENT,
+      {acceptNode}
+    );
 
-        return NodeFilter.FILTER_ACCEPT;
+    // TreeWalker does not include the root.
+    let acceptRoot = acceptNode(root);
+    if (acceptRoot === NodeFilter.FILTER_ACCEPT) {
+      hide(root);
+    }
+
+    if (acceptRoot !== NodeFilter.FILTER_REJECT) {
+      let node = walker.nextNode() as Element;
+      while (node != null) {
+        hide(node);
+        node = walker.nextNode() as Element;
       }
     }
-  );
+  };
 
   let hide = (node: Element) => {
     let refCount = refCountMap.get(node) ?? 0;
@@ -80,11 +99,7 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
     observerStack[observerStack.length - 1].disconnect();
   }
 
-  let node = walker.nextNode() as Element;
-  while (node != null) {
-    hide(node);
-    node = walker.nextNode() as Element;
-  }
+  walk(root);
 
   let observer = new MutationObserver(changes => {
     for (let change of changes) {
@@ -95,11 +110,21 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
       // If the parent element of the added nodes is not within one of the targets,
       // and not already inside a hidden node, hide all of the new children.
       if (![...visibleNodes, ...hiddenNodes].some(node => node.contains(change.target))) {
+        for (let node of change.removedNodes) {
+          if (node instanceof Element) {
+            visibleNodes.delete(node);
+            hiddenNodes.delete(node);
+          }
+        }
+
         for (let node of change.addedNodes) {
-          if (((node instanceof HTMLElement || node instanceof SVGElement) && node.dataset.liveAnnouncer === 'true')) {
+          if (
+            (node instanceof HTMLElement || node instanceof SVGElement) &&
+            (node.dataset.liveAnnouncer === 'true' || node.dataset.reactAriaTopLayer === 'true')
+          ) {
             visibleNodes.add(node);
           } else if (node instanceof Element) {
-            hide(node);
+            walk(node);
           }
         }
       }

package/src/useOverlayPosition.ts

@@ -115,20 +115,26 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
       return;
     }
 
-    setPosition(
-      calculatePosition({
-        placement: translateRTL(placement, direction),
-        overlayNode: overlayRef.current,
-        targetNode: targetRef.current,
-        scrollNode: scrollRef.current,
-        padding: containerPadding,
-        shouldFlip,
-        boundaryElement,
-        offset,
-        crossOffset,
-        maxHeight
-      })
-    );
+    let position = calculatePosition({
+      placement: translateRTL(placement, direction),
+      overlayNode: overlayRef.current,
+      targetNode: targetRef.current,
+      scrollNode: scrollRef.current,
+      padding: containerPadding,
+      shouldFlip,
+      boundaryElement,
+      offset,
+      crossOffset,
+      maxHeight
+    });
+
+    // 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;
+
+    // Trigger a set state for a second render anyway for arrow positioning
+    setPosition(position);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 

package/src/useOverlayTrigger.ts

@@ -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>): OverlayTriggerAria {
   let {type} = props;
   let {isOpen} = state;
 

package/src/usePopover.ts

@@ -16,7 +16,7 @@ import {DOMAttributes} 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, useState} from 'react';
+import {RefObject} from 'react';
 import {useOverlay} from './useOverlay';
 import {usePreventScroll} from './usePreventScroll';
 
@@ -92,18 +92,8 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
     onClose: null
   });
 
-  // Delay preventing scroll until popover is positioned to avoid extra scroll padding.
-  // This requires a layout effect so that positioning has been committed to the DOM
-  // by the time usePreventScroll measures the element.
-  let [isPositioned, setPositioned] = useState(false);
-  useLayoutEffect(() => {
-    if (!isNonModal && placement) {
-      setPositioned(true);
-    }
-  }, [isNonModal, placement]);
-
   usePreventScroll({
-    isDisabled: isNonModal || !isPositioned
+    isDisabled: isNonModal
   });
 
   useLayoutEffect(() => {

package/src/usePreventScroll.ts

@@ -33,6 +33,10 @@ const nonTextInputTypes = new Set([
   'reset'
 ]);
 
+// The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
+let preventScrollCount = 0;
+let restore;
+
 /**
  * Prevents scrolling on the document body on mount, and
  * restores it on unmount. Also ensures that content does not
@@ -46,11 +50,21 @@ export function usePreventScroll(options: PreventScrollOptions = {}) {
       return;
     }
 
-    if (isIOS()) {
-      return preventScrollMobileSafari();
-    } else {
-      return preventScrollStandard();
+    preventScrollCount++;
+    if (preventScrollCount === 1) {
+      if (isIOS()) {
+        restore = preventScrollMobileSafari();
+      } else {
+        restore = preventScrollStandard();
+      }
     }
+
+    return () => {
+      preventScrollCount--;
+      if (preventScrollCount === 0) {
+        restore();
+      }
+    };
   }, [isDisabled]);
 }
 
@@ -183,6 +197,7 @@ function preventScrollMobileSafari() {
   // enable us to scroll the window to the top, which is required for the rest of this to work.
   let scrollX = window.pageXOffset;
   let scrollY = window.pageYOffset;
+
   let restoreStyles = chain(
     setStyle(document.documentElement, 'paddingRight', `${window.innerWidth - document.documentElement.clientWidth}px`),
     setStyle(document.documentElement, 'overflow', 'hidden'),
@@ -212,6 +227,7 @@ function preventScrollMobileSafari() {
 function setStyle(element: HTMLElement, style: string, value: string) {
   let cur = element.style[style];
   element.style[style] = value;
+
   return () => {
     element.style[style] = cur;
   };