react-hotkeys-hook 3.4.6 → 4.0.0-1

package/README.md

@@ -37,7 +37,7 @@ A React hook for using keyboard shortcuts in components.
 ## Quick Start
 
 ```jsx harmony
-import { useHotkeys } from 'react-use-hotkeys-hook'
+import { useHotkeys } from 'react-hotkeys-hook'
 
 export const ExampleComponent = () => {
   const [count, setCount] = useState(0)

package/dist/BoundHotkeysProxyProvider.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { Hotkey } from './types';
+declare type BoundHotkeysProxyProviderType = {
+    addHotkey: (hotkey: Hotkey) => void;
+    removeHotkey: (hotkey: Hotkey) => void;
+};
+export declare const useBoundHotkeysProxy: () => BoundHotkeysProxyProviderType | undefined;
+interface Props {
+    children: ReactNode;
+    addHotkey: (hotkey: Hotkey) => void;
+    removeHotkey: (hotkey: Hotkey) => void;
+}
+export default function BoundHotkeysProxyProviderProvider({ addHotkey, removeHotkey, children }: Props): JSX.Element;
+export {};

package/dist/HotkeysProvider.d.ts

@@ -0,0 +1,16 @@
+import { Hotkey } from './types';
+import { ReactNode } from 'react';
+declare type HotkeysContextType = {
+    hotkeys: ReadonlyArray<Hotkey>;
+    activeScopes: string[];
+    toggleScope: (scope: string) => void;
+    activateScope: (scope: string) => void;
+    deactivateScope: (scope: string) => void;
+};
+export declare const useHotkeysContext: () => HotkeysContextType;
+interface Props {
+    initiallyActiveScopes?: string[];
+    children: ReactNode;
+}
+export declare const HotkeysProvider: ({ initiallyActiveScopes, children }: Props) => JSX.Element;
+export {};

package/dist/index.d.ts

@@ -1,7 +1,4 @@
-import { useIsHotkeyPressed } from './useIsHotkeyPressed';
-import { useHotkeys, Options } from './useHotkeys';
-declare const isHotkeyPressed: {
-    (keyCode: number): boolean;
-    (keyCode: string): boolean;
-};
-export { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };
+import useHotkeys from './useHotkeys';
+import type { Options } from './types';
+import { HotkeysProvider, useHotkeysContext } from './HotkeysProvider';
+export { useHotkeys, useHotkeysContext, HotkeysProvider, Options, };

package/dist/index.js

@@ -1,8 +1,2 @@
-
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./react-hotkeys-hook.cjs.production.min.js')
-} else {
-  module.exports = require('./react-hotkeys-hook.cjs.development.js')
-}
+import{useCallback as _,useLayoutEffect as j,useRef as B}from"react";var O=["ctrl","shift","alt","meta","mod"];function v(t,o=","){return typeof t=="string"?t.split(o):t}function H(t,o="+"){let e=t.toLocaleLowerCase().split(o).map(c=>c.trim()),y={alt:e.includes("alt"),ctrl:e.includes("ctrl"),shift:e.includes("shift"),meta:e.includes("meta"),mod:e.includes("mod")},i=e.filter(c=>!O.includes(c));return{...y,keys:i}}function b(t,o,e){(typeof e=="function"&&e(t,o)||e===!0)&&t.preventDefault()}function h(t,o,e){return typeof e=="function"?e(t,o):e===!0||e===void 0}function P(t){return g(t,["input","textarea","select"])}function g({target:t},o=!1){let e=t&&t.tagName;return o instanceof Array?Boolean(e&&o&&o.some(y=>y.toLowerCase()===e.toLowerCase())):Boolean(e&&o&&o===!0)}function E(t,o){return t.length===0&&o?(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>'),!0):o?t.some(e=>o.includes(e))||t.includes("*"):!0}var C=(t,o,e)=>{let{alt:y,ctrl:i,meta:c,mod:r,shift:p,keys:a}=o,{altKey:k,ctrlKey:d,metaKey:l,shiftKey:s,key:u,code:n}=t,m=n.toLowerCase().replace("key",""),f=u.toLowerCase();if(k!==y&&f!=="alt"||s!==p&&f!=="shift")return!1;if(r){if(!l&&!d)return!1}else if(l!==c&&m!=="meta"||d!==i&&m!=="ctrl")return!1;return a&&a.length===1&&(a.includes(f)||a.includes(m))?!0:a?a.every(M=>e.has(M)):!a};import{createContext as I,useMemo as N,useState as T,useContext as F}from"react";import{createContext as R,useContext as D}from"react";var S=R(void 0),w=()=>D(S);function x({addHotkey:t,removeHotkey:o,children:e}){return React.createElement(S.Provider,{value:{addHotkey:t,removeHotkey:o}},e)}var A=I({hotkeys:[],activeScopes:[],toggleScope:()=>{},activateScope:()=>{},deactivateScope:()=>{}}),K=()=>F(A),U=({initiallyActiveScopes:t=["*"],children:o})=>{let[e,y]=T(t?.length>0?t:["*"]),[i,c]=T([]),r=N(()=>e.includes("*"),[e]),p=s=>{y(r?[s]:Array.from(new Set([...e,s])))},a=s=>{let u=e.filter(n=>n!==s);u.length===0?y(["*"]):y(u)},k=s=>{e.includes(s)?a(s):p(s)},d=s=>{c([...i,s])},l=s=>{c(i.filter(u=>u.keys!==s.keys))};return React.createElement(A.Provider,{value:{activeScopes:e,hotkeys:i,activateScope:p,deactivateScope:a,toggleScope:k}},React.createElement(x,{addHotkey:d,removeHotkey:l},o))};function L(t,o,e,y){let i=B(null),{current:c}=B(new Set),r=e instanceof Array?y instanceof Array?void 0:y:e,p=e instanceof Array?e:y instanceof Array?y:[],a=_(o,[...p]),k=K(),d=w();return j(()=>{if(r?.enabled===!1||!E(k.activeScopes,r?.scopes))return;let l=n=>{P(n)&&!g(n,r?.enableOnFormTags)||i.current!==null&&document.activeElement!==i.current&&!i.current.contains(document.activeElement)||n.target?.isContentEditable&&!r?.enableOnContentEditable||v(t,r?.splitKey).forEach(m=>{let f=H(m,r?.combinationKey);if(C(n,f,c)||f.keys?.includes("*")){if(b(n,f,r?.preventDefault),!h(n,f,r?.enabled))return;a(n,f)}})},s=n=>{c.add(n.key.toLowerCase()),(r?.keydown===void 0&&r?.keyup!==!0||r?.keydown)&&l(n)},u=n=>{c.delete(n.key.toLowerCase()),r?.keyup&&l(n)};return(i.current||document).addEventListener("keyup",u),(i.current||document).addEventListener("keydown",s),d&&v(t,r?.splitKey).forEach(n=>d.addHotkey(H(n,r?.combinationKey))),()=>{(i.current||document).removeEventListener("keyup",u),(i.current||document).removeEventListener("keydown",s),d&&v(t,r?.splitKey).forEach(n=>d.removeHotkey(H(n,r?.combinationKey)))}},[t,a,r]),i}export{U as HotkeysProvider,L as useHotkeys,K as useHotkeysContext};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/useHotkeys.ts", "../src/parseHotkeys.ts", "../src/validators.ts", "../src/HotkeysProvider.tsx", "../src/BoundHotkeysProxyProvider.tsx"],
+  "sourcesContent": ["import { HotkeyCallback, Keys, OptionsOrDependencyArray, RefType } from './types'\nimport { useCallback, useLayoutEffect, useRef } from 'react'\nimport { parseHotkey, parseKeysHookInput } from './parseHotkeys'\nimport {\n  isHotkeyEnabled,\n  isHotkeyEnabledOnTag,\n  isHotkeyMatchingKeyboardEvent,\n  isKeyboardEventTriggeredByInput,\n  isScopeActive,\n  maybePreventDefault,\n} from './validators'\nimport { useHotkeysContext } from './HotkeysProvider'\nimport { useBoundHotkeysProxy } from './BoundHotkeysProxyProvider'\n\nexport default function useHotkeys<T extends HTMLElement>(\n  keys: Keys,\n  callback: HotkeyCallback,\n  options?: OptionsOrDependencyArray,\n  dependencies?: OptionsOrDependencyArray,\n) {\n  const ref = useRef<RefType<T>>(null)\n  const { current: pressedDownKeys } = useRef<Set<string>>(new Set())\n\n  const _options = !(options instanceof Array) ? options : !(dependencies instanceof Array) ? dependencies : undefined\n  const _deps = options instanceof Array ? options : dependencies instanceof Array ? dependencies : []\n\n  const cb = useCallback(callback, [..._deps])\n  const ctx = useHotkeysContext()\n\n  const proxy = useBoundHotkeysProxy()\n\n  useLayoutEffect(() => {\n    if (_options?.enabled === false || !isScopeActive(ctx.activeScopes, _options?.scopes)) {\n      return\n    }\n\n    const listener = (e: KeyboardEvent) => {\n      if (isKeyboardEventTriggeredByInput(e) && !isHotkeyEnabledOnTag(e, _options?.enableOnFormTags)) {\n        return\n      }\n\n      if (ref.current !== null && document.activeElement !== ref.current && !ref.current.contains(document.activeElement)) {\n        return\n      }\n\n      if (((e.target as HTMLElement)?.isContentEditable && !_options?.enableOnContentEditable)) {\n        return\n      }\n\n      parseKeysHookInput(keys, _options?.splitKey).forEach((key) => {\n        const hotkey = parseHotkey(key, _options?.combinationKey)\n\n        if (isHotkeyMatchingKeyboardEvent(e, hotkey, pressedDownKeys) || hotkey.keys?.includes('*')) {\n          maybePreventDefault(e, hotkey, _options?.preventDefault)\n\n          if (!isHotkeyEnabled(e, hotkey, _options?.enabled)) {\n            return\n          }\n\n          cb(e, hotkey)\n        }\n      })\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      pressedDownKeys.add(event.key.toLowerCase())\n\n      if ((_options?.keydown === undefined && _options?.keyup !== true) || _options?.keydown) {\n        listener(event)\n      }\n    }\n\n    const handleKeyUp = (event: KeyboardEvent) => {\n      pressedDownKeys.delete(event.key.toLowerCase())\n\n      if (_options?.keyup) {\n        listener(event)\n      }\n    }\n\n    // @ts-ignore\n    (ref.current || document).addEventListener('keyup', handleKeyUp);\n    // @ts-ignore\n    (ref.current || document).addEventListener('keydown', handleKeyDown)\n\n    if (proxy) {\n      parseKeysHookInput(keys, _options?.splitKey).forEach((key) => proxy.addHotkey(parseHotkey(key, _options?.combinationKey)))\n    }\n\n    return () => {\n      // @ts-ignore\n      (ref.current || document).removeEventListener('keyup', handleKeyUp);\n      // @ts-ignore\n      (ref.current || document).removeEventListener('keydown', handleKeyDown)\n\n      if (proxy) {\n        parseKeysHookInput(keys, _options?.splitKey).forEach((key) => proxy.removeHotkey(parseHotkey(key, _options?.combinationKey)))\n      }\n    }\n  }, [keys, cb, _options])\n\n  return ref\n}\n", "import { Hotkey, KeyboardModifiers, Keys } from './types'\n\nconst reservedModifierKeywords = ['ctrl', 'shift', 'alt', 'meta', 'mod']\n\nexport function parseKeysHookInput(keys: Keys, splitKey: string = ','): string[] {\n  if (typeof keys === 'string') {\n    return keys.split(splitKey)\n  }\n\n  return keys\n}\n\nexport function parseHotkey(hotkey: string, combinationKey: string = '+'): Hotkey {\n  const keys = hotkey\n    .toLocaleLowerCase()\n    .split(combinationKey)\n    .map((k) => k.trim())\n\n  const modifiers: KeyboardModifiers = {\n    alt: keys.includes('alt'),\n    ctrl: keys.includes('ctrl'),\n    shift: keys.includes('shift'),\n    meta: keys.includes('meta'),\n    mod: keys.includes('mod'),\n  }\n\n  const singleCharKeys = keys.filter((k) => !reservedModifierKeywords.includes(k))\n\n  return {\n    ...modifiers,\n    keys: singleCharKeys,\n  }\n}\n", "import { FormTags, Hotkey, Scopes, Trigger } from './types'\n\nexport function maybePreventDefault(e: KeyboardEvent, hotkey: Hotkey, preventDefault?: Trigger): void {\n  if ((typeof preventDefault === 'function' && preventDefault(e, hotkey)) || preventDefault === true) {\n    e.preventDefault()\n  }\n}\n\nexport function isHotkeyEnabled(e: KeyboardEvent, hotkey: Hotkey, enabled?: Trigger): boolean {\n  if (typeof enabled === 'function') {\n    return enabled(e, hotkey)\n  }\n\n  return enabled === true || enabled === undefined\n}\n\nexport function isKeyboardEventTriggeredByInput(ev: KeyboardEvent): boolean {\n  return isHotkeyEnabledOnTag(ev, ['input', 'textarea', 'select'])\n}\n\nexport function isHotkeyEnabledOnTag({ target }: KeyboardEvent, enabledOnTags: FormTags[] | boolean = false): boolean {\n  const targetTagName = target && (target as HTMLElement).tagName\n\n  if (enabledOnTags instanceof Array) {\n    return Boolean(targetTagName && enabledOnTags && enabledOnTags.some(tag => tag.toLowerCase() === targetTagName.toLowerCase()))\n  }\n\n  return Boolean(targetTagName && enabledOnTags && enabledOnTags === true)\n}\n\nexport function isScopeActive(activeScopes: string[], scopes?: Scopes): boolean {\n  if (activeScopes.length === 0 && scopes) {\n    console.warn(\n      '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>'\n    )\n\n    return true\n  }\n\n  if (!scopes) {\n    return true\n  }\n\n  return activeScopes.some(scope => scopes.includes(scope)) || activeScopes.includes('*')\n}\n\nexport const isHotkeyMatchingKeyboardEvent = (e: KeyboardEvent, hotkey: Hotkey, pressedDownKeys: Set<string>): boolean => {\n  const { alt, ctrl, meta, mod, shift, keys } = hotkey\n  const { altKey, ctrlKey, metaKey, shiftKey, key: pressedKeyUppercase, code } = e\n\n  const keyCode = code.toLowerCase().replace('key', '')\n  const pressedKey = pressedKeyUppercase.toLowerCase()\n\n  if (altKey !== alt && pressedKey !== 'alt') {\n    return false\n  }\n\n  if (shiftKey !== shift && pressedKey !== 'shift') {\n    return false\n  }\n\n  // Mod is a special key name that is checking for meta on macOS and ctrl on other platforms\n  if (mod) {\n    if (!metaKey && !ctrlKey) {\n      return false\n    }\n  } else {\n    if (metaKey !== meta && keyCode !== 'meta') {\n      return false\n    }\n\n    if (ctrlKey !== ctrl && keyCode !== 'ctrl') {\n      return false\n    }\n  }\n\n  // All modifiers are correct, now check the key\n  // If the key is set we check for the key\n  if (keys && keys.length === 1 && (keys.includes(pressedKey) || keys.includes(keyCode))) {\n    return true\n  } else if (keys) {\n    // Check if all keys are present in pressedDownKeys set\n    return keys.every(key => pressedDownKeys.has(key))\n  }\n  else if (!keys) {\n    // If the key is not set, we only listen for modifiers, that check went alright, so we return true\n    return true\n  }\n\n  // There is nothing that matches.\n  return false\n}\n", "import { Hotkey } from './types'\nimport { createContext, ReactNode, useMemo, useState, useContext } from 'react'\nimport BoundHotkeysProxyProviderProvider from './BoundHotkeysProxyProvider'\n\ntype HotkeysContextType = {\n  hotkeys: ReadonlyArray<Hotkey>\n  activeScopes: string[]\n  toggleScope: (scope: string) => void\n  activateScope: (scope: string) => void\n  deactivateScope: (scope: string) => void\n}\n\n// The context is only needed for special features like global scoping, so we use a graceful default fallback\nconst HotkeysContext = createContext<HotkeysContextType>({\n  hotkeys: [],\n  activeScopes: [], // This array has to be empty to check if the provider is set or not\n  toggleScope: () => {},\n  activateScope: () => {},\n  deactivateScope: () => {},\n})\n\nexport const useHotkeysContext = () => {\n  return useContext(HotkeysContext)\n}\n\ninterface Props {\n  initiallyActiveScopes?: string[]\n  children: ReactNode\n}\n\nexport const HotkeysProvider = ({initiallyActiveScopes = ['*'], children}: Props) => {\n  const [internalActiveScopes, setInternalActiveScopes] = useState(initiallyActiveScopes?.length > 0 ? initiallyActiveScopes : ['*'])\n  const [boundHotkeys, setBoundHotkeys] = useState<Hotkey[]>([]);\n\n  const isAllActive = useMemo(() => internalActiveScopes.includes('*'), [internalActiveScopes])\n\n  const activateScope = (scope: string) => {\n    if (isAllActive) {\n      setInternalActiveScopes([scope])\n    } else {\n      setInternalActiveScopes(Array.from(new Set([...internalActiveScopes, scope])))\n    }\n  }\n\n  const deactivateScope = (scope: string) => {\n    const scopes = internalActiveScopes.filter(s => s !== scope)\n\n    if (scopes.length === 0) {\n      setInternalActiveScopes(['*'])\n    } else {\n      setInternalActiveScopes(scopes)\n    }\n  }\n\n  const toggleScope = (scope: string) => {\n    if (internalActiveScopes.includes(scope)) {\n      deactivateScope(scope)\n    } else {\n      activateScope(scope)\n    }\n  }\n\n  const addBoundHotkey = (hotkey: Hotkey) => {\n    setBoundHotkeys([...boundHotkeys, hotkey])\n  }\n\n  const removeBoundHotkey = (hotkey: Hotkey) => {\n    setBoundHotkeys(boundHotkeys.filter(h => h.keys !== hotkey.keys))\n  }\n\n  return (\n    <HotkeysContext.Provider value={{activeScopes: internalActiveScopes, hotkeys: boundHotkeys, activateScope, deactivateScope, toggleScope}}>\n      <BoundHotkeysProxyProviderProvider addHotkey={addBoundHotkey} removeHotkey={removeBoundHotkey}>\n        {children}\n      </BoundHotkeysProxyProviderProvider>\n    </HotkeysContext.Provider>\n  )\n}\n", "import { createContext, ReactNode, useContext } from 'react'\nimport { Hotkey } from './types'\n\ntype BoundHotkeysProxyProviderType = {\n  addHotkey: (hotkey: Hotkey) => void,\n  removeHotkey: (hotkey: Hotkey) => void,\n}\n\nconst BoundHotkeysProxyProvider = createContext<BoundHotkeysProxyProviderType | undefined>(undefined)\n\nexport const useBoundHotkeysProxy = () => {\n  return useContext(BoundHotkeysProxyProvider)\n}\n\ninterface Props {\n  children: ReactNode\n  addHotkey: (hotkey: Hotkey) => void\n  removeHotkey: (hotkey: Hotkey) => void\n}\n\nexport default function BoundHotkeysProxyProviderProvider({ addHotkey, removeHotkey, children }: Props) {\n  return <BoundHotkeysProxyProvider.Provider value={{addHotkey, removeHotkey}}>{children}</BoundHotkeysProxyProvider.Provider>\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/parseHotkeys.d.ts

@@ -0,0 +1,3 @@
+import { Hotkey, Keys } from './types';
+export declare function parseKeysHookInput(keys: Keys, splitKey?: string): string[];
+export declare function parseHotkey(hotkey: string, combinationKey?: string): Hotkey;

package/dist/types.d.ts

@@ -0,0 +1,32 @@
+import type { DependencyList } from 'react';
+export declare type FormTags = 'input' | 'textarea' | 'select' | 'INPUT' | 'TEXTAREA' | 'SELECT';
+export declare type Keys = string | string[];
+export declare type Scopes = string | string[];
+export declare type RefType<T> = T | null;
+export declare type KeyboardModifiers = {
+    alt?: boolean;
+    ctrl?: boolean;
+    meta?: boolean;
+    shift?: boolean;
+    mod?: boolean;
+};
+export declare type Hotkey = KeyboardModifiers & {
+    keys?: string[];
+    scopes?: Scopes;
+};
+export declare type HotkeysEvent = Hotkey & {};
+export declare type HotkeyCallback = (keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => void;
+export declare type Trigger = boolean | ((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => boolean);
+export declare type Options = {
+    enabled?: Trigger;
+    enableOnFormTags?: FormTags[] | boolean;
+    enableOnContentEditable?: boolean;
+    combinationKey?: string;
+    splitKey?: string;
+    scopes?: Scopes;
+    keyup?: boolean;
+    keydown?: boolean;
+    preventDefault?: Trigger;
+    description?: string;
+};
+export declare type OptionsOrDependencyArray = Options | DependencyList;

package/dist/useHotkeys.d.ts

@@ -1,18 +1,2 @@
-import hotkeys, { KeyHandler } from 'hotkeys-js';
-import React from 'react';
-declare type AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';
-export declare type Options = {
-    enabled?: boolean;
-    filter?: typeof hotkeys.filter;
-    filterPreventDefault?: boolean;
-    enableOnTags?: AvailableTags[];
-    enableOnContentEditable?: boolean;
-    splitKey?: string;
-    scope?: string;
-    keyup?: boolean;
-    keydown?: boolean;
-};
-export declare function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options): React.MutableRefObject<T | null>;
-export declare function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, deps?: any[]): React.MutableRefObject<T | null>;
-export declare function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options, deps?: any[]): React.MutableRefObject<T | null>;
-export {};
+import { HotkeyCallback, Keys, OptionsOrDependencyArray, RefType } from './types';
+export default function useHotkeys<T extends HTMLElement>(keys: Keys, callback: HotkeyCallback, options?: OptionsOrDependencyArray, dependencies?: OptionsOrDependencyArray): import("react").MutableRefObject<RefType<T>>;

package/dist/validators.d.ts

@@ -0,0 +1,7 @@
+import { FormTags, Hotkey, Scopes, Trigger } from './types';
+export declare function maybePreventDefault(e: KeyboardEvent, hotkey: Hotkey, preventDefault?: Trigger): void;
+export declare function isHotkeyEnabled(e: KeyboardEvent, hotkey: Hotkey, enabled?: Trigger): boolean;
+export declare function isKeyboardEventTriggeredByInput(ev: KeyboardEvent): boolean;
+export declare function isHotkeyEnabledOnTag({ target }: KeyboardEvent, enabledOnTags?: FormTags[] | boolean): boolean;
+export declare function isScopeActive(activeScopes: string[], scopes?: Scopes): boolean;
+export declare const isHotkeyMatchingKeyboardEvent: (e: KeyboardEvent, hotkey: Hotkey, pressedDownKeys: Set<string>) => boolean;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "react-hotkeys-hook",
-  "version": "3.4.6",
+  "version": "4.0.0-1",
   "repository": "https://JohannesKlauss@github.com/JohannesKlauss/react-keymap-hook.git",
   "homepage": "https://johannesklauss.github.io/react-hotkeys-hook/",
   "author": "Johannes Klauss",
   "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
-  "module": "dist/react-hotkeys-hook.esm.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
   "files": [
     "dist",
     "src"
@@ -25,8 +25,7 @@
   ],
   "license": "MIT",
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
+    "build": "node ./esbuild.js && tsc --project tsconfig.build.json",
     "test": "jest",
     "publish": "np"
   },
@@ -37,48 +36,40 @@
       "@babel/preset-react"
     ]
   },
-  "jest": {
-    "setupFilesAfterEnv": [
-      "./setupTests.js"
-    ],
-    "testPathIgnorePatterns": [
-      "pkg",
-      ".docz",
-      "docs"
-    ]
-  },
   "prettier": {
-    "printWidth": 80,
-    "semi": true,
+    "printWidth": 120,
+    "semi": false,
     "singleQuote": true,
     "trailingComma": "es5"
   },
-  "dependencies": {
-    "hotkeys-js": "3.9.3"
-  },
   "devDependencies": {
-    "@babel/core": "7.17.10",
-    "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/preset-env": "7.17.10",
-    "@babel/preset-react": "7.16.7",
-    "@babel/preset-typescript": "7.16.7",
-    "@testing-library/react": "13.2.0",
-    "@testing-library/react-hooks": "8.0.0",
-    "@testing-library/user-event": "13.5.0",
-    "@types/jest": "27.5.1",
-    "@types/react": "18.0.9",
-    "@types/react-dom": "18.0.3",
-    "eslint-plugin-prettier": "4.0.0",
-    "jest": "26.6.3",
-    "prettier": "2.6.2",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "react-test-renderer": "18.1.0",
-    "tsdx": "0.14.1",
+    "@babel/core": "7.18.9",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-transform-react-jsx": "7.18.6",
+    "@babel/preset-env": "7.18.9",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "7.18.6",
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "13.3.0",
+    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/user-event": "14.3.0",
+    "@types/jest": "28.1.6",
+    "@types/lodash": "^4.14.182",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
+    "esbuild": "0.14.49",
+    "eslint-plugin-prettier": "4.2.1",
+    "jest": "28.1.3",
+    "jest-environment-jsdom": "28.1.3",
+    "prettier": "2.7.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-test-renderer": "18.2.0",
     "tslib": "2.4.0",
-    "typescript": "4.6.4"
+    "typescript": "4.7.4"
   },
   "peerDependencies": {
+    "lodash": ">=4.17.21",
     "react": ">=16.8.1",
     "react-dom": ">=16.8.1"
   }

package/src/BoundHotkeysProxyProvider.tsx

@@ -0,0 +1,23 @@
+import { createContext, ReactNode, useContext } from 'react'
+import { Hotkey } from './types'
+
+type BoundHotkeysProxyProviderType = {
+  addHotkey: (hotkey: Hotkey) => void,
+  removeHotkey: (hotkey: Hotkey) => void,
+}
+
+const BoundHotkeysProxyProvider = createContext<BoundHotkeysProxyProviderType | undefined>(undefined)
+
+export const useBoundHotkeysProxy = () => {
+  return useContext(BoundHotkeysProxyProvider)
+}
+
+interface Props {
+  children: ReactNode
+  addHotkey: (hotkey: Hotkey) => void
+  removeHotkey: (hotkey: Hotkey) => void
+}
+
+export default function BoundHotkeysProxyProviderProvider({ addHotkey, removeHotkey, children }: Props) {
+  return <BoundHotkeysProxyProvider.Provider value={{addHotkey, removeHotkey}}>{children}</BoundHotkeysProxyProvider.Provider>
+}

package/src/HotkeysProvider.tsx

@@ -0,0 +1,78 @@
+import { Hotkey } from './types'
+import { createContext, ReactNode, useMemo, useState, useContext } from 'react'
+import BoundHotkeysProxyProviderProvider from './BoundHotkeysProxyProvider'
+
+type HotkeysContextType = {
+  hotkeys: ReadonlyArray<Hotkey>
+  activeScopes: string[]
+  toggleScope: (scope: string) => void
+  activateScope: (scope: string) => void
+  deactivateScope: (scope: string) => void
+}
+
+// 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
+  toggleScope: () => {},
+  activateScope: () => {},
+  deactivateScope: () => {},
+})
+
+export const useHotkeysContext = () => {
+  return useContext(HotkeysContext)
+}
+
+interface Props {
+  initiallyActiveScopes?: string[]
+  children: ReactNode
+}
+
+export const HotkeysProvider = ({initiallyActiveScopes = ['*'], children}: Props) => {
+  const [internalActiveScopes, setInternalActiveScopes] = useState(initiallyActiveScopes?.length > 0 ? initiallyActiveScopes : ['*'])
+  const [boundHotkeys, setBoundHotkeys] = useState<Hotkey[]>([]);
+
+  const isAllActive = useMemo(() => internalActiveScopes.includes('*'), [internalActiveScopes])
+
+  const activateScope = (scope: string) => {
+    if (isAllActive) {
+      setInternalActiveScopes([scope])
+    } else {
+      setInternalActiveScopes(Array.from(new Set([...internalActiveScopes, scope])))
+    }
+  }
+
+  const deactivateScope = (scope: string) => {
+    const scopes = internalActiveScopes.filter(s => s !== scope)
+
+    if (scopes.length === 0) {
+      setInternalActiveScopes(['*'])
+    } else {
+      setInternalActiveScopes(scopes)
+    }
+  }
+
+  const toggleScope = (scope: string) => {
+    if (internalActiveScopes.includes(scope)) {
+      deactivateScope(scope)
+    } else {
+      activateScope(scope)
+    }
+  }
+
+  const addBoundHotkey = (hotkey: Hotkey) => {
+    setBoundHotkeys([...boundHotkeys, hotkey])
+  }
+
+  const removeBoundHotkey = (hotkey: Hotkey) => {
+    setBoundHotkeys(boundHotkeys.filter(h => h.keys !== hotkey.keys))
+  }
+
+  return (
+    <HotkeysContext.Provider value={{activeScopes: internalActiveScopes, hotkeys: boundHotkeys, activateScope, deactivateScope, toggleScope}}>
+      <BoundHotkeysProxyProviderProvider addHotkey={addBoundHotkey} removeHotkey={removeBoundHotkey}>
+        {children}
+      </BoundHotkeysProxyProviderProvider>
+    </HotkeysContext.Provider>
+  )
+}

package/src/index.ts

@@ -1,7 +1,10 @@
-import { useIsHotkeyPressed } from './useIsHotkeyPressed';
-import { useHotkeys, Options } from './useHotkeys';
-import hotkeys from 'hotkeys-js';
+import useHotkeys from './useHotkeys'
+import type { Options } from './types'
+import { HotkeysProvider, useHotkeysContext } from './HotkeysProvider'
 
-const isHotkeyPressed = hotkeys.isPressed;
-
-export { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };
+export {
+  useHotkeys,
+  useHotkeysContext,
+  HotkeysProvider,
+  Options,
+}

package/src/isHotkeyPressed.ts

@@ -0,0 +1,51 @@
+import { Hotkey } from './types'
+import { parseHotkey } from './parseHotkeys'
+import isEqual from 'lodash/isEqual'
+
+const currentlyPressedKeys: Set<Hotkey> = new Set<Hotkey>()
+
+export function isHotkeyPressed(key: string | string[], splitKey: string = ','): boolean {
+  const hotkeyArray = Array.isArray(key) ? key : key.split(splitKey)
+
+  return hotkeyArray.every((hotkey) => {
+    const parsedHotkey = parseHotkey(hotkey)
+
+    for (const pressedHotkey of currentlyPressedKeys) {
+      if (isEqual(parsedHotkey, pressedHotkey)) {
+        return true
+      }
+    }
+  })
+}
+
+export function pushToCurrentlyPressedKeys(key: string | string[]): void {
+  const hotkeyArray = Array.isArray(key) ? key : [key]
+
+  hotkeyArray.forEach(hotkey => currentlyPressedKeys.add(parseHotkey(hotkey)))
+}
+
+export function removeFromCurrentlyPressedKeys(key: string | string[]): void {
+  const hotkeyArray = Array.isArray(key) ? key : [key]
+
+  hotkeyArray.forEach((hotkey) => {
+    const parsedHotkey = parseHotkey(hotkey)
+
+    for (const pressedHotkey of currentlyPressedKeys) {
+      if (pressedHotkey.keys?.every((key) => parsedHotkey.keys?.includes(key))) {
+        currentlyPressedKeys.delete(pressedHotkey)
+      }
+    }
+  })
+}
+
+(() => {
+  window.addEventListener('DOMContentLoaded', () => {
+    document.addEventListener('keydown', e => {
+      pushToCurrentlyPressedKeys(e.key)
+    })
+
+    document.addEventListener('keyup', e => {
+      removeFromCurrentlyPressedKeys(e.key)
+    })
+  })
+})()

package/src/parseHotkeys.ts

@@ -0,0 +1,33 @@
+import { Hotkey, KeyboardModifiers, Keys } from './types'
+
+const reservedModifierKeywords = ['ctrl', 'shift', 'alt', 'meta', 'mod']
+
+export function parseKeysHookInput(keys: Keys, splitKey: string = ','): string[] {
+  if (typeof keys === 'string') {
+    return keys.split(splitKey)
+  }
+
+  return keys
+}
+
+export function parseHotkey(hotkey: string, combinationKey: string = '+'): Hotkey {
+  const keys = hotkey
+    .toLocaleLowerCase()
+    .split(combinationKey)
+    .map((k) => k.trim())
+
+  const modifiers: KeyboardModifiers = {
+    alt: keys.includes('alt'),
+    ctrl: keys.includes('ctrl'),
+    shift: keys.includes('shift'),
+    meta: keys.includes('meta'),
+    mod: keys.includes('mod'),
+  }
+
+  const singleCharKeys = keys.filter((k) => !reservedModifierKeywords.includes(k))
+
+  return {
+    ...modifiers,
+    keys: singleCharKeys,
+  }
+}

package/src/types.ts

@@ -0,0 +1,41 @@
+import type { DependencyList } from 'react'
+
+export type FormTags = 'input' | 'textarea' | 'select' | 'INPUT' | 'TEXTAREA' | 'SELECT'
+export type Keys = string | string[]
+export type Scopes = string | string[]
+
+export type RefType<T> = T | null
+
+export type KeyboardModifiers = {
+  alt?: boolean
+  ctrl?: boolean
+  meta?: boolean
+  shift?: boolean
+  mod?: boolean
+}
+
+export type Hotkey = KeyboardModifiers & {
+  keys?: string[]
+  scopes?: Scopes
+}
+
+export type HotkeysEvent = Hotkey & {}
+
+export type HotkeyCallback = (keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => void
+
+export type Trigger = boolean | ((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => boolean)
+
+export type Options = {
+  enabled?: Trigger // Main setting that determines if the hotkey is enabled or not. (Default: true)
+  enableOnFormTags?: FormTags[] | boolean // Enable hotkeys on a list of tags. (Default: false)
+  enableOnContentEditable?: boolean // Enable hotkeys on tags with contentEditable props. (Default: false)
+  combinationKey?: string // Character to split keys in hotkeys combinations. (Default: +)
+  splitKey?: string // Character to separate different hotkeys. (Default: ,)
+  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)
+  description?: string // Use this option to describe what the hotkey does. (Default: undefined)
+}
+
+export type OptionsOrDependencyArray = Options | DependencyList