@react-aria/overlays 3.10.0 → 3.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/overlays",
-  "version": "3.10.0",
+  "version": "3.11.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.5.0",
-    "@react-aria/interactions": "^3.10.0",
+    "@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.13.2",
-    "@react-aria/visually-hidden": "^3.4.0",
-    "@react-stately/overlays": "^3.4.0",
-    "@react-types/button": "^3.6.0",
-    "@react-types/overlays": "^3.6.2",
-    "@react-types/shared": "^3.14.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"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
@@ -35,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cd7c0ec917122c7612f653c22f8ed558f8b66ecd"
+  "gitHead": "9202ef59e8c104dd06ffe33148445ef7932a5d1b"
 }

package/src/Overlay.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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, 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
+}
+
+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);
+
+  if (!portalContainer) {
+    return null;
+  }
+
+  let contents = (
+    <OverlayContext.Provider value={setContain}>
+      <FocusScope restoreFocus contain={contain}>
+        {props.children}
+      </FocusScope>
+    </OverlayContext.Provider>
+  );
+
+  return ReactDOM.createPortal(contents, portalContainer);
+}
+
+/** @private */
+export function useOverlayFocusContain() {
+  let setContain = useContext(OverlayContext);
+  useLayoutEffect(() => {
+    setContain?.(true);
+  }, [setContain]);
+}

package/src/ariaHideOutside.ts

@@ -36,20 +36,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;

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

@@ -0,0 +1,88 @@
+/*
+ * 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 {PositionProps} from '@react-types/overlays';
+import {RefObject, useEffect} from 'react';
+import {useOverlay} from './useOverlay';
+import {useOverlayPosition} from './useOverlayPosition';
+
+export interface AriaPopoverProps extends Omit<PositionProps, 'isOpen'> {
+  /**
+   * 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
+}
+
+export interface PopoverAria {
+  /** Props for the popover element. */
+  popoverProps: DOMAttributes,
+  /** Props for the popover tip arrow if any. */
+  arrowProps: DOMAttributes
+}
+
+/**
+ * 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,
+    ...otherProps
+  } = props;
+
+  let {overlayProps} = useOverlay(
+    {
+      isOpen: state.isOpen,
+      onClose: state.close,
+      shouldCloseOnBlur: true,
+      isDismissable: true
+    },
+    popoverRef
+  );
+
+  let {overlayProps: positionProps, arrowProps} = useOverlayPosition({
+    ...otherProps,
+    targetRef: triggerRef,
+    overlayRef: popoverRef,
+    isOpen: state.isOpen
+  });
+
+  useEffect(() => {
+    if (state.isOpen && !isNonModal) {
+      return ariaHideOutside([popoverRef.current]);
+    }
+  }, [isNonModal, state.isOpen, popoverRef]);
+
+  return {
+    popoverProps: mergeProps(overlayProps, positionProps),
+    arrowProps
+  };
+}