Add support for focus event to useOnClickOutside (Fixes: #522)

.all-contributorsrc

@@ -1719,8 +1719,16 @@
       "avatar_url": "https://avatars.githubusercontent.com/u/16747416?v=4",
       "profile": "https://github.com/isumix",
       "contributions": ["bug"]
+    },
+    {
+      "login": "pookmish",
+      "name": "pookmish",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7185045?v=4",
+      "profile": "https://github.com/pookmish",
+      "contributions": ["ideas"]
     }
   ],
   "contributorsPerLine": 7,
   "commitType": "docs"
 }
+

.changeset/five-impalas-suffer.md

@@ -0,0 +1,5 @@
+---
+"usehooks-ts": patch
+---
+
+Add support for focus event to `useOnClickOutside` (Fixes: #522)

.github/CONTRIBUTING.md

@@ -418,6 +418,7 @@ Big thanks go to all our contributors! [[Become a contributor](https://github.co
       <td align="center" valign="top" width="14.28%"><a href="http://jcbhmr.me"><img src="https://avatars.githubusercontent.com/u/61068799?v=4?s=64" width="64px;" alt="Jacob Hummer"/><br /><sub><b>Jacob Hummer</b></sub></a><br /><a href="#ideas-jcbhmr" title="Ideas, Planning, & Feedback">🤔</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/k-melnychuk"><img src="https://avatars.githubusercontent.com/u/22131019?v=4?s=64" width="64px;" alt="Kyrylo Melnychuk"/><br /><sub><b>Kyrylo Melnychuk</b></sub></a><br /><a href="#content-k-melnychuk" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/isumix"><img src="https://avatars.githubusercontent.com/u/16747416?v=4?s=64" width="64px;" alt="Igor Sukharev"/><br /><sub><b>Igor Sukharev</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Aisumix" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/pookmish"><img src="https://avatars.githubusercontent.com/u/7185045?v=4?s=64" width="64px;" alt="pookmish"/><br /><sub><b>pookmish</b></sub></a><br /><a href="#ideas-pookmish" title="Ideas, Planning, & Feedback">🤔</a></td>
     </tr>
   </tbody>
 </table>

README.md

@@ -17,7 +17,8 @@
 [![License](https://badgen.net/badge/License/MIT/blue)](https://github.com/juliencrn/usehooks-ts/blob/master/LICENSE)
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/usehooks-ts)
 ![npm](https://img.shields.io/npm/v/usehooks-ts)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-244-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-245-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <br />
@@ -430,6 +431,7 @@ Big thanks go to all our contributors! [[Become a contributor](https://github.co
       <td align="center" valign="top" width="14.28%"><a href="http://jcbhmr.me"><img src="https://avatars.githubusercontent.com/u/61068799?v=4?s=64" width="64px;" alt="Jacob Hummer"/><br /><sub><b>Jacob Hummer</b></sub></a><br /><a href="#ideas-jcbhmr" title="Ideas, Planning, & Feedback">🤔</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/k-melnychuk"><img src="https://avatars.githubusercontent.com/u/22131019?v=4?s=64" width="64px;" alt="Kyrylo Melnychuk"/><br /><sub><b>Kyrylo Melnychuk</b></sub></a><br /><a href="#content-k-melnychuk" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/isumix"><img src="https://avatars.githubusercontent.com/u/16747416?v=4?s=64" width="64px;" alt="Igor Sukharev"/><br /><sub><b>Igor Sukharev</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Aisumix" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/pookmish"><img src="https://avatars.githubusercontent.com/u/7185045?v=4?s=64" width="64px;" alt="pookmish"/><br /><sub><b>pookmish</b></sub></a><br /><a href="#ideas-pookmish" title="Ideas, Planning, & Feedback">🤔</a></td>
     </tr>
   </tbody>
 </table>

packages/usehooks-ts/README.md

@@ -17,7 +17,8 @@
 [![License](https://badgen.net/badge/License/MIT/blue)](https://github.com/juliencrn/usehooks-ts/blob/master/LICENSE)
 ![npm bundle size](https://img.shields.io/bundlephobia/minzip/usehooks-ts)
 ![npm](https://img.shields.io/npm/v/usehooks-ts)<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-244-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-245-orange.svg?style=flat-square)](#contributors-)
+
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <br />
@@ -430,6 +431,7 @@ Big thanks go to all our contributors! [[Become a contributor](https://github.co
       <td align="center" valign="top" width="14.28%"><a href="http://jcbhmr.me"><img src="https://avatars.githubusercontent.com/u/61068799?v=4?s=64" width="64px;" alt="Jacob Hummer"/><br /><sub><b>Jacob Hummer</b></sub></a><br /><a href="#ideas-jcbhmr" title="Ideas, Planning, & Feedback">🤔</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/k-melnychuk"><img src="https://avatars.githubusercontent.com/u/22131019?v=4?s=64" width="64px;" alt="Kyrylo Melnychuk"/><br /><sub><b>Kyrylo Melnychuk</b></sub></a><br /><a href="#content-k-melnychuk" title="Content">🖋</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/isumix"><img src="https://avatars.githubusercontent.com/u/16747416?v=4?s=64" width="64px;" alt="Igor Sukharev"/><br /><sub><b>Igor Sukharev</b></sub></a><br /><a href="https://github.com/juliencrn/usehooks-ts/issues?q=author%3Aisumix" title="Bug reports">🐛</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/pookmish"><img src="https://avatars.githubusercontent.com/u/7185045?v=4?s=64" width="64px;" alt="pookmish"/><br /><sub><b>pookmish</b></sub></a><br /><a href="#ideas-pookmish" title="Ideas, Planning, & Feedback">🤔</a></td>
     </tr>
   </tbody>
 </table>

packages/usehooks-ts/src/useOnClickOutside/useOnClickOutside.ts

@@ -3,13 +3,19 @@ import type { RefObject } from 'react'
 import { useEventListener } from '../useEventListener'
 
 /** Supported event types. */
-type EventType = 'mousedown' | 'mouseup' | 'touchstart' | 'touchend'
+type EventType =
+  | 'mousedown'
+  | 'mouseup'
+  | 'touchstart'
+  | 'touchend'
+  | 'focusin'
+  | 'focusout'
 
 /**
  * Custom hook that handles clicks outside a specified element.
  * @template T - The type of the element's reference.
  * @param {RefObject<T> | RefObject<T>[]} ref - The React ref object(s) representing the element(s) to watch for outside clicks.
- * @param {(event: MouseEvent | TouchEvent) => void} handler - The callback function to be executed when a click outside the element occurs.
+ * @param {(event: MouseEvent | TouchEvent | FocusEvent) => void} handler - The callback function to be executed when a click outside the element occurs.
  * @param {EventType} [eventType] - The mouse event type to listen for (optional, default is 'mousedown').
  * @returns {void}
  * @public
@@ -24,7 +30,7 @@ type EventType = 'mousedown' | 'mouseup' | 'touchstart' | 'touchend'
  */
 export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
   ref: RefObject<T> | RefObject<T>[],
-  handler: (event: MouseEvent | TouchEvent) => void,
+  handler: (event: MouseEvent | TouchEvent | FocusEvent) => void,
   eventType: EventType = 'mousedown',
 ): void {
   useEventListener(eventType, event => {