Migrate React Spectrum to new overlay hooks (#3677)

Author: devongovett

packages/@adobe/spectrum-css-temp/components/underlay/index.css

@@ -37,6 +37,11 @@ governing permissions and limitations under the License.
   /* Exit animations */
   transition: opacity var(--spectrum-dialog-background-exit-animation-duration) var(--spectrum-dialog-background-exit-animation-ease) var(--spectrum-dialog-background-exit-animation-delay),
               visibility 0ms linear calc(var(--spectrum-dialog-background-exit-animation-delay) + var(--spectrum-dialog-background-exit-animation-duration));
+
+  &.spectrum-Underlay--transparent {
+    transition: none;
+    background: none;
+  }
 }
 
 .spectrum-Underlay.is-open {

packages/@react-aria/focus/src/FocusScope.tsx

@@ -470,7 +470,7 @@ function shouldRestoreFocus(scopeRef: ScopeRef) {
     scope = scope.parent;
   }
 
-  return true;
+  return scope?.scopeRef === scopeRef;
 }
 
 function useRestoreFocus(scopeRef: RefObject<Element[]>, restoreFocus: boolean, contain: boolean) {

packages/@react-aria/overlays/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]);

packages/@react-aria/overlays/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);
+    }
   };
 }

packages/@react-aria/overlays/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 {
@@ -139,6 +139,12 @@ export function useOverlayPosition(props: AriaPositionProps): PositionAria {
   // 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);

packages/@react-aria/overlays/src/usePopover.ts

@@ -11,15 +11,17 @@
  */
 
 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 {OverlayContext} from './Overlay';
 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, useContext} 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 +38,23 @@ 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.
+   * @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 +66,45 @@ export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState):
     triggerRef,
     popoverRef,
     isNonModal,
+    isKeyboardDismissDisabled,
     ...otherProps
   } = props;
 
-  let {overlayProps} = useOverlay(
+  let ctx = useContext(OverlayContext);
+  let {overlayProps, underlayProps} = useOverlay(
     {
       isOpen: state.isOpen,
       onClose: state.close,
-      shouldCloseOnBlur: true,
-      isDismissable: true
+      // Close on blur if the overlay's FocusScope does not contain focus.
+      shouldCloseOnBlur: ctx && !ctx.contain,
+      isDismissable: !isNonModal,
+      isKeyboardDismissDisabled
     },
     popoverRef
   );
 
-  let {overlayProps: positionProps, arrowProps} = useOverlayPosition({
+  let {overlayProps: positionProps, arrowProps, placement} = useOverlayPosition({
     ...otherProps,
     targetRef: triggerRef,
     overlayRef: popoverRef,
     isOpen: state.isOpen
   });
+  
+  usePreventScroll({
+    // Delay preventing scroll until popover is positioned to avoid extra scroll padding.
+    isDisabled: isNonModal || !placement
+  });
 
-  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
   };
 }

packages/@react-spectrum/autocomplete/src/MobileSearchAutocomplete.tsx

@@ -88,8 +88,6 @@ export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAu
     }
   };
 
-  let onClose = () => state.commit();
-
   return (
     <>
       <Field
@@ -112,10 +110,10 @@ export const MobileSearchAutocomplete = React.forwardRef(function MobileSearchAu
           {state.inputValue || props.placeholder || ''}
         </SearchAutocompleteButton>
       </Field>
-      <Tray isOpen={state.isOpen} onClose={onClose} isFixedHeight isNonModal {...overlayProps}>
+      <Tray state={state} isFixedHeight {...overlayProps}>
         <SearchAutocompleteTray
           {...props}
-          onClose={onClose}
+          onClose={state.close}
           overlayProps={overlayProps}
           state={state} />
       </Tray>

packages/@react-spectrum/autocomplete/src/SearchAutocomplete.tsx

@@ -12,7 +12,6 @@
 import {AriaButtonProps} from '@react-types/button';
 import {classNames, useFocusableRef, useIsMobileDevice, useResizeObserver, useUnwrapDOMRef} from '@react-spectrum/utils';
 import {ClearButton} from '@react-spectrum/button';
-import {DismissButton, useOverlayPosition} from '@react-aria/overlays';
 import {DOMRefValue, FocusableRef} from '@react-types/shared';
 import {Field} from '@react-spectrum/label';
 import {FocusRing} from '@react-aria/focus';
@@ -21,7 +20,6 @@ import intlMessages from '../intl/*.json';
 import {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';
 import Magnifier from '@spectrum-icons/ui/Magnifier';
 import {MobileSearchAutocomplete} from './MobileSearchAutocomplete';
-import {Placement} from '@react-types/overlays';
 import {Popover} from '@react-spectrum/overlays';
 import {ProgressCircle} from '@react-spectrum/progress';
 import React, {forwardRef, InputHTMLAttributes, RefObject, useCallback, useEffect, useRef, useState} from 'react';
@@ -100,16 +98,6 @@ const SearchAutocompleteBase = React.forwardRef(function SearchAutocompleteBase<
     state
   );
 
-  let {overlayProps, placement, updatePosition} = useOverlayPosition({
-    targetRef: inputRef,
-    overlayRef: unwrappedPopoverRef,
-    scrollRef: listBoxRef,
-    placement: `${direction} end` as Placement,
-    shouldFlip: shouldFlip,
-    isOpen: state.isOpen,
-    onClose: state.close
-  });
-
   // Measure the width of the inputfield to inform the width of the menu (below).
   let [menuWidth, setMenuWidth] = useState(null);
   let {scale} = useProvider();
@@ -128,19 +116,7 @@ const SearchAutocompleteBase = React.forwardRef(function SearchAutocompleteBase<
 
   useLayoutEffect(onResize, [scale, onResize]);
 
-  // Update position once the ListBox has rendered. This ensures that
-  // it flips properly when it doesn't fit in the available space.
-  // TODO: add ResizeObserver to useOverlayPosition so we don't need this.
-  useLayoutEffect(() => {
-    if (state.isOpen) {
-      requestAnimationFrame(() => {
-        updatePosition();
-      });
-    }
-  }, [state.isOpen, updatePosition]);
-
   let style = {
-    ...overlayProps.style,
     width: isQuiet ? null : menuWidth,
     minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth
   };
@@ -157,14 +133,15 @@ const SearchAutocompleteBase = React.forwardRef(function SearchAutocompleteBase<
           clearButtonProps={clearButtonProps} />
       </Field>
       <Popover
-        isOpen={state.isOpen}
+        state={state}
         UNSAFE_style={style}
         UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {'spectrum-InputGroup-popover--quiet': isQuiet})}
         ref={popoverRef}
-        placement={placement}
+        triggerRef={inputRef}
+        placement={`${direction} end`}
         hideArrow
         isNonModal
-        isDismissable={false}>
+        shouldFlip={shouldFlip}>
         <ListBoxBase
           {...listBoxProps}
           ref={listBoxRef}
@@ -182,7 +159,6 @@ const SearchAutocompleteBase = React.forwardRef(function SearchAutocompleteBase<
               {stringFormatter.format('noResults')}
             </span>
           )} />
-        <DismissButton onDismiss={() => state.close()} />
       </Popover>
     </>
   );

packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js

@@ -734,11 +734,9 @@ describe('SearchAutocomplete', function () {
       let {getByRole} = renderSearchAutocomplete({allowsCustomValue: true});
       let searchAutocomplete = getByRole('combobox');
       // Change input value to something matching a searchAutocomplete value
-      act(() => {
-        searchAutocomplete.focus();
-        fireEvent.change(searchAutocomplete, {target: {value: 'Two'}});
-        jest.runAllTimers();
-      });
+      act(() => searchAutocomplete.focus());
+      fireEvent.change(searchAutocomplete, {target: {value: 'Two'}});
+      act(() => jest.runAllTimers());
 
       let listbox = getByRole('listbox');
       let items = within(listbox).getAllByRole('option');
@@ -748,11 +746,9 @@ describe('SearchAutocomplete', function () {
       expect(items[0].textContent).toBe('Two');
 
       // Change input text to something that doesn't match any searchAutocomplete items but still shows the menu
-      act(() => {
-        searchAutocomplete.focus();
-        fireEvent.change(searchAutocomplete, {target: {value: 'Tw'}});
-        jest.runAllTimers();
-      });
+      act(() => searchAutocomplete.focus());
+      fireEvent.change(searchAutocomplete, {target: {value: 'Tw'}});
+      act(() => jest.runAllTimers());
 
       // check that no item is focused in the menu
       listbox = getByRole('listbox');
@@ -1399,10 +1395,8 @@ describe('SearchAutocomplete', function () {
 
       expect(queryByRole('progressbar')).toBeNull();
 
-      act(() => {
-        typeText(searchAutocomplete, 'o');
-        jest.runAllTimers();
-      });
+      typeText(searchAutocomplete, 'o');
+      act(() => jest.runAllTimers());
 
       let listbox = getByRole('listbox');
       expect(listbox).toBeVisible();