[@mantine/hooks] use-hotkeys: Fix + sign not being supported (synta…

…x: `shift+[plus]`) (#7123)
mantinedev · Nov 16, 2024 · 0cdab90 · 0cdab90
1 parent bd40d73
commit 0cdab90
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 1 deletion.
diff --git a/apps/mantine.dev/src/pages/hooks/use-hotkeys.mdx b/apps/mantine.dev/src/pages/hooks/use-hotkeys.mdx
@@ -74,6 +74,7 @@ document.body.addEventListener(
 - `ctrl+shift+X` – handles multiple modifiers
 - `alt + shift + L` – you can use whitespace inside hotkey
 - `ArrowLeft` – you can use special keys using [this format](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values)
+- `shift + [plus]` – you can use `[plus]` to detect `+` key
 
 ## Types
 

diff --git a/packages/@mantine/hooks/src/use-hotkeys/parse-hotkey.test.ts b/packages/@mantine/hooks/src/use-hotkeys/parse-hotkey.test.ts
@@ -79,4 +79,24 @@ describe('@mantine/hooks/use-hot-key/parse-hotkey', () => {
       )
     ).toBe(false);
   });
+
+  it('parses [plus] key correctly', () => {
+    expect(parseHotkey('ctrl+[plus]')).toMatchObject({
+      alt: false,
+      ctrl: true,
+      meta: false,
+      mod: false,
+      shift: false,
+      key: '+',
+    });
+
+    expect(parseHotkey('ctrl+[plus]+shift+alt+[plus]')).toMatchObject({
+      alt: true,
+      ctrl: true,
+      meta: false,
+      mod: false,
+      shift: true,
+      key: '+',
+    });
+  });
 });
diff --git a/packages/@mantine/hooks/src/use-hotkeys/parse-hotkey.ts b/packages/@mantine/hooks/src/use-hotkeys/parse-hotkey.ts
@@ -4,6 +4,7 @@ export type KeyboardModifiers = {
   meta: boolean;
   mod: boolean;
   shift: boolean;
+  plus: boolean;
 };
 
 export type Hotkey = KeyboardModifiers & {
@@ -24,6 +25,7 @@ export function parseHotkey(hotkey: string): Hotkey {
     meta: keys.includes('meta'),
     mod: keys.includes('mod'),
     shift: keys.includes('shift'),
+    plus: keys.includes('[plus]'),
   };
 
   const reservedKeys = ['alt', 'ctrl', 'meta', 'shift', 'mod'];
@@ -32,7 +34,7 @@ export function parseHotkey(hotkey: string): Hotkey {
 
   return {
     ...modifiers,
-    key: freeKey,
+    key: freeKey === '[plus]' ? '+' : freeKey,
   };
 }
 

diff --git a/packages/@mantine/hooks/src/use-hotkeys/use-hotkeys.test.tsx b/packages/@mantine/hooks/src/use-hotkeys/use-hotkeys.test.tsx
@@ -27,4 +27,11 @@ describe('@mantine/hooks/use-hotkey', () => {
     dispatchEvent({ metaKey: true, altKey: true, key: 'P' });
     expect(handler).not.toHaveBeenCalled();
   });
+
+  it('correctly handles [plus] key', () => {
+    const handler = jest.fn();
+    renderHook(() => useHotkeys([['shift+[plus]', handler]]));
+    dispatchEvent({ shiftKey: true, key: '+' });
+    expect(handler).toHaveBeenCalled();
+  });
 });