react-hotkeys-hook 3.4.6 → 3.4.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/react-hotkeys-hook.cjs.development.js +2 -2
- package/dist/react-hotkeys-hook.cjs.development.js.map +1 -1
- package/dist/react-hotkeys-hook.cjs.production.min.js +1 -1
- package/dist/react-hotkeys-hook.cjs.production.min.js.map +1 -1
- package/dist/react-hotkeys-hook.esm.js +2 -2
- package/dist/react-hotkeys-hook.esm.js.map +1 -1
- package/package.json +18 -18
- package/src/useHotkeys.ts +1 -1
package/README.md
CHANGED
|
@@ -37,7 +37,7 @@ A React hook for using keyboard shortcuts in components.
|
|
|
37
37
|
## Quick Start
|
|
38
38
|
|
|
39
39
|
```jsx harmony
|
|
40
|
-
import { useHotkeys } from 'react-
|
|
40
|
+
import { useHotkeys } from 'react-hotkeys-hook'
|
|
41
41
|
|
|
42
42
|
export const ExampleComponent = () => {
|
|
43
43
|
const [count, setCount] = useState(0)
|
|
@@ -48,7 +48,7 @@ function useHotkeys(keys, callback, options, deps) {
|
|
|
48
48
|
var ref = react.useRef(null); // The return value of this callback determines if the browsers default behavior is prevented.
|
|
49
49
|
|
|
50
50
|
var memoisedCallback = react.useCallback(function (keyboardEvent, hotkeysEvent) {
|
|
51
|
-
var _keyboardEvent$target;
|
|
51
|
+
var _keyboardEvent$target, _ref$current;
|
|
52
52
|
|
|
53
53
|
if (filter && !filter(keyboardEvent)) {
|
|
54
54
|
return !filterPreventDefault;
|
|
@@ -59,7 +59,7 @@ function useHotkeys(keys, callback, options, deps) {
|
|
|
59
59
|
return true;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
-
if (ref.current === null || document.activeElement === ref.current) {
|
|
62
|
+
if (ref.current === null || document.activeElement === ref.current || (_ref$current = ref.current) != null && _ref$current.contains(document.activeElement)) {
|
|
63
63
|
callback(keyboardEvent, hotkeysEvent);
|
|
64
64
|
return true;
|
|
65
65
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-hotkeys-hook.cjs.development.js","sources":["../src/useIsHotkeyPressed.ts","../src/useHotkeys.ts","../src/index.ts"],"sourcesContent":["import hotkeys from 'hotkeys-js';\n\n/**\n * @deprecated Use isHotkeyPressed instead. Will be removed version 4.\n */\nexport function useIsHotkeyPressed() {\n return hotkeys.isPressed;\n}","import hotkeys, { HotkeysEvent, KeyHandler } from 'hotkeys-js';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\ntype AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';\n\n// We implement our own custom filter system.\nhotkeys.filter = () => true;\n\nconst tagFilter = ({ target }: KeyboardEvent, enableOnTags?: AvailableTags[]) => {\n const targetTagName = target && (target as HTMLElement).tagName;\n\n return Boolean((targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags)));\n};\n\nconst isKeyboardEventTriggeredByInput = (ev: KeyboardEvent) => {\n return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);\n};\n\nexport type Options = {\n enabled?: boolean; // Main setting that determines if the hotkey is enabled or not. (Default: true)\n filter?: typeof hotkeys.filter; // A filter function returning whether the callback should get triggered or not. (Default: undefined)\n filterPreventDefault?: boolean; // Prevent default browser behavior if the filter function returns false. (Default: true)\n enableOnTags?: AvailableTags[]; // Enable hotkeys on a list of tags. (Default: [])\n enableOnContentEditable?: boolean; // Enable hotkeys on tags with contentEditable props. (Default: false)\n splitKey?: string; // Character to split keys in hotkeys combinations. (Default +)\n scope?: string; // Scope. Currently not doing anything.\n keyup?: boolean; // Trigger on keyup event? (Default: undefined)\n keydown?: boolean; // Trigger on keydown event? (Default: true)\n};\n\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: any[] | Options, deps?: any[]): React.MutableRefObject<T | null> {\n if (options instanceof Array) {\n deps = options;\n options = undefined;\n }\n\n const {\n enableOnTags,\n filter,\n keyup,\n keydown,\n filterPreventDefault = true,\n enabled = true,\n enableOnContentEditable = false,\n } = options as Options || {};\n const ref = useRef<T | null>(null);\n\n // The return value of this callback determines if the browsers default behavior is prevented.\n const memoisedCallback = useCallback((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => {\n if (filter && !filter(keyboardEvent)) {\n return !filterPreventDefault;\n }\n\n // Check whether the hotkeys was triggered inside an input and that input is enabled or if it was triggered by a content editable tag and it is enabled.\n if (\n (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags))\n || ((keyboardEvent.target as HTMLElement)?.isContentEditable && !enableOnContentEditable)\n ) {\n return true;\n }\n\n if (ref.current === null || document.activeElement === ref.current) {\n callback(keyboardEvent, hotkeysEvent);\n return true;\n }\n\n return false;\n }, deps ? [ref, enableOnTags, filter, ...deps] : [ref, enableOnTags, filter]);\n\n useEffect(() => {\n if (!enabled) {\n hotkeys.unbind(keys, memoisedCallback);\n\n return;\n }\n\n // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.\n if (keyup && keydown !== true) {\n (options as Options).keydown = false;\n }\n\n hotkeys(keys, (options as Options) || {}, memoisedCallback);\n\n return () => hotkeys.unbind(keys, memoisedCallback);\n }, [memoisedCallback, keys, enabled]);\n\n return ref;\n}\n","import { useIsHotkeyPressed } from './useIsHotkeyPressed';\nimport { useHotkeys, Options } from './useHotkeys';\nimport hotkeys from 'hotkeys-js';\n\nconst isHotkeyPressed = hotkeys.isPressed;\n\nexport { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };"],"names":["useIsHotkeyPressed","hotkeys","isPressed","filter","tagFilter","enableOnTags","target","targetTagName","tagName","Boolean","includes","isKeyboardEventTriggeredByInput","ev","useHotkeys","keys","callback","options","deps","Array","undefined","keyup","keydown","filterPreventDefault","enabled","enableOnContentEditable","ref","useRef","memoisedCallback","useCallback","keyboardEvent","hotkeysEvent","isContentEditable","current","document","activeElement","useEffect","unbind","isHotkeyPressed"],"mappings":";;;;;;;AAEA;;;;SAGgBA;AACd,SAAOC,OAAO,CAACC,SAAf;AACD;;ACDDD,OAAO,CAACE,MAAR,GAAiB;AAAA,SAAM,IAAN;AAAA,CAAjB;;AAEA,IAAMC,SAAS,GAAG,SAAZA,SAAY,OAA4BC,YAA5B;MAAGC,cAAAA;AACnB,MAAMC,aAAa,GAAGD,MAAM,IAAKA,MAAsB,CAACE,OAAxD;AAEA,SAAOC,OAAO,CAAEF,aAAa,IAAIF,YAAjB,IAAiCA,YAAY,CAACK,QAAb,CAAsBH,aAAtB,CAAnC,CAAd;AACD,CAJD;;AAMA,IAAMI,+BAA+B,GAAG,SAAlCA,+BAAkC,CAACC,EAAD;AACtC,SAAOR,SAAS,CAACQ,EAAD,EAAK,CAAC,OAAD,EAAU,UAAV,EAAsB,QAAtB,CAAL,CAAhB;AACD,CAFD;;AAmBA,SAAgBC,WAA8BC,MAAcC,UAAsBC,SAA2BC;AAC3G,MAAID,OAAO,YAAYE,KAAvB,EAA8B;AAC5BD,IAAAA,IAAI,GAAGD,OAAP;AACAA,IAAAA,OAAO,GAAGG,SAAV;AACD;;AAED,cAQIH,OAAkB,IAAI,EAR1B;AAAA,MACEX,YADF,SACEA,YADF;AAAA,MAEEF,MAFF,SAEEA,MAFF;AAAA,MAGEiB,KAHF,SAGEA,KAHF;AAAA,MAIEC,OAJF,SAIEA,OAJF;AAAA,oCAKEC,oBALF;AAAA,MAKEA,oBALF,sCAKyB,IALzB;AAAA,4BAMEC,OANF;AAAA,MAMEA,OANF,8BAMY,IANZ;AAAA,oCAOEC,uBAPF;AAAA,MAOEA,uBAPF,sCAO4B,KAP5B;;AASA,MAAMC,GAAG,GAAGC,YAAM,CAAW,IAAX,CAAlB;;AAGA,MAAMC,gBAAgB,GAAGC,iBAAW,CAAC,UAACC,aAAD,EAA+BC,YAA/B;;;AACnC,QAAI3B,MAAM,IAAI,CAACA,MAAM,CAAC0B,aAAD,CAArB,EAAsC;AACpC,aAAO,CAACP,oBAAR;AACD;;;AAGD,QACGX,+BAA+B,CAACkB,aAAD,CAA/B,IAAkD,CAACzB,SAAS,CAACyB,aAAD,EAAgBxB,YAAhB,CAA7D,IACK,yBAAAwB,aAAa,CAACvB,MAAd,mCAAsCyB,iBAAtC,IAA2D,CAACP,uBAFnE,EAGE;AACA,aAAO,IAAP;AACD;;AAED,QAAIC,GAAG,CAACO,OAAJ,KAAgB,IAAhB,IAAwBC,QAAQ,CAACC,aAAT,KAA2BT,GAAG,CAACO,
|
|
1
|
+
{"version":3,"file":"react-hotkeys-hook.cjs.development.js","sources":["../src/useIsHotkeyPressed.ts","../src/useHotkeys.ts","../src/index.ts"],"sourcesContent":["import hotkeys from 'hotkeys-js';\n\n/**\n * @deprecated Use isHotkeyPressed instead. Will be removed version 4.\n */\nexport function useIsHotkeyPressed() {\n return hotkeys.isPressed;\n}","import hotkeys, { HotkeysEvent, KeyHandler } from 'hotkeys-js';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\ntype AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';\n\n// We implement our own custom filter system.\nhotkeys.filter = () => true;\n\nconst tagFilter = ({ target }: KeyboardEvent, enableOnTags?: AvailableTags[]) => {\n const targetTagName = target && (target as HTMLElement).tagName;\n\n return Boolean((targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags)));\n};\n\nconst isKeyboardEventTriggeredByInput = (ev: KeyboardEvent) => {\n return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);\n};\n\nexport type Options = {\n enabled?: boolean; // Main setting that determines if the hotkey is enabled or not. (Default: true)\n filter?: typeof hotkeys.filter; // A filter function returning whether the callback should get triggered or not. (Default: undefined)\n filterPreventDefault?: boolean; // Prevent default browser behavior if the filter function returns false. (Default: true)\n enableOnTags?: AvailableTags[]; // Enable hotkeys on a list of tags. (Default: [])\n enableOnContentEditable?: boolean; // Enable hotkeys on tags with contentEditable props. (Default: false)\n splitKey?: string; // Character to split keys in hotkeys combinations. (Default +)\n scope?: string; // Scope. Currently not doing anything.\n keyup?: boolean; // Trigger on keyup event? (Default: undefined)\n keydown?: boolean; // Trigger on keydown event? (Default: true)\n};\n\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: any[] | Options, deps?: any[]): React.MutableRefObject<T | null> {\n if (options instanceof Array) {\n deps = options;\n options = undefined;\n }\n\n const {\n enableOnTags,\n filter,\n keyup,\n keydown,\n filterPreventDefault = true,\n enabled = true,\n enableOnContentEditable = false,\n } = options as Options || {};\n const ref = useRef<T | null>(null);\n\n // The return value of this callback determines if the browsers default behavior is prevented.\n const memoisedCallback = useCallback((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => {\n if (filter && !filter(keyboardEvent)) {\n return !filterPreventDefault;\n }\n\n // Check whether the hotkeys was triggered inside an input and that input is enabled or if it was triggered by a content editable tag and it is enabled.\n if (\n (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags))\n || ((keyboardEvent.target as HTMLElement)?.isContentEditable && !enableOnContentEditable)\n ) {\n return true;\n }\n\n if (ref.current === null || document.activeElement === ref.current || ref.current?.contains(document.activeElement)) {\n callback(keyboardEvent, hotkeysEvent);\n return true;\n }\n\n return false;\n }, deps ? [ref, enableOnTags, filter, ...deps] : [ref, enableOnTags, filter]);\n\n useEffect(() => {\n if (!enabled) {\n hotkeys.unbind(keys, memoisedCallback);\n\n return;\n }\n\n // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.\n if (keyup && keydown !== true) {\n (options as Options).keydown = false;\n }\n\n hotkeys(keys, (options as Options) || {}, memoisedCallback);\n\n return () => hotkeys.unbind(keys, memoisedCallback);\n }, [memoisedCallback, keys, enabled]);\n\n return ref;\n}\n","import { useIsHotkeyPressed } from './useIsHotkeyPressed';\nimport { useHotkeys, Options } from './useHotkeys';\nimport hotkeys from 'hotkeys-js';\n\nconst isHotkeyPressed = hotkeys.isPressed;\n\nexport { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };"],"names":["useIsHotkeyPressed","hotkeys","isPressed","filter","tagFilter","enableOnTags","target","targetTagName","tagName","Boolean","includes","isKeyboardEventTriggeredByInput","ev","useHotkeys","keys","callback","options","deps","Array","undefined","keyup","keydown","filterPreventDefault","enabled","enableOnContentEditable","ref","useRef","memoisedCallback","useCallback","keyboardEvent","hotkeysEvent","isContentEditable","current","document","activeElement","contains","useEffect","unbind","isHotkeyPressed"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e,t=(e=require("hotkeys-js"))&&"object"==typeof e&&"default"in e?e.default:e,n=require("react");t.filter=function(){return!0};var r=function(e,t){var n=e.target,r=n&&n.tagName;return Boolean(r&&t&&t.includes(r))};exports.isHotkeyPressed=t.isPressed,exports.useHotkeys=function(e,u,i,o){i instanceof Array&&(o=i,i=void 0);var s=i||{},a=s.enableOnTags,l=s.filter,c=s.keyup,d=s.keydown,f=s.filterPreventDefault,v=void 0===f||f,b=s.enabled,y=void 0===b||b,
|
|
1
|
+
"use strict";var e,t=(e=require("hotkeys-js"))&&"object"==typeof e&&"default"in e?e.default:e,n=require("react");t.filter=function(){return!0};var r=function(e,t){var n=e.target,r=n&&n.tagName;return Boolean(r&&t&&t.includes(r))};exports.isHotkeyPressed=t.isPressed,exports.useHotkeys=function(e,u,i,o){i instanceof Array&&(o=i,i=void 0);var s=i||{},a=s.enableOnTags,l=s.filter,c=s.keyup,d=s.keydown,f=s.filterPreventDefault,v=void 0===f||f,b=s.enabled,y=void 0===b||b,E=s.enableOnContentEditable,k=void 0!==E&&E,P=n.useRef(null),m=n.useCallback((function(e,t){var n,i;return l&&!l(e)?!v:!!(r(e,["INPUT","TEXTAREA","SELECT"])&&!r(e,a)||null!=(n=e.target)&&n.isContentEditable&&!k)||!!(null===P.current||document.activeElement===P.current||null!=(i=P.current)&&i.contains(document.activeElement))&&(u(e,t),!0)}),o?[P,a,l].concat(o):[P,a,l]);return n.useEffect((function(){if(y)return c&&!0!==d&&(i.keydown=!1),t(e,i||{},m),function(){return t.unbind(e,m)};t.unbind(e,m)}),[m,e,y]),P},exports.useIsHotkeyPressed=function(){return t.isPressed};
|
|
2
2
|
//# sourceMappingURL=react-hotkeys-hook.cjs.production.min.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-hotkeys-hook.cjs.production.min.js","sources":["../src/useHotkeys.ts","../src/index.ts","../src/useIsHotkeyPressed.ts"],"sourcesContent":["import hotkeys, { HotkeysEvent, KeyHandler } from 'hotkeys-js';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\ntype AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';\n\n// We implement our own custom filter system.\nhotkeys.filter = () => true;\n\nconst tagFilter = ({ target }: KeyboardEvent, enableOnTags?: AvailableTags[]) => {\n const targetTagName = target && (target as HTMLElement).tagName;\n\n return Boolean((targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags)));\n};\n\nconst isKeyboardEventTriggeredByInput = (ev: KeyboardEvent) => {\n return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);\n};\n\nexport type Options = {\n enabled?: boolean; // Main setting that determines if the hotkey is enabled or not. (Default: true)\n filter?: typeof hotkeys.filter; // A filter function returning whether the callback should get triggered or not. (Default: undefined)\n filterPreventDefault?: boolean; // Prevent default browser behavior if the filter function returns false. (Default: true)\n enableOnTags?: AvailableTags[]; // Enable hotkeys on a list of tags. (Default: [])\n enableOnContentEditable?: boolean; // Enable hotkeys on tags with contentEditable props. (Default: false)\n splitKey?: string; // Character to split keys in hotkeys combinations. (Default +)\n scope?: string; // Scope. Currently not doing anything.\n keyup?: boolean; // Trigger on keyup event? (Default: undefined)\n keydown?: boolean; // Trigger on keydown event? (Default: true)\n};\n\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: any[] | Options, deps?: any[]): React.MutableRefObject<T | null> {\n if (options instanceof Array) {\n deps = options;\n options = undefined;\n }\n\n const {\n enableOnTags,\n filter,\n keyup,\n keydown,\n filterPreventDefault = true,\n enabled = true,\n enableOnContentEditable = false,\n } = options as Options || {};\n const ref = useRef<T | null>(null);\n\n // The return value of this callback determines if the browsers default behavior is prevented.\n const memoisedCallback = useCallback((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => {\n if (filter && !filter(keyboardEvent)) {\n return !filterPreventDefault;\n }\n\n // Check whether the hotkeys was triggered inside an input and that input is enabled or if it was triggered by a content editable tag and it is enabled.\n if (\n (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags))\n || ((keyboardEvent.target as HTMLElement)?.isContentEditable && !enableOnContentEditable)\n ) {\n return true;\n }\n\n if (ref.current === null || document.activeElement === ref.current) {\n callback(keyboardEvent, hotkeysEvent);\n return true;\n }\n\n return false;\n }, deps ? [ref, enableOnTags, filter, ...deps] : [ref, enableOnTags, filter]);\n\n useEffect(() => {\n if (!enabled) {\n hotkeys.unbind(keys, memoisedCallback);\n\n return;\n }\n\n // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.\n if (keyup && keydown !== true) {\n (options as Options).keydown = false;\n }\n\n hotkeys(keys, (options as Options) || {}, memoisedCallback);\n\n return () => hotkeys.unbind(keys, memoisedCallback);\n }, [memoisedCallback, keys, enabled]);\n\n return ref;\n}\n","import { useIsHotkeyPressed } from './useIsHotkeyPressed';\nimport { useHotkeys, Options } from './useHotkeys';\nimport hotkeys from 'hotkeys-js';\n\nconst isHotkeyPressed = hotkeys.isPressed;\n\nexport { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };","import hotkeys from 'hotkeys-js';\n\n/**\n * @deprecated Use isHotkeyPressed instead. Will be removed version 4.\n */\nexport function useIsHotkeyPressed() {\n return hotkeys.isPressed;\n}"],"names":["hotkeys","filter","tagFilter","enableOnTags","target","targetTagName","tagName","Boolean","includes","isPressed","keys","callback","options","deps","Array","undefined","keyup","keydown","filterPreventDefault","enabled","enableOnContentEditable","ref","useRef","memoisedCallback","useCallback","keyboardEvent","hotkeysEvent","isContentEditable","current","document","activeElement","useEffect","unbind"],"mappings":"iHAMAA,EAAQC,OAAS,kBAAM,GAEvB,IAAMC,EAAY,WAA4BC,OAAzBC,IAAAA,OACbC,EAAgBD,GAAWA,EAAuBE,eAEjDC,QAASF,GAAiBF,GAAgBA,EAAaK,SAASH,6BCPjDL,EAAQS,6BD6BhC,SAA8CC,EAAcC,EAAsBC,EAA2BC,GACvGD,aAAmBE,QACrBD,EAAOD,EACPA,OAAUG,SAWRH,GAAsB,GAPxBT,IAAAA,aACAF,IAAAA,OACAe,IAAAA,MACAC,IAAAA,YACAC,qBAAAA,oBACAC,QAAAA,oBACAC,wBAAAA,gBAEIC,EAAMC,SAAiB,MAGvBC,EAAmBC,eAAY,SAACC,EAA8BC,
|
|
1
|
+
{"version":3,"file":"react-hotkeys-hook.cjs.production.min.js","sources":["../src/useHotkeys.ts","../src/index.ts","../src/useIsHotkeyPressed.ts"],"sourcesContent":["import hotkeys, { HotkeysEvent, KeyHandler } from 'hotkeys-js';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\ntype AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';\n\n// We implement our own custom filter system.\nhotkeys.filter = () => true;\n\nconst tagFilter = ({ target }: KeyboardEvent, enableOnTags?: AvailableTags[]) => {\n const targetTagName = target && (target as HTMLElement).tagName;\n\n return Boolean((targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags)));\n};\n\nconst isKeyboardEventTriggeredByInput = (ev: KeyboardEvent) => {\n return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);\n};\n\nexport type Options = {\n enabled?: boolean; // Main setting that determines if the hotkey is enabled or not. (Default: true)\n filter?: typeof hotkeys.filter; // A filter function returning whether the callback should get triggered or not. (Default: undefined)\n filterPreventDefault?: boolean; // Prevent default browser behavior if the filter function returns false. (Default: true)\n enableOnTags?: AvailableTags[]; // Enable hotkeys on a list of tags. (Default: [])\n enableOnContentEditable?: boolean; // Enable hotkeys on tags with contentEditable props. (Default: false)\n splitKey?: string; // Character to split keys in hotkeys combinations. (Default +)\n scope?: string; // Scope. Currently not doing anything.\n keyup?: boolean; // Trigger on keyup event? (Default: undefined)\n keydown?: boolean; // Trigger on keydown event? (Default: true)\n};\n\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: any[] | Options, deps?: any[]): React.MutableRefObject<T | null> {\n if (options instanceof Array) {\n deps = options;\n options = undefined;\n }\n\n const {\n enableOnTags,\n filter,\n keyup,\n keydown,\n filterPreventDefault = true,\n enabled = true,\n enableOnContentEditable = false,\n } = options as Options || {};\n const ref = useRef<T | null>(null);\n\n // The return value of this callback determines if the browsers default behavior is prevented.\n const memoisedCallback = useCallback((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => {\n if (filter && !filter(keyboardEvent)) {\n return !filterPreventDefault;\n }\n\n // Check whether the hotkeys was triggered inside an input and that input is enabled or if it was triggered by a content editable tag and it is enabled.\n if (\n (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags))\n || ((keyboardEvent.target as HTMLElement)?.isContentEditable && !enableOnContentEditable)\n ) {\n return true;\n }\n\n if (ref.current === null || document.activeElement === ref.current || ref.current?.contains(document.activeElement)) {\n callback(keyboardEvent, hotkeysEvent);\n return true;\n }\n\n return false;\n }, deps ? [ref, enableOnTags, filter, ...deps] : [ref, enableOnTags, filter]);\n\n useEffect(() => {\n if (!enabled) {\n hotkeys.unbind(keys, memoisedCallback);\n\n return;\n }\n\n // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.\n if (keyup && keydown !== true) {\n (options as Options).keydown = false;\n }\n\n hotkeys(keys, (options as Options) || {}, memoisedCallback);\n\n return () => hotkeys.unbind(keys, memoisedCallback);\n }, [memoisedCallback, keys, enabled]);\n\n return ref;\n}\n","import { useIsHotkeyPressed } from './useIsHotkeyPressed';\nimport { useHotkeys, Options } from './useHotkeys';\nimport hotkeys from 'hotkeys-js';\n\nconst isHotkeyPressed = hotkeys.isPressed;\n\nexport { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };","import hotkeys from 'hotkeys-js';\n\n/**\n * @deprecated Use isHotkeyPressed instead. Will be removed version 4.\n */\nexport function useIsHotkeyPressed() {\n return hotkeys.isPressed;\n}"],"names":["hotkeys","filter","tagFilter","enableOnTags","target","targetTagName","tagName","Boolean","includes","isPressed","keys","callback","options","deps","Array","undefined","keyup","keydown","filterPreventDefault","enabled","enableOnContentEditable","ref","useRef","memoisedCallback","useCallback","keyboardEvent","hotkeysEvent","isContentEditable","current","document","activeElement","_ref$current","contains","useEffect","unbind"],"mappings":"iHAMAA,EAAQC,OAAS,kBAAM,GAEvB,IAAMC,EAAY,WAA4BC,OAAzBC,IAAAA,OACbC,EAAgBD,GAAWA,EAAuBE,eAEjDC,QAASF,GAAiBF,GAAgBA,EAAaK,SAASH,6BCPjDL,EAAQS,6BD6BhC,SAA8CC,EAAcC,EAAsBC,EAA2BC,GACvGD,aAAmBE,QACrBD,EAAOD,EACPA,OAAUG,SAWRH,GAAsB,GAPxBT,IAAAA,aACAF,IAAAA,OACAe,IAAAA,MACAC,IAAAA,YACAC,qBAAAA,oBACAC,QAAAA,oBACAC,wBAAAA,gBAEIC,EAAMC,SAAiB,MAGvBC,EAAmBC,eAAY,SAACC,EAA8BC,kBAC9DzB,IAAWA,EAAOwB,IACZP,KAtCLhB,EA2C8BuB,EA3ChB,CAAC,QAAS,WAAY,aA2CavB,EAAUuB,EAAetB,aACxEsB,EAAcrB,WAAwBuB,oBAAsBP,OAK/C,OAAhBC,EAAIO,SAAoBC,SAASC,gBAAkBT,EAAIO,kBAAWP,EAAIO,UAAJG,EAAaC,SAASH,SAASC,kBACnGnB,EAASc,EAAeC,IACjB,KAIRb,GAAQQ,EAAKlB,EAAcF,UAAWY,GAAQ,CAACQ,EAAKlB,EAAcF,WAErEgC,aAAU,cACHd,SAODH,IAAqB,IAAZC,IACVL,EAAoBK,SAAU,GAGjCjB,EAAQU,EAAOE,GAAuB,GAAIW,GAEnC,kBAAMvB,EAAQkC,OAAOxB,EAAMa,IAZhCvB,EAAQkC,OAAOxB,EAAMa,KAatB,CAACA,EAAkBb,EAAMS,IAErBE,gDEnFArB,EAAQS"}
|
|
@@ -44,7 +44,7 @@ function useHotkeys(keys, callback, options, deps) {
|
|
|
44
44
|
var ref = useRef(null); // The return value of this callback determines if the browsers default behavior is prevented.
|
|
45
45
|
|
|
46
46
|
var memoisedCallback = useCallback(function (keyboardEvent, hotkeysEvent) {
|
|
47
|
-
var _keyboardEvent$target;
|
|
47
|
+
var _keyboardEvent$target, _ref$current;
|
|
48
48
|
|
|
49
49
|
if (filter && !filter(keyboardEvent)) {
|
|
50
50
|
return !filterPreventDefault;
|
|
@@ -55,7 +55,7 @@ function useHotkeys(keys, callback, options, deps) {
|
|
|
55
55
|
return true;
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
if (ref.current === null || document.activeElement === ref.current) {
|
|
58
|
+
if (ref.current === null || document.activeElement === ref.current || (_ref$current = ref.current) != null && _ref$current.contains(document.activeElement)) {
|
|
59
59
|
callback(keyboardEvent, hotkeysEvent);
|
|
60
60
|
return true;
|
|
61
61
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react-hotkeys-hook.esm.js","sources":["../src/useIsHotkeyPressed.ts","../src/useHotkeys.ts","../src/index.ts"],"sourcesContent":["import hotkeys from 'hotkeys-js';\n\n/**\n * @deprecated Use isHotkeyPressed instead. Will be removed version 4.\n */\nexport function useIsHotkeyPressed() {\n return hotkeys.isPressed;\n}","import hotkeys, { HotkeysEvent, KeyHandler } from 'hotkeys-js';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\ntype AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';\n\n// We implement our own custom filter system.\nhotkeys.filter = () => true;\n\nconst tagFilter = ({ target }: KeyboardEvent, enableOnTags?: AvailableTags[]) => {\n const targetTagName = target && (target as HTMLElement).tagName;\n\n return Boolean((targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags)));\n};\n\nconst isKeyboardEventTriggeredByInput = (ev: KeyboardEvent) => {\n return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);\n};\n\nexport type Options = {\n enabled?: boolean; // Main setting that determines if the hotkey is enabled or not. (Default: true)\n filter?: typeof hotkeys.filter; // A filter function returning whether the callback should get triggered or not. (Default: undefined)\n filterPreventDefault?: boolean; // Prevent default browser behavior if the filter function returns false. (Default: true)\n enableOnTags?: AvailableTags[]; // Enable hotkeys on a list of tags. (Default: [])\n enableOnContentEditable?: boolean; // Enable hotkeys on tags with contentEditable props. (Default: false)\n splitKey?: string; // Character to split keys in hotkeys combinations. (Default +)\n scope?: string; // Scope. Currently not doing anything.\n keyup?: boolean; // Trigger on keyup event? (Default: undefined)\n keydown?: boolean; // Trigger on keydown event? (Default: true)\n};\n\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: any[] | Options, deps?: any[]): React.MutableRefObject<T | null> {\n if (options instanceof Array) {\n deps = options;\n options = undefined;\n }\n\n const {\n enableOnTags,\n filter,\n keyup,\n keydown,\n filterPreventDefault = true,\n enabled = true,\n enableOnContentEditable = false,\n } = options as Options || {};\n const ref = useRef<T | null>(null);\n\n // The return value of this callback determines if the browsers default behavior is prevented.\n const memoisedCallback = useCallback((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => {\n if (filter && !filter(keyboardEvent)) {\n return !filterPreventDefault;\n }\n\n // Check whether the hotkeys was triggered inside an input and that input is enabled or if it was triggered by a content editable tag and it is enabled.\n if (\n (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags))\n || ((keyboardEvent.target as HTMLElement)?.isContentEditable && !enableOnContentEditable)\n ) {\n return true;\n }\n\n if (ref.current === null || document.activeElement === ref.current) {\n callback(keyboardEvent, hotkeysEvent);\n return true;\n }\n\n return false;\n }, deps ? [ref, enableOnTags, filter, ...deps] : [ref, enableOnTags, filter]);\n\n useEffect(() => {\n if (!enabled) {\n hotkeys.unbind(keys, memoisedCallback);\n\n return;\n }\n\n // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.\n if (keyup && keydown !== true) {\n (options as Options).keydown = false;\n }\n\n hotkeys(keys, (options as Options) || {}, memoisedCallback);\n\n return () => hotkeys.unbind(keys, memoisedCallback);\n }, [memoisedCallback, keys, enabled]);\n\n return ref;\n}\n","import { useIsHotkeyPressed } from './useIsHotkeyPressed';\nimport { useHotkeys, Options } from './useHotkeys';\nimport hotkeys from 'hotkeys-js';\n\nconst isHotkeyPressed = hotkeys.isPressed;\n\nexport { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };"],"names":["useIsHotkeyPressed","hotkeys","isPressed","filter","tagFilter","enableOnTags","target","targetTagName","tagName","Boolean","includes","isKeyboardEventTriggeredByInput","ev","useHotkeys","keys","callback","options","deps","Array","undefined","keyup","keydown","filterPreventDefault","enabled","enableOnContentEditable","ref","useRef","memoisedCallback","useCallback","keyboardEvent","hotkeysEvent","isContentEditable","current","document","activeElement","useEffect","unbind","isHotkeyPressed"],"mappings":";;;AAEA;;;;SAGgBA;AACd,SAAOC,OAAO,CAACC,SAAf;AACD;;ACDDD,OAAO,CAACE,MAAR,GAAiB;AAAA,SAAM,IAAN;AAAA,CAAjB;;AAEA,IAAMC,SAAS,GAAG,SAAZA,SAAY,OAA4BC,YAA5B;MAAGC,cAAAA;AACnB,MAAMC,aAAa,GAAGD,MAAM,IAAKA,MAAsB,CAACE,OAAxD;AAEA,SAAOC,OAAO,CAAEF,aAAa,IAAIF,YAAjB,IAAiCA,YAAY,CAACK,QAAb,CAAsBH,aAAtB,CAAnC,CAAd;AACD,CAJD;;AAMA,IAAMI,+BAA+B,GAAG,SAAlCA,+BAAkC,CAACC,EAAD;AACtC,SAAOR,SAAS,CAACQ,EAAD,EAAK,CAAC,OAAD,EAAU,UAAV,EAAsB,QAAtB,CAAL,CAAhB;AACD,CAFD;;AAmBA,SAAgBC,WAA8BC,MAAcC,UAAsBC,SAA2BC;AAC3G,MAAID,OAAO,YAAYE,KAAvB,EAA8B;AAC5BD,IAAAA,IAAI,GAAGD,OAAP;AACAA,IAAAA,OAAO,GAAGG,SAAV;AACD;;AAED,cAQIH,OAAkB,IAAI,EAR1B;AAAA,MACEX,YADF,SACEA,YADF;AAAA,MAEEF,MAFF,SAEEA,MAFF;AAAA,MAGEiB,KAHF,SAGEA,KAHF;AAAA,MAIEC,OAJF,SAIEA,OAJF;AAAA,oCAKEC,oBALF;AAAA,MAKEA,oBALF,sCAKyB,IALzB;AAAA,4BAMEC,OANF;AAAA,MAMEA,OANF,8BAMY,IANZ;AAAA,oCAOEC,uBAPF;AAAA,MAOEA,uBAPF,sCAO4B,KAP5B;;AASA,MAAMC,GAAG,GAAGC,MAAM,CAAW,IAAX,CAAlB;;AAGA,MAAMC,gBAAgB,GAAGC,WAAW,CAAC,UAACC,aAAD,EAA+BC,YAA/B;;;AACnC,QAAI3B,MAAM,IAAI,CAACA,MAAM,CAAC0B,aAAD,CAArB,EAAsC;AACpC,aAAO,CAACP,oBAAR;AACD;;;AAGD,QACGX,+BAA+B,CAACkB,aAAD,CAA/B,IAAkD,CAACzB,SAAS,CAACyB,aAAD,EAAgBxB,YAAhB,CAA7D,IACK,yBAAAwB,aAAa,CAACvB,MAAd,mCAAsCyB,iBAAtC,IAA2D,CAACP,uBAFnE,EAGE;AACA,aAAO,IAAP;AACD;;AAED,QAAIC,GAAG,CAACO,OAAJ,KAAgB,IAAhB,IAAwBC,QAAQ,CAACC,aAAT,KAA2BT,GAAG,CAACO,
|
|
1
|
+
{"version":3,"file":"react-hotkeys-hook.esm.js","sources":["../src/useIsHotkeyPressed.ts","../src/useHotkeys.ts","../src/index.ts"],"sourcesContent":["import hotkeys from 'hotkeys-js';\n\n/**\n * @deprecated Use isHotkeyPressed instead. Will be removed version 4.\n */\nexport function useIsHotkeyPressed() {\n return hotkeys.isPressed;\n}","import hotkeys, { HotkeysEvent, KeyHandler } from 'hotkeys-js';\nimport React, { useCallback, useEffect, useRef } from 'react';\n\ntype AvailableTags = 'INPUT' | 'TEXTAREA' | 'SELECT';\n\n// We implement our own custom filter system.\nhotkeys.filter = () => true;\n\nconst tagFilter = ({ target }: KeyboardEvent, enableOnTags?: AvailableTags[]) => {\n const targetTagName = target && (target as HTMLElement).tagName;\n\n return Boolean((targetTagName && enableOnTags && enableOnTags.includes(targetTagName as AvailableTags)));\n};\n\nconst isKeyboardEventTriggeredByInput = (ev: KeyboardEvent) => {\n return tagFilter(ev, ['INPUT', 'TEXTAREA', 'SELECT']);\n};\n\nexport type Options = {\n enabled?: boolean; // Main setting that determines if the hotkey is enabled or not. (Default: true)\n filter?: typeof hotkeys.filter; // A filter function returning whether the callback should get triggered or not. (Default: undefined)\n filterPreventDefault?: boolean; // Prevent default browser behavior if the filter function returns false. (Default: true)\n enableOnTags?: AvailableTags[]; // Enable hotkeys on a list of tags. (Default: [])\n enableOnContentEditable?: boolean; // Enable hotkeys on tags with contentEditable props. (Default: false)\n splitKey?: string; // Character to split keys in hotkeys combinations. (Default +)\n scope?: string; // Scope. Currently not doing anything.\n keyup?: boolean; // Trigger on keyup event? (Default: undefined)\n keydown?: boolean; // Trigger on keydown event? (Default: true)\n};\n\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: Options, deps?: any[]): React.MutableRefObject<T | null>;\nexport function useHotkeys<T extends Element>(keys: string, callback: KeyHandler, options?: any[] | Options, deps?: any[]): React.MutableRefObject<T | null> {\n if (options instanceof Array) {\n deps = options;\n options = undefined;\n }\n\n const {\n enableOnTags,\n filter,\n keyup,\n keydown,\n filterPreventDefault = true,\n enabled = true,\n enableOnContentEditable = false,\n } = options as Options || {};\n const ref = useRef<T | null>(null);\n\n // The return value of this callback determines if the browsers default behavior is prevented.\n const memoisedCallback = useCallback((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => {\n if (filter && !filter(keyboardEvent)) {\n return !filterPreventDefault;\n }\n\n // Check whether the hotkeys was triggered inside an input and that input is enabled or if it was triggered by a content editable tag and it is enabled.\n if (\n (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags))\n || ((keyboardEvent.target as HTMLElement)?.isContentEditable && !enableOnContentEditable)\n ) {\n return true;\n }\n\n if (ref.current === null || document.activeElement === ref.current || ref.current?.contains(document.activeElement)) {\n callback(keyboardEvent, hotkeysEvent);\n return true;\n }\n\n return false;\n }, deps ? [ref, enableOnTags, filter, ...deps] : [ref, enableOnTags, filter]);\n\n useEffect(() => {\n if (!enabled) {\n hotkeys.unbind(keys, memoisedCallback);\n\n return;\n }\n\n // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.\n if (keyup && keydown !== true) {\n (options as Options).keydown = false;\n }\n\n hotkeys(keys, (options as Options) || {}, memoisedCallback);\n\n return () => hotkeys.unbind(keys, memoisedCallback);\n }, [memoisedCallback, keys, enabled]);\n\n return ref;\n}\n","import { useIsHotkeyPressed } from './useIsHotkeyPressed';\nimport { useHotkeys, Options } from './useHotkeys';\nimport hotkeys from 'hotkeys-js';\n\nconst isHotkeyPressed = hotkeys.isPressed;\n\nexport { useHotkeys, useIsHotkeyPressed, isHotkeyPressed, Options };"],"names":["useIsHotkeyPressed","hotkeys","isPressed","filter","tagFilter","enableOnTags","target","targetTagName","tagName","Boolean","includes","isKeyboardEventTriggeredByInput","ev","useHotkeys","keys","callback","options","deps","Array","undefined","keyup","keydown","filterPreventDefault","enabled","enableOnContentEditable","ref","useRef","memoisedCallback","useCallback","keyboardEvent","hotkeysEvent","isContentEditable","current","document","activeElement","contains","useEffect","unbind","isHotkeyPressed"],"mappings":";;;AAEA;;;;SAGgBA;AACd,SAAOC,OAAO,CAACC,SAAf;AACD;;ACDDD,OAAO,CAACE,MAAR,GAAiB;AAAA,SAAM,IAAN;AAAA,CAAjB;;AAEA,IAAMC,SAAS,GAAG,SAAZA,SAAY,OAA4BC,YAA5B;MAAGC,cAAAA;AACnB,MAAMC,aAAa,GAAGD,MAAM,IAAKA,MAAsB,CAACE,OAAxD;AAEA,SAAOC,OAAO,CAAEF,aAAa,IAAIF,YAAjB,IAAiCA,YAAY,CAACK,QAAb,CAAsBH,aAAtB,CAAnC,CAAd;AACD,CAJD;;AAMA,IAAMI,+BAA+B,GAAG,SAAlCA,+BAAkC,CAACC,EAAD;AACtC,SAAOR,SAAS,CAACQ,EAAD,EAAK,CAAC,OAAD,EAAU,UAAV,EAAsB,QAAtB,CAAL,CAAhB;AACD,CAFD;;AAmBA,SAAgBC,WAA8BC,MAAcC,UAAsBC,SAA2BC;AAC3G,MAAID,OAAO,YAAYE,KAAvB,EAA8B;AAC5BD,IAAAA,IAAI,GAAGD,OAAP;AACAA,IAAAA,OAAO,GAAGG,SAAV;AACD;;AAED,cAQIH,OAAkB,IAAI,EAR1B;AAAA,MACEX,YADF,SACEA,YADF;AAAA,MAEEF,MAFF,SAEEA,MAFF;AAAA,MAGEiB,KAHF,SAGEA,KAHF;AAAA,MAIEC,OAJF,SAIEA,OAJF;AAAA,oCAKEC,oBALF;AAAA,MAKEA,oBALF,sCAKyB,IALzB;AAAA,4BAMEC,OANF;AAAA,MAMEA,OANF,8BAMY,IANZ;AAAA,oCAOEC,uBAPF;AAAA,MAOEA,uBAPF,sCAO4B,KAP5B;;AASA,MAAMC,GAAG,GAAGC,MAAM,CAAW,IAAX,CAAlB;;AAGA,MAAMC,gBAAgB,GAAGC,WAAW,CAAC,UAACC,aAAD,EAA+BC,YAA/B;;;AACnC,QAAI3B,MAAM,IAAI,CAACA,MAAM,CAAC0B,aAAD,CAArB,EAAsC;AACpC,aAAO,CAACP,oBAAR;AACD;;;AAGD,QACGX,+BAA+B,CAACkB,aAAD,CAA/B,IAAkD,CAACzB,SAAS,CAACyB,aAAD,EAAgBxB,YAAhB,CAA7D,IACK,yBAAAwB,aAAa,CAACvB,MAAd,mCAAsCyB,iBAAtC,IAA2D,CAACP,uBAFnE,EAGE;AACA,aAAO,IAAP;AACD;;AAED,QAAIC,GAAG,CAACO,OAAJ,KAAgB,IAAhB,IAAwBC,QAAQ,CAACC,aAAT,KAA2BT,GAAG,CAACO,OAAvD,oBAAkEP,GAAG,CAACO,OAAtE,aAAkE,aAAaG,QAAb,CAAsBF,QAAQ,CAACC,aAA/B,CAAtE,EAAqH;AACnHnB,MAAAA,QAAQ,CAACc,aAAD,EAAgBC,YAAhB,CAAR;AACA,aAAO,IAAP;AACD;;AAED,WAAO,KAAP;AACD,GAnBmC,EAmBjCb,IAAI,IAAIQ,GAAJ,EAASpB,YAAT,EAAuBF,MAAvB,SAAkCc,IAAlC,IAA0C,CAACQ,GAAD,EAAMpB,YAAN,EAAoBF,MAApB,CAnBb,CAApC;AAqBAiC,EAAAA,SAAS,CAAC;AACR,QAAI,CAACb,OAAL,EAAc;AACZtB,MAAAA,OAAO,CAACoC,MAAR,CAAevB,IAAf,EAAqBa,gBAArB;AAEA;AACD;;;AAGD,QAAIP,KAAK,IAAIC,OAAO,KAAK,IAAzB,EAA+B;AAC5BL,MAAAA,OAAmB,CAACK,OAApB,GAA8B,KAA9B;AACF;;AAEDpB,IAAAA,OAAO,CAACa,IAAD,EAAQE,OAAmB,IAAI,EAA/B,EAAmCW,gBAAnC,CAAP;AAEA,WAAO;AAAA,aAAM1B,OAAO,CAACoC,MAAR,CAAevB,IAAf,EAAqBa,gBAArB,CAAN;AAAA,KAAP;AACD,GAfQ,EAeN,CAACA,gBAAD,EAAmBb,IAAnB,EAAyBS,OAAzB,CAfM,CAAT;AAiBA,SAAOE,GAAP;AACD;;ICtFKa,eAAe,GAAGrC,OAAO,CAACC,SAAhC;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-hotkeys-hook",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.7",
|
|
4
4
|
"repository": "https://JohannesKlauss@github.com/JohannesKlauss/react-keymap-hook.git",
|
|
5
5
|
"homepage": "https://johannesklauss.github.io/react-hotkeys-hook/",
|
|
6
6
|
"author": "Johannes Klauss",
|
|
@@ -54,29 +54,29 @@
|
|
|
54
54
|
"trailingComma": "es5"
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
57
|
-
"hotkeys-js": "3.9.
|
|
57
|
+
"hotkeys-js": "3.9.4"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
|
-
"@babel/core": "7.
|
|
61
|
-
"@babel/plugin-proposal-class-properties": "7.
|
|
62
|
-
"@babel/preset-env": "7.
|
|
63
|
-
"@babel/preset-react": "7.
|
|
64
|
-
"@babel/preset-typescript": "7.
|
|
65
|
-
"@testing-library/react": "13.
|
|
66
|
-
"@testing-library/react-hooks": "8.0.
|
|
60
|
+
"@babel/core": "7.18.9",
|
|
61
|
+
"@babel/plugin-proposal-class-properties": "7.18.6",
|
|
62
|
+
"@babel/preset-env": "7.18.9",
|
|
63
|
+
"@babel/preset-react": "7.18.6",
|
|
64
|
+
"@babel/preset-typescript": "7.18.6",
|
|
65
|
+
"@testing-library/react": "13.3.0",
|
|
66
|
+
"@testing-library/react-hooks": "8.0.1",
|
|
67
67
|
"@testing-library/user-event": "13.5.0",
|
|
68
|
-
"@types/jest": "27.5.
|
|
69
|
-
"@types/react": "18.0.
|
|
70
|
-
"@types/react-dom": "18.0.
|
|
71
|
-
"eslint-plugin-prettier": "4.
|
|
68
|
+
"@types/jest": "27.5.2",
|
|
69
|
+
"@types/react": "18.0.15",
|
|
70
|
+
"@types/react-dom": "18.0.6",
|
|
71
|
+
"eslint-plugin-prettier": "4.2.1",
|
|
72
72
|
"jest": "26.6.3",
|
|
73
|
-
"prettier": "2.
|
|
74
|
-
"react": "18.
|
|
75
|
-
"react-dom": "18.
|
|
76
|
-
"react-test-renderer": "18.
|
|
73
|
+
"prettier": "2.7.1",
|
|
74
|
+
"react": "18.2.0",
|
|
75
|
+
"react-dom": "18.2.0",
|
|
76
|
+
"react-test-renderer": "18.2.0",
|
|
77
77
|
"tsdx": "0.14.1",
|
|
78
78
|
"tslib": "2.4.0",
|
|
79
|
-
"typescript": "4.
|
|
79
|
+
"typescript": "4.7.4"
|
|
80
80
|
},
|
|
81
81
|
"peerDependencies": {
|
|
82
82
|
"react": ">=16.8.1",
|
package/src/useHotkeys.ts
CHANGED
|
@@ -62,7 +62,7 @@ export function useHotkeys<T extends Element>(keys: string, callback: KeyHandler
|
|
|
62
62
|
return true;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
if (ref.current === null || document.activeElement === ref.current) {
|
|
65
|
+
if (ref.current === null || document.activeElement === ref.current || ref.current?.contains(document.activeElement)) {
|
|
66
66
|
callback(keyboardEvent, hotkeysEvent);
|
|
67
67
|
return true;
|
|
68
68
|
}
|