react-hotkeys-hook 4.3.5 → 4.3.6-1

package/src/parseHotkeys.ts

@@ -12,31 +12,34 @@ 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 {
+  console.log('key', key)
+
+  console.log('mappedKeys[key]', mappedKeys[key])
+
   return (mappedKeys[key] || key)
     .trim()
     .toLowerCase()
-    .replace('key', '')
-    .replace('digit', '')
-    .replace('numpad', '')
-    .replace('arrow', '')
+    .replace(/key|digit|numpad|arrow/, '')
 }
 
 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 +47,13 @@ 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))
+
+  console.log('parsed keys', keys)
 
   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,21 +26,26 @@ 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 | undefined = options instanceof Array ? options : dependencies instanceof Array ? dependencies : undefined
+  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);
+  const cbRef = useRef<HotkeyCallback>(memoisedCB)
 
-  if(_deps) {
-    cbRef.current = memoisedCB;
+  if (_deps) {
+    cbRef.current = memoisedCB
   } else {
-    cbRef.current = callback;
+    cbRef.current = callback
   }
 
   const memoisedOptions = useDeepEqualMemo(_options)
@@ -53,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
       }
 
@@ -124,23 +133,29 @@ 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, memoisedOptions, enabledScopes])

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