useOutsideClick hook to support nested portals

useOutsideClick.ts

import { useRef, useEffect, useCallback, useLayoutEffect } from 'react';

const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;

export const useOutsideClick = (onOutsideClick: EventListener) => {
    const clickedRef = useRef(false);
    const onMouseDownOrTouchStart = useCallback(() => {
        clickedRef.current = true;
    }, []);
    const outsideClickRef = useRef<EventListener | null>(null);

    useIsomorphicLayoutEffect(() => {
        outsideClickRef.current = onOutsideClick;
    }, [onOutsideClick]);
    useEffect(() => {
        const onDocumentMouseDownOrTouchStart: EventListener = (event) => {
            if (clickedRef.current || event.defaultPrevented || !outsideClickRef.current) {
                clickedRef.current = false;

                return;
            }

            setTimeout(() => {
                if (!clickedRef.current && outsideClickRef.current) {
                    outsideClickRef.current(event);
                }
            }, 0);
        };

        window.addEventListener('mousedown', onDocumentMouseDownOrTouchStart);
        window.addEventListener('touchstart', onDocumentMouseDownOrTouchStart);

        return () => {
            window.removeEventListener('mousedown', onDocumentMouseDownOrTouchStart);
            window.removeEventListener('touchstart', onDocumentMouseDownOrTouchStart);
        };
    }, []);

    return onMouseDownOrTouchStart;
};

This is a smart useOutsideClick hook to support nested portals. Events in React bubble throught portal and you can catch event on parent even child node was portaled somewhere to the root (you can't do this with real DOM event). So, because child portaled node not a child in DOM, you can't use contains() method to recognize nesting and outside click. But you can use bubbling!

Logic:

• if we can catch mousedonw/touchstart dom event in mousedown/touchstart react event handler on target node than this is not a click outside
• if mousedown/touchstart react event handler on target node wasn't called on mousedown/touchstart dom event somewhere than this is a click outside