react-hotkeys-hook 4.0.0-1 → 4.0.0-4

package/dist/useDeepEqualMemo.d.ts

@@ -0,0 +1 @@
+export default function useDeepEqualMemo<T>(value: T): T | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hotkeys-hook",
-  "version": "4.0.0-1",
+  "version": "4.0.0-4",
   "repository": "https://JohannesKlauss@github.com/JohannesKlauss/react-keymap-hook.git",
   "homepage": "https://johannesklauss.github.io/react-hotkeys-hook/",
   "author": "Johannes Klauss",
@@ -68,8 +68,11 @@
     "tslib": "2.4.0",
     "typescript": "4.7.4"
   },
+  "dependencies": {
+    "lodash": "4.17.11"
+  },
   "peerDependencies": {
-    "lodash": ">=4.17.21",
+    "lodash": ">=4.17.0",
     "react": ">=16.8.1",
     "react-dom": ">=16.8.1"
   }

package/src/HotkeysProvider.tsx

@@ -2,7 +2,7 @@ import { Hotkey } from './types'
 import { createContext, ReactNode, useMemo, useState, useContext } from 'react'
 import BoundHotkeysProxyProviderProvider from './BoundHotkeysProxyProvider'
 
-type HotkeysContextType = {
+export type HotkeysContextType = {
   hotkeys: ReadonlyArray<Hotkey>
   activeScopes: string[]
   toggleScope: (scope: string) => void
@@ -13,7 +13,7 @@ type HotkeysContextType = {
 // The context is only needed for special features like global scoping, so we use a graceful default fallback
 const HotkeysContext = createContext<HotkeysContextType>({
   hotkeys: [],
-  activeScopes: [], // This array has to be empty to check if the provider is set or not
+  activeScopes: [], // This array has to be empty instead of containing '*' as default, to check if the provider is set or not
   toggleScope: () => {},
   activateScope: () => {},
   deactivateScope: () => {},

package/src/parseHotkeys.ts

@@ -14,7 +14,8 @@ export function parseHotkey(hotkey: string, combinationKey: string = '+'): Hotke
   const keys = hotkey
     .toLocaleLowerCase()
     .split(combinationKey)
-    .map((k) => k.trim())
+    .map(k => k.trim())
+    .map(k => k === 'esc' ? 'escape' : k)
 
   const modifiers: KeyboardModifiers = {
     alt: keys.includes('alt'),

package/src/types.ts

@@ -34,7 +34,7 @@ export type Options = {
   scopes?: Scopes // Scope
   keyup?: boolean // Trigger on keyup event? (Default: undefined)
   keydown?: boolean // Trigger on keydown event? (Default: true)
-  preventDefault?: Trigger // Prevent default browser behavior? (Default: true)
+  preventDefault?: Trigger // Prevent default browser behavior? (Default: false)
   description?: string // Use this option to describe what the hotkey does. (Default: undefined)
 }
 

package/src/useDeepEqualMemo.ts

@@ -0,0 +1,12 @@
+import { useRef } from 'react'
+import { isEqual } from 'lodash'
+
+export default function useDeepEqualMemo<T>(value: T) {
+  const ref = useRef<T | undefined>(undefined)
+
+  if (!isEqual(ref.current, value)) {
+    ref.current = value
+  }
+
+  return ref.current
+}

package/src/useHotkeys.ts

@@ -11,6 +11,13 @@ import {
 } from './validators'
 import { useHotkeysContext } from './HotkeysProvider'
 import { useBoundHotkeysProxy } from './BoundHotkeysProxyProvider'
+import useDeepEqualMemo from './useDeepEqualMemo'
+
+const stopPropagation = (e: KeyboardEvent): void => {
+  e.stopPropagation()
+  e.preventDefault()
+  e.stopImmediatePropagation()
+}
 
 export default function useHotkeys<T extends HTMLElement>(
   keys: Keys,
@@ -25,35 +32,43 @@ export default function useHotkeys<T extends HTMLElement>(
   const _deps = options instanceof Array ? options : dependencies instanceof Array ? dependencies : []
 
   const cb = useCallback(callback, [..._deps])
-  const ctx = useHotkeysContext()
+  const memoisedOptions = useDeepEqualMemo(_options)
 
+  const { activeScopes } = useHotkeysContext()
   const proxy = useBoundHotkeysProxy()
 
   useLayoutEffect(() => {
-    if (_options?.enabled === false || !isScopeActive(ctx.activeScopes, _options?.scopes)) {
+    if (memoisedOptions?.enabled === false || !isScopeActive(activeScopes, memoisedOptions?.scopes)) {
       return
     }
 
     const listener = (e: KeyboardEvent) => {
-      if (isKeyboardEventTriggeredByInput(e) && !isHotkeyEnabledOnTag(e, _options?.enableOnFormTags)) {
+      if (isKeyboardEventTriggeredByInput(e) && !isHotkeyEnabledOnTag(e, memoisedOptions?.enableOnFormTags)) {
         return
       }
 
+      // TODO: SINCE THE EVENT IS NOW ATTACHED TO THE REF, THE ACTIVE ELEMENT CAN NEVER BE INSIDE THE REF. THE HOTKEY ONLY TRIGGERS IF THE
+      // REF IS THE ACTIVE ELEMENT. THIS IS A PROBLEM SINCE FOCUSED SUB COMPONENTS WONT TRIGGER THE HOTKEY.
+
       if (ref.current !== null && document.activeElement !== ref.current && !ref.current.contains(document.activeElement)) {
+        stopPropagation(e)
+
         return
       }
 
-      if (((e.target as HTMLElement)?.isContentEditable && !_options?.enableOnContentEditable)) {
+      if (((e.target as HTMLElement)?.isContentEditable && !memoisedOptions?.enableOnContentEditable)) {
         return
       }
 
-      parseKeysHookInput(keys, _options?.splitKey).forEach((key) => {
-        const hotkey = parseHotkey(key, _options?.combinationKey)
+      parseKeysHookInput(keys, memoisedOptions?.splitKey).forEach((key) => {
+        const hotkey = parseHotkey(key, memoisedOptions?.combinationKey)
 
         if (isHotkeyMatchingKeyboardEvent(e, hotkey, pressedDownKeys) || hotkey.keys?.includes('*')) {
-          maybePreventDefault(e, hotkey, _options?.preventDefault)
+          maybePreventDefault(e, hotkey, memoisedOptions?.preventDefault)
+
+          if (!isHotkeyEnabled(e, hotkey, memoisedOptions?.enabled)) {
+            stopPropagation(e)
 
-          if (!isHotkeyEnabled(e, hotkey, _options?.enabled)) {
             return
           }
 
@@ -65,15 +80,20 @@ export default function useHotkeys<T extends HTMLElement>(
     const handleKeyDown = (event: KeyboardEvent) => {
       pressedDownKeys.add(event.key.toLowerCase())
 
-      if ((_options?.keydown === undefined && _options?.keyup !== true) || _options?.keydown) {
+      if ((memoisedOptions?.keydown === undefined && memoisedOptions?.keyup !== true) || memoisedOptions?.keydown) {
         listener(event)
       }
     }
 
     const handleKeyUp = (event: KeyboardEvent) => {
-      pressedDownKeys.delete(event.key.toLowerCase())
+      if (event.key.toLowerCase() !== 'meta') {
+        pressedDownKeys.delete(event.key.toLowerCase())
+      } else {
+        // On macOS pressing down the meta key prevents triggering the keyup event for any other key https://stackoverflow.com/a/57153300/735226.
+        pressedDownKeys.clear()
+      }
 
-      if (_options?.keyup) {
+      if (memoisedOptions?.keyup) {
         listener(event)
       }
     }
@@ -84,7 +104,7 @@ export default function useHotkeys<T extends HTMLElement>(
     (ref.current || document).addEventListener('keydown', handleKeyDown)
 
     if (proxy) {
-      parseKeysHookInput(keys, _options?.splitKey).forEach((key) => proxy.addHotkey(parseHotkey(key, _options?.combinationKey)))
+      parseKeysHookInput(keys, memoisedOptions?.splitKey).forEach((key) => proxy.addHotkey(parseHotkey(key, memoisedOptions?.combinationKey)))
     }
 
     return () => {
@@ -94,10 +114,10 @@ export default function useHotkeys<T extends HTMLElement>(
       (ref.current || document).removeEventListener('keydown', handleKeyDown)
 
       if (proxy) {
-        parseKeysHookInput(keys, _options?.splitKey).forEach((key) => proxy.removeHotkey(parseHotkey(key, _options?.combinationKey)))
+        parseKeysHookInput(keys, memoisedOptions?.splitKey).forEach((key) => proxy.removeHotkey(parseHotkey(key, memoisedOptions?.combinationKey)))
       }
     }
-  }, [keys, cb, _options])
+  }, [keys, cb, memoisedOptions, activeScopes])
 
   return ref
 }