feat: add bodyEventsToCapture prop

Author: ooade

__tests__/index.tsx

@@ -1,6 +1,11 @@
 import React, { act } from 'react';
 import ReactDOM from 'react-dom';
-import { render, fireEvent, renderHook } from '@testing-library/react';
+import {
+	render,
+	fireEvent,
+	renderHook,
+	getByTestId
+} from '@testing-library/react';
 import ClickAwayListener from '../src';
 
 /**
@@ -34,7 +39,7 @@ describe('ClickAway Listener', () => {
 	`(
 		'should return the "$expectedEventType" event object, when the "$fireEventFn" event is fired on the outside element',
 		({ fireEventFn, expectedEventType }) => {
-			const handleClick = (event: FocusEvent | MouseEvent | TouchEvent) => {
+			const handleClick = (event) => {
 				expect(event.type).toBe(expectedEventType);
 			};
 
@@ -237,6 +242,33 @@ describe('ClickAway Listener', () => {
 		expect(handleClick).toHaveBeenCalledTimes(1);
 	});
 
+	it('should work with other body events', () => {
+		const handleClick = jest.fn();
+		const handleClickAway = jest.fn();
+
+		const { getByTestId } = render(
+			<React.Fragment>
+				<ClickAwayListener
+					onClickAway={(event) => {
+						if ((event as KeyboardEvent).key === 'Escape') {
+							handleClickAway(event);
+						}
+					}}
+					bodyEventsToCapture={['keydown']}
+				>
+					<button onClick={handleClick}>Hello World</button>
+				</ClickAwayListener>
+				<input type="text" data-testid="input" />
+			</React.Fragment>
+		);
+		jest.runOnlyPendingTimers();
+
+		fireEvent.keyDown(getByTestId('input'), { key: 'Enter' });
+		expect(handleClickAway).toHaveBeenCalledTimes(0);
+		fireEvent.keyDown(getByTestId('input'), { key: 'Escape' });
+		expect(handleClickAway).toHaveBeenCalledTimes(1);
+	});
+
 	it('should work with function refs', () => {
 		const handleClickAway = jest.fn();
 		let buttonRef;

src/index.tsx

@@ -16,11 +16,12 @@ type TouchEvents = 'touchstart' | 'touchend';
 type Events = FocusEvent | MouseEvent | TouchEvent;
 
 interface Props extends HTMLAttributes<HTMLElement> {
-	onClickAway: (event: Events) => void;
+	onClickAway: (event: Event) => void;
 	focusEvent?: FocusEvents;
 	mouseEvent?: MouseEvents;
 	touchEvent?: TouchEvents;
 	children: ReactElement<any>;
+	bodyEventsToCapture?: Array<keyof DocumentEventMap>;
 }
 
 const eventTypeMapping = {
@@ -55,6 +56,7 @@ const ClickAwayListener: FunctionComponent<Props> = ({
 	focusEvent = 'focusin',
 	mouseEvent = 'click',
 	touchEvent = 'touchend',
+	bodyEventsToCapture,
 	...rest
 }) => {
 	const node = useRef<HTMLElement | null>(null);
@@ -102,7 +104,7 @@ const ClickAwayListener: FunctionComponent<Props> = ({
 	useEffect(() => {
 		const nodeDocument = node.current?.ownerDocument ?? document;
 
-		const handleEvents = (event: Events): void => {
+		const handleEvents: EventListener = (event) => {
 			if (!mountedRef.current) return;
 
 			if (
@@ -119,13 +121,21 @@ const ClickAwayListener: FunctionComponent<Props> = ({
 		nodeDocument.addEventListener(mouseEvent, handleEvents);
 		nodeDocument.addEventListener(touchEvent, handleEvents);
 		nodeDocument.addEventListener(focusEvent, handleEvents);
+		const customListeners = bodyEventsToCapture || [];
+		customListeners.forEach((eventType) => {
+			nodeDocument.addEventListener(eventType, handleEvents);
+		});
 
 		return () => {
 			nodeDocument.removeEventListener(mouseEvent, handleEvents);
 			nodeDocument.removeEventListener(touchEvent, handleEvents);
 			nodeDocument.removeEventListener(focusEvent, handleEvents);
+
+			customListeners.forEach((eventType) => {
+				nodeDocument.removeEventListener(eventType, handleEvents);
+			});
 		};
-	}, [focusEvent, mouseEvent, onClickAway, touchEvent]);
+	}, [focusEvent, mouseEvent, onClickAway, touchEvent, bodyEventsToCapture]);
 
 	const mappedMouseEvent = eventTypeMapping[mouseEvent];
 	const mappedTouchEvent = eventTypeMapping[touchEvent];