@redocly/theme/src/core/hooks/use-outside-click.ts

Shared UI components lib

import { useEffect } from 'react';

import type { RefObject } from 'react';

type OutsideClickRef = RefObject<HTMLElement | null>;

export function useOutsideClick(
  refs: OutsideClickRef | OutsideClickRef[],
  handler?: (event: MouseEvent | TouchEvent) => void,
): void {
  useEffect(() => {
    const refList = Array.isArray(refs) ? refs : [refs];

    const listener = (event: MouseEvent | TouchEvent) => {
      if (!handler) return;

      const target = event.target as Node;

      const isInside = refList.some((ref) => ref.current && ref.current.contains(target));

      if (!isInside) {
        handler(event);
      }
    };

    document.addEventListener('mousedown', listener);
    document.addEventListener('touchstart', listener);

    return () => {
      document.removeEventListener('mousedown', listener);
      document.removeEventListener('touchstart', listener);
    };
  }, [refs, handler]);
}