use-click-outside.ts

import { useCallback, useEffect } from 'react';

const useClickOutside = (
  wrapperOrWrappers: null | HTMLElement | (null | HTMLElement)[],
  onClickOutside: (event: MouseEvent) => void
) => {
  const wrappers = resolveToArray(wrapperOrWrappers);

  const handleWindowClick = useCallback(
    (event: MouseEvent) => {
      const clicked = event.target;

      if (!clicked || !(clicked instanceof HTMLElement)) {
        return;
      }

      const haveClickedInside = wrappers.some(
        wrapper => !wrapper || wrapper === clicked || wrapper.contains(clicked)
      );

      if (haveClickedInside) {
        return;
      }

      onClickOutside(event);
    },
    [onClickOutside, ...wrappers]
  );

  useEffect(() => {
    window.addEventListener('click', handleWindowClick);
    return () => {
      window.removeEventListener('click', handleWindowClick);
    };
  }, [handleWindowClick]);
};