| 42 | let handlerId = 0 |
| 43 | |
| 44 | export const useOnOutsideClick = ({containerRef, ignoreClickRefs, onClickOutside}: UseOnOutsideClickSettings) => { |
| 45 | const id = useMemo(() => handlerId++, []) |
| 46 | |
| 47 | const handler = useCallback<TouchOrMouseEventCallback>( |
| 48 | event => { |
| 49 | // don't call click handler if the mouse event was triggered by an auxiliary button (right click/wheel button/etc) |
| 50 | if (event instanceof MouseEvent && event.button > 0) { |
| 51 | return stopPropagation |
| 52 | } |
| 53 | |
| 54 | // don't call handler if the click happened inside of the container |
| 55 | if (containerRef.current?.contains(event.target as Node)) { |
| 56 | return stopPropagation |
| 57 | } |
| 58 | |
| 59 | // don't call handler if click happened on an ignored ref |
| 60 | if (ignoreClickRefs && ignoreClickRefs.some(({current}) => current?.contains(event.target as Node))) { |
| 61 | return stopPropagation |
| 62 | } |
| 63 | |
| 64 | onClickOutside(event) |
| 65 | }, |
| 66 | [containerRef, ignoreClickRefs, onClickOutside], |
| 67 | ) |
| 68 | |
| 69 | useEffect(() => { |
| 70 | if (Object.keys(registry).length === 0) { |
| 71 | // use capture to ensure we get all events |
| 72 | document.addEventListener('mousedown', handleClick, {capture: true}) |
| 73 | } |
| 74 | register(id, handler) |
| 75 | |
| 76 | return () => { |
| 77 | deregister(id) |
| 78 | if (Object.keys(registry).length === 0) { |
| 79 | document.removeEventListener('mousedown', handleClick, {capture: true}) |
| 80 | } |
| 81 | } |
| 82 | }, [id, handler]) |
| 83 | } |