@react-aria/overlays 3.10.1 → 3.12.0

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;;AEoBA,kCAAmC,SAAQ,aAAa;IACtD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,SAAS,EAAE,UAAU,OAAO,CAAC,CAAC;IAC9B;;OAEG;IACH,UAAU,EAAE,UAAU,OAAO,CAAC,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,OAAO,CAAC,CAAC;IAC/B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;IACE,+CAA+C;IAC/C,YAAY,EAAE,aAAa,CAAC;IAC5B,8CAA8C;IAC9C,UAAU,EAAE,aAAa,CAAC;IAC1B,oEAAoE;IACpE,SAAS,EAAE,aAAa,CAAC;IACzB,2CAA2C;IAC3C,cAAc,IAAI,IAAI,CAAA;CACvB;AAKD;;;GAGG;AACH,mCAAmC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA2HzE;AClLD;IACE,6CAA6C;IAC7C,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,+EAA+E;IAC/E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAC;IAEpC;;;;;OAKG;IACH,4BAA4B,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAA;CAC7D;AAED;IACE,uDAAuD;IACvD,YAAY,EAAE,aAAa,CAAC;IAC5B,sDAAsD;IACtD,aAAa,EAAE,aAAa,CAAA;CAC7B;AAID;;;;GAIG;AACH,2BAA2B,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,UAAU,OAAO,CAAC,GAAG,WAAW,CAuFxF;ACjID;IACE,qDAAqD;IACrD,IAAI,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;CACtD;AAED;IACE,qCAAqC;IACrC,YAAY,EAAE,eAAe,CAAC;IAE9B,+CAA+C;IAC/C,YAAY,EAAE,aAAa,CAAA;CAC5B;AAED;;;GAGG;AACH,kCAAkC,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,UAAU,OAAO,CAAC,GAAG,kBAAkB,CAmCrI;ACzDD;IACE,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAkBD;;;;GAIG;AACH,iCAAiC,OAAO,GAAE,oBAAyB,QAclE;ACrCD,mCAAoC,SAAQ,aAAa;IACvD,QAAQ,EAAE,SAAS,CAAA;CACpB;AAWD;;;;;;;GAOG;AACH,8BAA8B,KAAK,EAAE,kBAAkB,eA0BtD;AAED;IACE;;OAEG;IACH,kBAAkB,EAAE,cAAc,CAAA;CACnC;AAED;;;GAGG;AACH,oCAAoC,iBAAiB,CAOpD;AAUD;;;;;;;GAOG;AACH,gCAAgC,KAAK,EAAE,kBAAkB,eAMxD;AAED,sCAAuC,SAAQ,kBAAkB;IAC/D;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED;;;;;;GAMG;AACH,iCAAiC,KAAK,EAAE,qBAAqB,GAAG,MAAM,WAAW,CAgBhF;AAED,wBAAyB,SAAQ,aAAa;IAC5C,gFAAgF;IAChF,cAAc,EAAE,OAAO,CAAA;CACxB;AAED;IACE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;IACE,2CAA2C;IAC3C,UAAU,EAAE,cAAc,CAAA;CAC3B;AAED;;;;;GAKG;AACH,yBAAyB,OAAO,CAAC,EAAE,gBAAgB,GAAG,SAAS,CA2B9D;AC1KD,mCAAoC,SAAQ,iBAAiB,EAAE,QAAQ;IACrE,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;;;GAIG;AACH,8BAA8B,KAAK,EAAE,kBAAkB,eAoBtD;AClCD;;;;;;;GAOG;AACH,gCAAgC,OAAO,EAAE,OAAO,EAAE,EAAE,IAAI,cAAgB,cAgGvE","sources":["packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/calculatePosition.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useCloseOnScroll.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useOverlayPosition.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useOverlay.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useOverlayTrigger.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/usePreventScroll.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useModal.tsx","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/DismissButton.tsx","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/ariaHideOutside.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/index.ts","packages/@react-aria/overlays/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useOverlayPosition} from './useOverlayPosition';\nexport {useOverlay} from './useOverlay';\nexport {useOverlayTrigger} from './useOverlayTrigger';\nexport {usePreventScroll} from './usePreventScroll';\nexport {ModalProvider, useModalProvider, OverlayProvider, OverlayContainer, useModal} from './useModal';\nexport {DismissButton} from './DismissButton';\nexport {ariaHideOutside} from './ariaHideOutside';\n\nexport type {AriaPositionProps, PositionAria} from './useOverlayPosition';\nexport type {AriaOverlayProps, OverlayAria} from './useOverlay';\nexport type {OverlayTriggerAria, OverlayTriggerProps} from './useOverlayTrigger';\nexport type {AriaModalOptions, ModalAria, ModalProviderAria, ModalProviderProps, OverlayContainerProps} from './useModal';\nexport type {DismissButtonProps} from './DismissButton';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":"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","sources":["packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/calculatePosition.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useCloseOnScroll.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useOverlayPosition.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useOverlay.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useOverlayTrigger.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/usePreventScroll.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useModal.tsx","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/DismissButton.tsx","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/ariaHideOutside.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/usePopover.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/Overlay.tsx","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useModalOverlay.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/index.ts","packages/@react-aria/overlays/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useOverlayPosition} from './useOverlayPosition';\nexport {useOverlay} from './useOverlay';\nexport {useOverlayTrigger} from './useOverlayTrigger';\nexport {usePreventScroll} from './usePreventScroll';\nexport {ModalProvider, useModalProvider, OverlayProvider, OverlayContainer, useModal} from './useModal';\nexport {DismissButton} from './DismissButton';\nexport {ariaHideOutside} from './ariaHideOutside';\nexport {usePopover} from './usePopover';\nexport {useModalOverlay} from './useModalOverlay';\nexport {Overlay, useOverlayFocusContain} from './Overlay';\n\nexport type {AriaPositionProps, PositionAria} from './useOverlayPosition';\nexport type {AriaOverlayProps, OverlayAria} from './useOverlay';\nexport type {OverlayTriggerAria, OverlayTriggerProps} from './useOverlayTrigger';\nexport type {AriaModalOptions, ModalAria, ModalProviderAria, ModalProviderProps, OverlayContainerProps} from './useModal';\nexport type {DismissButtonProps} from './DismissButton';\nexport type {AriaPopoverProps, PopoverAria} from './usePopover';\nexport type {AriaModalOverlayProps, ModalOverlayAria} from './useModalOverlay';\nexport type {OverlayProps} from './Overlay';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/overlays",
-  "version": "3.10.1",
+  "version": "3.12.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,15 +18,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "^3.6.0",
-    "@react-aria/interactions": "^3.11.0",
-    "@react-aria/ssr": "^3.3.0",
-    "@react-aria/utils": "^3.13.3",
-    "@react-aria/visually-hidden": "^3.4.1",
-    "@react-stately/overlays": "^3.4.1",
-    "@react-types/button": "^3.6.1",
-    "@react-types/overlays": "^3.6.3",
-    "@react-types/shared": "^3.14.1"
+    "@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",
@@ -35,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b03ef51e6317547dd0a840f151e59d039b1e1fd3"
+  "gitHead": "2954307ddbefe149241685440c81f80ece6b2c83"
 }

package/src/Overlay.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {FocusScope} from '@react-aria/focus';
+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';
+
+export interface OverlayProps {
+  /**
+   * The container element in which the overlay portal will be placed.
+   * @default document.body
+   */
+  portalContainer?: Element,
+  /** The overlay to render in the portal. */
+  children: ReactNode
+}
+
+export const OverlayContext = React.createContext(null);
+
+/**
+ * A container which renders an overlay such as a popover or modal in a portal,
+ * and provides a focus scope for the child elements.
+ */
+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={contextValue}>
+      <FocusScope restoreFocus contain={contain}>
+        {props.children}
+      </FocusScope>
+    </OverlayContext.Provider>
+  );
+
+  return ReactDOM.createPortal(contents, portalContainer);
+}
+
+/** @private */
+export function useOverlayFocusContain() {
+  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,
@@ -36,20 +37,16 @@ export function ariaHideOutside(targets: Element[], root = document.body) {
         }
 
         // 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.
+        // 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)
+          (hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute('role') !== 'row')
         ) {
           return NodeFilter.FILTER_REJECT;
         }
 
-        // VoiceOver on iOS has issues hiding elements with role="row". Hide the cells inside instead.
-        // https://bugs.webkit.org/show_bug.cgi?id=222623
-        if (node instanceof Element && node.getAttribute('role') === 'row') {
-          return NodeFilter.FILTER_SKIP;
-        }
-
         // Skip this node but continue to children if one of the targets is inside the node.
         if (targets.some(target => node.contains(target))) {
           return NodeFilter.FILTER_SKIP;
@@ -77,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);
@@ -105,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();
 
@@ -117,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/index.ts

@@ -16,9 +16,15 @@ export {usePreventScroll} from './usePreventScroll';
 export {ModalProvider, useModalProvider, OverlayProvider, OverlayContainer, useModal} from './useModal';
 export {DismissButton} from './DismissButton';
 export {ariaHideOutside} from './ariaHideOutside';
+export {usePopover} from './usePopover';
+export {useModalOverlay} from './useModalOverlay';
+export {Overlay, useOverlayFocusContain} from './Overlay';
 
 export type {AriaPositionProps, PositionAria} from './useOverlayPosition';
 export type {AriaOverlayProps, OverlayAria} from './useOverlay';
 export type {OverlayTriggerAria, OverlayTriggerProps} from './useOverlayTrigger';
 export type {AriaModalOptions, ModalAria, ModalProviderAria, ModalProviderProps, OverlayContainerProps} from './useModal';
 export type {DismissButtonProps} from './DismissButton';
+export type {AriaPopoverProps, PopoverAria} from './usePopover';
+export type {AriaModalOverlayProps, ModalOverlayAria} from './useModalOverlay';
+export type {OverlayProps} from './Overlay';

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/useModalOverlay.ts

@@ -0,0 +1,69 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ariaHideOutside} from './ariaHideOutside';
+import {DOMAttributes} from '@react-types/shared';
+import {mergeProps} from '@react-aria/utils';
+import {OverlayTriggerState} from '@react-stately/overlays';
+import {RefObject, useEffect} from 'react';
+import {useOverlay} from './useOverlay';
+import {useOverlayFocusContain} from './Overlay';
+import {usePreventScroll} from './usePreventScroll';
+
+export interface AriaModalOverlayProps {
+  /**
+   * Whether to close the modal when the user interacts outside it.
+   * @default false
+   */
+  isDismissable?: boolean,
+  /**
+   * Whether pressing the escape key to close the modal should be disabled.
+   * @default false
+   */
+  isKeyboardDismissDisabled?: boolean
+}
+
+export interface ModalOverlayAria {
+  /** Props for the modal element. */
+  modalProps: DOMAttributes,
+  /** Props for the underlay element. */
+  underlayProps: DOMAttributes
+}
+
+/**
+ * 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 {
+  let {overlayProps, underlayProps} = useOverlay({
+    ...props,
+    isOpen: state.isOpen,
+    onClose: state.close
+  }, ref);
+
+  usePreventScroll({
+    isDisabled: !state.isOpen
+  });
+
+  useOverlayFocusContain();
+
+  useEffect(() => {
+    if (state.isOpen) {
+      return ariaHideOutside([ref.current]);
+    }
+  }, [state.isOpen, ref]);
+
+  return {
+    modalProps: mergeProps(overlayProps),
+    underlayProps
+  };
+}

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

@@ -0,0 +1,121 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ariaHideOutside} from './ariaHideOutside';
+import {AriaPositionProps, useOverlayPosition} from './useOverlayPosition';
+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 {useOverlay} from './useOverlay';
+import {usePreventScroll} from './usePreventScroll';
+
+export interface AriaPopoverProps extends Omit<AriaPositionProps, 'isOpen' | 'onClose' | 'targetRef' | 'overlayRef'> {
+  /**
+   * The ref for the element which the popover positions itself with respect to.
+   */
+  triggerRef: RefObject<Element>,
+  /**
+   * The ref for the popover element.
+   */
+  popoverRef: RefObject<Element>,
+  /**
+   * Whether the popover is non-modal, i.e. elements outside the popover may be
+   * interacted with by assistive technologies.
+   *
+   * Most popovers should not use this option as it may negatively impact the screen
+   * reader experience. Only use with components such as combobox, which are designed
+   * to handle this situation carefully.
+   */
+  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,
+  /** Props to apply to the underlay element, if any. */
+  underlayProps: DOMAttributes,
+  /** Placement of the popover with respect to the trigger. */
+  placement: PlacementAxis
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a popover component.
+ * A popover is an overlay element positioned relative to a trigger.
+ */
+export function usePopover(props: AriaPopoverProps, state: OverlayTriggerState): PopoverAria {
+  let {
+    triggerRef,
+    popoverRef,
+    isNonModal,
+    isKeyboardDismissDisabled,
+    ...otherProps
+  } = props;
+
+  let {overlayProps, underlayProps} = useOverlay(
+    {
+      isOpen: state.isOpen,
+      onClose: state.close,
+      shouldCloseOnBlur: true,
+      isDismissable: !isNonModal,
+      isKeyboardDismissDisabled
+    },
+    popoverRef
+  );
+
+  let {overlayProps: positionProps, arrowProps, placement} = useOverlayPosition({
+    ...otherProps,
+    targetRef: triggerRef,
+    overlayRef: popoverRef,
+    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
+  });
+
+  useLayoutEffect(() => {
+    if (state.isOpen && !isNonModal && popoverRef.current) {
+      return ariaHideOutside([popoverRef.current]);
+    }
+  }, [isNonModal, state.isOpen, popoverRef]);
+
+  return {
+    popoverProps: mergeProps(overlayProps, positionProps),
+    arrowProps,
+    underlayProps,
+    placement
+  };
+}