react-hotkeys-hook 5.2.4 → 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/dist/index.d.ts

@@ -1,6 +1,94 @@
-import { default as useHotkeys } from './useHotkeys';
-import { Options, Keys, HotkeyCallback } from './types';
-import { HotkeysProvider, useHotkeysContext } from './HotkeysProvider';
-import { isHotkeyPressed } from './isHotkeyPressed';
-import { default as useRecordHotkeys } from './useRecordHotkeys';
-export { useHotkeys, useRecordHotkeys, useHotkeysContext, isHotkeyPressed, HotkeysProvider, type Options, type Keys, type HotkeyCallback, };
+import { DependencyList } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { RefCallback } from 'react';
+
+declare type EventListenerOptions_2 = {
+    capture?: boolean;
+    once?: boolean;
+    passive?: boolean;
+    signal?: AbortSignal;
+} | boolean;
+
+declare type FormTags = 'input' | 'textarea' | 'select' | 'INPUT' | 'TEXTAREA' | 'SELECT' | 'searchbox' | 'slider' | 'spinbutton' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'radio' | 'textbox';
+
+declare type Hotkey = KeyboardModifiers & {
+    keys?: readonly string[];
+    scopes?: Scopes;
+    description?: string;
+    isSequence?: boolean;
+    hotkey: string;
+    metadata?: Record<string, unknown>;
+};
+
+export declare type HotkeyCallback = (keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => void;
+
+declare type HotkeysContextType = {
+    hotkeys: ReadonlyArray<Hotkey>;
+    activeScopes: string[];
+    toggleScope: (scope: string) => void;
+    enableScope: (scope: string) => void;
+    disableScope: (scope: string) => void;
+};
+
+declare type HotkeysEvent = Hotkey;
+
+export declare const HotkeysProvider: ({ initiallyActiveScopes, children }: Props) => JSX.Element;
+
+export declare function isHotkeyPressed(key: string | readonly string[], delimiter?: string): boolean;
+
+declare type KeyboardModifiers = {
+    alt?: boolean;
+    ctrl?: boolean;
+    meta?: boolean;
+    shift?: boolean;
+    mod?: boolean;
+    useKey?: boolean;
+};
+
+export declare type Keys = string | readonly string[];
+
+export declare type Options = {
+    enabled?: Trigger;
+    enableOnFormTags?: readonly FormTags[] | boolean;
+    enableOnContentEditable?: boolean;
+    ignoreEventWhen?: (e: KeyboardEvent) => boolean;
+    splitKey?: string;
+    delimiter?: string;
+    scopes?: Scopes;
+    keyup?: boolean;
+    keydown?: boolean;
+    preventDefault?: Trigger;
+    description?: string;
+    document?: Document;
+    ignoreModifiers?: boolean;
+    eventListenerOptions?: EventListenerOptions_2;
+    useKey?: boolean;
+    sequenceTimeoutMs?: number;
+    sequenceSplitKey?: string;
+    metadata?: Record<string, unknown>;
+};
+
+declare type OptionsOrDependencyArray = Options | DependencyList;
+
+declare interface Props {
+    initiallyActiveScopes?: string[];
+    children: ReactNode;
+}
+
+declare type Scopes = string | readonly string[];
+
+declare type Trigger = boolean | ((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => boolean);
+
+export declare function useHotkeys<T extends HTMLElement>(keys: Keys, callback: HotkeyCallback, options?: OptionsOrDependencyArray, dependencies?: OptionsOrDependencyArray): RefCallback<T | null>;
+
+export declare const useHotkeysContext: () => HotkeysContextType;
+
+export declare function useRecordHotkeys(useKey?: boolean, blacklist?: string[]): readonly [Set<string>, {
+    readonly start: () => void;
+    readonly stop: () => void;
+    readonly resetKeys: () => void;
+    readonly isRecording: boolean;
+}];
+
+export { }

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-hotkeys-hook",
-  "version": "5.2.4",
+  "version": "5.3.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -16,6 +16,12 @@
   "author": "Johannes Klauss",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
   "files": [
     "dist"
   ],
@@ -37,19 +43,19 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@eslint/js": "9.39.2",
-    "@types/react": "19.2.8",
+    "@eslint/js": "10.0.1",
+    "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "5.1.2",
+    "@vitejs/plugin-react": "5.2.0",
     "@testing-library/jest-dom": "6.9.1",
-    "@testing-library/react": "16.3.1",
+    "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.6.1",
-    "@types/node": "24.10.8",
+    "@types/node": "24.12.2",
     "globals": "16.5.0",
     "jsdom": "27.4.0",
     "typescript": "5.9.3",
-    "vite": "7.3.1",
-    "vitest": "4.0.17",
+    "vite": "7.3.2",
+    "vitest": "4.1.5",
     "vite-plugin-dts": "4.5.4"
   }
 }

package/dist/BoundHotkeysProxyProvider.d.ts

@@ -1,14 +0,0 @@
-import { ReactNode } from 'react';
-import { Hotkey } from './types';
-type BoundHotkeysProxyProviderType = {
-    addHotkey: (hotkey: Hotkey) => void;
-    removeHotkey: (hotkey: Hotkey) => void;
-};
-export declare const useBoundHotkeysProxy: () => BoundHotkeysProxyProviderType | undefined;
-interface Props {
-    children: ReactNode;
-    addHotkey: (hotkey: Hotkey) => void;
-    removeHotkey: (hotkey: Hotkey) => void;
-}
-export default function BoundHotkeysProxyProviderProvider({ addHotkey, removeHotkey, children }: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/HotkeysProvider.d.ts

@@ -1,16 +0,0 @@
-import { Hotkey } from './types';
-import { ReactNode } from 'react';
-export type HotkeysContextType = {
-    hotkeys: ReadonlyArray<Hotkey>;
-    activeScopes: string[];
-    toggleScope: (scope: string) => void;
-    enableScope: (scope: string) => void;
-    disableScope: (scope: string) => void;
-};
-export declare const useHotkeysContext: () => HotkeysContextType;
-interface Props {
-    initiallyActiveScopes?: string[];
-    children: ReactNode;
-}
-export declare const HotkeysProvider: ({ initiallyActiveScopes, children }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/deepEqual.d.ts

@@ -1 +0,0 @@
-export default function deepEqual(x?: unknown, y?: unknown): boolean;

package/dist/isHotkeyPressed.d.ts

@@ -1,4 +0,0 @@
-export declare function isReadonlyArray(value: unknown): value is readonly unknown[];
-export declare function isHotkeyPressed(key: string | readonly string[], delimiter?: string): boolean;
-export declare function pushToCurrentlyPressedKeys(key: string | string[]): void;
-export declare function removeFromCurrentlyPressedKeys(key: string | string[]): void;

package/dist/parseHotkeys.d.ts

@@ -1,5 +0,0 @@
-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, sequenceSplitKey?: string, useKey?: boolean, description?: string, metadata?: Record<string, unknown>): Hotkey;

package/dist/types.d.ts

@@ -1,50 +0,0 @@
-import { DependencyList } from 'react';
-export type FormTags = 'input' | 'textarea' | 'select' | 'INPUT' | 'TEXTAREA' | 'SELECT' | 'searchbox' | 'slider' | 'spinbutton' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'radio' | 'textbox';
-export type Keys = string | readonly string[];
-export type Scopes = string | readonly string[];
-export type EventListenerOptions = {
-    capture?: boolean;
-    once?: boolean;
-    passive?: boolean;
-    signal?: AbortSignal;
-} | boolean;
-export type KeyboardModifiers = {
-    alt?: boolean;
-    ctrl?: boolean;
-    meta?: boolean;
-    shift?: boolean;
-    mod?: boolean;
-    useKey?: boolean;
-};
-export type Hotkey = KeyboardModifiers & {
-    keys?: readonly string[];
-    scopes?: Scopes;
-    description?: string;
-    isSequence?: boolean;
-    hotkey: string;
-    metadata?: Record<string, unknown>;
-};
-export type HotkeysEvent = Hotkey;
-export type HotkeyCallback = (keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => void;
-export type Trigger = boolean | ((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => boolean);
-export type Options = {
-    enabled?: Trigger;
-    enableOnFormTags?: readonly FormTags[] | boolean;
-    enableOnContentEditable?: boolean;
-    ignoreEventWhen?: (e: KeyboardEvent) => boolean;
-    splitKey?: string;
-    delimiter?: string;
-    scopes?: Scopes;
-    keyup?: boolean;
-    keydown?: boolean;
-    preventDefault?: Trigger;
-    description?: string;
-    document?: Document;
-    ignoreModifiers?: boolean;
-    eventListenerOptions?: EventListenerOptions;
-    useKey?: boolean;
-    sequenceTimeoutMs?: number;
-    sequenceSplitKey?: string;
-    metadata?: Record<string, unknown>;
-};
-export type OptionsOrDependencyArray = Options | DependencyList;

package/dist/useDeepEqualMemo.d.ts

@@ -1 +0,0 @@
-export default function useDeepEqualMemo<T>(value: T): T | undefined;

package/dist/useHotkeys.d.ts

@@ -1,2 +0,0 @@
-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>;

package/dist/useRecordHotkeys.d.ts

@@ -1,6 +0,0 @@
-export default function useRecordHotkeys(useKey?: boolean): readonly [Set<string>, {
-    readonly start: () => void;
-    readonly stop: () => void;
-    readonly resetKeys: () => void;
-    readonly isRecording: boolean;
-}];

package/dist/validators.d.ts

@@ -1,8 +0,0 @@
-import { FormTags, Hotkey, Scopes, Trigger } from './types';
-export declare function maybePreventDefault(e: KeyboardEvent, hotkey: Hotkey, preventDefault?: Trigger): void;
-export declare function isHotkeyEnabled(e: KeyboardEvent, hotkey: Hotkey, enabled?: Trigger): boolean;
-export declare function isKeyboardEventTriggeredByInput(ev: KeyboardEvent): boolean;
-export declare function isHotkeyEnabledOnTag(event: KeyboardEvent, enabledOnTags?: readonly FormTags[] | boolean): boolean;
-export declare function isCustomElement(element: HTMLElement): boolean;
-export declare function isScopeActive(activeScopes: string[], scopes?: Scopes): boolean;
-export declare const isHotkeyMatchingKeyboardEvent: (e: KeyboardEvent, hotkey: Hotkey, ignoreModifiers?: boolean) => boolean;