react-hotkeys-hook 5.0.0-2 → 5.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +1 -1
  2. package/package.json +6 -2
  3. package/packages/react-hotkeys-hook/dist/index.js +69 -69
  4. package/packages/react-hotkeys-hook/dist/useRecordHotkeys.d.ts +1 -1
package/README.md CHANGED
@@ -136,7 +136,7 @@ useHotkeys(keys: string | string[], callback: (event: KeyboardEvent, handler: Ho
136
136
 
137
137
  | Parameter | Type | Required? | Default value | Description |
138
138
  |---------------|---------------------------------------------------------|-----------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
139
- | `keys` | `string` or `string[]` | required | - | set the hotkeys you want the hook to listen to. You can use single or multiple keys, modifier combinations, etc. This will either be a string or an array of strings. To separate multiple keys, use a colon. This split key value can be overridden with the `splitKey` option. |
139
+ | `keys` | `string` or `string[]` | required | - | set the hotkeys you want the hook to listen to. You can use single or multiple keys, modifier combinations, etc. This will either be a string or an array of strings. To separate multiple keys, use a comma. This split key value can be overridden with the `splitKey` option. |
140
140
  | `callback` | `(event: KeyboardEvent, handler: HotkeysEvent) => void` | required | - | This is the callback function that will be called when the hotkey is pressed. The callback will receive the browsers native `KeyboardEvent` and the libraries `HotkeysEvent`. |
141
141
  | `options` | `Options` | optional | `{}` | Object to modify the behavior of the hook. Default options are given below. |
142
142
  | `dependencies` | `DependencyList` | optional | `[]` | The given callback will always be memoised inside the hook. So if you reference any outside variables, you need to set them here for the callback to get updated (Much like `useCallback` works in React). |
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-hotkeys-hook",
3
3
  "description": "React hook for handling keyboard shortcuts",
4
- "version": "5.0.0-2",
4
+ "version": "5.0.1",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/JohannesKlauss/react-keymap-hook.git"
@@ -36,5 +36,9 @@
36
36
  },
37
37
  "workspaces": [
38
38
  "packages/*"
39
- ]
39
+ ],
40
+ "peerDependencies": {
41
+ "react": ">=16.8.0",
42
+ "react-dom": ">=16.8.0"
43
+ }
40
44
  }
package/packages/react-hotkeys-hook/dist/index.js CHANGED
@@ -18,7 +18,7 @@ const F = ["shift", "alt", "meta", "mod", "ctrl", "control"], V = {
18
18
  ControlLeft: "ctrl",
19
19
  ControlRight: "ctrl"
20
20
  };
21
- function k(t) {
21
+ function g(t) {
22
22
  return (V[t.trim()] || t.trim()).toLowerCase().replace(/key|digit|numpad/, "");
23
23
  }
24
24
  function X(t) {
@@ -28,41 +28,41 @@ function P(t, r = ",") {
28
28
  return t.toLowerCase().split(r);
29
29
  }
30
30
  function b(t, r = "+", n = !1, a) {
31
- const o = t.toLocaleLowerCase().split(r).map((i) => k(i)), l = {
32
- alt: o.includes("alt"),
33
- ctrl: o.includes("ctrl") || o.includes("control"),
34
- shift: o.includes("shift"),
35
- meta: o.includes("meta"),
36
- mod: o.includes("mod"),
31
+ const c = t.toLocaleLowerCase().split(r).map((i) => g(i)), l = {
32
+ alt: c.includes("alt"),
33
+ ctrl: c.includes("ctrl") || c.includes("control"),
34
+ shift: c.includes("shift"),
35
+ meta: c.includes("meta"),
36
+ mod: c.includes("mod"),
37
37
  useKey: n
38
- }, c = o.filter((i) => !F.includes(i));
38
+ }, o = c.filter((i) => !F.includes(i));
39
39
  return {
40
40
  ...l,
41
- keys: c,
41
+ keys: o,
42
42
  description: a
43
43
  };
44
44
  }
45
45
  typeof document < "u" && (document.addEventListener("keydown", (t) => {
46
- t.code !== void 0 && T([k(t.code)]);
46
+ t.code !== void 0 && T([g(t.code)]);
47
47
  }), document.addEventListener("keyup", (t) => {
48
- t.code !== void 0 && W([k(t.code)]);
48
+ t.code !== void 0 && W([g(t.code)]);
49
49
  })), typeof window < "u" && window.addEventListener("blur", () => {
50
- g.clear();
50
+ v.clear();
51
51
  });
52
- const g = /* @__PURE__ */ new Set();
52
+ const v = /* @__PURE__ */ new Set();
53
53
  function B(t) {
54
54
  return Array.isArray(t);
55
55
  }
56
56
  function Y(t, r = ",") {
57
- return (B(t) ? t : t.split(r)).every((a) => g.has(a.trim().toLowerCase()));
57
+ return (B(t) ? t : t.split(r)).every((a) => v.has(a.trim().toLowerCase()));
58
58
  }
59
59
  function T(t) {
60
60
  const r = Array.isArray(t) ? t : [t];
61
- g.has("meta") && g.forEach((n) => !X(n) && g.delete(n.toLowerCase())), r.forEach((n) => g.add(n.toLowerCase()));
61
+ v.has("meta") && v.forEach((n) => !X(n) && v.delete(n.toLowerCase())), r.forEach((n) => v.add(n.toLowerCase()));
62
62
  }
63
63
  function W(t) {
64
64
  const r = Array.isArray(t) ? t : [t];
65
- t === "meta" ? g.clear() : r.forEach((n) => g.delete(n.toLowerCase()));
65
+ t === "meta" ? v.clear() : r.forEach((n) => v.delete(n.toLowerCase()));
66
66
  }
67
67
  function Z(t, r, n) {
68
68
  (typeof n == "function" && n(t, r) || n === !0) && t.preventDefault();
@@ -75,8 +75,8 @@ function _(t) {
75
75
  }
76
76
  function z(t, r = !1) {
77
77
  const { target: n, composed: a } = t;
78
- let o;
79
- return m(n) && a ? o = t.composedPath()[0] && t.composedPath()[0].tagName : o = n && n.tagName, B(r) ? !!(o && r && r.some((l) => l.toLowerCase() === o.toLowerCase())) : !!(o && r && r);
78
+ let c;
79
+ 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);
80
80
  }
81
81
  function m(t) {
82
82
  return !!t.tagName && !t.tagName.startsWith("-") && t.tagName.includes("-");
@@ -87,21 +87,21 @@ function O(t, r) {
87
87
  ), !0) : r ? t.some((n) => r.includes(n)) || t.includes("*") : !0;
88
88
  }
89
89
  const ee = (t, r, n = !1) => {
90
- const { alt: a, meta: o, mod: l, shift: c, ctrl: i, keys: u, useKey: v } = r, { code: h, key: e, ctrlKey: s, metaKey: d, shiftKey: C, altKey: K } = t, y = k(h);
91
- if (v && (u == null ? void 0 : u.length) === 1 && u.includes(e))
90
+ 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);
91
+ if (y && (f == null ? void 0 : f.length) === 1 && f.includes(e))
92
92
  return !0;
93
- if (!(u != null && u.includes(y)) && !["ctrl", "control", "unknown", "meta", "alt", "shift", "os"].includes(y))
93
+ if (!(f != null && f.includes(h)) && !["ctrl", "control", "unknown", "meta", "alt", "shift", "os"].includes(h))
94
94
  return !1;
95
95
  if (!n) {
96
- if (a !== K && y !== "alt" || c !== C && y !== "shift")
96
+ if (a !== H && h !== "alt" || o !== C && h !== "shift")
97
97
  return !1;
98
98
  if (l) {
99
99
  if (!d && !s)
100
100
  return !1;
101
- } else if (o !== d && y !== "meta" && y !== "os" || i !== s && y !== "ctrl" && y !== "control")
101
+ } else if (c !== d && h !== "meta" && h !== "os" || i !== s && h !== "ctrl" && h !== "control")
102
102
  return !1;
103
103
  }
104
- return u && u.length === 1 && u.includes(y) ? !0 : u ? Y(u) : !u;
104
+ return f && f.length === 1 && f.includes(h) ? !0 : f ? Y(f) : !f;
105
105
  }, G = I(void 0), te = () => q(G);
106
106
  function re({ addHotkey: t, removeHotkey: r, children: n }) {
107
107
  return /* @__PURE__ */ R(G.Provider, { value: { addHotkey: t, removeHotkey: r }, children: n });
@@ -121,22 +121,22 @@ const J = I({
121
121
  disableScope: () => {
122
122
  }
123
123
  }), ne = () => q(J), fe = ({ initiallyActiveScopes: t = ["*"], children: r }) => {
124
- const [n, a] = A(t), [o, l] = A([]), c = w((e) => {
124
+ const [n, a] = A(t), [c, l] = A([]), o = w((e) => {
125
125
  a((s) => s.includes("*") ? [e] : Array.from(/* @__PURE__ */ new Set([...s, e])));
126
126
  }, []), i = w((e) => {
127
127
  a((s) => s.filter((d) => d !== e));
128
- }, []), u = w((e) => {
128
+ }, []), f = w((e) => {
129
129
  a((s) => s.includes(e) ? s.filter((d) => d !== e) : s.includes("*") ? [e] : Array.from(/* @__PURE__ */ new Set([...s, e])));
130
- }, []), v = w((e) => {
130
+ }, []), y = w((e) => {
131
131
  l((s) => [...s, e]);
132
- }, []), h = w((e) => {
132
+ }, []), k = w((e) => {
133
133
  l((s) => s.filter((d) => !N(d, e)));
134
134
  }, []);
135
135
  return /* @__PURE__ */ R(
136
136
  J.Provider,
137
137
  {
138
- value: { activeScopes: n, hotkeys: o, enableScope: c, disableScope: i, toggleScope: u },
139
- children: /* @__PURE__ */ R(re, { addHotkey: v, removeHotkey: h, children: r })
138
+ value: { activeScopes: n, hotkeys: c, enableScope: o, disableScope: i, toggleScope: f },
139
+ children: /* @__PURE__ */ R(re, { addHotkey: y, removeHotkey: k, children: r })
140
140
  }
141
141
  );
142
142
  };
@@ -148,68 +148,68 @@ const D = (t) => {
148
148
  t.stopPropagation(), t.preventDefault(), t.stopImmediatePropagation();
149
149
  }, ce = typeof window < "u" ? Q : U;
150
150
  function se(t, r, n, a) {
151
- const o = S(null), l = S(!1), c = n instanceof Array ? a instanceof Array ? void 0 : a : n, i = B(t) ? t.join(c == null ? void 0 : c.delimiter) : t, u = n instanceof Array ? n : a instanceof Array ? a : void 0, v = w(r, u ?? []), h = S(v);
152
- u ? h.current = v : h.current = r;
153
- const e = oe(c), { activeScopes: s } = ne(), d = te();
151
+ 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);
152
+ f ? k.current = y : k.current = r;
153
+ const e = oe(o), { activeScopes: s } = ne(), d = te();
154
154
  return ce(() => {
155
155
  if ((e == null ? void 0 : e.enabled) === !1 || !O(s, e == null ? void 0 : e.scopes))
156
156
  return;
157
- const C = (f, p = !1) => {
157
+ const C = (u, p = !1) => {
158
158
  var j;
159
- if (!(_(f) && !z(f, e == null ? void 0 : e.enableOnFormTags))) {
160
- if (o.current !== null) {
161
- const E = o.current.getRootNode();
162
- if ((E instanceof Document || E instanceof ShadowRoot) && E.activeElement !== o.current && !o.current.contains(E.activeElement)) {
163
- D(f);
159
+ if (!(_(u) && !z(u, e == null ? void 0 : e.enableOnFormTags))) {
160
+ if (c.current !== null) {
161
+ const E = c.current.getRootNode();
162
+ if ((E instanceof Document || E instanceof ShadowRoot) && E.activeElement !== c.current && !c.current.contains(E.activeElement)) {
163
+ D(u);
164
164
  return;
165
165
  }
166
166
  }
167
- (j = f.target) != null && j.isContentEditable && !(e != null && e.enableOnContentEditable) || P(i, e == null ? void 0 : e.delimiter).forEach((E) => {
167
+ (j = u.target) != null && j.isContentEditable && !(e != null && e.enableOnContentEditable) || P(i, e == null ? void 0 : e.delimiter).forEach((E) => {
168
168
  var M, x;
169
169
  const L = b(E, e == null ? void 0 : e.splitKey, e == null ? void 0 : e.useKey, e == null ? void 0 : e.description);
170
- if (ee(f, L, e == null ? void 0 : e.ignoreModifiers) || (M = L.keys) != null && M.includes("*")) {
171
- if ((x = e == null ? void 0 : e.ignoreEventWhen) != null && x.call(e, f) || p && l.current)
170
+ if (ee(u, L, e == null ? void 0 : e.ignoreModifiers) || (M = L.keys) != null && M.includes("*")) {
171
+ if ((x = e == null ? void 0 : e.ignoreEventWhen) != null && x.call(e, u) || p && l.current)
172
172
  return;
173
- if (Z(f, L, e == null ? void 0 : e.preventDefault), !$(f, L, e == null ? void 0 : e.enabled)) {
174
- D(f);
173
+ if (Z(u, L, e == null ? void 0 : e.preventDefault), !$(u, L, e == null ? void 0 : e.enabled)) {
174
+ D(u);
175
175
  return;
176
176
  }
177
- h.current(f, L), p || (l.current = !0);
177
+ k.current(u, L), p || (l.current = !0);
178
178
  }
179
179
  });
180
180
  }
181
- }, K = (f) => {
182
- f.code !== void 0 && (T(k(f.code)), ((e == null ? void 0 : e.keydown) === void 0 && (e == null ? void 0 : e.keyup) !== !0 || e != null && e.keydown) && C(f));
183
- }, y = (f) => {
184
- f.code !== void 0 && (W(k(f.code)), l.current = !1, e != null && e.keyup && C(f, !0));
185
- }, H = o.current || (c == null ? void 0 : c.document) || document;
186
- return H.addEventListener("keyup", y, c == null ? void 0 : c.eventListenerOptions), H.addEventListener("keydown", K, c == null ? void 0 : c.eventListenerOptions), d && P(i, e == null ? void 0 : e.delimiter).forEach(
187
- (f) => d.addHotkey(
188
- b(f, e == null ? void 0 : e.splitKey, e == null ? void 0 : e.useKey, e == null ? void 0 : e.description)
181
+ }, H = (u) => {
182
+ 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));
183
+ }, h = (u) => {
184
+ u.code !== void 0 && (W(g(u.code)), l.current = !1, e != null && e.keyup && C(u, !0));
185
+ }, K = c.current || (o == null ? void 0 : o.document) || document;
186
+ 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(
187
+ (u) => d.addHotkey(
188
+ b(u, e == null ? void 0 : e.splitKey, e == null ? void 0 : e.useKey, e == null ? void 0 : e.description)
189
189
  )
190
190
  ), () => {
191
- H.removeEventListener("keyup", y, c == null ? void 0 : c.eventListenerOptions), H.removeEventListener("keydown", K, c == null ? void 0 : c.eventListenerOptions), d && P(i, e == null ? void 0 : e.delimiter).forEach(
192
- (f) => d.removeHotkey(
193
- b(f, e == null ? void 0 : e.splitKey, e == null ? void 0 : e.useKey, e == null ? void 0 : e.description)
191
+ 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(
192
+ (u) => d.removeHotkey(
193
+ b(u, e == null ? void 0 : e.splitKey, e == null ? void 0 : e.useKey, e == null ? void 0 : e.description)
194
194
  )
195
195
  );
196
196
  };
197
- }, [i, e, s]), o;
197
+ }, [i, e, s]), c;
198
198
  }
199
- function le() {
200
- const [t, r] = A(/* @__PURE__ */ new Set()), [n, a] = A(!1), o = w((u) => {
201
- u.code !== void 0 && (u.preventDefault(), u.stopPropagation(), r((v) => {
202
- const h = new Set(v);
203
- return h.add(k(u.code)), h;
199
+ function le(t = !1) {
200
+ const [r, n] = A(/* @__PURE__ */ new Set()), [a, c] = A(!1), l = w((y) => {
201
+ y.code !== void 0 && (y.preventDefault(), y.stopPropagation(), n((k) => {
202
+ const e = new Set(k);
203
+ return e.add(g(t ? y.key : y.code)), e;
204
204
  }));
205
- }, []), l = w(() => {
206
- typeof document < "u" && (document.removeEventListener("keydown", o), a(!1));
207
- }, [o]), c = w(() => {
208
- r(/* @__PURE__ */ new Set()), typeof document < "u" && (l(), document.addEventListener("keydown", o), a(!0));
209
- }, [o, l]), i = w(() => {
210
- r(/* @__PURE__ */ new Set());
205
+ }, [t]), o = w(() => {
206
+ typeof document < "u" && (document.removeEventListener("keydown", l), c(!1));
207
+ }, [l]), i = w(() => {
208
+ n(/* @__PURE__ */ new Set()), typeof document < "u" && (o(), document.addEventListener("keydown", l), c(!0));
209
+ }, [l, o]), f = w(() => {
210
+ n(/* @__PURE__ */ new Set());
211
211
  }, []);
212
- return [t, { start: c, stop: l, resetKeys: i, isRecording: n }];
212
+ return [r, { start: i, stop: o, resetKeys: f, isRecording: a }];
213
213
  }
214
214
  export {
215
215
  fe as HotkeysProvider,
package/packages/react-hotkeys-hook/dist/useRecordHotkeys.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export default function useRecordHotkeys(): readonly [Set<string>, {
1
+ export default function useRecordHotkeys(useKey?: boolean): readonly [Set<string>, {
2
2
  readonly start: () => void;
3
3
  readonly stop: () => void;
4
4
  readonly resetKeys: () => void;