react-hotkeys-hook - npm Package Compare versions

Comparing version 4.2.0 to 4.2.1

dist/react-hotkeys-hook.cjs.development.js

@@ -115,16 +115,18 @@ 'use strict';
 (function () {
-  document.addEventListener('keydown', function (e) {
-    if (e.key === undefined) {
-      // Synthetic event (e.g., Chrome autofill).  Ignore.
-      return;
-    }
-    pushToCurrentlyPressedKeys(mapKey(e.code));
-  });
-  document.addEventListener('keyup', function (e) {
-    if (e.key === undefined) {
-      // Synthetic event (e.g., Chrome autofill).  Ignore.
-      return;
-    }
-    removeFromCurrentlyPressedKeys(mapKey(e.code));
-  });
+  if (typeof document !== 'undefined') {
+    document.addEventListener('keydown', function (e) {
+      if (e.key === undefined) {
+        // Synthetic event (e.g., Chrome autofill).  Ignore.
+        return;
+      }
+      pushToCurrentlyPressedKeys(mapKey(e.code));
+    });
+    document.addEventListener('keyup', function (e) {
+      if (e.key === undefined) {
+        // Synthetic event (e.g., Chrome autofill).  Ignore.
+        return;
+      }
+      removeFromCurrentlyPressedKeys(mapKey(e.code));
+    });
+  }
 })();
@@ -443,2 +445,4 @@
     }
+    event.preventDefault();
+    event.stopPropagation();
     setKeys(function (prev) {
@@ -450,15 +454,16 @@ var newKeys = new Set(prev);
   }, []);
+  var stop = react.useCallback(function () {
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('keydown', handler);
+      setIsRecording(false);
+    }
+  }, [handler]);
   var start = react.useCallback(function () {
     setKeys(new Set());
     if (typeof document !== 'undefined') {
+      stop();
       document.addEventListener('keydown', handler);
       setIsRecording(true);
     }
-  }, [handler]);
-  var stop = react.useCallback(function () {
-    if (typeof document !== 'undefined') {
-      document.removeEventListener('keydown', handler);
-      setIsRecording(false);
-    }
-  }, [handler]);
+  }, [handler, stop]);
   return [keys, {
@@ -465,0 +470,0 @@ start: start,

dist/react-hotkeys-hook.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";var e=require("react"),t=require("react/jsx-runtime");function n(){return(n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var r=["shift","alt","meta","mod"],o={esc:"escape",return:"enter",".":"period",",":"comma","-":"slash"," ":"space","#":"backslash","+":"bracketright",ShiftLeft:"shift",ShiftRight:"shift",AltLeft:"alt",AltRight:"alt",MetaLeft:"meta",MetaRight:"meta",ControlLeft:"ctrl",ControlRight:"ctrl"};function u(e){return(o[e]||e).trim().toLowerCase().replace("key","").replace("digit","").replace("numpad","").replace("arrow","")}function i(e,t){return void 0===t&&(t=","),"string"==typeof e?e.split(t):e}function c(e,t){void 0===t&&(t="+");var o=e.toLocaleLowerCase().split(t).map((function(e){return u(e)}));return n({},{alt:o.includes("alt"),shift:o.includes("shift"),meta:o.includes("meta"),mod:o.includes("mod")},{keys:o.filter((function(e){return!r.includes(e)}))})}var a=new Set;function l(e,t){return void 0===t&&(t=","),(Array.isArray(e)?e:e.split(t)).every((function(e){return a.has(e.trim().toLowerCase())}))}function s(e,t){var n=e.target;void 0===t&&(t=!1);var r=n&&n.tagName;return t instanceof Array?Boolean(r&&t&&t.some((function(e){return e.toLowerCase()===r.toLowerCase()}))):Boolean(r&&t&&!0===t)}document.addEventListener("keydown",(function(e){var t,n;void 0!==e.key&&(t=u(e.code),n=Array.isArray(t)?t:[t],a.has("meta")&&a.forEach((function(e){return!function(e){return r.includes(e)}(e)&&a.delete(e)})),n.forEach((function(e){return a.add(e.toLowerCase())})))})),document.addEventListener("keyup",(function(e){var t;void 0!==e.key&&("meta"===(t=u(e.code))?a.clear():a.delete(t))}));var d=e.createContext(void 0);function f(e){return t.jsx(d.Provider,{value:{addHotkey:e.addHotkey,removeHotkey:e.removeHotkey},children:e.children})}function v(e,t){return e&&t&&"object"==typeof e&&"object"==typeof t?Object.keys(e).length===Object.keys(t).length&&Object.keys(e).reduce((function(n,r){return n&&v(e[r],t[r])}),!0):e===t}var y=e.createContext({hotkeys:[],enabledScopes:[],toggleScope:function(){},enableScope:function(){},disableScope:function(){}}),p=function(){return e.useContext(y)},k=function(e){e.stopPropagation(),e.preventDefault(),e.stopImmediatePropagation()},m="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;exports.HotkeysProvider=function(n){var r=n.initiallyActiveScopes,o=void 0===r?["*"]:r,u=n.children,i=e.useState((null==o?void 0:o.length)>0?o:["*"]),c=i[0],a=i[1],l=e.useState([]),s=l[0],d=l[1],p=e.useCallback((function(e){a((function(t){return t.includes("*")?[e]:Array.from(new Set([].concat(t,[e])))}))}),[]),k=e.useCallback((function(e){a((function(t){return 0===t.filter((function(t){return t!==e})).length?["*"]:t.filter((function(t){return t!==e}))}))}),[]),m=e.useCallback((function(e){a((function(t){return t.includes(e)?0===t.filter((function(t){return t!==e})).length?["*"]:t.filter((function(t){return t!==e})):t.includes("*")?[e]:Array.from(new Set([].concat(t,[e])))}))}),[]),h=e.useCallback((function(e){d((function(t){return[].concat(t,[e])}))}),[]),b=e.useCallback((function(e){d((function(t){return t.filter((function(t){return!v(t,e)}))}))}),[]);return t.jsx(y.Provider,{value:{enabledScopes:c,hotkeys:s,enableScope:p,disableScope:k,toggleScope:m},children:t.jsx(f,{addHotkey:h,removeHotkey:b,children:u})})},exports.isHotkeyPressed=l,exports.useHotkeys=function(t,n,r,o){var a=e.useRef(null),f=e.useRef(!1),y=r instanceof Array?o instanceof Array?void 0:o:r,h=e.useCallback(n,[].concat(r instanceof Array?r:o instanceof Array?o:[])),b=function(t){var n=e.useRef(void 0);return v(n.current,t)||(n.current=t),n.current}(y),g=p().enabledScopes,w=e.useContext(d);return m((function(){if(!1!==(null==b?void 0:b.enabled)&&(n=null==b?void 0:b.scopes,0===(e=g).length&&n?(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>'),1):!n||e.some((function(e){return n.includes(e)}))||e.includes("*"))){var e,n,r=function(e){var n;s(e,["input","textarea","select"])&&!s(e,null==b?void 0:b.enableOnFormTags)||(null===a.current||document.activeElement===a.current||a.current.contains(document.activeElement)?(null==(n=e.target)||!n.isContentEditable||null!=b&&b.enableOnContentEditable)&&i(t,null==b?void 0:b.splitKey).forEach((function(t){var n,r=c(t,null==b?void 0:b.combinationKey);if((function(e,t){var n=t.alt,r=t.meta,o=t.mod,i=t.shift,c=t.keys,a=e.key,s=e.code,d=l("alt"),f=l("shift"),v=l("meta"),y=l("ctrl"),p=u(s),k=a.toLowerCase();if(d!==n&&"alt"!==k)return!1;if(f!==i&&"shift"!==k)return!1;if(o){if(!v&&!y)return!1}else if(v!==r&&y!==r&&"meta"!==p&&"ctrl"!==p)return!1;return!(!c||1!==c.length||!c.includes(k)&&!c.includes(p))||(c?l(c):!c)}(e,r)||null!=(n=r.keys)&&n.includes("*"))&&!f.current){if(function(e,t,n){("function"==typeof n&&n(e,t)||!0===n)&&e.preventDefault()}(e,r,null==b?void 0:b.preventDefault),!function(e,t,n){return"function"==typeof n?n(e,t):!0===n||void 0===n}(e,r,null==b?void 0:b.enabled))return void k(e);h(e,r),f.current=!0}})):k(e))},o=function(e){void 0!==e.key&&(void 0===(null==b?void 0:b.keydown)&&!0!==(null==b?void 0:b.keyup)||null!=b&&b.keydown)&&r(e)},d=function(e){void 0!==e.key&&(f.current=!1,null!=b&&b.keyup&&r(e))};return(a.current||document).addEventListener("keyup",d),(a.current||document).addEventListener("keydown",o),w&&i(t,null==b?void 0:b.splitKey).forEach((function(e){return w.addHotkey(c(e,null==b?void 0:b.combinationKey))})),function(){(a.current||document).removeEventListener("keyup",d),(a.current||document).removeEventListener("keydown",o),w&&i(t,null==b?void 0:b.splitKey).forEach((function(e){return w.removeHotkey(c(e,null==b?void 0:b.combinationKey))}))}}}),[t,h,b,g]),a},exports.useHotkeysContext=p,exports.useRecordHotkeys=function(){var t=e.useState(new Set),n=t[0],r=t[1],o=e.useState(!1),i=o[0],c=o[1],a=e.useCallback((function(e){void 0!==e.key&&r((function(t){var n=new Set(t);return n.add(u(e.code)),n}))}),[]);return[n,{start:e.useCallback((function(){r(new Set),"undefined"!=typeof document&&(document.addEventListener("keydown",a),c(!0))}),[a]),stop:e.useCallback((function(){"undefined"!=typeof document&&(document.removeEventListener("keydown",a),c(!1))}),[a]),isRecording:i}]};
+"use strict";var e=require("react"),t=require("react/jsx-runtime");function n(){return(n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var r=["shift","alt","meta","mod"],o={esc:"escape",return:"enter",".":"period",",":"comma","-":"slash"," ":"space","#":"backslash","+":"bracketright",ShiftLeft:"shift",ShiftRight:"shift",AltLeft:"alt",AltRight:"alt",MetaLeft:"meta",MetaRight:"meta",ControlLeft:"ctrl",ControlRight:"ctrl"};function u(e){return(o[e]||e).trim().toLowerCase().replace("key","").replace("digit","").replace("numpad","").replace("arrow","")}function i(e,t){return void 0===t&&(t=","),"string"==typeof e?e.split(t):e}function c(e,t){void 0===t&&(t="+");var o=e.toLocaleLowerCase().split(t).map((function(e){return u(e)}));return n({},{alt:o.includes("alt"),shift:o.includes("shift"),meta:o.includes("meta"),mod:o.includes("mod")},{keys:o.filter((function(e){return!r.includes(e)}))})}var a=new Set;function l(e,t){return void 0===t&&(t=","),(Array.isArray(e)?e:e.split(t)).every((function(e){return a.has(e.trim().toLowerCase())}))}function s(e,t){var n=e.target;void 0===t&&(t=!1);var r=n&&n.tagName;return t instanceof Array?Boolean(r&&t&&t.some((function(e){return e.toLowerCase()===r.toLowerCase()}))):Boolean(r&&t&&!0===t)}"undefined"!=typeof document&&(document.addEventListener("keydown",(function(e){var t,n;void 0!==e.key&&(t=u(e.code),n=Array.isArray(t)?t:[t],a.has("meta")&&a.forEach((function(e){return!function(e){return r.includes(e)}(e)&&a.delete(e)})),n.forEach((function(e){return a.add(e.toLowerCase())})))})),document.addEventListener("keyup",(function(e){var t;void 0!==e.key&&("meta"===(t=u(e.code))?a.clear():a.delete(t))})));var d=e.createContext(void 0);function f(e){return t.jsx(d.Provider,{value:{addHotkey:e.addHotkey,removeHotkey:e.removeHotkey},children:e.children})}function v(e,t){return e&&t&&"object"==typeof e&&"object"==typeof t?Object.keys(e).length===Object.keys(t).length&&Object.keys(e).reduce((function(n,r){return n&&v(e[r],t[r])}),!0):e===t}var y=e.createContext({hotkeys:[],enabledScopes:[],toggleScope:function(){},enableScope:function(){},disableScope:function(){}}),p=function(){return e.useContext(y)},m=function(e){e.stopPropagation(),e.preventDefault(),e.stopImmediatePropagation()},k="undefined"!=typeof window?e.useLayoutEffect:e.useEffect;exports.HotkeysProvider=function(n){var r=n.initiallyActiveScopes,o=void 0===r?["*"]:r,u=n.children,i=e.useState((null==o?void 0:o.length)>0?o:["*"]),c=i[0],a=i[1],l=e.useState([]),s=l[0],d=l[1],p=e.useCallback((function(e){a((function(t){return t.includes("*")?[e]:Array.from(new Set([].concat(t,[e])))}))}),[]),m=e.useCallback((function(e){a((function(t){return 0===t.filter((function(t){return t!==e})).length?["*"]:t.filter((function(t){return t!==e}))}))}),[]),k=e.useCallback((function(e){a((function(t){return t.includes(e)?0===t.filter((function(t){return t!==e})).length?["*"]:t.filter((function(t){return t!==e})):t.includes("*")?[e]:Array.from(new Set([].concat(t,[e])))}))}),[]),h=e.useCallback((function(e){d((function(t){return[].concat(t,[e])}))}),[]),b=e.useCallback((function(e){d((function(t){return t.filter((function(t){return!v(t,e)}))}))}),[]);return t.jsx(y.Provider,{value:{enabledScopes:c,hotkeys:s,enableScope:p,disableScope:m,toggleScope:k},children:t.jsx(f,{addHotkey:h,removeHotkey:b,children:u})})},exports.isHotkeyPressed=l,exports.useHotkeys=function(t,n,r,o){var a=e.useRef(null),f=e.useRef(!1),y=r instanceof Array?o instanceof Array?void 0:o:r,h=e.useCallback(n,[].concat(r instanceof Array?r:o instanceof Array?o:[])),b=function(t){var n=e.useRef(void 0);return v(n.current,t)||(n.current=t),n.current}(y),g=p().enabledScopes,w=e.useContext(d);return k((function(){if(!1!==(null==b?void 0:b.enabled)&&(n=null==b?void 0:b.scopes,0===(e=g).length&&n?(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>'),1):!n||e.some((function(e){return n.includes(e)}))||e.includes("*"))){var e,n,r=function(e){var n;s(e,["input","textarea","select"])&&!s(e,null==b?void 0:b.enableOnFormTags)||(null===a.current||document.activeElement===a.current||a.current.contains(document.activeElement)?(null==(n=e.target)||!n.isContentEditable||null!=b&&b.enableOnContentEditable)&&i(t,null==b?void 0:b.splitKey).forEach((function(t){var n,r=c(t,null==b?void 0:b.combinationKey);if((function(e,t){var n=t.alt,r=t.meta,o=t.mod,i=t.shift,c=t.keys,a=e.key,s=e.code,d=l("alt"),f=l("shift"),v=l("meta"),y=l("ctrl"),p=u(s),m=a.toLowerCase();if(d!==n&&"alt"!==m)return!1;if(f!==i&&"shift"!==m)return!1;if(o){if(!v&&!y)return!1}else if(v!==r&&y!==r&&"meta"!==p&&"ctrl"!==p)return!1;return!(!c||1!==c.length||!c.includes(m)&&!c.includes(p))||(c?l(c):!c)}(e,r)||null!=(n=r.keys)&&n.includes("*"))&&!f.current){if(function(e,t,n){("function"==typeof n&&n(e,t)||!0===n)&&e.preventDefault()}(e,r,null==b?void 0:b.preventDefault),!function(e,t,n){return"function"==typeof n?n(e,t):!0===n||void 0===n}(e,r,null==b?void 0:b.enabled))return void m(e);h(e,r),f.current=!0}})):m(e))},o=function(e){void 0!==e.key&&(void 0===(null==b?void 0:b.keydown)&&!0!==(null==b?void 0:b.keyup)||null!=b&&b.keydown)&&r(e)},d=function(e){void 0!==e.key&&(f.current=!1,null!=b&&b.keyup&&r(e))};return(a.current||document).addEventListener("keyup",d),(a.current||document).addEventListener("keydown",o),w&&i(t,null==b?void 0:b.splitKey).forEach((function(e){return w.addHotkey(c(e,null==b?void 0:b.combinationKey))})),function(){(a.current||document).removeEventListener("keyup",d),(a.current||document).removeEventListener("keydown",o),w&&i(t,null==b?void 0:b.splitKey).forEach((function(e){return w.removeHotkey(c(e,null==b?void 0:b.combinationKey))}))}}}),[t,h,b,g]),a},exports.useHotkeysContext=p,exports.useRecordHotkeys=function(){var t=e.useState(new Set),n=t[0],r=t[1],o=e.useState(!1),i=o[0],c=o[1],a=e.useCallback((function(e){void 0!==e.key&&(e.preventDefault(),e.stopPropagation(),r((function(t){var n=new Set(t);return n.add(u(e.code)),n})))}),[]),l=e.useCallback((function(){"undefined"!=typeof document&&(document.removeEventListener("keydown",a),c(!1))}),[a]);return[n,{start:e.useCallback((function(){r(new Set),"undefined"!=typeof document&&(l(),document.addEventListener("keydown",a),c(!0))}),[a,l]),stop:l,isRecording:i}]};
 //# sourceMappingURL=react-hotkeys-hook.cjs.production.min.js.map

dist/react-hotkeys-hook.esm.js

@@ -113,16 +113,18 @@ import { useContext, createContext, useState, useCallback, useRef, useLayoutEffect, useEffect } from 'react';
 (function () {
-  document.addEventListener('keydown', function (e) {
-    if (e.key === undefined) {
-      // Synthetic event (e.g., Chrome autofill).  Ignore.
-      return;
-    }
-    pushToCurrentlyPressedKeys(mapKey(e.code));
-  });
-  document.addEventListener('keyup', function (e) {
-    if (e.key === undefined) {
-      // Synthetic event (e.g., Chrome autofill).  Ignore.
-      return;
-    }
-    removeFromCurrentlyPressedKeys(mapKey(e.code));
-  });
+  if (typeof document !== 'undefined') {
+    document.addEventListener('keydown', function (e) {
+      if (e.key === undefined) {
+        // Synthetic event (e.g., Chrome autofill).  Ignore.
+        return;
+      }
+      pushToCurrentlyPressedKeys(mapKey(e.code));
+    });
+    document.addEventListener('keyup', function (e) {
+      if (e.key === undefined) {
+        // Synthetic event (e.g., Chrome autofill).  Ignore.
+        return;
+      }
+      removeFromCurrentlyPressedKeys(mapKey(e.code));
+    });
+  }
 })();
@@ -441,2 +443,4 @@
     }
+    event.preventDefault();
+    event.stopPropagation();
     setKeys(function (prev) {
@@ -448,15 +452,16 @@ var newKeys = new Set(prev);
   }, []);
+  var stop = useCallback(function () {
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('keydown', handler);
+      setIsRecording(false);
+    }
+  }, [handler]);
   var start = useCallback(function () {
     setKeys(new Set());
     if (typeof document !== 'undefined') {
+      stop();
       document.addEventListener('keydown', handler);
       setIsRecording(true);
     }
-  }, [handler]);
-  var stop = useCallback(function () {
-    if (typeof document !== 'undefined') {
-      document.removeEventListener('keydown', handler);
-      setIsRecording(false);
-    }
-  }, [handler]);
+  }, [handler, stop]);
   return [keys, {
@@ -463,0 +468,0 @@ start: start,

package.json

 {
   "name": "react-hotkeys-hook",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "repository": "https://[e-mail]/JohannesKlauss/react-keymap-hook.git",
@@ -5,0 +5,0 @@ "homepage": "https://johannesklauss.github.io/react-hotkeys-hook/",

src/isHotkeyPressed.ts

@@ -40,19 +40,21 @@ import { isHotkeyModifier, mapKey } from './parseHotkeys'
 (() => {
-  document.addEventListener('keydown', e => {
-    if (e.key === undefined) {
-      // Synthetic event (e.g., Chrome autofill).  Ignore.
-      return
-    }
+  if (typeof document !== 'undefined') {
+    document.addEventListener('keydown', e => {
+      if (e.key === undefined) {
+        // Synthetic event (e.g., Chrome autofill).  Ignore.
+        return
+      }
 
-    pushToCurrentlyPressedKeys(mapKey(e.code))
-  })
+      pushToCurrentlyPressedKeys(mapKey(e.code))
+    })
 
-  document.addEventListener('keyup', e => {
-    if (e.key === undefined) {
-      // Synthetic event (e.g., Chrome autofill).  Ignore.
-      return
-    }
+    document.addEventListener('keyup', e => {
+      if (e.key === undefined) {
+        // Synthetic event (e.g., Chrome autofill).  Ignore.
+        return
+      }
 
-    removeFromCurrentlyPressedKeys(mapKey(e.code))
-  })
+      removeFromCurrentlyPressedKeys(mapKey(e.code))
+    })
+  }
 })()

src/useRecordHotkeys.ts

@@ -14,2 +14,5 @@ import { useCallback, useState } from 'react'
 
+    event.preventDefault()
+    event.stopPropagation()
+
     setKeys(prev => {
@@ -24,2 +27,10 @@ const newKeys = new Set(prev)
 
+  const stop = useCallback(() => {
+    if (typeof document !== 'undefined') {
+      document.removeEventListener('keydown', handler)
+
+      setIsRecording(false)
+    }
+  }, [handler])
+
   const start = useCallback(() => {
@@ -29,2 +40,4 @@ setKeys(new Set<string>())
     if (typeof document !== 'undefined') {
+      stop()
+
       document.addEventListener('keydown', handler)
@@ -34,13 +47,5 @@
     }
-  }, [handler])
+  }, [handler, stop])
 
-  const stop = useCallback(() => {
-    if (typeof document !== 'undefined') {
-      document.removeEventListener('keydown', handler)
-
-      setIsRecording(false)
-    }
-  }, [handler])
-
   return [keys, { start, stop, isRecording }] as const
 }

No alert changes

Improved metrics

Total package byte prevSize

175731

0.76%

Lines of code

1522

1%

No dependency changes