@react-aria/overlays 3.11.0 → 3.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/overlays",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,16 +18,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "^3.9.0",
-    "@react-aria/i18n": "^3.6.1",
-    "@react-aria/interactions": "^3.12.0",
-    "@react-aria/ssr": "^3.3.0",
-    "@react-aria/utils": "^3.14.0",
-    "@react-aria/visually-hidden": "^3.5.0",
-    "@react-stately/overlays": "^3.4.2",
-    "@react-types/button": "^3.6.2",
-    "@react-types/overlays": "^3.6.4",
-    "@react-types/shared": "^3.15.0"
+    "@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"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9202ef59e8c104dd06ffe33148445ef7932a5d1b"
+  "gitHead": "2954307ddbefe149241685440c81f80ece6b2c83"
 }

package/src/Overlay.tsx

@@ -11,7 +11,7 @@
  */
 
 import {FocusScope} from '@react-aria/focus';
-import React, {ReactNode, useContext, useState} from 'react';
+import React, {ReactNode, useContext, useMemo, useState} from 'react';
 import ReactDOM from 'react-dom';
 import {useIsSSR} from '@react-aria/ssr';
 import {useLayoutEffect} from '@react-aria/utils';
@@ -26,7 +26,7 @@ export interface OverlayProps {
   children: ReactNode
 }
 
-const OverlayContext = React.createContext(null);
+export const OverlayContext = React.createContext(null);
 
 /**
  * A container which renders an overlay such as a popover or modal in a portal,
@@ -36,13 +36,14 @@ export function Overlay(props: OverlayProps) {
   let isSSR = useIsSSR();
   let {portalContainer = isSSR ? null : document.body} = props;
   let [contain, setContain] = useState(false);
+  let contextValue = useMemo(() => ({contain, setContain}), [contain, setContain]);
 
   if (!portalContainer) {
     return null;
   }
 
   let contents = (
-    <OverlayContext.Provider value={setContain}>
+    <OverlayContext.Provider value={contextValue}>
       <FocusScope restoreFocus contain={contain}>
         {props.children}
       </FocusScope>
@@ -54,7 +55,8 @@ export function Overlay(props: OverlayProps) {
 
 /** @private */
 export function useOverlayFocusContain() {
-  let setContain = useContext(OverlayContext);
+  let ctx = useContext(OverlayContext);
+  let setContain = ctx?.setContain;
   useLayoutEffect(() => {
     setContain?.(true);
   }, [setContain]);

package/src/ariaHideOutside.ts

@@ -13,6 +13,7 @@
 // Keeps a ref count of all hidden elements. Added to when hiding an element, and
 // subtracted from when showing it again. When it reaches zero, aria-hidden is removed.
 let refCountMap = new WeakMap<Element, number>();
+let observerStack = [];
 
 /**
  * Hides all elements in the DOM outside the given targets from screen readers using aria-hidden,
@@ -73,6 +74,12 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
     refCountMap.set(node, refCount + 1);
   };
 
+  // If there is already a MutationObserver listening from a previous call,
+  // disconnect it so the new on takes over.
+  if (observerStack.length) {
+    observerStack[observerStack.length - 1].disconnect();
+  }
+
   let node = walker.nextNode() as Element;
   while (node != null) {
     hide(node);
@@ -101,6 +108,17 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
 
   observer.observe(root, {childList: true, subtree: true});
 
+  let observerWrapper = {
+    observe() {
+      observer.observe(root, {childList: true, subtree: true});
+    },
+    disconnect() {
+      observer.disconnect();
+    }
+  };
+
+  observerStack.push(observerWrapper);
+
   return () => {
     observer.disconnect();
 
@@ -113,5 +131,15 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
         refCountMap.set(node, count - 1);
       }
     }
+
+    // Remove this observer from the stack, and start the previous one.
+    if (observerWrapper === observerStack[observerStack.length - 1]) {
+      observerStack.pop();
+      if (observerStack.length) {
+        observerStack[observerStack.length - 1].observe();
+      }
+    } else {
+      observerStack.splice(observerStack.indexOf(observerWrapper), 1);
+    }
   };
 }

package/src/useCloseOnScroll.ts

@@ -30,7 +30,7 @@ export function useCloseOnScroll(opts: CloseOnScrollOptions) {
   let {triggerRef, isOpen, onClose} = opts;
 
   useEffect(() => {
-    if (!isOpen) {
+    if (!isOpen || onClose === null) {
       return;
     }
 

package/src/useOverlay.ts

@@ -11,6 +11,7 @@
  */
 
 import {DOMAttributes} from '@react-types/shared';
+import {isElementInChildOfActiveScope} from '@react-aria/focus';
 import {RefObject, SyntheticEvent, useEffect} from 'react';
 import {useFocusWithin, useInteractOutside} from '@react-aria/interactions';
 
@@ -124,6 +125,13 @@ export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element>): Ov
   let {focusWithinProps} = useFocusWithin({
     isDisabled: !shouldCloseOnBlur,
     onBlurWithin: (e) => {
+      // 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)) {
+        return;
+      }
+
       if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget as Element)) {
         onClose();
       }

package/src/useOverlayPosition.ts

@@ -15,7 +15,7 @@ import {DOMAttributes} from '@react-types/shared';
 import {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';
 import {RefObject, useCallback, useRef, useState} from 'react';
 import {useCloseOnScroll} from './useCloseOnScroll';
-import {useLayoutEffect} from '@react-aria/utils';
+import {useLayoutEffect, useResizeObserver} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
 
 export interface AriaPositionProps extends PositionProps {
@@ -129,14 +129,22 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
         maxHeight
       })
     );
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 
   // Update position when anything changes
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useLayoutEffect(updatePosition, deps);
 
   // Update position on window resize
   useResize(updatePosition);
 
+  // Update position when the overlay changes size (might need to flip).
+  useResizeObserver({
+    ref: overlayRef,
+    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);
@@ -171,7 +179,7 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
   useCloseOnScroll({
     triggerRef: targetRef,
     isOpen,
-    onClose: onClose ? close : undefined
+    onClose: onClose && close
   });
 
   return {

package/src/usePopover.ts

@@ -11,15 +11,16 @@
  */
 
 import {ariaHideOutside} from './ariaHideOutside';
+import {AriaPositionProps, useOverlayPosition} from './useOverlayPosition';
 import {DOMAttributes} from '@react-types/shared';
-import {mergeProps} from '@react-aria/utils';
+import {mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {OverlayTriggerState} from '@react-stately/overlays';
-import {PositionProps} from '@react-types/overlays';
-import {RefObject, useEffect} from 'react';
+import {PlacementAxis} from '@react-types/overlays';
+import {RefObject, useState} from 'react';
 import {useOverlay} from './useOverlay';
-import {useOverlayPosition} from './useOverlayPosition';
+import {usePreventScroll} from './usePreventScroll';
 
-export interface AriaPopoverProps extends Omit<PositionProps, 'isOpen'> {
+export interface AriaPopoverProps extends Omit<AriaPositionProps, 'isOpen' | 'onClose' | 'targetRef' | 'overlayRef'> {
   /**
    * The ref for the element which the popover positions itself with respect to.
    */
@@ -36,14 +37,27 @@ export interface AriaPopoverProps extends Omit<PositionProps, 'isOpen'> {
    * reader experience. Only use with components such as combobox, which are designed
    * to handle this situation carefully.
    */
-  isNonModal?: boolean
+  isNonModal?: boolean,
+  /**
+   * Whether pressing the escape key to close the popover should be disabled.
+   *
+   * Most popovers should not use this option. When set to true, an alternative
+   * way to close the popover with a keyboard must be provided.
+   *
+   * @default false
+   */
+  isKeyboardDismissDisabled?: boolean
 }
 
 export interface PopoverAria {
   /** Props for the popover element. */
   popoverProps: DOMAttributes,
   /** Props for the popover tip arrow if any. */
-  arrowProps: DOMAttributes
+  arrowProps: DOMAttributes,
+  /** Props to apply to the underlay element, if any. */
+  underlayProps: DOMAttributes,
+  /** Placement of the popover with respect to the trigger. */
+  placement: PlacementAxis
 }
 
 /**
@@ -55,34 +69,53 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
     triggerRef,
     popoverRef,
     isNonModal,
+    isKeyboardDismissDisabled,
     ...otherProps
   } = props;
 
-  let {overlayProps} = useOverlay(
+  let {overlayProps, underlayProps} = useOverlay(
     {
       isOpen: state.isOpen,
       onClose: state.close,
       shouldCloseOnBlur: true,
-      isDismissable: true
+      isDismissable: !isNonModal,
+      isKeyboardDismissDisabled
     },
     popoverRef
   );
 
-  let {overlayProps: positionProps, arrowProps} = useOverlayPosition({
+  let {overlayProps: positionProps, arrowProps, placement} = useOverlayPosition({
     ...otherProps,
     targetRef: triggerRef,
     overlayRef: popoverRef,
-    isOpen: state.isOpen
+    isOpen: state.isOpen,
+    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
   });
 
-  useEffect(() => {
-    if (state.isOpen && !isNonModal) {
+  useLayoutEffect(() => {
+    if (state.isOpen && !isNonModal && popoverRef.current) {
       return ariaHideOutside([popoverRef.current]);
     }
   }, [isNonModal, state.isOpen, popoverRef]);
 
   return {
     popoverProps: mergeProps(overlayProps, positionProps),
-    arrowProps
+    arrowProps,
+    underlayProps,
+    placement
   };
 }