Create useClickedOutside hook

[leroykorterink]

We should have a util that makes it easy to detect clicks outside an element. The hook will most likely be used in modal components.

The hook should work with elements from state and RefObjects, a callback function should be called when the element or any of it's descendants are not clicked. The hook shouldn't have any additional properties.

Function signature

function useOutsideClick<T extends Unreffable<T>>(
  target: T,
  callback: (this: Unref<T>, event: MouseEvent) => void
): void;

Portal example

import { useOutsideClick } from '@mediamonks/react-hooks';
import styles from './MyComponent.module.scss';

export type MyComponentProps = {
  onClose(): void;
}

export const MyComponent = ensuredForwardRef<MyComponentProps, HTMLDivElement>((props, ref): ReactNode => {
  useOutsideClick(ref, () => {
    console.log("Element is not clicked");
  });

  return (
    <div ref={ref} className={styles.myComponent}>My content</div>,
  );
});

[ThaNarie]

The muban hook has some eventListener options, might be useful to have here as well?
https://mubanjs.github.io/muban-hooks/?path=/story/useclickedoutside-docs--page

React-use has options that define which types of interactions is should work on, might also be useful?
https://github.com/streamich/react-use/blob/master/docs/useClickAway.md