Migration and Refactors (#107)

* refactor: modernise build tooling, improve types, and add edge-case tests

- Make onClickAway memoisation-safe using a ref pattern
- Wrap handleBubbledEvents in useCallback for stable child props
- Remove HTMLAttributes extension from Props interface
- Tighten onClickAway event type to FocusEvent | MouseEvent | TouchEvent
- Add package.json exports field for modern ESM/CJS resolution
- Add engines field (node >= 18) and fix prepublishOnly lifecycle hook
- Migrate from Rollup 2 to Rollup 4 with official plugins
- Replace ghooks with husky + lint-staged
- Remove unmaintained dependencies (rimraf, npm-run-all, coveralls)
- Update documentation links from reactjs.org to react.dev
- Add React 19 deprecation note for React.Children.only
- Add tests for callback identity change, nested listeners, and unmount safety

* ci: bump Node to 22 and actions to v4 for semantic-release@25 compat

* ci: consolidate publish workflows into one

* feat: rename bodyEventsToCapture to extraEvents

* ci: add missing OIDC permissions for semantic-release npm publishing

* ci: fetch all history for semantic-release

* fix: update package lock

* chore: add .npmignore to exclude .github folder from npm package

* fix: regenerate package-lock.json to include optional rollup native dependencies

Author: ooade

.github/workflows/build-test-pr.yml

@@ -17,8 +17,8 @@ jobs:
   test_pull_request:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'

.github/workflows/manual-publish-on-npm.yml

@@ -6,13 +6,19 @@ on:
     paths:
       - 'src/**'
       - package-lock.json
+  workflow_dispatch:
 
 jobs:
   release:
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'

.github/workflows/publish-on-npm.yml

@@ -11,8 +11,8 @@ jobs:
   report_test_coverage:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'

.github/workflows/report-coverage.yml

@@ -8,8 +8,8 @@ jobs:
   test_push:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version-file: '.nvmrc'
           cache: 'npm'

.github/workflows/test-main.yml

@@ -0,0 +1 @@
+.github/

.npmignore

@@ -1 +1 @@
-20.11.0
+22

.nvmrc

@@ -27,7 +27,7 @@ yarn add react-click-away-listener
 
 - It's quite **small** in size! Just [![Bundlephobia](https://img.shields.io/bundlephobia/min/react-click-away-listener.svg?style=flat-square&label 'Bundle size (minified)')](https://bundlephobia.com/result?p=react-click-away-listener) minified, or [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/react-click-away-listener.svg?style=flat-square&label 'Bundle size (minified+gzipped)')](https://bundlephobia.com/result?p=react-click-away-listener) minified & gzipp’d.
 - It's built with **TypeScript**.
-- It works with [React Portals](https://reactjs.org/docs/portals.html) ([v2.0.0](https://github.com/ooade/react-click-away-listener/releases/tag/v2.0.0) onwards).
+- It works with [React Portals](https://react.dev/reference/react-dom/createPortal) ([v2.0.0](https://github.com/ooade/react-click-away-listener/releases/tag/v2.0.0) onwards).
 - It supports **mouse**, **touch** and **focus** events.
 
 ## Usage
@@ -55,7 +55,9 @@ const App = () => {
 
 ### Caveats
 
-[v2.0.0](https://github.com/ooade/react-click-away-listener/releases/tag/v2.0.0) has breaking changes which uses the [`React.Children.only`](https://reactjs.org/docs/react-api.html#reactchildrenonly) API.
+[v2.0.0](https://github.com/ooade/react-click-away-listener/releases/tag/v2.0.0) has breaking changes which uses the [`React.Children.only`](https://react.dev/reference/react/Children#children-only) API.
+
+> **Note:** `React.Children.only` is considered a legacy API as of React 19. See the [React docs](https://react.dev/reference/react/Children#alternatives) for details.
 
 Thus, the following caveats apply for the `children` of the `<ClickAwayListener>` component:
 
@@ -70,7 +72,7 @@ Error: Element type is invalid: expected a string (for built-in components) or a
 Check the render method of `ClickAwayListener`.
 ```
 
-If you have multiple child components to pass, you can simply wrap them around a [React Fragment](https://reactjs.org/docs/fragments.html) like so:
+If you have multiple child components to pass, you can simply wrap them around a [React Fragment](https://react.dev/reference/react/Fragment) like so:
 
 ```jsx
 // Assume the `handleClickAway` function is defined.
@@ -83,7 +85,7 @@ If you have multiple child components to pass, you can simply wrap them around a
 </ClickAwayListener>
 ```
 
-Or if you only have text nodes, you can also wrap them in a [React Fragment](https://reactjs.org/docs/fragments.html) like so:
+Or if you only have text nodes, you can also wrap them in a [React Fragment](https://react.dev/reference/react/Fragment) like so:
 
 ```jsx
 // Assume the `handleClickAway` function is defined.
@@ -100,10 +102,11 @@ Or if you only have text nodes, you can also wrap them in a [React Fragment](htt
 | mouseEvent  | 'click' \|<br/>'mousedown' \|<br/>'mouseup' | 'click'    | The mouse event type that gets fired on ClickAway         |
 | touchEvent  | 'touchstart' \|<br/>'touchend'              | 'touchend' | The touch event type that gets fired on ClickAway         |
 | focusEvent  | 'focusin' \|<br/>'focusout'                 | 'focusin'  | The focus event type that gets fired on ClickAway         |
+| extraEvents | Array&lt;keyof DocumentEventMap&gt;           |            | Extra events to listen for (e.g. `keydown`)               |
 
 ## Examples
 
-- [A simple menu built with React Hooks](https://codesandbox.io/s/52384lyo8p)
+- [A simple menu built with React Hooks](https://codesandbox.io/s/52384lyo8p) _(Note: this example may use an older version of React)_
 
 ## LICENSE
 

README.md

@@ -237,6 +237,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 unknown as KeyboardEvent).key === 'Escape') {
+							handleClickAway(event);
+						}
+					}}
+					extraEvents={['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;
@@ -312,4 +339,102 @@ describe('ClickAway Listener', () => {
 		fireEvent.click(getByText(/A button/i));
 		expect(handleClickAway).toHaveBeenCalledTimes(1);
 	});
+
+	it('should fire the latest onClickAway when the callback changes mid-lifecycle', () => {
+		const firstHandler = jest.fn();
+		const secondHandler = jest.fn();
+
+		const App = () => {
+			const [handler, setHandler] = React.useState(() => firstHandler);
+
+			return (
+				<React.Fragment>
+					<ClickAwayListener onClickAway={handler}>
+						<div>Inside</div>
+					</ClickAwayListener>
+					<button onClick={() => setHandler(() => secondHandler)}>
+						Change handler
+					</button>
+					<p>Outside text</p>
+				</React.Fragment>
+			);
+		};
+
+		const { getByText } = render(<App />);
+		jest.runOnlyPendingTimers();
+
+		fireEvent.click(getByText(/Outside text/i));
+		expect(firstHandler).toHaveBeenCalledTimes(1);
+		expect(secondHandler).toHaveBeenCalledTimes(0);
+
+		fireEvent.click(getByText(/Change handler/i));
+		fireEvent.click(getByText(/Outside text/i));
+		// firstHandler was called twice total: once for "Outside text" and once for "Change handler" (also outside)
+		expect(firstHandler).toHaveBeenCalledTimes(2);
+		expect(secondHandler).toHaveBeenCalledTimes(1);
+	});
+
+	it('should only fire the correct handler with nested ClickAwayListeners', () => {
+		const outerHandler = jest.fn();
+		const innerHandler = jest.fn();
+
+		const { getByText } = render(
+			<React.Fragment>
+				<ClickAwayListener onClickAway={outerHandler}>
+					<div>
+						Outer
+						<ClickAwayListener onClickAway={innerHandler}>
+							<div>Inner</div>
+						</ClickAwayListener>
+					</div>
+				</ClickAwayListener>
+				<button>Fully outside</button>
+			</React.Fragment>
+		);
+		jest.runOnlyPendingTimers();
+
+		// Clicking inside inner should not fire inner's handler
+		fireEvent.click(getByText(/Inner/i));
+		expect(innerHandler).toHaveBeenCalledTimes(0);
+		expect(outerHandler).toHaveBeenCalledTimes(0);
+
+		// Clicking fully outside should fire both handlers
+		fireEvent.click(getByText(/Fully outside/i));
+		expect(outerHandler).toHaveBeenCalledTimes(1);
+		expect(innerHandler).toHaveBeenCalledTimes(1);
+	});
+
+	it('should not throw when the component unmounts during an event', () => {
+		const handleClickAway = jest.fn();
+
+		const App = () => {
+			const [show, setShow] = React.useState(true);
+
+			return (
+				<React.Fragment>
+					{show && (
+						<ClickAwayListener onClickAway={handleClickAway}>
+							<div>Inside</div>
+						</ClickAwayListener>
+					)}
+					<button onClick={() => setShow(false)}>Unmount</button>
+				</React.Fragment>
+			);
+		};
+
+		const { getByText } = render(<App />);
+		jest.runOnlyPendingTimers();
+
+		// Unmount the ClickAwayListener
+		fireEvent.click(getByText(/Unmount/i));
+
+		// Clicking after unmount should not throw
+		expect(() => {
+			fireEvent.click(document.body);
+		}).not.toThrow();
+
+		// The handler should not have been called after unmount
+		// It was called once when pressing "Unmount" (which is outside)
+		expect(handleClickAway).toHaveBeenCalledTimes(1);
+	});
 });