react-hotkeys-hook 5.0.1 → 5.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-hotkeys-hook",
   "description": "React hook for handling keyboard shortcuts",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/JohannesKlauss/react-keymap-hook.git"

package/packages/react-hotkeys-hook/dist/index.js

@@ -1,6 +1,6 @@
-import { createContext as I, useContext as q, useState as A, useCallback as w, useRef as S, useLayoutEffect as Q, useEffect as U } from "react";
-import { jsx as R } from "react/jsx-runtime";
-const F = ["shift", "alt", "meta", "mod", "ctrl", "control"], V = {
+import { createContext as W, useContext as z, useState as A, useCallback as v, useRef as H, useLayoutEffect as _, useEffect as m } from "react";
+import { jsx as q } from "react/jsx-runtime";
+const G = ["shift", "alt", "meta", "mod", "ctrl", "control"], O = {
   esc: "escape",
   return: "enter",
   left: "arrowleft",
@@ -18,99 +18,106 @@ const F = ["shift", "alt", "meta", "mod", "ctrl", "control"], V = {
   ControlLeft: "ctrl",
   ControlRight: "ctrl"
 };
-function g(t) {
-  return (V[t.trim()] || t.trim()).toLowerCase().replace(/key|digit|numpad/, "");
+function S(t) {
+  return (O[t.trim()] || t.trim()).toLowerCase().replace(/key|digit|numpad/, "");
 }
-function X(t) {
-  return F.includes(t);
+function J(t) {
+  return G.includes(t);
 }
-function P(t, r = ",") {
+function b(t, r = ",") {
   return t.toLowerCase().split(r);
 }
-function b(t, r = "+", n = !1, a) {
-  const c = t.toLocaleLowerCase().split(r).map((i) => g(i)), l = {
-    alt: c.includes("alt"),
-    ctrl: c.includes("ctrl") || c.includes("control"),
-    shift: c.includes("shift"),
-    meta: c.includes("meta"),
-    mod: c.includes("mod"),
-    useKey: n
-  }, o = c.filter((i) => !F.includes(i));
+function R(t, r = "+", n = ">", f = !1, l) {
+  let u = [], c = !1;
+  t.includes(n) ? (c = !0, u = t.toLocaleLowerCase().split(n).map((i) => S(i))) : u = t.toLocaleLowerCase().split(r).map((i) => S(i));
+  const d = {
+    alt: u.includes("alt"),
+    ctrl: u.includes("ctrl") || u.includes("control"),
+    shift: u.includes("shift"),
+    meta: u.includes("meta"),
+    mod: u.includes("mod"),
+    useKey: f
+  }, a = u.filter((i) => !G.includes(i));
   return {
-    ...l,
-    keys: o,
-    description: a
+    ...d,
+    keys: a,
+    description: l,
+    isSequence: c
   };
 }
 typeof document < "u" && (document.addEventListener("keydown", (t) => {
-  t.code !== void 0 && T([g(t.code)]);
+  t.code !== void 0 && Q([S(t.code)]);
 }), document.addEventListener("keyup", (t) => {
-  t.code !== void 0 && W([g(t.code)]);
-})), typeof window < "u" && window.addEventListener("blur", () => {
-  v.clear();
-});
-const v = /* @__PURE__ */ new Set();
+  t.code !== void 0 && U([S(t.code)]);
+})), typeof window < "u" && (window.addEventListener("blur", () => {
+  E.clear();
+}), window.addEventListener("contextmenu", () => {
+  setTimeout(() => {
+    E.clear();
+  }, 0);
+}));
+const E = /* @__PURE__ */ new Set();
 function B(t) {
   return Array.isArray(t);
 }
-function Y(t, r = ",") {
-  return (B(t) ? t : t.split(r)).every((a) => v.has(a.trim().toLowerCase()));
+function ee(t, r = ",") {
+  return (B(t) ? t : t.split(r)).every((f) => E.has(f.trim().toLowerCase()));
 }
-function T(t) {
+function Q(t) {
   const r = Array.isArray(t) ? t : [t];
-  v.has("meta") && v.forEach((n) => !X(n) && v.delete(n.toLowerCase())), r.forEach((n) => v.add(n.toLowerCase()));
+  E.has("meta") && E.forEach((n) => !J(n) && E.delete(n.toLowerCase())), r.forEach((n) => E.add(n.toLowerCase()));
 }
-function W(t) {
+function U(t) {
   const r = Array.isArray(t) ? t : [t];
-  t === "meta" ? v.clear() : r.forEach((n) => v.delete(n.toLowerCase()));
+  t === "meta" ? E.clear() : r.forEach((n) => E.delete(n.toLowerCase()));
 }
-function Z(t, r, n) {
+function te(t, r, n) {
   (typeof n == "function" && n(t, r) || n === !0) && t.preventDefault();
 }
-function $(t, r, n) {
+function re(t, r, n) {
   return typeof n == "function" ? n(t, r) : n === !0 || n === void 0;
 }
-function _(t) {
-  return z(t, ["input", "textarea", "select"]);
+function ne(t) {
+  return V(t, ["input", "textarea", "select"]);
 }
-function z(t, r = !1) {
-  const { target: n, composed: a } = t;
-  let c;
-  return m(n) && a ? c = t.composedPath()[0] && t.composedPath()[0].tagName : c = n && n.tagName, B(r) ? !!(c && r && r.some((l) => l.toLowerCase() === c.toLowerCase())) : !!(c && r && r);
+function V(t, r = !1) {
+  const { target: n, composed: f } = t;
+  let l;
+  return ce(n) && f ? l = t.composedPath()[0] && t.composedPath()[0].tagName : l = n && n.tagName, B(r) ? !!(l && r && r.some((u) => u.toLowerCase() === l.toLowerCase())) : !!(l && r && r);
 }
-function m(t) {
+function ce(t) {
   return !!t.tagName && !t.tagName.startsWith("-") && t.tagName.includes("-");
 }
-function O(t, r) {
+function ue(t, r) {
   return t.length === 0 && r ? (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>'
   ), !0) : r ? t.some((n) => r.includes(n)) || t.includes("*") : !0;
 }
-const ee = (t, r, n = !1) => {
-  const { alt: a, meta: c, mod: l, shift: o, ctrl: i, keys: f, useKey: y } = r, { code: k, key: e, ctrlKey: s, metaKey: d, shiftKey: C, altKey: H } = t, h = g(k);
-  if (y && (f == null ? void 0 : f.length) === 1 && f.includes(e))
+const oe = (t, r, n = !1) => {
+  const { alt: f, meta: l, mod: u, shift: c, ctrl: d, keys: a, useKey: i } = r, { code: w, key: e, ctrlKey: s, metaKey: y, shiftKey: k, altKey: K } = t, h = S(w);
+  if (i && (a == null ? void 0 : a.length) === 1 && a.includes(e))
     return !0;
-  if (!(f != null && f.includes(h)) && !["ctrl", "control", "unknown", "meta", "alt", "shift", "os"].includes(h))
+  if (!(a != null && a.includes(h)) && !["ctrl", "control", "unknown", "meta", "alt", "shift", "os"].includes(h))
     return !1;
   if (!n) {
-    if (a !== H && h !== "alt" || o !== C && h !== "shift")
+    if (f !== K && h !== "alt" || c !== k && h !== "shift")
       return !1;
-    if (l) {
-      if (!d && !s)
+    if (u) {
+      if (!y && !s)
         return !1;
-    } else if (c !== d && h !== "meta" && h !== "os" || i !== s && h !== "ctrl" && h !== "control")
+    } else if (l !== y && h !== "meta" && h !== "os" || d !== s && h !== "ctrl" && h !== "control")
       return !1;
   }
-  return f && f.length === 1 && f.includes(h) ? !0 : f ? Y(f) : !f;
-}, G = I(void 0), te = () => q(G);
-function re({ addHotkey: t, removeHotkey: r, children: n }) {
-  return /* @__PURE__ */ R(G.Provider, { value: { addHotkey: t, removeHotkey: r }, children: n });
+  return a && a.length === 1 && a.includes(h) ? !0 : a ? ee(a) : !a;
+}, X = W(void 0), ae = () => z(X);
+function fe({ addHotkey: t, removeHotkey: r, children: n }) {
+  return /* @__PURE__ */ q(X.Provider, { value: { addHotkey: t, removeHotkey: r }, children: n });
 }
 function N(t, r) {
   return t && r && typeof t == "object" && typeof r == "object" ? Object.keys(t).length === Object.keys(r).length && // @ts-expect-error TS7053
-  Object.keys(t).reduce((n, a) => n && N(t[a], r[a]), !0) : t === r;
+  Object.keys(t).reduce((n, f) => n && N(t[f], r[f]), !0) : t === r;
 }
-const J = I({
+const Y = W({
   hotkeys: [],
   activeScopes: [],
   // This array has to be empty instead of containing '*' as default, to check if the provider is set or not
@@ -120,101 +127,120 @@ const J = I({
   },
   disableScope: () => {
   }
-}), ne = () => q(J), fe = ({ initiallyActiveScopes: t = ["*"], children: r }) => {
-  const [n, a] = A(t), [c, l] = A([]), o = w((e) => {
-    a((s) => s.includes("*") ? [e] : Array.from(/* @__PURE__ */ new Set([...s, e])));
-  }, []), i = w((e) => {
-    a((s) => s.filter((d) => d !== e));
-  }, []), f = w((e) => {
-    a((s) => s.includes(e) ? s.filter((d) => d !== e) : s.includes("*") ? [e] : Array.from(/* @__PURE__ */ new Set([...s, e])));
-  }, []), y = w((e) => {
-    l((s) => [...s, e]);
-  }, []), k = w((e) => {
-    l((s) => s.filter((d) => !N(d, e)));
+}), le = () => z(Y), he = ({ initiallyActiveScopes: t = ["*"], children: r }) => {
+  const [n, f] = A(t), [l, u] = A([]), c = v((e) => {
+    f((s) => s.includes("*") ? [e] : Array.from(/* @__PURE__ */ new Set([...s, e])));
+  }, []), d = v((e) => {
+    f((s) => s.filter((y) => y !== e));
+  }, []), a = v((e) => {
+    f((s) => s.includes(e) ? s.filter((y) => y !== e) : s.includes("*") ? [e] : Array.from(/* @__PURE__ */ new Set([...s, e])));
+  }, []), i = v((e) => {
+    u((s) => [...s, e]);
+  }, []), w = v((e) => {
+    u((s) => s.filter((y) => !N(y, e)));
   }, []);
-  return /* @__PURE__ */ R(
-    J.Provider,
+  return /* @__PURE__ */ q(
+    Y.Provider,
     {
-      value: { activeScopes: n, hotkeys: c, enableScope: o, disableScope: i, toggleScope: f },
-      children: /* @__PURE__ */ R(re, { addHotkey: y, removeHotkey: k, children: r })
+      value: { activeScopes: n, hotkeys: l, enableScope: c, disableScope: d, toggleScope: a },
+      children: /* @__PURE__ */ q(fe, { addHotkey: i, removeHotkey: w, children: r })
     }
   );
 };
-function oe(t) {
-  const r = S(void 0);
+function se(t) {
+  const r = H(void 0);
   return N(r.current, t) || (r.current = t), r.current;
 }
-const D = (t) => {
+const F = (t) => {
   t.stopPropagation(), t.preventDefault(), t.stopImmediatePropagation();
-}, ce = typeof window < "u" ? Q : U;
-function se(t, r, n, a) {
-  const c = S(null), l = S(!1), o = n instanceof Array ? a instanceof Array ? void 0 : a : n, i = B(t) ? t.join(o == null ? void 0 : o.delimiter) : t, f = n instanceof Array ? n : a instanceof Array ? a : void 0, y = w(r, f ?? []), k = S(y);
-  f ? k.current = y : k.current = r;
-  const e = oe(o), { activeScopes: s } = ne(), d = te();
-  return ce(() => {
-    if ((e == null ? void 0 : e.enabled) === !1 || !O(s, e == null ? void 0 : e.scopes))
+}, ie = typeof window < "u" ? _ : m;
+function we(t, r, n, f) {
+  const l = H(null), u = H(!1), c = n instanceof Array ? f instanceof Array ? void 0 : f : n, d = B(t) ? t.join(c == null ? void 0 : c.delimiter) : t, a = n instanceof Array ? n : f instanceof Array ? f : void 0, i = v(r, a ?? []), w = H(i);
+  a ? w.current = i : w.current = r;
+  const e = se(c), { activeScopes: s } = le(), y = ae();
+  return ie(() => {
+    if ((e == null ? void 0 : e.enabled) === !1 || !ue(s, e == null ? void 0 : e.scopes))
       return;
-    const C = (u, p = !1) => {
+    let k = [], K;
+    const h = (o, M = !1) => {
       var j;
-      if (!(_(u) && !z(u, e == null ? void 0 : e.enableOnFormTags))) {
-        if (c.current !== null) {
-          const E = c.current.getRootNode();
-          if ((E instanceof Document || E instanceof ShadowRoot) && E.activeElement !== c.current && !c.current.contains(E.activeElement)) {
-            D(u);
+      if (!(ne(o) && !V(o, e == null ? void 0 : e.enableOnFormTags))) {
+        if (l.current !== null) {
+          const L = l.current.getRootNode();
+          if ((L instanceof Document || L instanceof ShadowRoot) && L.activeElement !== l.current && !l.current.contains(L.activeElement)) {
+            F(o);
             return;
           }
         }
-        (j = u.target) != null && j.isContentEditable && !(e != null && e.enableOnContentEditable) || P(i, e == null ? void 0 : e.delimiter).forEach((E) => {
-          var M, x;
-          const L = b(E, e == null ? void 0 : e.splitKey, e == null ? void 0 : e.useKey, e == null ? void 0 : e.description);
-          if (ee(u, L, e == null ? void 0 : e.ignoreModifiers) || (M = L.keys) != null && M.includes("*")) {
-            if ((x = e == null ? void 0 : e.ignoreEventWhen) != null && x.call(e, u) || p && l.current)
+        (j = o.target) != null && j.isContentEditable && !(e != null && e.enableOnContentEditable) || b(d, e == null ? void 0 : e.delimiter).forEach((L) => {
+          var D, I, p, $;
+          if (L.includes((e == null ? void 0 : e.splitKey) ?? "+") && L.includes((e == null ? void 0 : e.sequenceSplitKey) ?? ">")) {
+            console.warn(`Hotkey ${L} contains both ${(e == null ? void 0 : e.splitKey) ?? "+"} and ${(e == null ? void 0 : e.sequenceSplitKey) ?? ">"} which is not supported.`);
+            return;
+          }
+          const g = R(L, e == null ? void 0 : e.splitKey, e == null ? void 0 : e.sequenceSplitKey, e == null ? void 0 : e.useKey, e == null ? void 0 : e.description);
+          if (g.isSequence) {
+            K = setTimeout(() => {
+              k = [];
+            }, (e == null ? void 0 : e.sequenceTimeoutMs) ?? 1e3);
+            const P = g.useKey ? o.key : S(o.code);
+            if (J(P.toLowerCase()))
+              return;
+            k.push(P);
+            const Z = (D = g.keys) == null ? void 0 : D[k.length - 1];
+            if (P !== Z) {
+              k = [], K && clearTimeout(K);
+              return;
+            }
+            k.length === ((I = g.keys) == null ? void 0 : I.length) && (w.current(o, g), K && clearTimeout(K), k = []);
+          } else if (oe(o, g, e == null ? void 0 : e.ignoreModifiers) || (p = g.keys) != null && p.includes("*")) {
+            if (($ = e == null ? void 0 : e.ignoreEventWhen) != null && $.call(e, o) || M && u.current)
               return;
-            if (Z(u, L, e == null ? void 0 : e.preventDefault), !$(u, L, e == null ? void 0 : e.enabled)) {
-              D(u);
+            if (te(o, g, e == null ? void 0 : e.preventDefault), !re(o, g, e == null ? void 0 : e.enabled)) {
+              F(o);
               return;
             }
-            k.current(u, L), p || (l.current = !0);
+            w.current(o, g), M || (u.current = !0);
           }
         });
       }
-    }, H = (u) => {
-      u.code !== void 0 && (T(g(u.code)), ((e == null ? void 0 : e.keydown) === void 0 && (e == null ? void 0 : e.keyup) !== !0 || e != null && e.keydown) && C(u));
-    }, h = (u) => {
-      u.code !== void 0 && (W(g(u.code)), l.current = !1, e != null && e.keyup && C(u, !0));
-    }, K = c.current || (o == null ? void 0 : o.document) || document;
-    return K.addEventListener("keyup", h, o == null ? void 0 : o.eventListenerOptions), K.addEventListener("keydown", H, o == null ? void 0 : o.eventListenerOptions), d && P(i, e == null ? void 0 : e.delimiter).forEach(
-      (u) => d.addHotkey(
-        b(u, e == null ? void 0 : e.splitKey, e == null ? void 0 : e.useKey, e == null ? void 0 : e.description)
+    }, T = (o) => {
+      o.code !== void 0 && (Q(S(o.code)), ((e == null ? void 0 : e.keydown) === void 0 && (e == null ? void 0 : e.keyup) !== !0 || e != null && e.keydown) && h(o));
+    }, x = (o) => {
+      o.code !== void 0 && (U(S(o.code)), u.current = !1, e != null && e.keyup && h(o, !0));
+    }, C = l.current || (c == null ? void 0 : c.document) || document;
+    return C.addEventListener("keyup", x, c == null ? void 0 : c.eventListenerOptions), C.addEventListener("keydown", T, c == null ? void 0 : c.eventListenerOptions), y && b(d, e == null ? void 0 : e.delimiter).forEach(
+      (o) => y.addHotkey(
+        R(o, e == null ? void 0 : e.splitKey, e == null ? void 0 : e.sequenceSplitKey, e == null ? void 0 : e.useKey, e == null ? void 0 : e.description)
       )
     ), () => {
-      K.removeEventListener("keyup", h, o == null ? void 0 : o.eventListenerOptions), K.removeEventListener("keydown", H, o == null ? void 0 : o.eventListenerOptions), d && P(i, e == null ? void 0 : e.delimiter).forEach(
-        (u) => d.removeHotkey(
-          b(u, e == null ? void 0 : e.splitKey, e == null ? void 0 : e.useKey, e == null ? void 0 : e.description)
+      C.removeEventListener("keyup", x, c == null ? void 0 : c.eventListenerOptions), C.removeEventListener("keydown", T, c == null ? void 0 : c.eventListenerOptions), y && b(d, e == null ? void 0 : e.delimiter).forEach(
+        (o) => y.removeHotkey(
+          R(o, e == null ? void 0 : e.splitKey, e == null ? void 0 : e.sequenceSplitKey, e == null ? void 0 : e.useKey, e == null ? void 0 : e.description)
         )
-      );
+      ), k = [], K && clearTimeout(K);
     };
-  }, [i, e, s]), c;
+  }, [d, e, s]), l;
 }
-function le(t = !1) {
-  const [r, n] = A(/* @__PURE__ */ new Set()), [a, c] = A(!1), l = w((y) => {
-    y.code !== void 0 && (y.preventDefault(), y.stopPropagation(), n((k) => {
-      const e = new Set(k);
-      return e.add(g(t ? y.key : y.code)), e;
+function ge(t = !1) {
+  const [r, n] = A(/* @__PURE__ */ new Set()), [f, l] = A(!1), u = v((i) => {
+    i.code !== void 0 && (i.preventDefault(), i.stopPropagation(), n((w) => {
+      const e = new Set(w);
+      return e.add(S(t ? i.key : i.code)), e;
     }));
-  }, [t]), o = w(() => {
-    typeof document < "u" && (document.removeEventListener("keydown", l), c(!1));
-  }, [l]), i = w(() => {
-    n(/* @__PURE__ */ new Set()), typeof document < "u" && (o(), document.addEventListener("keydown", l), c(!0));
-  }, [l, o]), f = w(() => {
+  }, [t]), c = v(() => {
+    typeof document < "u" && (document.removeEventListener("keydown", u), l(!1));
+  }, [u]), d = v(() => {
+    n(/* @__PURE__ */ new Set()), typeof document < "u" && (c(), document.addEventListener("keydown", u), l(!0));
+  }, [u, c]), a = v(() => {
     n(/* @__PURE__ */ new Set());
   }, []);
-  return [r, { start: i, stop: o, resetKeys: f, isRecording: a }];
+  return [r, { start: d, stop: c, resetKeys: a, isRecording: f }];
 }
 export {
-  fe as HotkeysProvider,
-  Y as isHotkeyPressed,
-  se as useHotkeys,
-  ne as useHotkeysContext,
-  le as useRecordHotkeys
+  he as HotkeysProvider,
+  ee as isHotkeyPressed,
+  we as useHotkeys,
+  le as useHotkeysContext,
+  ge as useRecordHotkeys
 };

package/packages/react-hotkeys-hook/dist/parseHotkeys.d.ts

@@ -2,4 +2,4 @@ import { Hotkey } from './types';
 export declare function mapCode(key: string): string;
 export declare function isHotkeyModifier(key: string): boolean;
 export declare function parseKeysHookInput(keys: string, delimiter?: string): string[];
-export declare function parseHotkey(hotkey: string, splitKey?: string, useKey?: boolean, description?: string): Hotkey;
+export declare function parseHotkey(hotkey: string, splitKey?: string, sequenceSplitKey?: string, useKey?: boolean, description?: string): Hotkey;

package/packages/react-hotkeys-hook/dist/types.d.ts

@@ -2,7 +2,6 @@ import { DependencyList } from 'react';
 export type FormTags = 'input' | 'textarea' | 'select' | 'INPUT' | 'TEXTAREA' | 'SELECT';
 export type Keys = string | readonly string[];
 export type Scopes = string | readonly string[];
-export type RefType<T> = T | null;
 export type EventListenerOptions = {
     capture?: boolean;
     once?: boolean;
@@ -21,6 +20,7 @@ export type Hotkey = KeyboardModifiers & {
     keys?: readonly string[];
     scopes?: Scopes;
     description?: string;
+    isSequence?: boolean;
 };
 export type HotkeysEvent = Hotkey;
 export type HotkeyCallback = (keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => void;
@@ -41,5 +41,7 @@ export type Options = {
     ignoreModifiers?: boolean;
     eventListenerOptions?: EventListenerOptions;
     useKey?: boolean;
+    sequenceTimeoutMs?: number;
+    sequenceSplitKey?: string;
 };
 export type OptionsOrDependencyArray = Options | DependencyList;

package/packages/react-hotkeys-hook/dist/useHotkeys.d.ts

@@ -1,2 +1,2 @@
-import { HotkeyCallback, Keys, OptionsOrDependencyArray, RefType } from './types';
-export default function useHotkeys<T extends HTMLElement>(keys: Keys, callback: HotkeyCallback, options?: OptionsOrDependencyArray, dependencies?: OptionsOrDependencyArray): import('react').RefObject<RefType<T>>;
+import { HotkeyCallback, Keys, OptionsOrDependencyArray } from './types';
+export default function useHotkeys<T extends HTMLElement>(keys: Keys, callback: HotkeyCallback, options?: OptionsOrDependencyArray, dependencies?: OptionsOrDependencyArray): import('react').RefObject<T | null>;