react-hotkeys-hook 5.3.0 → 5.3.1

package/README.md

@@ -38,14 +38,12 @@ A React hook for using keyboard shortcuts in components in a declarative way.
 
 ## Quick Start
 
-The easiest way to use the hook.
-
 ```jsx harmony
 import { useHotkeys } from 'react-hotkeys-hook'
 
 export const ExampleComponent = () => {
   const [count, setCount] = useState(0)
-  useHotkeys('ctrl+k', () => setCount(count + 1), [count])
+  useHotkeys('ctrl+k', () => setCount(prevCount => prevCount + 1))
 
   return (
     <p>
@@ -150,15 +148,18 @@ All options are optional and have a default value which you can override to chan
 | Option                   | Type                                                                                 | Default value | Description                                                                                                                                                                                                                                                                                                                                                                             |
 |--------------------------|--------------------------------------------------------------------------------------|---------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `enabled`                | `boolean` or `(keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => boolean` | `true`        | This option determines whether the hotkey is active or not. It can take a boolean (for example a flag from a state outside) or a function which gets executed once the hotkey is pressed. If the function returns `false` the hotkey won't get executed and all browser events are prevented.                                                                                           |
-| `enableOnFormTags`       | `boolean` or `FormTags[]`                                                            | `false`       | By default hotkeys are not registered if a focus focuses on an input field. This will prevent accidental triggering of hotkeys when the user is typing. If you want to enable hotkeys, use this option. Setting it to true will enable on all form tags, otherwise you can give an array of form tags to enable the hotkey on (possible options are: `['input', 'textarea', 'select']`) |
-| `enableOnContentEditable` | `boolean`                                                                            | `false`       | Set this option to enable hotkeys on tags that have set the `contentEditable` prop to `true`                                                                                                                                                                                                                                                                                            |
-| `combinationKey`         | `string`                                                                             | `+`           | Character to indicate keystrokes like `shift+c`. You might want to change this if you want to listen to the `+` character like `ctrl-+`.                                                                                                                                                                                                                                                |
-| `splitKey`               | `string`                                                                             | `,`           | Character to separate different keystrokes like `ctrl+a, ctrl+b`.                                                                                                                                                                                                                                                                                                                       |
+| `enableOnFormTags`       | `boolean` or `FormTags[]`                                                            | `false`       | By default, hotkeys are disabled when a form element is focused. This prevents accidental triggering while the user is typing. Set to `true` to enable on all form tags, or pass an array of specific tags (e.g. `['input', 'textarea', 'select']`) |
+| `enableOnContentEditable` | `boolean`                                                                            | `false`       | Enable hotkeys on elements with the `contentEditable` attribute set to `true` |
+| `splitKey`               | `string`                                                                             | `+`           | Character that joins keys within a combination (e.g. `shift+a`). Change this if you need to listen for the `+` key itself |
+| `delimiter`              | `string`                                                                             | `,`           | Character that separates different hotkey combinations mapped to the same callback (e.g. `ctrl+a, shift+b`) |
 | `scopes`                 | `string` or `string[]`                                                               | `*`           | With scopes you can group hotkeys together. The default scope is the wildcard `*` which matches all hotkeys. Use the `<HotkeysProvider>` component to change active scopes.                                                                                                                                                                                                             |
-| `keyup`                  | `boolean`                                                                            | `false`       | Determines whether to listen to the browsers `keyup` event for triggering the callback.                                                                                                                                                                                                                                                                                                 |
-| `keydown`                | `boolean`                                                                            | `true`        | Determines whether to listen to the browsers `keydown` event for triggering the callback. If you set both `keyup`and `keydown` to true, the callback will trigger on both events.                                                                                                                                                                                                       |
-| `preventDefault`         | `boolean` or `(keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => boolean` | `false`       | Set this to a `true` if you want the hook to prevent the browsers default behavior on certain keystrokes like `meta+s` to save a page. NOTE: Certain keystrokes are not preventable, like `meta+w` to close a tab in chrome.                                                                                                                                                            |
-| `description`             | `string`                                                                              | `undefined`    | Use this option to describe what the hotkey does. this is helpful if you want to display a list of active hotkeys to the user.                                                                                                                                                                                                                                                          |
+| `keyup`                  | `boolean`                                                                            | `false`       | Trigger the callback on the browser's `keyup` event |
+| `keydown`                | `boolean`                                                                            | `true`        | Trigger the callback on the browser's `keydown` event. Set both `keyup` and `keydown` to `true` to trigger on both events |
+| `preventDefault`         | `boolean` or `(keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => boolean` | `false`       | Prevent the browser's default behavior for the matched keystroke. Useful for overriding shortcuts like `meta+s`. Note: some browser shortcuts (e.g. `meta+w`) cannot be overridden |
+| `description`            | `string`                                                                              | `undefined`   | Human-readable description of what the hotkey does. Useful for building help panels |
+| `useKey`                 | `boolean`                                                                             | `false`       | Listen to the produced character instead of the physical key code |
+| `ignoreModifiers`        | `boolean`                                                                             | `false`       | Ignore modifier keys when matching hotkeys |
+| `sequenceTimeoutMs`      | `number`                                                                               | `1000`        | Time window in milliseconds for sequential hotkeys |
 
 
 #### Overloads
@@ -186,7 +187,7 @@ isHotkeyPressed(['esc', 'ctrl+s']) // Returns true if Escape or Ctrl+S are press
 
 ## Support
 
-* Ask your question in the [Github Discussions]([Support](https://github.com/JohannesKlauss/react-hotkeys-hook/discussions))
+* Ask your question in [GitHub Discussions](https://github.com/JohannesKlauss/react-hotkeys-hook/discussions)
 * Ask your question on [StackOverflow](https://stackoverflow.com/search?page=1&tab=Relevance&q=react-hotkeys-hook)
 
 ## Found an issue or have a feature request?

package/{packages/react-hotkeys-hook/dist → dist}/index.js

@@ -31,7 +31,7 @@ function $(e) {
 function R(e, t = ",") {
   return e.toLowerCase().split(t);
 }
-function O(e, t = "+", r = ">", i = !1, u, f) {
+function O(e, t = "+", r = ">", u = !1, s, f) {
   let d = [], l = !1;
   e = e.trim(), e.includes(r) ? (l = !0, d = e.toLocaleLowerCase().split(r).map((y) => L(y))) : d = e.toLocaleLowerCase().split(t).map((y) => L(y));
   const o = {
@@ -40,12 +40,12 @@ function O(e, t = "+", r = ">", i = !1, u, f) {
     shift: d.includes("shift"),
     meta: d.includes("meta"),
     mod: d.includes("mod"),
-    useKey: i
+    useKey: u
   }, p = d.filter((y) => !F.includes(y));
   return {
     ...o,
     keys: p,
-    description: u,
+    description: s,
     isSequence: l,
     hotkey: e,
     metadata: f
@@ -71,7 +71,7 @@ function D(e) {
   return Array.isArray(e);
 }
 function te(e, t = ",") {
-  return (D(e) ? e : e.split(t)).every((i) => g.has(i.trim().toLowerCase()));
+  return (D(e) ? e : e.split(t)).every((u) => g.has(u.trim().toLowerCase()));
 }
 function z(e) {
   const t = Array.isArray(e) ? e : [e];
@@ -107,33 +107,33 @@ const oe = [
   "radio",
   "textbox"
 ];
-function se(e) {
+function ie(e) {
   return J(e, oe);
 }
 function J(e, t = !1) {
-  const { target: r, composed: i } = e;
-  let u, f;
-  return ie(r) && i ? (u = e.composedPath()[0] && e.composedPath()[0].tagName, f = e.composedPath()[0] && e.composedPath()[0].role) : (u = r && r.tagName, f = r && r.role), D(t) ? !!(u && t?.some((d) => d.toLowerCase() === u.toLowerCase() || d === f)) : !!(u && t && t);
+  const { target: r, composed: u } = e;
+  let s, f;
+  return se(r) && u ? (s = e.composedPath()[0] && e.composedPath()[0].tagName, f = e.composedPath()[0] && e.composedPath()[0].role) : (s = r && r.tagName, f = r && r.role), D(t) ? !!(s && t?.some((d) => d.toLowerCase() === s.toLowerCase() || d === f)) : !!(s && t && t);
 }
-function ie(e) {
+function se(e) {
   return !!e.tagName && !e.tagName.startsWith("-") && e.tagName.includes("-");
 }
 function ue(e, t) {
   return e.length === 0 && t ? !1 : t ? e.some((r) => t.includes(r)) || e.includes("*") : !0;
 }
 const ce = (e, t, r = !1) => {
-  const { alt: i, meta: u, mod: f, shift: d, ctrl: l, keys: o, useKey: p } = t, { code: y, key: s, ctrlKey: c, metaKey: n, shiftKey: E, altKey: C } = e, m = L(y);
-  if (p && o?.length === 1 && o.includes(s.toLowerCase()))
+  const { alt: u, meta: s, mod: f, shift: d, ctrl: l, keys: o, useKey: p } = t, { code: y, key: i, ctrlKey: c, metaKey: n, shiftKey: E, altKey: C } = e, m = L(y);
+  if (p && o?.length === 1 && o.includes(i.toLowerCase()))
     return !0;
   if (!o?.includes(m) && !["ctrl", "control", "unknown", "meta", "alt", "shift", "os"].includes(m))
     return !1;
   if (!r) {
-    if (i !== C && m !== "alt" || d !== E && m !== "shift")
+    if (u !== C && m !== "alt" || d !== E && m !== "shift")
       return !1;
     if (f) {
       if (Z() ? !n : !c)
         return !1;
-    } else if (u !== n && m !== "meta" && m !== "os" || l !== c && m !== "ctrl" && m !== "control")
+    } else if (s !== n && m !== "meta" && m !== "os" || l !== c && m !== "ctrl" && m !== "control")
       return !1;
   }
   return o && o.length === 1 && o.includes(m) ? !0 : o && o.length > 0 ? o.includes(m) ? te(o) : !1 : !o || o.length === 0;
@@ -143,7 +143,7 @@ function de({ addHotkey: e, removeHotkey: t, children: r }) {
 }
 function M(e, t) {
   return e && t && typeof e == "object" && typeof t == "object" ? Object.keys(e).length === Object.keys(t).length && // @ts-expect-error TS7053
-  Object.keys(e).reduce((r, i) => r && M(e[i], t[i]), !0) : e === t;
+  Object.keys(e).reduce((r, u) => r && M(e[u], t[u]), !0) : e === t;
 }
 const U = j({
   hotkeys: [],
@@ -156,21 +156,21 @@ const U = j({
   disableScope: () => {
   }
 }), fe = () => W(U), ve = ({ initiallyActiveScopes: e = ["*"], children: t }) => {
-  const [r, i] = A(e), [u, f] = A([]), d = h((s) => {
-    i((c) => c.includes("*") ? [s] : Array.from(/* @__PURE__ */ new Set([...c, s])));
-  }, []), l = h((s) => {
-    i((c) => c.filter((n) => n !== s));
-  }, []), o = h((s) => {
-    i((c) => c.includes(s) ? c.filter((n) => n !== s) : c.includes("*") ? [s] : Array.from(/* @__PURE__ */ new Set([...c, s])));
-  }, []), p = h((s) => {
-    f((c) => [...c, s]);
-  }, []), y = h((s) => {
-    f((c) => c.filter((n) => !M(n, s)));
+  const [r, u] = A(e), [s, f] = A([]), d = h((i) => {
+    u((c) => c.includes("*") ? [i] : Array.from(/* @__PURE__ */ new Set([...c, i])));
+  }, []), l = h((i) => {
+    u((c) => c.filter((n) => n !== i));
+  }, []), o = h((i) => {
+    u((c) => c.includes(i) ? c.filter((n) => n !== i) : c.includes("*") ? [i] : Array.from(/* @__PURE__ */ new Set([...c, i])));
+  }, []), p = h((i) => {
+    f((c) => [...c, i]);
+  }, []), y = h((i) => {
+    f((c) => c.filter((n) => !M(n, i)));
   }, []);
   return /* @__PURE__ */ x(
     U.Provider,
     {
-      value: { activeScopes: r, hotkeys: u, enableScope: d, disableScope: l, toggleScope: o },
+      value: { activeScopes: r, hotkeys: s, enableScope: d, disableScope: l, toggleScope: o },
       children: /* @__PURE__ */ x(de, { addHotkey: p, removeHotkey: y, children: t })
     }
   );
@@ -184,12 +184,12 @@ const ye = (e) => {
 }, me = typeof window < "u" ? X : I;
 function pe(e) {
   if (!e) return;
-  const { enabled: t, preventDefault: r, ignoreEventWhen: i, ...u } = e;
-  return u;
+  const { enabled: t, preventDefault: r, ignoreEventWhen: u, ...s } = e;
+  return typeof t == "function" ? s : { ...s, enabled: t };
 }
-function we(e, t, r, i) {
-  const [u, f] = A(null), d = h((w) => (f(w), () => f(null)), []), l = K(!1), o = Array.isArray(r) ? Array.isArray(i) ? void 0 : i : r, p = D(e) ? e.join(o?.delimiter) : e, y = Array.isArray(r) ? r : Array.isArray(i) ? i : void 0, s = h(t, y ?? []), c = K(s);
-  y ? c.current = s : c.current = t;
+function we(e, t, r, u) {
+  const [s, f] = A(null), d = h((w) => (f(w), () => f(null)), []), l = K(!1), o = Array.isArray(r) ? Array.isArray(u) ? void 0 : u : r, p = D(e) ? e.join(o?.delimiter) : e, y = Array.isArray(r) ? r : Array.isArray(u) ? u : void 0, i = h(t, y ?? []), c = K(i);
+  y ? c.current = i : c.current = t;
   const n = le(pe(o)), E = K(o?.enabled);
   E.current = o?.enabled;
   const C = K(o?.preventDefault);
@@ -202,10 +202,10 @@ function we(e, t, r, i) {
       return;
     let w = [], S;
     const q = (a, _ = !1) => {
-      if (!(se(a) && !J(a, n?.enableOnFormTags))) {
-        if (u !== null) {
-          const k = u.getRootNode();
-          if ((k instanceof Document || k instanceof ShadowRoot) && k.activeElement !== u && !u.contains(k.activeElement)) {
+      if (!(ie(a) && !J(a, n?.enableOnFormTags))) {
+        if (s !== null) {
+          const k = s.getRootNode();
+          if ((k instanceof Document || k instanceof ShadowRoot) && k.activeElement !== s && !s.contains(k.activeElement)) {
             ye(a);
             return;
           }
@@ -250,7 +250,7 @@ function we(e, t, r, i) {
       a.code !== void 0 && (z(L(a.code)), (n?.keydown === void 0 && n?.keyup !== !0 || n?.keydown) && q(a));
     }, N = (a) => {
       a.code !== void 0 && (G(L(a.code)), l.current = !1, n?.keyup && q(a, !0));
-    }, H = u || o?.document || document;
+    }, H = s || o?.document || document;
     return H.addEventListener("keyup", N, o?.eventListenerOptions), H.addEventListener("keydown", B, o?.eventListenerOptions), b && R(p, n?.delimiter).forEach((a) => {
       b.addHotkey(
         O(
@@ -276,15 +276,15 @@ function we(e, t, r, i) {
         );
       }), w = [], S && clearTimeout(S);
     };
-  }, [u, n, T, p]), d;
+  }, [s, n, T, p]), d;
 }
 function ke(e = !1, t = []) {
-  const [r, i] = A(/* @__PURE__ */ new Set()), [u, f] = A(!1), d = Y(() => new Set(t.map((s) => s.toLowerCase())), [t]), l = h(
-    (s) => {
-      if (s.code === void 0)
+  const [r, u] = A(/* @__PURE__ */ new Set()), [s, f] = A(!1), d = Y(() => new Set(t.map((i) => i.toLowerCase())), [t]), l = h(
+    (i) => {
+      if (i.code === void 0)
         return;
-      const c = L(e ? s.key : s.code).toLowerCase();
-      d.has(c) || (s.preventDefault(), s.stopPropagation(), i((n) => {
+      const c = L(e ? i.key : i.code).toLowerCase();
+      d.has(c) || (i.preventDefault(), i.stopPropagation(), u((n) => {
         const E = new Set(n);
         return E.add(c), E;
       }));
@@ -293,16 +293,16 @@ function ke(e = !1, t = []) {
   ), o = h(() => {
     f(!1);
   }, []), p = h(() => {
-    i(/* @__PURE__ */ new Set()), f(!0);
+    u(/* @__PURE__ */ new Set()), f(!0);
   }, []), y = h(() => {
-    i(/* @__PURE__ */ new Set());
+    u(/* @__PURE__ */ new Set());
   }, []);
   return I(() => {
-    if (typeof document < "u" && u)
+    if (typeof document < "u" && s)
       return document.addEventListener("keydown", l), () => {
         document.removeEventListener("keydown", l);
       };
-  }, [u, l]), [r, { start: p, stop: o, resetKeys: y, isRecording: u }];
+  }, [s, l]), [r, { start: p, stop: o, resetKeys: y, isRecording: s }];
 }
 export {
   ve as HotkeysProvider,

package/package.json

@@ -1,19 +1,29 @@
 {
   "name": "react-hotkeys-hook",
-  "description": "React hook for handling keyboard shortcuts",
-  "version": "5.3.0",
-  "sideEffects": false,
+  "version": "5.3.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "test": "vitest",
+    "prepublishOnly": "vitest run && npm run build"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/JohannesKlauss/react-keymap-hook.git"
   },
   "homepage": "https://react-hotkeys-hook.vercel.app/",
   "author": "Johannes Klauss",
-  "type": "module",
-  "main": "packages/react-hotkeys-hook/dist/index.js",
-  "types": "packages/react-hotkeys-hook/dist/index.d.ts",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
   "files": [
-    "packages/react-hotkeys-hook/dist"
+    "dist"
   ],
   "keywords": [
     "react",
@@ -28,22 +38,24 @@
     "hotkeys"
   ],
   "license": "MIT",
-  "scripts": {
-    "build": "npm run -w packages/react-hotkeys-hook build",
-    "build:documentation": "npm run -w packages/documentation build",
-    "test": "npm run -w packages/react-hotkeys-hook test",
-    "prepublishOnly": "npm run test && npm run lint && npm run build",
-    "format": "npx @biomejs/biome format --write packages",
-    "lint": "npx @biomejs/biome lint --write packages"
-  },
-  "workspaces": [
-    "packages/*"
-  ],
   "peerDependencies": {
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.4.13"
+    "@eslint/js": "10.0.1",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "5.2.0",
+    "@testing-library/jest-dom": "6.9.1",
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "14.6.1",
+    "@types/node": "24.12.2",
+    "globals": "16.5.0",
+    "jsdom": "27.4.0",
+    "typescript": "5.9.3",
+    "vite": "7.3.2",
+    "vitest": "4.1.5",
+    "vite-plugin-dts": "4.5.4"
   }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Johannes Klauss
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.