feat: add use-click-outside

[SayaOvO]

please review

[SukkaW]

Suggested change

	const ref = useClickOutside<HTMLDivHTML>(() => {
	const ref = useClickOutside<HTMLDivElement>(() => {

[SukkaW]

Let's use callback ref instead of useEffect.

[SayaOvO]

Thank you Sukka sensei !
Here is my implementation, please review :)

import 'client-only';
import { useCallback } from 'react';
import type { RefCallback } from 'react';

export function useClickOutside<T extends HTMLElement>(cb: () => void): RefCallback<T> {
  return useCallback((node) => {
    const handleClick = ({ target }: MouseEvent) => {
      if (target && node && !node.contains(target as Node)) {
        cb();
      }
    };
    document.addEventListener('click', handleClick);
    return () => {
      document.removeEventListener('click', handleClick);
    };
  }, [cb]);
}

but as far as I know, ref callback can return a cleanup function only from React 19, before React 19, React would call this callback with null value when unmount. Shouldn't we consider this situation or am I incorrectly implementing this hook? :)

[SukkaW]

We should probably document that this only works on React 19 since we use ref callback cleanup. Or is it possible to make it backward compatible with the previous React version?