react-hotkeys-hook - npm Package Compare versions

Comparing version 3.3.0 to 3.3.1

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

@@ -40,5 +40,8 @@ 'use strict';
       _ref2$enabled = _ref2.enabled,
-      enabled = _ref2$enabled === void 0 ? true : _ref2$enabled;
+      enabled = _ref2$enabled === void 0 ? true : _ref2$enabled,
+      _ref2$enableOnContent = _ref2.enableOnContentEditable,
+      enableOnContentEditable = _ref2$enableOnContent === void 0 ? false : _ref2$enableOnContent;
 
-  var ref = react.useRef(null);
+  var ref = react.useRef(null); // The return value of this callback determines if the browsers default behavior is prevented.
+
   var memoisedCallback = react.useCallback(function (keyboardEvent, hotkeysEvent) {
@@ -49,5 +52,6 @@ var _keyboardEvent$target;
       return !filterPreventDefault;
-    }
+    } // 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.
 
-    if (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags) || (_keyboardEvent$target = keyboardEvent.target) != null && _keyboardEvent$target.isContentEditable) {
+
+    if (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags) || (_keyboardEvent$target = keyboardEvent.target) != null && _keyboardEvent$target.isContentEditable && !enableOnContentEditable) {
       return true;
@@ -66,4 +70,5 @@ }
       return;
-    }
+    } // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.
 
+
     if (keyup && keydown !== true) {
@@ -70,0 +75,0 @@ options.keydown = false;

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

@@ -1,2 +0,2 @@
-"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.useHotkeys=function(e,u,i,o){i instanceof Array&&(o=i,i=void 0);var a=i||{},s=a.enableOnTags,c=a.filter,l=a.keyup,f=a.keydown,d=a.filterPreventDefault,v=void 0===d||d,y=a.enabled,k=void 0===y||y,E=n.useRef(null),b=n.useCallback((function(e,t){var n;return c&&!c(e)?!v:!!(r(e,["INPUT","TEXTAREA","SELECT"])&&!r(e,s)||null!=(n=e.target)&&n.isContentEditable)||(null===E.current||document.activeElement===E.current)&&(u(e,t),!0)}),o?[E,s,c].concat(o):[E,s,c]);return n.useEffect((function(){if(k)return l&&!0!==f&&(i.keydown=!1),t(e,i||{},b),function(){return t.unbind(e,b)}}),[b,i,e,k]),E},exports.useIsHotkeyPressed=function(){return t.isPressed};
+"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.useHotkeys=function(e,u,i,o){i instanceof Array&&(o=i,i=void 0);var a=i||{},l=a.enableOnTags,s=a.filter,c=a.keyup,f=a.keydown,d=a.filterPreventDefault,v=void 0===d||d,b=a.enabled,y=void 0===b||b,E=a.enableOnContentEditable,k=void 0!==E&&E,T=n.useRef(null),g=n.useCallback((function(e,t){var n;return s&&!s(e)?!v:!!(r(e,["INPUT","TEXTAREA","SELECT"])&&!r(e,l)||null!=(n=e.target)&&n.isContentEditable&&!k)||(null===T.current||document.activeElement===T.current)&&(u(e,t),!0)}),o?[T,l,s].concat(o):[T,l,s]);return n.useEffect((function(){if(y)return c&&!0!==f&&(i.keydown=!1),t(e,i||{},g),function(){return t.unbind(e,g)}}),[g,i,e,y]),T},exports.useIsHotkeyPressed=function(){return t.isPressed};
 //# sourceMappingURL=react-hotkeys-hook.cjs.production.min.js.map

dist/react-hotkeys-hook.esm.js

@@ -36,5 +36,8 @@ import hotkeys from 'hotkeys-js';
       _ref2$enabled = _ref2.enabled,
-      enabled = _ref2$enabled === void 0 ? true : _ref2$enabled;
+      enabled = _ref2$enabled === void 0 ? true : _ref2$enabled,
+      _ref2$enableOnContent = _ref2.enableOnContentEditable,
+      enableOnContentEditable = _ref2$enableOnContent === void 0 ? false : _ref2$enableOnContent;
 
-  var ref = useRef(null);
+  var ref = useRef(null); // The return value of this callback determines if the browsers default behavior is prevented.
+
   var memoisedCallback = useCallback(function (keyboardEvent, hotkeysEvent) {
@@ -45,5 +48,6 @@ var _keyboardEvent$target;
       return !filterPreventDefault;
-    }
+    } // 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.
 
-    if (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags) || (_keyboardEvent$target = keyboardEvent.target) != null && _keyboardEvent$target.isContentEditable) {
+
+    if (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags) || (_keyboardEvent$target = keyboardEvent.target) != null && _keyboardEvent$target.isContentEditable && !enableOnContentEditable) {
       return true;
@@ -62,4 +66,5 @@ }
       return;
-    }
+    } // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.
 
+
     if (keyup && keydown !== true) {
@@ -66,0 +71,0 @@ options.keydown = false;

dist/useHotkeys.d.ts

@@ -9,2 +9,3 @@ import hotkeys, { KeyHandler } from 'hotkeys-js';
     enableOnTags?: AvailableTags[];
+    enableOnContentEditable?: boolean;
     splitKey?: string;
@@ -11,0 +12,0 @@ scope?: string;

package.json

 {
   "name": "react-hotkeys-hook",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "repository": "https://[e-mail]/JohannesKlauss/react-keymap-hook.git",
@@ -61,9 +61,9 @@ "author": "Johannes Klauss",
   "devDependencies": {
-    "@babel/core": "7.13.13",
+    "@babel/core": "7.13.16",
     "@babel/plugin-proposal-class-properties": "7.13.0",
-    "@babel/preset-env": "7.13.12",
+    "@babel/preset-env": "7.13.15",
     "@babel/preset-react": "7.13.13",
     "@babel/preset-typescript": "7.13.0",
-    "@testing-library/react": "11.2.5",
-    "@testing-library/react-hooks": "5.1.0",
+    "@testing-library/react": "11.2.6",
+    "@testing-library/react-hooks": "5.1.2",
     "@types/jest": "26.0.22",
@@ -75,3 +75,3 @@ "@types/react": "17.0.3",
     "docz": "2.3.1",
-    "eslint-plugin-prettier": "3.3.1",
+    "eslint-plugin-prettier": "3.4.0",
     "jest": "26.6.3",
@@ -83,4 +83,4 @@ "prettier": "2.2.1",
     "tsdx": "0.14.1",
-    "tslib": "2.1.0",
-    "typescript": "4.2.3"
+    "tslib": "2.2.0",
+    "typescript": "4.2.4"
   },
@@ -87,0 +87,0 @@ "peerDependencies": {

src/useHotkeys.ts

@@ -20,10 +20,11 @@ import hotkeys, { HotkeysEvent, KeyHandler } from 'hotkeys-js';
 export type Options = {
-  enabled?: boolean;
-  filter?: typeof hotkeys.filter;
-  filterPreventDefault?: boolean;
-  enableOnTags?: AvailableTags[];
-  splitKey?: string;
-  scope?: string;
-  keyup?: boolean;
-  keydown?: boolean;
+  enabled?: boolean; // Main setting that determines if the hotkey is enabled or not. (Default: true)
+  filter?: typeof hotkeys.filter; // A filter function returning whether the callback should get triggered or not. (Default: undefined)
+  filterPreventDefault?: boolean; // Prevent default browser behavior if the filter function returns false. (Default: true)
+  enableOnTags?: AvailableTags[]; // Enable hotkeys on a list of tags. (Default: [])
+  enableOnContentEditable?: boolean; // Enable hotkeys on tags with contentEditable props. (Default: false)
+  splitKey?: string; // Character to split keys in hotkeys combinations. (Default +)
+  scope?: string; // Scope. Currently not doing anything.
+  keyup?: boolean; // Trigger on keyup event? (Default: undefined)
+  keydown?: boolean; // Trigger on keydown event? (Default: true)
 };
@@ -47,5 +48,7 @@
     enabled = true,
+    enableOnContentEditable = false,
   } = options as Options || {};
   const ref = useRef<T | null>(null);
 
+  // The return value of this callback determines if the browsers default behavior is prevented.
   const memoisedCallback = useCallback((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => {
@@ -56,3 +59,7 @@ if (filter && !filter(keyboardEvent)) {
 
-    if (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags) || (keyboardEvent.target as HTMLElement)?.isContentEditable) {
+    // 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.
+    if (
+      (isKeyboardEventTriggeredByInput(keyboardEvent) && !tagFilter(keyboardEvent, enableOnTags))
+      || ((keyboardEvent.target as HTMLElement)?.isContentEditable && !enableOnContentEditable)
+    ) {
       return true;
@@ -74,2 +81,3 @@ }
 
+    // In this case keydown is likely undefined, so we set it to false, since hotkeys needs the `keydown` key to have a value.
     if (keyup && keydown !== true) {
@@ -76,0 +84,0 @@ (options as Options).keydown = false;

No alert changes

Improved metrics

Total package byte prevSize

49546

13.19%

Lines of code

481

2.78%

No dependency changes