react-hotkeys-hook 5.3.0 → 5.3.2

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-hotkeys-hook",
   "description": "React hook for handling keyboard shortcuts",
-  "version": "5.3.0",
+  "version": "5.3.2",
   "sideEffects": false,
   "repository": {
     "type": "git",

package/packages/react-hotkeys-hook/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,