react-hotkeys-hook 4.3.4 → 4.3.6-0

package/src/parseHotkeys.ts

@@ -12,14 +12,16 @@ const mappedKeys: Record<string, string> = {
   '`': 'backquote',
   '#': 'backslash',
   '+': 'bracketright',
-  'ShiftLeft': 'shift',
-  'ShiftRight': 'shift',
-  'AltLeft': 'alt',
-  'AltRight': 'alt',
-  'MetaLeft': 'meta',
-  'MetaRight': 'meta',
-  'ControlLeft': 'ctrl',
-  'ControlRight': 'ctrl',
+  ShiftLeft: 'shift',
+  ShiftRight: 'shift',
+  AltLeft: 'alt',
+  AltRight: 'alt',
+  MetaLeft: 'meta',
+  MetaRight: 'meta',
+  OSLeft: 'meta',
+  OSRight: 'meta',
+  ControlLeft: 'ctrl',
+  ControlRight: 'ctrl',
 }
 
 export function mapKey(key: string): string {
@@ -36,7 +38,7 @@ export function isHotkeyModifier(key: string) {
   return reservedModifierKeywords.includes(key)
 }
 
-export function parseKeysHookInput(keys: Keys, splitKey: string = ','): string[] {
+export function parseKeysHookInput(keys: Keys, splitKey = ','): string[] {
   if (typeof keys === 'string') {
     return keys.split(splitKey)
   }
@@ -44,11 +46,11 @@ export function parseKeysHookInput(keys: Keys, splitKey: string = ','): string[]
   return keys
 }
 
-export function parseHotkey(hotkey: string, combinationKey: string = '+'): Hotkey {
+export function parseHotkey(hotkey: string, combinationKey = '+'): Hotkey {
   const keys = hotkey
     .toLocaleLowerCase()
     .split(combinationKey)
-    .map(k => mapKey(k))
+    .map((k) => mapKey(k))
 
   const modifiers: KeyboardModifiers = {
     alt: keys.includes('alt'),

package/src/types.ts

@@ -19,7 +19,7 @@ export type Hotkey = KeyboardModifiers & {
   scopes?: Scopes
 }
 
-export type HotkeysEvent = Hotkey & {}
+export type HotkeysEvent = Hotkey
 
 export type HotkeyCallback = (keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => void
 

package/src/useHotkeys.ts

@@ -26,15 +26,28 @@ export default function useHotkeys<T extends HTMLElement>(
   keys: Keys,
   callback: HotkeyCallback,
   options?: OptionsOrDependencyArray,
-  dependencies?: OptionsOrDependencyArray,
+  dependencies?: OptionsOrDependencyArray
 ) {
   const ref = useRef<RefType<T>>(null)
   const hasTriggeredRef = useRef(false)
 
-  const _options: Options | undefined = !(options instanceof Array) ? (options as Options) : !(dependencies instanceof Array) ? (dependencies as Options) : undefined
-  const _deps: DependencyList = options instanceof Array ? options : dependencies instanceof Array ? dependencies : []
+  const _options: Options | undefined = !(options instanceof Array)
+    ? (options as Options)
+    : !(dependencies instanceof Array)
+    ? (dependencies as Options)
+    : undefined
+  const _deps: DependencyList | undefined =
+    options instanceof Array ? options : dependencies instanceof Array ? dependencies : undefined
+
+  const memoisedCB = useCallback(callback, _deps ?? [])
+  const cbRef = useRef<HotkeyCallback>(memoisedCB)
+
+  if (_deps) {
+    cbRef.current = memoisedCB
+  } else {
+    cbRef.current = callback
+  }
 
-  const cb = useCallback(callback, [..._deps])
   const memoisedOptions = useDeepEqualMemo(_options)
 
   const { enabledScopes } = useHotkeysContext()
@@ -45,20 +58,24 @@ export default function useHotkeys<T extends HTMLElement>(
       return
     }
 
-    const listener = (e: KeyboardEvent, isKeyUp: boolean = false) => {
+    const listener = (e: KeyboardEvent, isKeyUp = false) => {
       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 WON'T TRIGGER THE HOTKEY.
-      if (ref.current !== null && document.activeElement !== ref.current && !ref.current.contains(document.activeElement)) {
+      if (
+        ref.current !== null &&
+        document.activeElement !== ref.current &&
+        !ref.current.contains(document.activeElement)
+      ) {
         stopPropagation(e)
 
         return
       }
 
-      if (((e.target as HTMLElement)?.isContentEditable && !memoisedOptions?.enableOnContentEditable)) {
+      if ((e.target as HTMLElement)?.isContentEditable && !memoisedOptions?.enableOnContentEditable) {
         return
       }
 
@@ -79,7 +96,7 @@ export default function useHotkeys<T extends HTMLElement>(
           }
 
           // Execute the user callback for that hotkey
-          cb(e, hotkey)
+          cbRef.current(e, hotkey)
 
           if (!isKeyUp) {
             hasTriggeredRef.current = true
@@ -116,26 +133,32 @@ export default function useHotkeys<T extends HTMLElement>(
       }
     }
 
+    const domNode = ref.current || _options?.document || document
+
     // @ts-ignore
-    (ref.current || _options?.document || document).addEventListener('keyup', handleKeyUp);
+    domNode.addEventListener('keyup', handleKeyUp)
     // @ts-ignore
-    (ref.current || _options?.document || document).addEventListener('keydown', handleKeyDown)
+    domNode.addEventListener('keydown', handleKeyDown)
 
     if (proxy) {
-      parseKeysHookInput(keys, memoisedOptions?.splitKey).forEach((key) => proxy.addHotkey(parseHotkey(key, memoisedOptions?.combinationKey)))
+      parseKeysHookInput(keys, memoisedOptions?.splitKey).forEach((key) =>
+        proxy.addHotkey(parseHotkey(key, memoisedOptions?.combinationKey))
+      )
     }
 
     return () => {
       // @ts-ignore
-      (ref.current || _options?.document || document).removeEventListener('keyup', handleKeyUp);
+      domNode.removeEventListener('keyup', handleKeyUp)
       // @ts-ignore
-      (ref.current || _options?.document || document).removeEventListener('keydown', handleKeyDown)
+      domNode.removeEventListener('keydown', handleKeyDown)
 
       if (proxy) {
-        parseKeysHookInput(keys, memoisedOptions?.splitKey).forEach((key) => proxy.removeHotkey(parseHotkey(key, memoisedOptions?.combinationKey)))
+        parseKeysHookInput(keys, memoisedOptions?.splitKey).forEach((key) =>
+          proxy.removeHotkey(parseHotkey(key, memoisedOptions?.combinationKey))
+        )
       }
     }
-  }, [keys, cb, memoisedOptions, enabledScopes])
+  }, [keys, memoisedOptions, enabledScopes])
 
   return ref
 }

package/src/useRecordHotkeys.ts

@@ -3,7 +3,7 @@ import { mapKey } from './parseHotkeys'
 
 export default function useRecordHotkeys() {
   const [keys, setKeys] = useState(new Set<string>())
-  const [isRecording, setIsRecording] = useState(false);
+  const [isRecording, setIsRecording] = useState(false)
 
   const handler = useCallback((event: KeyboardEvent) => {
     if (event.key === undefined) {
@@ -14,7 +14,7 @@ export default function useRecordHotkeys() {
     event.preventDefault()
     event.stopPropagation()
 
-    setKeys(prev => {
+    setKeys((prev) => {
       const newKeys = new Set(prev)
 
       newKeys.add(mapKey(event.code))

package/src/validators.ts

@@ -24,7 +24,9 @@ export function isHotkeyEnabledOnTag({ target }: KeyboardEvent, enabledOnTags: F
   const targetTagName = target && (target as HTMLElement).tagName
 
   if (enabledOnTags instanceof Array) {
-    return Boolean(targetTagName && enabledOnTags && enabledOnTags.some(tag => tag.toLowerCase() === targetTagName.toLowerCase()))
+    return Boolean(
+      targetTagName && enabledOnTags && enabledOnTags.some((tag) => tag.toLowerCase() === targetTagName.toLowerCase())
+    )
   }
 
   return Boolean(targetTagName && enabledOnTags && enabledOnTags === true)
@@ -33,7 +35,7 @@ export function isHotkeyEnabledOnTag({ target }: KeyboardEvent, enabledOnTags: F
 export function isScopeActive(activeScopes: string[], scopes?: Scopes): boolean {
   if (activeScopes.length === 0 && scopes) {
     console.warn(
-      'A hotkey has the "scopes" option set, however no active scopes were found. If you want to use the global scopes feature, you need to wrap your app in a <HotkeysProvider>',
+      'A hotkey has the "scopes" option set, however no active scopes were found. If you want to use the global scopes feature, you need to wrap your app in a <HotkeysProvider>'
     )
 
     return true
@@ -43,10 +45,10 @@ export function isScopeActive(activeScopes: string[], scopes?: Scopes): boolean
     return true
   }
 
-  return activeScopes.some(scope => scopes.includes(scope)) || activeScopes.includes('*')
+  return activeScopes.some((scope) => scopes.includes(scope)) || activeScopes.includes('*')
 }
 
-export const isHotkeyMatchingKeyboardEvent = (e: KeyboardEvent, hotkey: Hotkey, ignoreModifiers: boolean = false): boolean => {
+export const isHotkeyMatchingKeyboardEvent = (e: KeyboardEvent, hotkey: Hotkey, ignoreModifiers = false): boolean => {
   const { alt, meta, mod, shift, ctrl, keys } = hotkey
   const { key: pressedKeyUppercase, code, ctrlKey, metaKey, shiftKey, altKey } = e