@react-aria/overlays 3.31.1 → 3.32.0

package/src/useCloseOnScroll.ts

@@ -1,65 +0,0 @@
-/*
- * Copyright 2020 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 {nodeContains} from '@react-aria/utils';
-import {RefObject} from '@react-types/shared';
-import {useEffect} from 'react';
-
-// This behavior moved from useOverlayTrigger to useOverlayPosition.
-// For backward compatibility, where useOverlayTrigger handled hiding the popover on close,
-// it sets a close function here mapped from the trigger element. This way we can avoid
-// forcing users to pass an onClose function to useOverlayPosition which could be considered
-// a breaking change.
-export const onCloseMap: WeakMap<Element, () => void> = new WeakMap();
-
-interface CloseOnScrollOptions {
-  triggerRef: RefObject<Element | null>,
-  isOpen?: boolean,
-  onClose?: (() => void) | null
-}
-
-/** @private */
-export function useCloseOnScroll(opts: CloseOnScrollOptions): void {
-  let {triggerRef, isOpen, onClose} = opts;
-
-  useEffect(() => {
-    if (!isOpen || onClose === null) {
-      return;
-    }
-
-    let onScroll = (e: Event) => {
-      // Ignore if scrolling an scrollable region outside the trigger's tree.
-      let target = e.target;
-      // window is not a Node and doesn't have contain, but window contains everything
-      if (!triggerRef.current || ((target instanceof Node) && !nodeContains(target, triggerRef.current))) {
-        return;
-      }
-
-      // Ignore scroll events on any input or textarea as the cursor position can cause it to scroll
-      // such as in a combobox. Clicking the dropdown button places focus on the input, and if the
-      // text inside the input extends beyond the 'end', then it will scroll so the cursor is visible at the end.
-      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
-        return;
-      }
-
-      let onCloseHandler = onClose || onCloseMap.get(triggerRef.current);
-      if (onCloseHandler) {
-        onCloseHandler();
-      }
-    };
-
-    window.addEventListener('scroll', onScroll, true);
-    return () => {
-      window.removeEventListener('scroll', onScroll, true);
-    };
-  }, [isOpen, onClose, triggerRef]);
-}

package/src/useModal.tsx

@@ -1,197 +0,0 @@
-/*
- * Copyright 2020 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 {DOMAttributes} from '@react-types/shared';
-import React, {AriaAttributes, JSX, ReactNode, useContext, useEffect, useMemo, useState} from 'react';
-import ReactDOM from 'react-dom';
-import {useIsSSR} from '@react-aria/ssr';
-import {useUNSAFE_PortalContext} from './PortalProvider';
-
-export interface ModalProviderProps extends DOMAttributes {
-  children: ReactNode
-}
-
-interface ModalContext {
-  parent: ModalContext | null,
-  modalCount: number,
-  addModal: () => void,
-  removeModal: () => void
-}
-
-const Context = React.createContext<ModalContext | null>(null);
-
-/**
- * Each ModalProvider tracks how many modals are open in its subtree. On mount, the modals
- * trigger `addModal` to increment the count, and trigger `removeModal` on unmount to decrement it.
- * This is done recursively so that all parent providers are incremented and decremented.
- * If the modal count is greater than zero, we add `aria-hidden` to this provider to hide its
- * subtree from screen readers. This is done using React context in order to account for things
- * like portals, which can cause the React tree and the DOM tree to differ significantly in structure.
- */
-export function ModalProvider(props: ModalProviderProps): JSX.Element {
-  let {children} = props;
-  let parent = useContext(Context);
-  let [modalCount, setModalCount] = useState(0);
-  let context = useMemo(() => ({
-    parent,
-    modalCount,
-    addModal() {
-      setModalCount(count => count + 1);
-      if (parent) {
-        parent.addModal();
-      }
-    },
-    removeModal() {
-      setModalCount(count => count - 1);
-      if (parent) {
-        parent.removeModal();
-      }
-    }
-  }), [parent, modalCount]);
-
-  return (
-    <Context.Provider value={context}>
-      {children}
-    </Context.Provider>
-  );
-}
-
-export interface ModalProviderAria {
-  /**
-   * Props to be spread on the container element.
-   */
-  modalProviderProps: AriaAttributes
-}
-
-/**
- * Used to determine if the tree should be aria-hidden based on how many
- * modals are open.
- */
-export function useModalProvider(): ModalProviderAria {
-  let context = useContext(Context);
-  return {
-    modalProviderProps: {
-      'aria-hidden': context && context.modalCount > 0 ? true : undefined
-    }
-  };
-}
-
-/**
- * Creates a root node that will be aria-hidden if there are other modals open.
- */
-function OverlayContainerDOM(props: ModalProviderProps) {
-  let {modalProviderProps} = useModalProvider();
-  return <div data-overlay-container {...props} {...modalProviderProps} />;
-}
-
-/**
- * An OverlayProvider acts as a container for the top-level application.
- * Any application that uses modal dialogs or other overlays should
- * be wrapped in a `<OverlayProvider>`. This is used to ensure that
- * the main content of the application is hidden from screen readers
- * if a modal or other overlay is opened. Only the top-most modal or
- * overlay should be accessible at once.
- */
-export function OverlayProvider(props: ModalProviderProps): JSX.Element {
-  return (
-    <ModalProvider>
-      <OverlayContainerDOM {...props} />
-    </ModalProvider>
-  );
-}
-
-export interface OverlayContainerProps extends ModalProviderProps {
-  /**
-   * The container element in which the overlay portal will be placed.
-   * @default document.body
-   * @deprecated - Use a parent UNSAFE_PortalProvider to set your portal container instead.
-   */
-  portalContainer?: Element
-}
-
-/**
- * A container for overlays like modals and popovers. Renders the overlay
- * into a Portal which is placed at the end of the document body.
- * Also ensures that the overlay is hidden from screen readers if a
- * nested modal is opened. Only the top-most modal or overlay should
- * be accessible at once.
- */
-export function OverlayContainer(props: OverlayContainerProps): React.ReactPortal | null {
-  let isSSR = useIsSSR();
-  let {portalContainer = isSSR ? null : document.body, ...rest} = props;
-  let {getContainer} = useUNSAFE_PortalContext();
-  if (!props.portalContainer && getContainer) {
-    portalContainer = getContainer();
-  }
-
-  React.useEffect(() => {
-    if (portalContainer?.closest('[data-overlay-container]')) {
-      throw new Error('An OverlayContainer must not be inside another container. Please change the portalContainer prop.');
-    }
-  }, [portalContainer]);
-
-  if (!portalContainer) {
-    return null;
-  }
-
-  let contents = <OverlayProvider {...rest} />;
-  return ReactDOM.createPortal(contents, portalContainer);
-}
-
-interface ModalAriaProps extends DOMAttributes {
-  /** Data attribute marks the dom node as a modal for the aria-modal-polyfill. */
-  'data-ismodal': boolean
-}
-
-export interface AriaModalOptions {
-  isDisabled?: boolean
-}
-
-export interface ModalAria {
-  /** Props for the modal content element. */
-  modalProps: ModalAriaProps
-}
-
-/**
- * Hides content outside the current `<OverlayContainer>` from screen readers
- * on mount and restores it on unmount. Typically used by modal dialogs and
- * other types of overlays to ensure that only the top-most modal is
- * accessible at once.
- */
-export function useModal(options?: AriaModalOptions): ModalAria {
-  // Add aria-hidden to all parent providers on mount, and restore on unmount.
-  let context = useContext(Context);
-  if (!context) {
-    throw new Error('Modal is not contained within a provider');
-  }
-
-  useEffect(() => {
-    if (options?.isDisabled || !context || !context.parent) {
-      return;
-    }
-
-    // The immediate context is from the provider containing this modal, so we only
-    // want to trigger aria-hidden on its parents not on the modal provider itself.
-    context.parent.addModal();
-    return () => {
-      if (context && context.parent) {
-        context.parent.removeModal();
-      }
-    };
-  }, [context, context.parent, options?.isDisabled]);
-
-  return {
-    modalProps: {
-      'data-ismodal': !options?.isDisabled
-    }
-  };
-}

package/src/useModalOverlay.ts

@@ -1,69 +0,0 @@
-/*
- * 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 {AriaOverlayProps, useOverlay} from './useOverlay';
-import {DOMAttributes, RefObject} from '@react-types/shared';
-import {mergeProps} from '@react-aria/utils';
-import {OverlayTriggerState} from '@react-stately/overlays';
-import {useEffect} from 'react';
-import {useOverlayFocusContain} from './Overlay';
-import {usePreventScroll} from './usePreventScroll';
-
-export interface AriaModalOverlayProps extends Pick<AriaOverlayProps, 'shouldCloseOnInteractOutside'> {
-  /**
-   * 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 | null>): ModalOverlayAria {
-  let {overlayProps, underlayProps} = useOverlay({
-    ...props,
-    isOpen: state.isOpen,
-    onClose: state.close
-  }, ref);
-
-  usePreventScroll({
-    isDisabled: !state.isOpen
-  });
-
-  useOverlayFocusContain();
-
-  useEffect(() => {
-    if (state.isOpen && ref.current) {
-      return ariaHideOutside([ref.current], {shouldUseInert: true});
-    }
-  }, [state.isOpen, ref]);
-
-  return {
-    modalProps: mergeProps(overlayProps),
-    underlayProps
-  };
-}

package/src/useOverlay.ts

@@ -1,169 +0,0 @@
-/*
- * Copyright 2020 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 {DOMAttributes, RefObject} from '@react-types/shared';
-import {isElementInChildOfActiveScope} from '@react-aria/focus';
-import {useEffect, useRef} from 'react';
-import {useFocusWithin, useInteractOutside} from '@react-aria/interactions';
-
-export interface AriaOverlayProps {
-  /** Whether the overlay is currently open. */
-  isOpen?: boolean,
-
-  /** Handler that is called when the overlay should close. */
-  onClose?: () => void,
-
-  /**
-   * Whether to close the overlay when the user interacts outside it.
-   * @default false
-   */
-  isDismissable?: boolean,
-
-  /** Whether the overlay should close when focus is lost or moves outside it. */
-  shouldCloseOnBlur?: boolean,
-
-  /**
-   * Whether pressing the escape key to close the overlay should be disabled.
-   * @default false
-   */
-  isKeyboardDismissDisabled?: boolean,
-
-  /**
-   * When user interacts with the argument element outside of the overlay ref,
-   * return true if onClose should be called.  This gives you a chance to filter
-   * out interaction with elements that should not dismiss the overlay.
-   * By default, onClose will always be called on interaction outside the overlay ref.
-   */
-  shouldCloseOnInteractOutside?: (element: Element) => boolean
-}
-
-export interface OverlayAria {
-  /** Props to apply to the overlay container element. */
-  overlayProps: DOMAttributes,
-  /** Props to apply to the underlay element, if any. */
-  underlayProps: DOMAttributes
-}
-
-const visibleOverlays: RefObject<Element | null>[] = [];
-
-/**
- * Provides the behavior for overlays such as dialogs, popovers, and menus.
- * Hides the overlay when the user interacts outside it, when the Escape key is pressed,
- * or optionally, on blur. Only the top-most overlay will close at once.
- */
-export function useOverlay(props: AriaOverlayProps, ref: RefObject<Element | null>): OverlayAria {
-  let {
-    onClose,
-    shouldCloseOnBlur,
-    isOpen,
-    isDismissable = false,
-    isKeyboardDismissDisabled = false,
-    shouldCloseOnInteractOutside
-  } = props;
-
-  let lastVisibleOverlay = useRef<RefObject<Element | null>>(undefined);
-
-  // Add the overlay ref to the stack of visible overlays on mount, and remove on unmount.
-  useEffect(() => {
-    if (isOpen && !visibleOverlays.includes(ref)) {
-      visibleOverlays.push(ref);
-      return () => {
-        let index = visibleOverlays.indexOf(ref);
-        if (index >= 0) {
-          visibleOverlays.splice(index, 1);
-        }
-      };
-    }
-  }, [isOpen, ref]);
-
-  // Only hide the overlay when it is the topmost visible overlay in the stack
-  let onHide = () => {
-    if (visibleOverlays[visibleOverlays.length - 1] === ref && onClose) {
-      onClose();
-    }
-  };
-
-  let onInteractOutsideStart = (e: PointerEvent) => {
-    const topMostOverlay = visibleOverlays[visibleOverlays.length - 1];
-    lastVisibleOverlay.current = topMostOverlay;
-    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {
-      if (topMostOverlay === ref) {
-        e.stopPropagation();
-        e.preventDefault();
-      }
-    }
-  };
-
-  let onInteractOutside = (e: PointerEvent) => {
-    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {
-      if (visibleOverlays[visibleOverlays.length - 1] === ref) {
-        e.stopPropagation();
-        e.preventDefault();
-      }
-      if (lastVisibleOverlay.current === ref) {
-        onHide();
-      }
-    }
-    lastVisibleOverlay.current = undefined;
-  };
-
-  // Handle the escape key
-  let onKeyDown = (e) => {
-    if (e.key === 'Escape' && !isKeyboardDismissDisabled && !e.nativeEvent.isComposing) {
-      e.stopPropagation();
-      e.preventDefault();
-      onHide();
-    }
-  };
-
-  // Handle clicking outside the overlay to close it
-  useInteractOutside({ref, onInteractOutside: isDismissable && isOpen ? onInteractOutside : undefined, onInteractOutsideStart});
-
-  let {focusWithinProps} = useFocusWithin({
-    isDisabled: !shouldCloseOnBlur,
-    onBlurWithin: (e) => {
-      // Do not close if relatedTarget is null, which means focus is lost to the body.
-      // That can happen when switching tabs, or due to a VoiceOver/Chrome bug with Control+Option+Arrow navigation.
-      // Clicking on the body to close the overlay should already be handled by useInteractOutside.
-      // https://github.com/adobe/react-spectrum/issues/4130
-      // https://github.com/adobe/react-spectrum/issues/4922
-      //
-      // 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?.();
-      }
-    }
-  });
-
-  let onPointerDownUnderlay = e => {
-    // fixes a firefox issue that starts text selection https://bugzilla.mozilla.org/show_bug.cgi?id=1675846
-    if (e.target === e.currentTarget) {
-      e.preventDefault();
-    }
-  };
-
-  return {
-    overlayProps: {
-      onKeyDown,
-      ...focusWithinProps
-    },
-    underlayProps: {
-      onPointerDown: onPointerDownUnderlay
-    }
-  };
-}