react-hotkeys-hook 4.0.0-2 → 4.0.0-3

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-2",
+  "version": "4.0.0-3",
   "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

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,7 @@ import {
 } from './validators'
 import { useHotkeysContext } from './HotkeysProvider'
 import { useBoundHotkeysProxy } from './BoundHotkeysProxyProvider'
+import useDeepEqualMemo from './useDeepEqualMemo'
 
 const stopPropagation = (e: KeyboardEvent): void => {
   e.stopPropagation()
@@ -31,37 +32,41 @@ 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, _options?.enabled)) {
+          if (!isHotkeyEnabled(e, hotkey, memoisedOptions?.enabled)) {
             stopPropagation(e)
 
             return
@@ -75,7 +80,7 @@ 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)
       }
     }
@@ -83,7 +88,7 @@ export default function useHotkeys<T extends HTMLElement>(
     const handleKeyUp = (event: KeyboardEvent) => {
       pressedDownKeys.delete(event.key.toLowerCase())
 
-      if (_options?.keyup) {
+      if (memoisedOptions?.keyup) {
         listener(event)
       }
     }
@@ -94,7 +99,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 () => {
@@ -104,10 +109,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
 }