Function useOverlay

packages/react-aria/src/overlays/useOverlay.ts:67–175

(props: AriaOverlayProps, ref: RefObject<Element | null>)

 * 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(getEventTarget(e) as Element)
    ) {
      if (topMostOverlay === ref) {
        e.stopPropagation();
      }
    }
  };

  let onInteractOutside = (e: PointerEvent) => {
    if (
      !shouldCloseOnInteractOutside ||
      shouldCloseOnInteractOutside(getEventTarget(e) as Element)
    ) {
      if (visibleOverlays[visibleOverlays.length - 1] === ref) {
        e.stopPropagation();
      }
      if (lastVisibleOverlay.current === ref) {
        onHide();
      }
    }
    lastVisibleOverlay.current = undefined;