From 882aebbff76f2d2c5c441b1279c428ff5a2b9486 Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Sat, 13 Aug 2022 10:48:26 +0300
Subject: [PATCH] [@mantine/hooks] use-hotkeys: Add option to use
 getHotkeyHandler with .addEventListener events (#1952)

---
 docs/src/docs/hooks/use-hotkeys.mdx            | 18 +++++++++++++++++-
 .../src/use-hotkeys/parse-hotkey.ts            |  9 +++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/docs/src/docs/hooks/use-hotkeys.mdx b/docs/src/docs/hooks/use-hotkeys.mdx
index 8044d5ec8d7..61d378a8e3f 100644
--- a/docs/src/docs/hooks/use-hotkeys.mdx
+++ b/docs/src/docs/hooks/use-hotkeys.mdx
@@ -44,6 +44,20 @@ which should be used with `onKeyDown`:
 
 <Demo data={HooksDemos.useHotkeysDemo} />
 
+With `getHotkeyHandler` you can also add events to any dom node using `.addEventListener`:
+
+```tsx
+import { getHotkeyHandler } from '@mantine/hooks';
+
+document.body.addEventListener(
+  'keydown',
+  getHotkeyHandler([
+    ['mod+Enter', () => console.log('Submit')],
+    ['mod+S', () => console.log('Save')],
+  ])
+);
+```
+
 ## Supported formats
 
 - `mod+S` – detects `⌘+S` on macOS and `Ctrl+S` on Windows
@@ -54,5 +68,7 @@ which should be used with `onKeyDown`:
 ## Definition
 
 ```tsx
-function useHotkeys(hotKeyItem: Array<[hotkey: string, handler: (event: KeyboardEvent) => void]>): void;
+function useHotkeys(
+  hotKeyItem: Array<[hotkey: string, handler: (event: KeyboardEvent) => void]>
+): void;
 ```
diff --git a/src/mantine-hooks/src/use-hotkeys/parse-hotkey.ts b/src/mantine-hooks/src/use-hotkeys/parse-hotkey.ts
index d787445c9de..8fe5d67aee3 100644
--- a/src/mantine-hooks/src/use-hotkeys/parse-hotkey.ts
+++ b/src/mantine-hooks/src/use-hotkeys/parse-hotkey.ts
@@ -75,14 +75,15 @@ export function getHotkeyMatcher(hotkey: string): CheckHotkeyMatch {
   return (event) => isExactHotkey(parseHotkey(hotkey), event);
 }
 
-type HotkeyItem = [string, (event: React.KeyboardEvent<HTMLElement>) => void];
+type HotkeyItem = [string, (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => void];
 
 export function getHotkeyHandler(hotkeys: HotkeyItem[]) {
-  return (event: React.KeyboardEvent<HTMLElement>) => {
+  return (event: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => {
+    const _event = 'nativeEvent' in event ? event.nativeEvent : event;
     hotkeys.forEach(([hotkey, handler]) => {
-      if (getHotkeyMatcher(hotkey)(event.nativeEvent)) {
+      if (getHotkeyMatcher(hotkey)(_event)) {
         event.preventDefault();
-        handler(event);
+        handler(_event);
       }
     });
   };