@tanstack/preact-hotkeys 0.6.0 → 0.8.0

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.
@@ -0,0 +1,138 @@
1
+ const require_HotkeysProvider = require('./HotkeysProvider.cjs');
2
+ const require_utils = require('./utils.cjs');
3
+ let _tanstack_hotkeys = require("@tanstack/hotkeys");
4
+ let preact_hooks = require("preact/hooks");
5
+
6
+ //#region src/useHotkeySequences.ts
7
+ /**
8
+ * Preact hook for registering multiple keyboard shortcut sequences at once (Vim-style).
9
+ *
10
+ * Uses the singleton SequenceManager. Accepts a dynamic array of definitions so you can
11
+ * register variable-length lists without violating the rules of hooks.
12
+ *
13
+ * Options are merged in this order:
14
+ * HotkeysProvider defaults < commonOptions < per-definition options
15
+ *
16
+ * Callbacks and options are synced on every render to avoid stale closures.
17
+ *
18
+ * Definitions with an empty `sequence` are skipped (no registration).
19
+ *
20
+ * @param definitions - Array of sequence definitions to register
21
+ * @param commonOptions - Shared options applied to all sequences (overridden by per-definition options).
22
+ * Per-row `enabled: false` still registers that sequence: `SequenceManager` suppresses execution only (the row
23
+ * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle
24
+ * via `setOptions` (no unregister/re-register churn).
25
+ *
26
+ * @example
27
+ * ```tsx
28
+ * function VimPalette() {
29
+ * useHotkeySequences([
30
+ * { sequence: ['G', 'G'], callback: () => scrollToTop() },
31
+ * { sequence: ['D', 'D'], callback: () => deleteLine() },
32
+ * { sequence: ['C', 'I', 'W'], callback: () => changeInnerWord(), options: { timeout: 500 } },
33
+ * ])
34
+ * }
35
+ * ```
36
+ *
37
+ * @example
38
+ * ```tsx
39
+ * function DynamicSequences({ items }) {
40
+ * useHotkeySequences(
41
+ * items.map((item) => ({
42
+ * sequence: item.chords,
43
+ * callback: item.action,
44
+ * options: { enabled: item.enabled },
45
+ * })),
46
+ * { preventDefault: true },
47
+ * )
48
+ * }
49
+ * ```
50
+ */
51
+ function useHotkeySequences(definitions, commonOptions = {}) {
52
+ const defaultOptions = require_HotkeysProvider.useDefaultHotkeysOptions().hotkeySequence;
53
+ const manager = (0, _tanstack_hotkeys.getSequenceManager)();
54
+ const registrationsRef = (0, preact_hooks.useRef)(/* @__PURE__ */ new Map());
55
+ const definitionsRef = (0, preact_hooks.useRef)(definitions);
56
+ const sequenceStringsRef = (0, preact_hooks.useRef)([]);
57
+ const commonOptionsRef = (0, preact_hooks.useRef)(commonOptions);
58
+ const defaultOptionsRef = (0, preact_hooks.useRef)(defaultOptions);
59
+ const managerRef = (0, preact_hooks.useRef)(manager);
60
+ const sequenceStrings = definitions.map((def) => (0, _tanstack_hotkeys.formatHotkeySequence)(def.sequence));
61
+ definitionsRef.current = definitions;
62
+ sequenceStringsRef.current = sequenceStrings;
63
+ commonOptionsRef.current = commonOptions;
64
+ defaultOptionsRef.current = defaultOptions;
65
+ managerRef.current = manager;
66
+ (0, preact_hooks.useEffect)(() => {
67
+ const prevRegistrations = registrationsRef.current;
68
+ const nextRegistrations = /* @__PURE__ */ new Map();
69
+ const rows = [];
70
+ for (let i = 0; i < definitionsRef.current.length; i++) {
71
+ const def = definitionsRef.current[i];
72
+ const seqStr = sequenceStringsRef.current[i];
73
+ const seq = def.sequence;
74
+ if (seq.length === 0) continue;
75
+ const mergedOptions = {
76
+ ...defaultOptionsRef.current,
77
+ ...commonOptionsRef.current,
78
+ ...def.options
79
+ };
80
+ const resolvedTarget = require_utils.isRef(mergedOptions.target) ? mergedOptions.target.current : mergedOptions.target ?? (typeof document !== "undefined" ? document : null);
81
+ if (!resolvedTarget) continue;
82
+ const registrationKey = `${i}:${seqStr}`;
83
+ rows.push({
84
+ registrationKey,
85
+ def,
86
+ seq,
87
+ seqStr,
88
+ mergedOptions,
89
+ resolvedTarget
90
+ });
91
+ }
92
+ const nextKeys = new Set(rows.map((r) => r.registrationKey));
93
+ for (const [key, record] of prevRegistrations) if (!nextKeys.has(key) && record.handle.isActive) record.handle.unregister();
94
+ for (const row of rows) {
95
+ const { registrationKey, def, seq, mergedOptions, resolvedTarget } = row;
96
+ const existing = prevRegistrations.get(registrationKey);
97
+ if (existing?.handle.isActive && existing.target === resolvedTarget) {
98
+ nextRegistrations.set(registrationKey, existing);
99
+ continue;
100
+ }
101
+ if (existing?.handle.isActive) existing.handle.unregister();
102
+ const handle = managerRef.current.register(seq, def.callback, {
103
+ ...mergedOptions,
104
+ target: resolvedTarget
105
+ });
106
+ nextRegistrations.set(registrationKey, {
107
+ handle,
108
+ target: resolvedTarget
109
+ });
110
+ }
111
+ registrationsRef.current = nextRegistrations;
112
+ });
113
+ (0, preact_hooks.useEffect)(() => {
114
+ return () => {
115
+ for (const { handle } of registrationsRef.current.values()) if (handle.isActive) handle.unregister();
116
+ registrationsRef.current = /* @__PURE__ */ new Map();
117
+ };
118
+ }, []);
119
+ for (let i = 0; i < definitions.length; i++) {
120
+ const def = definitions[i];
121
+ const seqStr = sequenceStrings[i];
122
+ const registrationKey = `${i}:${seqStr}`;
123
+ const handle = registrationsRef.current.get(registrationKey)?.handle;
124
+ if (handle?.isActive && def.sequence.length > 0) {
125
+ handle.callback = def.callback;
126
+ const { target: _target, ...optionsWithoutTarget } = {
127
+ ...defaultOptions,
128
+ ...commonOptions,
129
+ ...def.options
130
+ };
131
+ handle.setOptions(optionsWithoutTarget);
132
+ }
133
+ }
134
+ }
135
+
136
+ //#endregion
137
+ exports.useHotkeySequences = useHotkeySequences;
138
+ //# sourceMappingURL=useHotkeySequences.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useHotkeySequences.cjs","names":["useDefaultHotkeysOptions","isRef"],"sources":["../src/useHotkeySequences.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { UseHotkeySequenceOptions } from './useHotkeySequence'\nimport type {\n HotkeyCallback,\n HotkeySequence,\n SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\n/**\n * A single sequence definition for use with `useHotkeySequences`.\n */\nexport interface UseHotkeySequenceDefinition {\n /** Array of hotkey strings that form the sequence */\n sequence: HotkeySequence\n /** The function to call when the sequence is completed */\n callback: HotkeyCallback\n /** Per-sequence options (merged on top of commonOptions) */\n options?: UseHotkeySequenceOptions\n}\n\n/**\n * Preact hook for registering multiple keyboard shortcut sequences at once (Vim-style).\n *\n * Uses the singleton SequenceManager. Accepts a dynamic array of definitions so you can\n * register variable-length lists without violating the rules of hooks.\n *\n * Options are merged in this order:\n * HotkeysProvider defaults < commonOptions < per-definition options\n *\n * Callbacks and options are synced on every render to avoid stale closures.\n *\n * Definitions with an empty `sequence` are skipped (no registration).\n *\n * @param definitions - Array of sequence definitions to register\n * @param commonOptions - Shared options applied to all sequences (overridden by per-definition options).\n * Per-row `enabled: false` still registers that sequence: `SequenceManager` suppresses execution only (the row\n * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle\n * via `setOptions` (no unregister/re-register churn).\n *\n * @example\n * ```tsx\n * function VimPalette() {\n * useHotkeySequences([\n * { sequence: ['G', 'G'], callback: () => scrollToTop() },\n * { sequence: ['D', 'D'], callback: () => deleteLine() },\n * { sequence: ['C', 'I', 'W'], callback: () => changeInnerWord(), options: { timeout: 500 } },\n * ])\n * }\n * ```\n *\n * @example\n * ```tsx\n * function DynamicSequences({ items }) {\n * useHotkeySequences(\n * items.map((item) => ({\n * sequence: item.chords,\n * callback: item.action,\n * options: { enabled: item.enabled },\n * })),\n * { preventDefault: true },\n * )\n * }\n * ```\n */\nexport function useHotkeySequences(\n definitions: Array<UseHotkeySequenceDefinition>,\n commonOptions: UseHotkeySequenceOptions = {},\n): void {\n type RegistrationRecord = {\n handle: SequenceRegistrationHandle\n target: Document | HTMLElement | Window\n }\n\n const defaultOptions = useDefaultHotkeysOptions().hotkeySequence\n const manager = getSequenceManager()\n\n const registrationsRef = useRef<Map<string, RegistrationRecord>>(new Map())\n const definitionsRef = useRef(definitions)\n const sequenceStringsRef = useRef<Array<string>>([])\n const commonOptionsRef = useRef(commonOptions)\n const defaultOptionsRef = useRef(defaultOptions)\n const managerRef = useRef(manager)\n\n const sequenceStrings = definitions.map((def) =>\n formatHotkeySequence(def.sequence),\n )\n\n definitionsRef.current = definitions\n sequenceStringsRef.current = sequenceStrings\n commonOptionsRef.current = commonOptions\n defaultOptionsRef.current = defaultOptions\n managerRef.current = manager\n\n useEffect(() => {\n const prevRegistrations = registrationsRef.current\n const nextRegistrations = new Map<string, RegistrationRecord>()\n\n const rows: Array<{\n registrationKey: string\n def: (typeof definitionsRef.current)[number]\n seq: HotkeySequence\n seqStr: string\n mergedOptions: UseHotkeySequenceOptions\n resolvedTarget: Document | HTMLElement | Window\n }> = []\n\n for (let i = 0; i < definitionsRef.current.length; i++) {\n const def = definitionsRef.current[i]!\n const seqStr = sequenceStringsRef.current[i]!\n const seq = def.sequence\n if (seq.length === 0) {\n continue\n }\n\n const mergedOptions = {\n ...defaultOptionsRef.current,\n ...commonOptionsRef.current,\n ...def.options,\n } as UseHotkeySequenceOptions\n\n const resolvedTarget = isRef(mergedOptions.target)\n ? mergedOptions.target.current\n : (mergedOptions.target ??\n (typeof document !== 'undefined' ? document : null))\n\n if (!resolvedTarget) {\n continue\n }\n\n const registrationKey = `${i}:${seqStr}`\n rows.push({\n registrationKey,\n def,\n seq,\n seqStr,\n mergedOptions,\n resolvedTarget,\n })\n }\n\n const nextKeys = new Set(rows.map((r) => r.registrationKey))\n\n for (const [key, record] of prevRegistrations) {\n if (!nextKeys.has(key) && record.handle.isActive) {\n record.handle.unregister()\n }\n }\n\n for (const row of rows) {\n const { registrationKey, def, seq, mergedOptions, resolvedTarget } = row\n\n const existing = prevRegistrations.get(registrationKey)\n if (existing?.handle.isActive && existing.target === resolvedTarget) {\n nextRegistrations.set(registrationKey, existing)\n continue\n }\n\n if (existing?.handle.isActive) {\n existing.handle.unregister()\n }\n\n const handle = managerRef.current.register(seq, def.callback, {\n ...mergedOptions,\n target: resolvedTarget,\n })\n nextRegistrations.set(registrationKey, {\n handle,\n target: resolvedTarget,\n })\n }\n\n registrationsRef.current = nextRegistrations\n })\n\n useEffect(() => {\n return () => {\n for (const { handle } of registrationsRef.current.values()) {\n if (handle.isActive) {\n handle.unregister()\n }\n }\n registrationsRef.current = new Map()\n }\n }, [])\n\n for (let i = 0; i < definitions.length; i++) {\n const def = definitions[i]!\n const seqStr = sequenceStrings[i]!\n const registrationKey = `${i}:${seqStr}`\n const handle = registrationsRef.current.get(registrationKey)?.handle\n\n if (handle?.isActive && def.sequence.length > 0) {\n handle.callback = def.callback\n const mergedOptions = {\n ...defaultOptions,\n ...commonOptions,\n ...def.options,\n } as UseHotkeySequenceOptions\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n handle.setOptions(optionsWithoutTarget)\n }\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,SAAgB,mBACd,aACA,gBAA0C,EAAE,EACtC;CAMN,MAAM,iBAAiBA,kDAA0B,CAAC;CAClD,MAAM,qDAA8B;CAEpC,MAAM,4DAA2D,IAAI,KAAK,CAAC;CAC3E,MAAM,0CAAwB,YAAY;CAC1C,MAAM,8CAA2C,EAAE,CAAC;CACpD,MAAM,4CAA0B,cAAc;CAC9C,MAAM,6CAA2B,eAAe;CAChD,MAAM,sCAAoB,QAAQ;CAElC,MAAM,kBAAkB,YAAY,KAAK,oDAClB,IAAI,SAAS,CACnC;AAED,gBAAe,UAAU;AACzB,oBAAmB,UAAU;AAC7B,kBAAiB,UAAU;AAC3B,mBAAkB,UAAU;AAC5B,YAAW,UAAU;AAErB,mCAAgB;EACd,MAAM,oBAAoB,iBAAiB;EAC3C,MAAM,oCAAoB,IAAI,KAAiC;EAE/D,MAAM,OAOD,EAAE;AAEP,OAAK,IAAI,IAAI,GAAG,IAAI,eAAe,QAAQ,QAAQ,KAAK;GACtD,MAAM,MAAM,eAAe,QAAQ;GACnC,MAAM,SAAS,mBAAmB,QAAQ;GAC1C,MAAM,MAAM,IAAI;AAChB,OAAI,IAAI,WAAW,EACjB;GAGF,MAAM,gBAAgB;IACpB,GAAG,kBAAkB;IACrB,GAAG,iBAAiB;IACpB,GAAG,IAAI;IACR;GAED,MAAM,iBAAiBC,oBAAM,cAAc,OAAO,GAC9C,cAAc,OAAO,UACpB,cAAc,WACd,OAAO,aAAa,cAAc,WAAW;AAElD,OAAI,CAAC,eACH;GAGF,MAAM,kBAAkB,GAAG,EAAE,GAAG;AAChC,QAAK,KAAK;IACR;IACA;IACA;IACA;IACA;IACA;IACD,CAAC;;EAGJ,MAAM,WAAW,IAAI,IAAI,KAAK,KAAK,MAAM,EAAE,gBAAgB,CAAC;AAE5D,OAAK,MAAM,CAAC,KAAK,WAAW,kBAC1B,KAAI,CAAC,SAAS,IAAI,IAAI,IAAI,OAAO,OAAO,SACtC,QAAO,OAAO,YAAY;AAI9B,OAAK,MAAM,OAAO,MAAM;GACtB,MAAM,EAAE,iBAAiB,KAAK,KAAK,eAAe,mBAAmB;GAErE,MAAM,WAAW,kBAAkB,IAAI,gBAAgB;AACvD,OAAI,UAAU,OAAO,YAAY,SAAS,WAAW,gBAAgB;AACnE,sBAAkB,IAAI,iBAAiB,SAAS;AAChD;;AAGF,OAAI,UAAU,OAAO,SACnB,UAAS,OAAO,YAAY;GAG9B,MAAM,SAAS,WAAW,QAAQ,SAAS,KAAK,IAAI,UAAU;IAC5D,GAAG;IACH,QAAQ;IACT,CAAC;AACF,qBAAkB,IAAI,iBAAiB;IACrC;IACA,QAAQ;IACT,CAAC;;AAGJ,mBAAiB,UAAU;GAC3B;AAEF,mCAAgB;AACd,eAAa;AACX,QAAK,MAAM,EAAE,YAAY,iBAAiB,QAAQ,QAAQ,CACxD,KAAI,OAAO,SACT,QAAO,YAAY;AAGvB,oBAAiB,0BAAU,IAAI,KAAK;;IAErC,EAAE,CAAC;AAEN,MAAK,IAAI,IAAI,GAAG,IAAI,YAAY,QAAQ,KAAK;EAC3C,MAAM,MAAM,YAAY;EACxB,MAAM,SAAS,gBAAgB;EAC/B,MAAM,kBAAkB,GAAG,EAAE,GAAG;EAChC,MAAM,SAAS,iBAAiB,QAAQ,IAAI,gBAAgB,EAAE;AAE9D,MAAI,QAAQ,YAAY,IAAI,SAAS,SAAS,GAAG;AAC/C,UAAO,WAAW,IAAI;GAMtB,MAAM,EAAE,QAAQ,SAAS,GAAG,yBALN;IACpB,GAAG;IACH,GAAG;IACH,GAAG,IAAI;IACR;AAED,UAAO,WAAW,qBAAqB"}
@@ -0,0 +1,63 @@
1
+ import { UseHotkeySequenceOptions } from "./useHotkeySequence.cjs";
2
+ import { HotkeyCallback, HotkeySequence } from "@tanstack/hotkeys";
3
+
4
+ //#region src/useHotkeySequences.d.ts
5
+ /**
6
+ * A single sequence definition for use with `useHotkeySequences`.
7
+ */
8
+ interface UseHotkeySequenceDefinition {
9
+ /** Array of hotkey strings that form the sequence */
10
+ sequence: HotkeySequence;
11
+ /** The function to call when the sequence is completed */
12
+ callback: HotkeyCallback;
13
+ /** Per-sequence options (merged on top of commonOptions) */
14
+ options?: UseHotkeySequenceOptions;
15
+ }
16
+ /**
17
+ * Preact hook for registering multiple keyboard shortcut sequences at once (Vim-style).
18
+ *
19
+ * Uses the singleton SequenceManager. Accepts a dynamic array of definitions so you can
20
+ * register variable-length lists without violating the rules of hooks.
21
+ *
22
+ * Options are merged in this order:
23
+ * HotkeysProvider defaults < commonOptions < per-definition options
24
+ *
25
+ * Callbacks and options are synced on every render to avoid stale closures.
26
+ *
27
+ * Definitions with an empty `sequence` are skipped (no registration).
28
+ *
29
+ * @param definitions - Array of sequence definitions to register
30
+ * @param commonOptions - Shared options applied to all sequences (overridden by per-definition options).
31
+ * Per-row `enabled: false` still registers that sequence: `SequenceManager` suppresses execution only (the row
32
+ * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle
33
+ * via `setOptions` (no unregister/re-register churn).
34
+ *
35
+ * @example
36
+ * ```tsx
37
+ * function VimPalette() {
38
+ * useHotkeySequences([
39
+ * { sequence: ['G', 'G'], callback: () => scrollToTop() },
40
+ * { sequence: ['D', 'D'], callback: () => deleteLine() },
41
+ * { sequence: ['C', 'I', 'W'], callback: () => changeInnerWord(), options: { timeout: 500 } },
42
+ * ])
43
+ * }
44
+ * ```
45
+ *
46
+ * @example
47
+ * ```tsx
48
+ * function DynamicSequences({ items }) {
49
+ * useHotkeySequences(
50
+ * items.map((item) => ({
51
+ * sequence: item.chords,
52
+ * callback: item.action,
53
+ * options: { enabled: item.enabled },
54
+ * })),
55
+ * { preventDefault: true },
56
+ * )
57
+ * }
58
+ * ```
59
+ */
60
+ declare function useHotkeySequences(definitions: Array<UseHotkeySequenceDefinition>, commonOptions?: UseHotkeySequenceOptions): void;
61
+ //#endregion
62
+ export { UseHotkeySequenceDefinition, useHotkeySequences };
63
+ //# sourceMappingURL=useHotkeySequences.d.cts.map
@@ -0,0 +1,63 @@
1
+ import { UseHotkeySequenceOptions } from "./useHotkeySequence.js";
2
+ import { HotkeyCallback, HotkeySequence } from "@tanstack/hotkeys";
3
+
4
+ //#region src/useHotkeySequences.d.ts
5
+ /**
6
+ * A single sequence definition for use with `useHotkeySequences`.
7
+ */
8
+ interface UseHotkeySequenceDefinition {
9
+ /** Array of hotkey strings that form the sequence */
10
+ sequence: HotkeySequence;
11
+ /** The function to call when the sequence is completed */
12
+ callback: HotkeyCallback;
13
+ /** Per-sequence options (merged on top of commonOptions) */
14
+ options?: UseHotkeySequenceOptions;
15
+ }
16
+ /**
17
+ * Preact hook for registering multiple keyboard shortcut sequences at once (Vim-style).
18
+ *
19
+ * Uses the singleton SequenceManager. Accepts a dynamic array of definitions so you can
20
+ * register variable-length lists without violating the rules of hooks.
21
+ *
22
+ * Options are merged in this order:
23
+ * HotkeysProvider defaults < commonOptions < per-definition options
24
+ *
25
+ * Callbacks and options are synced on every render to avoid stale closures.
26
+ *
27
+ * Definitions with an empty `sequence` are skipped (no registration).
28
+ *
29
+ * @param definitions - Array of sequence definitions to register
30
+ * @param commonOptions - Shared options applied to all sequences (overridden by per-definition options).
31
+ * Per-row `enabled: false` still registers that sequence: `SequenceManager` suppresses execution only (the row
32
+ * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle
33
+ * via `setOptions` (no unregister/re-register churn).
34
+ *
35
+ * @example
36
+ * ```tsx
37
+ * function VimPalette() {
38
+ * useHotkeySequences([
39
+ * { sequence: ['G', 'G'], callback: () => scrollToTop() },
40
+ * { sequence: ['D', 'D'], callback: () => deleteLine() },
41
+ * { sequence: ['C', 'I', 'W'], callback: () => changeInnerWord(), options: { timeout: 500 } },
42
+ * ])
43
+ * }
44
+ * ```
45
+ *
46
+ * @example
47
+ * ```tsx
48
+ * function DynamicSequences({ items }) {
49
+ * useHotkeySequences(
50
+ * items.map((item) => ({
51
+ * sequence: item.chords,
52
+ * callback: item.action,
53
+ * options: { enabled: item.enabled },
54
+ * })),
55
+ * { preventDefault: true },
56
+ * )
57
+ * }
58
+ * ```
59
+ */
60
+ declare function useHotkeySequences(definitions: Array<UseHotkeySequenceDefinition>, commonOptions?: UseHotkeySequenceOptions): void;
61
+ //#endregion
62
+ export { UseHotkeySequenceDefinition, useHotkeySequences };
63
+ //# sourceMappingURL=useHotkeySequences.d.ts.map
@@ -0,0 +1,138 @@
1
+ import { useDefaultHotkeysOptions } from "./HotkeysProvider.js";
2
+ import { isRef } from "./utils.js";
3
+ import { formatHotkeySequence, getSequenceManager } from "@tanstack/hotkeys";
4
+ import { useEffect, useRef } from "preact/hooks";
5
+
6
+ //#region src/useHotkeySequences.ts
7
+ /**
8
+ * Preact hook for registering multiple keyboard shortcut sequences at once (Vim-style).
9
+ *
10
+ * Uses the singleton SequenceManager. Accepts a dynamic array of definitions so you can
11
+ * register variable-length lists without violating the rules of hooks.
12
+ *
13
+ * Options are merged in this order:
14
+ * HotkeysProvider defaults < commonOptions < per-definition options
15
+ *
16
+ * Callbacks and options are synced on every render to avoid stale closures.
17
+ *
18
+ * Definitions with an empty `sequence` are skipped (no registration).
19
+ *
20
+ * @param definitions - Array of sequence definitions to register
21
+ * @param commonOptions - Shared options applied to all sequences (overridden by per-definition options).
22
+ * Per-row `enabled: false` still registers that sequence: `SequenceManager` suppresses execution only (the row
23
+ * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle
24
+ * via `setOptions` (no unregister/re-register churn).
25
+ *
26
+ * @example
27
+ * ```tsx
28
+ * function VimPalette() {
29
+ * useHotkeySequences([
30
+ * { sequence: ['G', 'G'], callback: () => scrollToTop() },
31
+ * { sequence: ['D', 'D'], callback: () => deleteLine() },
32
+ * { sequence: ['C', 'I', 'W'], callback: () => changeInnerWord(), options: { timeout: 500 } },
33
+ * ])
34
+ * }
35
+ * ```
36
+ *
37
+ * @example
38
+ * ```tsx
39
+ * function DynamicSequences({ items }) {
40
+ * useHotkeySequences(
41
+ * items.map((item) => ({
42
+ * sequence: item.chords,
43
+ * callback: item.action,
44
+ * options: { enabled: item.enabled },
45
+ * })),
46
+ * { preventDefault: true },
47
+ * )
48
+ * }
49
+ * ```
50
+ */
51
+ function useHotkeySequences(definitions, commonOptions = {}) {
52
+ const defaultOptions = useDefaultHotkeysOptions().hotkeySequence;
53
+ const manager = getSequenceManager();
54
+ const registrationsRef = useRef(/* @__PURE__ */ new Map());
55
+ const definitionsRef = useRef(definitions);
56
+ const sequenceStringsRef = useRef([]);
57
+ const commonOptionsRef = useRef(commonOptions);
58
+ const defaultOptionsRef = useRef(defaultOptions);
59
+ const managerRef = useRef(manager);
60
+ const sequenceStrings = definitions.map((def) => formatHotkeySequence(def.sequence));
61
+ definitionsRef.current = definitions;
62
+ sequenceStringsRef.current = sequenceStrings;
63
+ commonOptionsRef.current = commonOptions;
64
+ defaultOptionsRef.current = defaultOptions;
65
+ managerRef.current = manager;
66
+ useEffect(() => {
67
+ const prevRegistrations = registrationsRef.current;
68
+ const nextRegistrations = /* @__PURE__ */ new Map();
69
+ const rows = [];
70
+ for (let i = 0; i < definitionsRef.current.length; i++) {
71
+ const def = definitionsRef.current[i];
72
+ const seqStr = sequenceStringsRef.current[i];
73
+ const seq = def.sequence;
74
+ if (seq.length === 0) continue;
75
+ const mergedOptions = {
76
+ ...defaultOptionsRef.current,
77
+ ...commonOptionsRef.current,
78
+ ...def.options
79
+ };
80
+ const resolvedTarget = isRef(mergedOptions.target) ? mergedOptions.target.current : mergedOptions.target ?? (typeof document !== "undefined" ? document : null);
81
+ if (!resolvedTarget) continue;
82
+ const registrationKey = `${i}:${seqStr}`;
83
+ rows.push({
84
+ registrationKey,
85
+ def,
86
+ seq,
87
+ seqStr,
88
+ mergedOptions,
89
+ resolvedTarget
90
+ });
91
+ }
92
+ const nextKeys = new Set(rows.map((r) => r.registrationKey));
93
+ for (const [key, record] of prevRegistrations) if (!nextKeys.has(key) && record.handle.isActive) record.handle.unregister();
94
+ for (const row of rows) {
95
+ const { registrationKey, def, seq, mergedOptions, resolvedTarget } = row;
96
+ const existing = prevRegistrations.get(registrationKey);
97
+ if (existing?.handle.isActive && existing.target === resolvedTarget) {
98
+ nextRegistrations.set(registrationKey, existing);
99
+ continue;
100
+ }
101
+ if (existing?.handle.isActive) existing.handle.unregister();
102
+ const handle = managerRef.current.register(seq, def.callback, {
103
+ ...mergedOptions,
104
+ target: resolvedTarget
105
+ });
106
+ nextRegistrations.set(registrationKey, {
107
+ handle,
108
+ target: resolvedTarget
109
+ });
110
+ }
111
+ registrationsRef.current = nextRegistrations;
112
+ });
113
+ useEffect(() => {
114
+ return () => {
115
+ for (const { handle } of registrationsRef.current.values()) if (handle.isActive) handle.unregister();
116
+ registrationsRef.current = /* @__PURE__ */ new Map();
117
+ };
118
+ }, []);
119
+ for (let i = 0; i < definitions.length; i++) {
120
+ const def = definitions[i];
121
+ const seqStr = sequenceStrings[i];
122
+ const registrationKey = `${i}:${seqStr}`;
123
+ const handle = registrationsRef.current.get(registrationKey)?.handle;
124
+ if (handle?.isActive && def.sequence.length > 0) {
125
+ handle.callback = def.callback;
126
+ const { target: _target, ...optionsWithoutTarget } = {
127
+ ...defaultOptions,
128
+ ...commonOptions,
129
+ ...def.options
130
+ };
131
+ handle.setOptions(optionsWithoutTarget);
132
+ }
133
+ }
134
+ }
135
+
136
+ //#endregion
137
+ export { useHotkeySequences };
138
+ //# sourceMappingURL=useHotkeySequences.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useHotkeySequences.js","names":[],"sources":["../src/useHotkeySequences.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport { formatHotkeySequence, getSequenceManager } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { UseHotkeySequenceOptions } from './useHotkeySequence'\nimport type {\n HotkeyCallback,\n HotkeySequence,\n SequenceRegistrationHandle,\n} from '@tanstack/hotkeys'\n\n/**\n * A single sequence definition for use with `useHotkeySequences`.\n */\nexport interface UseHotkeySequenceDefinition {\n /** Array of hotkey strings that form the sequence */\n sequence: HotkeySequence\n /** The function to call when the sequence is completed */\n callback: HotkeyCallback\n /** Per-sequence options (merged on top of commonOptions) */\n options?: UseHotkeySequenceOptions\n}\n\n/**\n * Preact hook for registering multiple keyboard shortcut sequences at once (Vim-style).\n *\n * Uses the singleton SequenceManager. Accepts a dynamic array of definitions so you can\n * register variable-length lists without violating the rules of hooks.\n *\n * Options are merged in this order:\n * HotkeysProvider defaults < commonOptions < per-definition options\n *\n * Callbacks and options are synced on every render to avoid stale closures.\n *\n * Definitions with an empty `sequence` are skipped (no registration).\n *\n * @param definitions - Array of sequence definitions to register\n * @param commonOptions - Shared options applied to all sequences (overridden by per-definition options).\n * Per-row `enabled: false` still registers that sequence: `SequenceManager` suppresses execution only (the row\n * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle\n * via `setOptions` (no unregister/re-register churn).\n *\n * @example\n * ```tsx\n * function VimPalette() {\n * useHotkeySequences([\n * { sequence: ['G', 'G'], callback: () => scrollToTop() },\n * { sequence: ['D', 'D'], callback: () => deleteLine() },\n * { sequence: ['C', 'I', 'W'], callback: () => changeInnerWord(), options: { timeout: 500 } },\n * ])\n * }\n * ```\n *\n * @example\n * ```tsx\n * function DynamicSequences({ items }) {\n * useHotkeySequences(\n * items.map((item) => ({\n * sequence: item.chords,\n * callback: item.action,\n * options: { enabled: item.enabled },\n * })),\n * { preventDefault: true },\n * )\n * }\n * ```\n */\nexport function useHotkeySequences(\n definitions: Array<UseHotkeySequenceDefinition>,\n commonOptions: UseHotkeySequenceOptions = {},\n): void {\n type RegistrationRecord = {\n handle: SequenceRegistrationHandle\n target: Document | HTMLElement | Window\n }\n\n const defaultOptions = useDefaultHotkeysOptions().hotkeySequence\n const manager = getSequenceManager()\n\n const registrationsRef = useRef<Map<string, RegistrationRecord>>(new Map())\n const definitionsRef = useRef(definitions)\n const sequenceStringsRef = useRef<Array<string>>([])\n const commonOptionsRef = useRef(commonOptions)\n const defaultOptionsRef = useRef(defaultOptions)\n const managerRef = useRef(manager)\n\n const sequenceStrings = definitions.map((def) =>\n formatHotkeySequence(def.sequence),\n )\n\n definitionsRef.current = definitions\n sequenceStringsRef.current = sequenceStrings\n commonOptionsRef.current = commonOptions\n defaultOptionsRef.current = defaultOptions\n managerRef.current = manager\n\n useEffect(() => {\n const prevRegistrations = registrationsRef.current\n const nextRegistrations = new Map<string, RegistrationRecord>()\n\n const rows: Array<{\n registrationKey: string\n def: (typeof definitionsRef.current)[number]\n seq: HotkeySequence\n seqStr: string\n mergedOptions: UseHotkeySequenceOptions\n resolvedTarget: Document | HTMLElement | Window\n }> = []\n\n for (let i = 0; i < definitionsRef.current.length; i++) {\n const def = definitionsRef.current[i]!\n const seqStr = sequenceStringsRef.current[i]!\n const seq = def.sequence\n if (seq.length === 0) {\n continue\n }\n\n const mergedOptions = {\n ...defaultOptionsRef.current,\n ...commonOptionsRef.current,\n ...def.options,\n } as UseHotkeySequenceOptions\n\n const resolvedTarget = isRef(mergedOptions.target)\n ? mergedOptions.target.current\n : (mergedOptions.target ??\n (typeof document !== 'undefined' ? document : null))\n\n if (!resolvedTarget) {\n continue\n }\n\n const registrationKey = `${i}:${seqStr}`\n rows.push({\n registrationKey,\n def,\n seq,\n seqStr,\n mergedOptions,\n resolvedTarget,\n })\n }\n\n const nextKeys = new Set(rows.map((r) => r.registrationKey))\n\n for (const [key, record] of prevRegistrations) {\n if (!nextKeys.has(key) && record.handle.isActive) {\n record.handle.unregister()\n }\n }\n\n for (const row of rows) {\n const { registrationKey, def, seq, mergedOptions, resolvedTarget } = row\n\n const existing = prevRegistrations.get(registrationKey)\n if (existing?.handle.isActive && existing.target === resolvedTarget) {\n nextRegistrations.set(registrationKey, existing)\n continue\n }\n\n if (existing?.handle.isActive) {\n existing.handle.unregister()\n }\n\n const handle = managerRef.current.register(seq, def.callback, {\n ...mergedOptions,\n target: resolvedTarget,\n })\n nextRegistrations.set(registrationKey, {\n handle,\n target: resolvedTarget,\n })\n }\n\n registrationsRef.current = nextRegistrations\n })\n\n useEffect(() => {\n return () => {\n for (const { handle } of registrationsRef.current.values()) {\n if (handle.isActive) {\n handle.unregister()\n }\n }\n registrationsRef.current = new Map()\n }\n }, [])\n\n for (let i = 0; i < definitions.length; i++) {\n const def = definitions[i]!\n const seqStr = sequenceStrings[i]!\n const registrationKey = `${i}:${seqStr}`\n const handle = registrationsRef.current.get(registrationKey)?.handle\n\n if (handle?.isActive && def.sequence.length > 0) {\n handle.callback = def.callback\n const mergedOptions = {\n ...defaultOptions,\n ...commonOptions,\n ...def.options,\n } as UseHotkeySequenceOptions\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n handle.setOptions(optionsWithoutTarget)\n }\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,SAAgB,mBACd,aACA,gBAA0C,EAAE,EACtC;CAMN,MAAM,iBAAiB,0BAA0B,CAAC;CAClD,MAAM,UAAU,oBAAoB;CAEpC,MAAM,mBAAmB,uBAAwC,IAAI,KAAK,CAAC;CAC3E,MAAM,iBAAiB,OAAO,YAAY;CAC1C,MAAM,qBAAqB,OAAsB,EAAE,CAAC;CACpD,MAAM,mBAAmB,OAAO,cAAc;CAC9C,MAAM,oBAAoB,OAAO,eAAe;CAChD,MAAM,aAAa,OAAO,QAAQ;CAElC,MAAM,kBAAkB,YAAY,KAAK,QACvC,qBAAqB,IAAI,SAAS,CACnC;AAED,gBAAe,UAAU;AACzB,oBAAmB,UAAU;AAC7B,kBAAiB,UAAU;AAC3B,mBAAkB,UAAU;AAC5B,YAAW,UAAU;AAErB,iBAAgB;EACd,MAAM,oBAAoB,iBAAiB;EAC3C,MAAM,oCAAoB,IAAI,KAAiC;EAE/D,MAAM,OAOD,EAAE;AAEP,OAAK,IAAI,IAAI,GAAG,IAAI,eAAe,QAAQ,QAAQ,KAAK;GACtD,MAAM,MAAM,eAAe,QAAQ;GACnC,MAAM,SAAS,mBAAmB,QAAQ;GAC1C,MAAM,MAAM,IAAI;AAChB,OAAI,IAAI,WAAW,EACjB;GAGF,MAAM,gBAAgB;IACpB,GAAG,kBAAkB;IACrB,GAAG,iBAAiB;IACpB,GAAG,IAAI;IACR;GAED,MAAM,iBAAiB,MAAM,cAAc,OAAO,GAC9C,cAAc,OAAO,UACpB,cAAc,WACd,OAAO,aAAa,cAAc,WAAW;AAElD,OAAI,CAAC,eACH;GAGF,MAAM,kBAAkB,GAAG,EAAE,GAAG;AAChC,QAAK,KAAK;IACR;IACA;IACA;IACA;IACA;IACA;IACD,CAAC;;EAGJ,MAAM,WAAW,IAAI,IAAI,KAAK,KAAK,MAAM,EAAE,gBAAgB,CAAC;AAE5D,OAAK,MAAM,CAAC,KAAK,WAAW,kBAC1B,KAAI,CAAC,SAAS,IAAI,IAAI,IAAI,OAAO,OAAO,SACtC,QAAO,OAAO,YAAY;AAI9B,OAAK,MAAM,OAAO,MAAM;GACtB,MAAM,EAAE,iBAAiB,KAAK,KAAK,eAAe,mBAAmB;GAErE,MAAM,WAAW,kBAAkB,IAAI,gBAAgB;AACvD,OAAI,UAAU,OAAO,YAAY,SAAS,WAAW,gBAAgB;AACnE,sBAAkB,IAAI,iBAAiB,SAAS;AAChD;;AAGF,OAAI,UAAU,OAAO,SACnB,UAAS,OAAO,YAAY;GAG9B,MAAM,SAAS,WAAW,QAAQ,SAAS,KAAK,IAAI,UAAU;IAC5D,GAAG;IACH,QAAQ;IACT,CAAC;AACF,qBAAkB,IAAI,iBAAiB;IACrC;IACA,QAAQ;IACT,CAAC;;AAGJ,mBAAiB,UAAU;GAC3B;AAEF,iBAAgB;AACd,eAAa;AACX,QAAK,MAAM,EAAE,YAAY,iBAAiB,QAAQ,QAAQ,CACxD,KAAI,OAAO,SACT,QAAO,YAAY;AAGvB,oBAAiB,0BAAU,IAAI,KAAK;;IAErC,EAAE,CAAC;AAEN,MAAK,IAAI,IAAI,GAAG,IAAI,YAAY,QAAQ,KAAK;EAC3C,MAAM,MAAM,YAAY;EACxB,MAAM,SAAS,gBAAgB;EAC/B,MAAM,kBAAkB,GAAG,EAAE,GAAG;EAChC,MAAM,SAAS,iBAAiB,QAAQ,IAAI,gBAAgB,EAAE;AAE9D,MAAI,QAAQ,YAAY,IAAI,SAAS,SAAS,GAAG;AAC/C,UAAO,WAAW,IAAI;GAMtB,MAAM,EAAE,QAAQ,SAAS,GAAG,yBALN;IACpB,GAAG;IACH,GAAG;IACH,GAAG,IAAI;IACR;AAED,UAAO,WAAW,qBAAqB"}
@@ -17,7 +17,10 @@ let preact_hooks = require("preact/hooks");
17
17
  * Callbacks and options are synced on every render to avoid stale closures.
18
18
  *
19
19
  * @param hotkeys - Array of hotkey definitions to register
20
- * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)
20
+ * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options).
21
+ * Per-row `enabled: false` still registers that hotkey: `HotkeyManager` suppresses execution only (the row
22
+ * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle
23
+ * via `setOptions` (no unregister/re-register churn).
21
24
  *
22
25
  * @example
23
26
  * ```tsx
@@ -55,7 +58,7 @@ function useHotkeys(hotkeys, commonOptions = {}) {
55
58
  const commonOptionsRef = (0, preact_hooks.useRef)(commonOptions);
56
59
  const defaultOptionsRef = (0, preact_hooks.useRef)(defaultOptions);
57
60
  const managerRef = (0, preact_hooks.useRef)(manager);
58
- const hotkeyStrings = hotkeys.map((def) => typeof def.hotkey === "string" ? def.hotkey : (0, _tanstack_hotkeys.formatHotkey)((0, _tanstack_hotkeys.rawHotkeyToParsedHotkey)(def.hotkey, platform)));
61
+ const hotkeyStrings = hotkeys.map((def) => (0, _tanstack_hotkeys.normalizeRegisterableHotkey)(def.hotkey, platform));
59
62
  hotkeysRef.current = hotkeys;
60
63
  hotkeyStringsRef.current = hotkeyStrings;
61
64
  commonOptionsRef.current = commonOptions;
@@ -104,17 +107,13 @@ function useHotkeys(hotkeys, commonOptions = {}) {
104
107
  });
105
108
  }
106
109
  registrationsRef.current = nextRegistrations;
110
+ });
111
+ (0, preact_hooks.useEffect)(() => {
107
112
  return () => {
108
113
  for (const { handle } of registrationsRef.current.values()) if (handle.isActive) handle.unregister();
109
114
  registrationsRef.current = /* @__PURE__ */ new Map();
110
115
  };
111
- }, [hotkeyStrings.join("\0"), hotkeys.map((def) => {
112
- return {
113
- ...defaultOptions,
114
- ...commonOptions,
115
- ...def.options
116
- }.enabled ?? true;
117
- }).join("\0")]);
116
+ }, []);
118
117
  for (let i = 0; i < hotkeys.length; i++) {
119
118
  const def = hotkeys[i];
120
119
  const hotkeyStr = hotkeyStrings[i];
@@ -1 +1 @@
1
- {"version":3,"file":"useHotkeys.cjs","names":["useDefaultHotkeysOptions","isRef"],"sources":["../src/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport {\n detectPlatform,\n formatHotkey,\n getHotkeyManager,\n rawHotkeyToParsedHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type {\n Hotkey,\n HotkeyCallback,\n HotkeyRegistrationHandle,\n RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\n/**\n * A single hotkey definition for use with `useHotkeys`.\n */\nexport interface UseHotkeyDefinition {\n /** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */\n hotkey: RegisterableHotkey\n /** The function to call when the hotkey is pressed */\n callback: HotkeyCallback\n /** Per-hotkey options (merged on top of commonOptions) */\n options?: UseHotkeyOptions\n}\n\n/**\n * Preact hook for registering multiple keyboard hotkeys at once.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * Accepts a dynamic array of hotkey definitions, making it safe to use\n * with variable-length lists without violating the rules of hooks.\n *\n * Options are merged in this order:\n * HotkeysProvider defaults < commonOptions < per-definition options\n *\n * Callbacks and options are synced on every render to avoid stale closures.\n *\n * @param hotkeys - Array of hotkey definitions to register\n * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)\n *\n * @example\n * ```tsx\n * function Editor() {\n * useHotkeys([\n * { hotkey: 'Mod+S', callback: () => save() },\n * { hotkey: 'Mod+Z', callback: () => undo() },\n * { hotkey: 'Escape', callback: () => close() },\n * ])\n * }\n * ```\n *\n * @example\n * ```tsx\n * function MenuShortcuts({ items }) {\n * // Dynamic hotkeys from data -- safe because it's a single hook call\n * useHotkeys(\n * items.map((item) => ({\n * hotkey: item.shortcut,\n * callback: item.action,\n * options: { enabled: item.enabled },\n * })),\n * { preventDefault: true },\n * )\n * }\n * ```\n */\nexport function useHotkeys(\n hotkeys: Array<UseHotkeyDefinition>,\n commonOptions: UseHotkeyOptions = {},\n): void {\n type RegistrationRecord = {\n handle: HotkeyRegistrationHandle\n target: Document | HTMLElement | Window\n }\n\n const defaultOptions = useDefaultHotkeysOptions().hotkey\n const manager = getHotkeyManager()\n const platform =\n commonOptions.platform ?? defaultOptions?.platform ?? detectPlatform()\n\n const registrationsRef = useRef<Map<string, RegistrationRecord>>(new Map())\n const hotkeysRef = useRef(hotkeys)\n const hotkeyStringsRef = useRef<Array<Hotkey>>([])\n const commonOptionsRef = useRef(commonOptions)\n const defaultOptionsRef = useRef(defaultOptions)\n const managerRef = useRef(manager)\n\n const hotkeyStrings = hotkeys.map((def) =>\n typeof def.hotkey === 'string'\n ? def.hotkey\n : (formatHotkey(rawHotkeyToParsedHotkey(def.hotkey, platform)) as Hotkey),\n )\n\n hotkeysRef.current = hotkeys\n hotkeyStringsRef.current = hotkeyStrings\n commonOptionsRef.current = commonOptions\n defaultOptionsRef.current = defaultOptions\n managerRef.current = manager\n\n const hotkeyKey = hotkeyStrings.join('\\0')\n const enabledKey = hotkeys\n .map((def) => {\n const merged = {\n ...defaultOptions,\n ...commonOptions,\n ...def.options,\n }\n return merged.enabled ?? true\n })\n .join('\\0')\n\n useEffect(() => {\n const prevRegistrations = registrationsRef.current\n const nextRegistrations = new Map<string, RegistrationRecord>()\n\n const rows: Array<{\n registrationKey: string\n def: (typeof hotkeysRef.current)[number]\n hotkeyStr: Hotkey\n mergedOptions: UseHotkeyOptions\n resolvedTarget: Document | HTMLElement | Window\n }> = []\n\n for (let i = 0; i < hotkeysRef.current.length; i++) {\n const def = hotkeysRef.current[i]!\n const hotkeyStr = hotkeyStringsRef.current[i]!\n const mergedOptions = {\n ...defaultOptionsRef.current,\n ...commonOptionsRef.current,\n ...def.options,\n } as UseHotkeyOptions\n\n const resolvedTarget = isRef(mergedOptions.target)\n ? mergedOptions.target.current\n : (mergedOptions.target ??\n (typeof document !== 'undefined' ? document : null))\n\n if (!resolvedTarget) {\n continue\n }\n\n const registrationKey = `${i}:${hotkeyStr}`\n rows.push({\n registrationKey,\n def,\n hotkeyStr,\n mergedOptions,\n resolvedTarget,\n })\n }\n\n const nextKeys = new Set(rows.map((r) => r.registrationKey))\n\n for (const [key, record] of prevRegistrations) {\n if (!nextKeys.has(key) && record.handle.isActive) {\n record.handle.unregister()\n }\n }\n\n for (const row of rows) {\n const { registrationKey, def, hotkeyStr, mergedOptions, resolvedTarget } =\n row\n\n const existing = prevRegistrations.get(registrationKey)\n if (existing?.handle.isActive && existing.target === resolvedTarget) {\n nextRegistrations.set(registrationKey, existing)\n continue\n }\n\n if (existing?.handle.isActive) {\n existing.handle.unregister()\n }\n\n const handle = managerRef.current.register(hotkeyStr, def.callback, {\n ...mergedOptions,\n target: resolvedTarget,\n })\n nextRegistrations.set(registrationKey, {\n handle,\n target: resolvedTarget,\n })\n }\n\n registrationsRef.current = nextRegistrations\n\n return () => {\n for (const { handle } of registrationsRef.current.values()) {\n if (handle.isActive) {\n handle.unregister()\n }\n }\n registrationsRef.current = new Map()\n }\n }, [hotkeyKey, enabledKey])\n\n for (let i = 0; i < hotkeys.length; i++) {\n const def = hotkeys[i]!\n const hotkeyStr = hotkeyStrings[i]!\n const registrationKey = `${i}:${hotkeyStr}`\n const handle = registrationsRef.current.get(registrationKey)?.handle\n\n if (handle?.isActive) {\n handle.callback = def.callback\n const mergedOptions = {\n ...defaultOptions,\n ...commonOptions,\n ...def.options,\n } as UseHotkeyOptions\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n handle.setOptions(optionsWithoutTarget)\n }\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"useHotkeys.cjs","names":["useDefaultHotkeysOptions","isRef"],"sources":["../src/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport {\n detectPlatform,\n getHotkeyManager,\n normalizeRegisterableHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type {\n Hotkey,\n HotkeyCallback,\n HotkeyRegistrationHandle,\n RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\n/**\n * A single hotkey definition for use with `useHotkeys`.\n */\nexport interface UseHotkeyDefinition {\n /** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */\n hotkey: RegisterableHotkey\n /** The function to call when the hotkey is pressed */\n callback: HotkeyCallback\n /** Per-hotkey options (merged on top of commonOptions) */\n options?: UseHotkeyOptions\n}\n\n/**\n * Preact hook for registering multiple keyboard hotkeys at once.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * Accepts a dynamic array of hotkey definitions, making it safe to use\n * with variable-length lists without violating the rules of hooks.\n *\n * Options are merged in this order:\n * HotkeysProvider defaults < commonOptions < per-definition options\n *\n * Callbacks and options are synced on every render to avoid stale closures.\n *\n * @param hotkeys - Array of hotkey definitions to register\n * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options).\n * Per-row `enabled: false` still registers that hotkey: `HotkeyManager` suppresses execution only (the row\n * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle\n * via `setOptions` (no unregister/re-register churn).\n *\n * @example\n * ```tsx\n * function Editor() {\n * useHotkeys([\n * { hotkey: 'Mod+S', callback: () => save() },\n * { hotkey: 'Mod+Z', callback: () => undo() },\n * { hotkey: 'Escape', callback: () => close() },\n * ])\n * }\n * ```\n *\n * @example\n * ```tsx\n * function MenuShortcuts({ items }) {\n * // Dynamic hotkeys from data -- safe because it's a single hook call\n * useHotkeys(\n * items.map((item) => ({\n * hotkey: item.shortcut,\n * callback: item.action,\n * options: { enabled: item.enabled },\n * })),\n * { preventDefault: true },\n * )\n * }\n * ```\n */\nexport function useHotkeys(\n hotkeys: Array<UseHotkeyDefinition>,\n commonOptions: UseHotkeyOptions = {},\n): void {\n type RegistrationRecord = {\n handle: HotkeyRegistrationHandle\n target: Document | HTMLElement | Window\n }\n\n const defaultOptions = useDefaultHotkeysOptions().hotkey\n const manager = getHotkeyManager()\n const platform =\n commonOptions.platform ?? defaultOptions?.platform ?? detectPlatform()\n\n const registrationsRef = useRef<Map<string, RegistrationRecord>>(new Map())\n const hotkeysRef = useRef(hotkeys)\n const hotkeyStringsRef = useRef<Array<Hotkey>>([])\n const commonOptionsRef = useRef(commonOptions)\n const defaultOptionsRef = useRef(defaultOptions)\n const managerRef = useRef(manager)\n\n const hotkeyStrings = hotkeys.map((def) =>\n normalizeRegisterableHotkey(def.hotkey, platform),\n )\n\n hotkeysRef.current = hotkeys\n hotkeyStringsRef.current = hotkeyStrings\n commonOptionsRef.current = commonOptions\n defaultOptionsRef.current = defaultOptions\n managerRef.current = manager\n\n useEffect(() => {\n const prevRegistrations = registrationsRef.current\n const nextRegistrations = new Map<string, RegistrationRecord>()\n\n const rows: Array<{\n registrationKey: string\n def: (typeof hotkeysRef.current)[number]\n hotkeyStr: Hotkey\n mergedOptions: UseHotkeyOptions\n resolvedTarget: Document | HTMLElement | Window\n }> = []\n\n for (let i = 0; i < hotkeysRef.current.length; i++) {\n const def = hotkeysRef.current[i]!\n const hotkeyStr = hotkeyStringsRef.current[i]!\n const mergedOptions = {\n ...defaultOptionsRef.current,\n ...commonOptionsRef.current,\n ...def.options,\n } as UseHotkeyOptions\n\n const resolvedTarget = isRef(mergedOptions.target)\n ? mergedOptions.target.current\n : (mergedOptions.target ??\n (typeof document !== 'undefined' ? document : null))\n\n if (!resolvedTarget) {\n continue\n }\n\n const registrationKey = `${i}:${hotkeyStr}`\n rows.push({\n registrationKey,\n def,\n hotkeyStr,\n mergedOptions,\n resolvedTarget,\n })\n }\n\n const nextKeys = new Set(rows.map((r) => r.registrationKey))\n\n for (const [key, record] of prevRegistrations) {\n if (!nextKeys.has(key) && record.handle.isActive) {\n record.handle.unregister()\n }\n }\n\n for (const row of rows) {\n const { registrationKey, def, hotkeyStr, mergedOptions, resolvedTarget } =\n row\n\n const existing = prevRegistrations.get(registrationKey)\n if (existing?.handle.isActive && existing.target === resolvedTarget) {\n nextRegistrations.set(registrationKey, existing)\n continue\n }\n\n if (existing?.handle.isActive) {\n existing.handle.unregister()\n }\n\n const handle = managerRef.current.register(hotkeyStr, def.callback, {\n ...mergedOptions,\n target: resolvedTarget,\n })\n nextRegistrations.set(registrationKey, {\n handle,\n target: resolvedTarget,\n })\n }\n\n registrationsRef.current = nextRegistrations\n })\n\n useEffect(() => {\n return () => {\n for (const { handle } of registrationsRef.current.values()) {\n if (handle.isActive) {\n handle.unregister()\n }\n }\n registrationsRef.current = new Map()\n }\n }, [])\n\n for (let i = 0; i < hotkeys.length; i++) {\n const def = hotkeys[i]!\n const hotkeyStr = hotkeyStrings[i]!\n const registrationKey = `${i}:${hotkeyStr}`\n const handle = registrationsRef.current.get(registrationKey)?.handle\n\n if (handle?.isActive) {\n handle.callback = def.callback\n const mergedOptions = {\n ...defaultOptions,\n ...commonOptions,\n ...def.options,\n } as UseHotkeyOptions\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n handle.setOptions(optionsWithoutTarget)\n }\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAgB,WACd,SACA,gBAAkC,EAAE,EAC9B;CAMN,MAAM,iBAAiBA,kDAA0B,CAAC;CAClD,MAAM,mDAA4B;CAClC,MAAM,WACJ,cAAc,YAAY,gBAAgB,mDAA4B;CAExE,MAAM,4DAA2D,IAAI,KAAK,CAAC;CAC3E,MAAM,sCAAoB,QAAQ;CAClC,MAAM,4CAAyC,EAAE,CAAC;CAClD,MAAM,4CAA0B,cAAc;CAC9C,MAAM,6CAA2B,eAAe;CAChD,MAAM,sCAAoB,QAAQ;CAElC,MAAM,gBAAgB,QAAQ,KAAK,2DACL,IAAI,QAAQ,SAAS,CAClD;AAED,YAAW,UAAU;AACrB,kBAAiB,UAAU;AAC3B,kBAAiB,UAAU;AAC3B,mBAAkB,UAAU;AAC5B,YAAW,UAAU;AAErB,mCAAgB;EACd,MAAM,oBAAoB,iBAAiB;EAC3C,MAAM,oCAAoB,IAAI,KAAiC;EAE/D,MAAM,OAMD,EAAE;AAEP,OAAK,IAAI,IAAI,GAAG,IAAI,WAAW,QAAQ,QAAQ,KAAK;GAClD,MAAM,MAAM,WAAW,QAAQ;GAC/B,MAAM,YAAY,iBAAiB,QAAQ;GAC3C,MAAM,gBAAgB;IACpB,GAAG,kBAAkB;IACrB,GAAG,iBAAiB;IACpB,GAAG,IAAI;IACR;GAED,MAAM,iBAAiBC,oBAAM,cAAc,OAAO,GAC9C,cAAc,OAAO,UACpB,cAAc,WACd,OAAO,aAAa,cAAc,WAAW;AAElD,OAAI,CAAC,eACH;GAGF,MAAM,kBAAkB,GAAG,EAAE,GAAG;AAChC,QAAK,KAAK;IACR;IACA;IACA;IACA;IACA;IACD,CAAC;;EAGJ,MAAM,WAAW,IAAI,IAAI,KAAK,KAAK,MAAM,EAAE,gBAAgB,CAAC;AAE5D,OAAK,MAAM,CAAC,KAAK,WAAW,kBAC1B,KAAI,CAAC,SAAS,IAAI,IAAI,IAAI,OAAO,OAAO,SACtC,QAAO,OAAO,YAAY;AAI9B,OAAK,MAAM,OAAO,MAAM;GACtB,MAAM,EAAE,iBAAiB,KAAK,WAAW,eAAe,mBACtD;GAEF,MAAM,WAAW,kBAAkB,IAAI,gBAAgB;AACvD,OAAI,UAAU,OAAO,YAAY,SAAS,WAAW,gBAAgB;AACnE,sBAAkB,IAAI,iBAAiB,SAAS;AAChD;;AAGF,OAAI,UAAU,OAAO,SACnB,UAAS,OAAO,YAAY;GAG9B,MAAM,SAAS,WAAW,QAAQ,SAAS,WAAW,IAAI,UAAU;IAClE,GAAG;IACH,QAAQ;IACT,CAAC;AACF,qBAAkB,IAAI,iBAAiB;IACrC;IACA,QAAQ;IACT,CAAC;;AAGJ,mBAAiB,UAAU;GAC3B;AAEF,mCAAgB;AACd,eAAa;AACX,QAAK,MAAM,EAAE,YAAY,iBAAiB,QAAQ,QAAQ,CACxD,KAAI,OAAO,SACT,QAAO,YAAY;AAGvB,oBAAiB,0BAAU,IAAI,KAAK;;IAErC,EAAE,CAAC;AAEN,MAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;EACvC,MAAM,MAAM,QAAQ;EACpB,MAAM,YAAY,cAAc;EAChC,MAAM,kBAAkB,GAAG,EAAE,GAAG;EAChC,MAAM,SAAS,iBAAiB,QAAQ,IAAI,gBAAgB,EAAE;AAE9D,MAAI,QAAQ,UAAU;AACpB,UAAO,WAAW,IAAI;GAMtB,MAAM,EAAE,QAAQ,SAAS,GAAG,yBALN;IACpB,GAAG;IACH,GAAG;IACH,GAAG,IAAI;IACR;AAED,UAAO,WAAW,qBAAqB"}
@@ -26,7 +26,10 @@ interface UseHotkeyDefinition {
26
26
  * Callbacks and options are synced on every render to avoid stale closures.
27
27
  *
28
28
  * @param hotkeys - Array of hotkey definitions to register
29
- * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)
29
+ * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options).
30
+ * Per-row `enabled: false` still registers that hotkey: `HotkeyManager` suppresses execution only (the row
31
+ * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle
32
+ * via `setOptions` (no unregister/re-register churn).
30
33
  *
31
34
  * @example
32
35
  * ```tsx
@@ -26,7 +26,10 @@ interface UseHotkeyDefinition {
26
26
  * Callbacks and options are synced on every render to avoid stale closures.
27
27
  *
28
28
  * @param hotkeys - Array of hotkey definitions to register
29
- * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)
29
+ * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options).
30
+ * Per-row `enabled: false` still registers that hotkey: `HotkeyManager` suppresses execution only (the row
31
+ * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle
32
+ * via `setOptions` (no unregister/re-register churn).
30
33
  *
31
34
  * @example
32
35
  * ```tsx
@@ -1,6 +1,6 @@
1
1
  import { useDefaultHotkeysOptions } from "./HotkeysProvider.js";
2
2
  import { isRef } from "./utils.js";
3
- import { detectPlatform, formatHotkey, getHotkeyManager, rawHotkeyToParsedHotkey } from "@tanstack/hotkeys";
3
+ import { detectPlatform, getHotkeyManager, normalizeRegisterableHotkey } from "@tanstack/hotkeys";
4
4
  import { useEffect, useRef } from "preact/hooks";
5
5
 
6
6
  //#region src/useHotkeys.ts
@@ -17,7 +17,10 @@ import { useEffect, useRef } from "preact/hooks";
17
17
  * Callbacks and options are synced on every render to avoid stale closures.
18
18
  *
19
19
  * @param hotkeys - Array of hotkey definitions to register
20
- * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)
20
+ * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options).
21
+ * Per-row `enabled: false` still registers that hotkey: `HotkeyManager` suppresses execution only (the row
22
+ * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle
23
+ * via `setOptions` (no unregister/re-register churn).
21
24
  *
22
25
  * @example
23
26
  * ```tsx
@@ -55,7 +58,7 @@ function useHotkeys(hotkeys, commonOptions = {}) {
55
58
  const commonOptionsRef = useRef(commonOptions);
56
59
  const defaultOptionsRef = useRef(defaultOptions);
57
60
  const managerRef = useRef(manager);
58
- const hotkeyStrings = hotkeys.map((def) => typeof def.hotkey === "string" ? def.hotkey : formatHotkey(rawHotkeyToParsedHotkey(def.hotkey, platform)));
61
+ const hotkeyStrings = hotkeys.map((def) => normalizeRegisterableHotkey(def.hotkey, platform));
59
62
  hotkeysRef.current = hotkeys;
60
63
  hotkeyStringsRef.current = hotkeyStrings;
61
64
  commonOptionsRef.current = commonOptions;
@@ -104,17 +107,13 @@ function useHotkeys(hotkeys, commonOptions = {}) {
104
107
  });
105
108
  }
106
109
  registrationsRef.current = nextRegistrations;
110
+ });
111
+ useEffect(() => {
107
112
  return () => {
108
113
  for (const { handle } of registrationsRef.current.values()) if (handle.isActive) handle.unregister();
109
114
  registrationsRef.current = /* @__PURE__ */ new Map();
110
115
  };
111
- }, [hotkeyStrings.join("\0"), hotkeys.map((def) => {
112
- return {
113
- ...defaultOptions,
114
- ...commonOptions,
115
- ...def.options
116
- }.enabled ?? true;
117
- }).join("\0")]);
116
+ }, []);
118
117
  for (let i = 0; i < hotkeys.length; i++) {
119
118
  const def = hotkeys[i];
120
119
  const hotkeyStr = hotkeyStrings[i];
@@ -1 +1 @@
1
- {"version":3,"file":"useHotkeys.js","names":[],"sources":["../src/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport {\n detectPlatform,\n formatHotkey,\n getHotkeyManager,\n rawHotkeyToParsedHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type {\n Hotkey,\n HotkeyCallback,\n HotkeyRegistrationHandle,\n RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\n/**\n * A single hotkey definition for use with `useHotkeys`.\n */\nexport interface UseHotkeyDefinition {\n /** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */\n hotkey: RegisterableHotkey\n /** The function to call when the hotkey is pressed */\n callback: HotkeyCallback\n /** Per-hotkey options (merged on top of commonOptions) */\n options?: UseHotkeyOptions\n}\n\n/**\n * Preact hook for registering multiple keyboard hotkeys at once.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * Accepts a dynamic array of hotkey definitions, making it safe to use\n * with variable-length lists without violating the rules of hooks.\n *\n * Options are merged in this order:\n * HotkeysProvider defaults < commonOptions < per-definition options\n *\n * Callbacks and options are synced on every render to avoid stale closures.\n *\n * @param hotkeys - Array of hotkey definitions to register\n * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options)\n *\n * @example\n * ```tsx\n * function Editor() {\n * useHotkeys([\n * { hotkey: 'Mod+S', callback: () => save() },\n * { hotkey: 'Mod+Z', callback: () => undo() },\n * { hotkey: 'Escape', callback: () => close() },\n * ])\n * }\n * ```\n *\n * @example\n * ```tsx\n * function MenuShortcuts({ items }) {\n * // Dynamic hotkeys from data -- safe because it's a single hook call\n * useHotkeys(\n * items.map((item) => ({\n * hotkey: item.shortcut,\n * callback: item.action,\n * options: { enabled: item.enabled },\n * })),\n * { preventDefault: true },\n * )\n * }\n * ```\n */\nexport function useHotkeys(\n hotkeys: Array<UseHotkeyDefinition>,\n commonOptions: UseHotkeyOptions = {},\n): void {\n type RegistrationRecord = {\n handle: HotkeyRegistrationHandle\n target: Document | HTMLElement | Window\n }\n\n const defaultOptions = useDefaultHotkeysOptions().hotkey\n const manager = getHotkeyManager()\n const platform =\n commonOptions.platform ?? defaultOptions?.platform ?? detectPlatform()\n\n const registrationsRef = useRef<Map<string, RegistrationRecord>>(new Map())\n const hotkeysRef = useRef(hotkeys)\n const hotkeyStringsRef = useRef<Array<Hotkey>>([])\n const commonOptionsRef = useRef(commonOptions)\n const defaultOptionsRef = useRef(defaultOptions)\n const managerRef = useRef(manager)\n\n const hotkeyStrings = hotkeys.map((def) =>\n typeof def.hotkey === 'string'\n ? def.hotkey\n : (formatHotkey(rawHotkeyToParsedHotkey(def.hotkey, platform)) as Hotkey),\n )\n\n hotkeysRef.current = hotkeys\n hotkeyStringsRef.current = hotkeyStrings\n commonOptionsRef.current = commonOptions\n defaultOptionsRef.current = defaultOptions\n managerRef.current = manager\n\n const hotkeyKey = hotkeyStrings.join('\\0')\n const enabledKey = hotkeys\n .map((def) => {\n const merged = {\n ...defaultOptions,\n ...commonOptions,\n ...def.options,\n }\n return merged.enabled ?? true\n })\n .join('\\0')\n\n useEffect(() => {\n const prevRegistrations = registrationsRef.current\n const nextRegistrations = new Map<string, RegistrationRecord>()\n\n const rows: Array<{\n registrationKey: string\n def: (typeof hotkeysRef.current)[number]\n hotkeyStr: Hotkey\n mergedOptions: UseHotkeyOptions\n resolvedTarget: Document | HTMLElement | Window\n }> = []\n\n for (let i = 0; i < hotkeysRef.current.length; i++) {\n const def = hotkeysRef.current[i]!\n const hotkeyStr = hotkeyStringsRef.current[i]!\n const mergedOptions = {\n ...defaultOptionsRef.current,\n ...commonOptionsRef.current,\n ...def.options,\n } as UseHotkeyOptions\n\n const resolvedTarget = isRef(mergedOptions.target)\n ? mergedOptions.target.current\n : (mergedOptions.target ??\n (typeof document !== 'undefined' ? document : null))\n\n if (!resolvedTarget) {\n continue\n }\n\n const registrationKey = `${i}:${hotkeyStr}`\n rows.push({\n registrationKey,\n def,\n hotkeyStr,\n mergedOptions,\n resolvedTarget,\n })\n }\n\n const nextKeys = new Set(rows.map((r) => r.registrationKey))\n\n for (const [key, record] of prevRegistrations) {\n if (!nextKeys.has(key) && record.handle.isActive) {\n record.handle.unregister()\n }\n }\n\n for (const row of rows) {\n const { registrationKey, def, hotkeyStr, mergedOptions, resolvedTarget } =\n row\n\n const existing = prevRegistrations.get(registrationKey)\n if (existing?.handle.isActive && existing.target === resolvedTarget) {\n nextRegistrations.set(registrationKey, existing)\n continue\n }\n\n if (existing?.handle.isActive) {\n existing.handle.unregister()\n }\n\n const handle = managerRef.current.register(hotkeyStr, def.callback, {\n ...mergedOptions,\n target: resolvedTarget,\n })\n nextRegistrations.set(registrationKey, {\n handle,\n target: resolvedTarget,\n })\n }\n\n registrationsRef.current = nextRegistrations\n\n return () => {\n for (const { handle } of registrationsRef.current.values()) {\n if (handle.isActive) {\n handle.unregister()\n }\n }\n registrationsRef.current = new Map()\n }\n }, [hotkeyKey, enabledKey])\n\n for (let i = 0; i < hotkeys.length; i++) {\n const def = hotkeys[i]!\n const hotkeyStr = hotkeyStrings[i]!\n const registrationKey = `${i}:${hotkeyStr}`\n const handle = registrationsRef.current.get(registrationKey)?.handle\n\n if (handle?.isActive) {\n handle.callback = def.callback\n const mergedOptions = {\n ...defaultOptions,\n ...commonOptions,\n ...def.options,\n } as UseHotkeyOptions\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n handle.setOptions(optionsWithoutTarget)\n }\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"useHotkeys.js","names":[],"sources":["../src/useHotkeys.ts"],"sourcesContent":["import { useEffect, useRef } from 'preact/hooks'\nimport {\n detectPlatform,\n getHotkeyManager,\n normalizeRegisterableHotkey,\n} from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport { isRef } from './utils'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type {\n Hotkey,\n HotkeyCallback,\n HotkeyRegistrationHandle,\n RegisterableHotkey,\n} from '@tanstack/hotkeys'\n\n/**\n * A single hotkey definition for use with `useHotkeys`.\n */\nexport interface UseHotkeyDefinition {\n /** The hotkey string (e.g., 'Mod+S', 'Escape') or RawHotkey object */\n hotkey: RegisterableHotkey\n /** The function to call when the hotkey is pressed */\n callback: HotkeyCallback\n /** Per-hotkey options (merged on top of commonOptions) */\n options?: UseHotkeyOptions\n}\n\n/**\n * Preact hook for registering multiple keyboard hotkeys at once.\n *\n * Uses the singleton HotkeyManager for efficient event handling.\n * Accepts a dynamic array of hotkey definitions, making it safe to use\n * with variable-length lists without violating the rules of hooks.\n *\n * Options are merged in this order:\n * HotkeysProvider defaults < commonOptions < per-definition options\n *\n * Callbacks and options are synced on every render to avoid stale closures.\n *\n * @param hotkeys - Array of hotkey definitions to register\n * @param commonOptions - Shared options applied to all hotkeys (overridden by per-definition options).\n * Per-row `enabled: false` still registers that hotkey: `HotkeyManager` suppresses execution only (the row\n * stays in the store and appears in TanStack Hotkeys devtools). Toggling `enabled` updates the existing handle\n * via `setOptions` (no unregister/re-register churn).\n *\n * @example\n * ```tsx\n * function Editor() {\n * useHotkeys([\n * { hotkey: 'Mod+S', callback: () => save() },\n * { hotkey: 'Mod+Z', callback: () => undo() },\n * { hotkey: 'Escape', callback: () => close() },\n * ])\n * }\n * ```\n *\n * @example\n * ```tsx\n * function MenuShortcuts({ items }) {\n * // Dynamic hotkeys from data -- safe because it's a single hook call\n * useHotkeys(\n * items.map((item) => ({\n * hotkey: item.shortcut,\n * callback: item.action,\n * options: { enabled: item.enabled },\n * })),\n * { preventDefault: true },\n * )\n * }\n * ```\n */\nexport function useHotkeys(\n hotkeys: Array<UseHotkeyDefinition>,\n commonOptions: UseHotkeyOptions = {},\n): void {\n type RegistrationRecord = {\n handle: HotkeyRegistrationHandle\n target: Document | HTMLElement | Window\n }\n\n const defaultOptions = useDefaultHotkeysOptions().hotkey\n const manager = getHotkeyManager()\n const platform =\n commonOptions.platform ?? defaultOptions?.platform ?? detectPlatform()\n\n const registrationsRef = useRef<Map<string, RegistrationRecord>>(new Map())\n const hotkeysRef = useRef(hotkeys)\n const hotkeyStringsRef = useRef<Array<Hotkey>>([])\n const commonOptionsRef = useRef(commonOptions)\n const defaultOptionsRef = useRef(defaultOptions)\n const managerRef = useRef(manager)\n\n const hotkeyStrings = hotkeys.map((def) =>\n normalizeRegisterableHotkey(def.hotkey, platform),\n )\n\n hotkeysRef.current = hotkeys\n hotkeyStringsRef.current = hotkeyStrings\n commonOptionsRef.current = commonOptions\n defaultOptionsRef.current = defaultOptions\n managerRef.current = manager\n\n useEffect(() => {\n const prevRegistrations = registrationsRef.current\n const nextRegistrations = new Map<string, RegistrationRecord>()\n\n const rows: Array<{\n registrationKey: string\n def: (typeof hotkeysRef.current)[number]\n hotkeyStr: Hotkey\n mergedOptions: UseHotkeyOptions\n resolvedTarget: Document | HTMLElement | Window\n }> = []\n\n for (let i = 0; i < hotkeysRef.current.length; i++) {\n const def = hotkeysRef.current[i]!\n const hotkeyStr = hotkeyStringsRef.current[i]!\n const mergedOptions = {\n ...defaultOptionsRef.current,\n ...commonOptionsRef.current,\n ...def.options,\n } as UseHotkeyOptions\n\n const resolvedTarget = isRef(mergedOptions.target)\n ? mergedOptions.target.current\n : (mergedOptions.target ??\n (typeof document !== 'undefined' ? document : null))\n\n if (!resolvedTarget) {\n continue\n }\n\n const registrationKey = `${i}:${hotkeyStr}`\n rows.push({\n registrationKey,\n def,\n hotkeyStr,\n mergedOptions,\n resolvedTarget,\n })\n }\n\n const nextKeys = new Set(rows.map((r) => r.registrationKey))\n\n for (const [key, record] of prevRegistrations) {\n if (!nextKeys.has(key) && record.handle.isActive) {\n record.handle.unregister()\n }\n }\n\n for (const row of rows) {\n const { registrationKey, def, hotkeyStr, mergedOptions, resolvedTarget } =\n row\n\n const existing = prevRegistrations.get(registrationKey)\n if (existing?.handle.isActive && existing.target === resolvedTarget) {\n nextRegistrations.set(registrationKey, existing)\n continue\n }\n\n if (existing?.handle.isActive) {\n existing.handle.unregister()\n }\n\n const handle = managerRef.current.register(hotkeyStr, def.callback, {\n ...mergedOptions,\n target: resolvedTarget,\n })\n nextRegistrations.set(registrationKey, {\n handle,\n target: resolvedTarget,\n })\n }\n\n registrationsRef.current = nextRegistrations\n })\n\n useEffect(() => {\n return () => {\n for (const { handle } of registrationsRef.current.values()) {\n if (handle.isActive) {\n handle.unregister()\n }\n }\n registrationsRef.current = new Map()\n }\n }, [])\n\n for (let i = 0; i < hotkeys.length; i++) {\n const def = hotkeys[i]!\n const hotkeyStr = hotkeyStrings[i]!\n const registrationKey = `${i}:${hotkeyStr}`\n const handle = registrationsRef.current.get(registrationKey)?.handle\n\n if (handle?.isActive) {\n handle.callback = def.callback\n const mergedOptions = {\n ...defaultOptions,\n ...commonOptions,\n ...def.options,\n } as UseHotkeyOptions\n const { target: _target, ...optionsWithoutTarget } = mergedOptions\n handle.setOptions(optionsWithoutTarget)\n }\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAgB,WACd,SACA,gBAAkC,EAAE,EAC9B;CAMN,MAAM,iBAAiB,0BAA0B,CAAC;CAClD,MAAM,UAAU,kBAAkB;CAClC,MAAM,WACJ,cAAc,YAAY,gBAAgB,YAAY,gBAAgB;CAExE,MAAM,mBAAmB,uBAAwC,IAAI,KAAK,CAAC;CAC3E,MAAM,aAAa,OAAO,QAAQ;CAClC,MAAM,mBAAmB,OAAsB,EAAE,CAAC;CAClD,MAAM,mBAAmB,OAAO,cAAc;CAC9C,MAAM,oBAAoB,OAAO,eAAe;CAChD,MAAM,aAAa,OAAO,QAAQ;CAElC,MAAM,gBAAgB,QAAQ,KAAK,QACjC,4BAA4B,IAAI,QAAQ,SAAS,CAClD;AAED,YAAW,UAAU;AACrB,kBAAiB,UAAU;AAC3B,kBAAiB,UAAU;AAC3B,mBAAkB,UAAU;AAC5B,YAAW,UAAU;AAErB,iBAAgB;EACd,MAAM,oBAAoB,iBAAiB;EAC3C,MAAM,oCAAoB,IAAI,KAAiC;EAE/D,MAAM,OAMD,EAAE;AAEP,OAAK,IAAI,IAAI,GAAG,IAAI,WAAW,QAAQ,QAAQ,KAAK;GAClD,MAAM,MAAM,WAAW,QAAQ;GAC/B,MAAM,YAAY,iBAAiB,QAAQ;GAC3C,MAAM,gBAAgB;IACpB,GAAG,kBAAkB;IACrB,GAAG,iBAAiB;IACpB,GAAG,IAAI;IACR;GAED,MAAM,iBAAiB,MAAM,cAAc,OAAO,GAC9C,cAAc,OAAO,UACpB,cAAc,WACd,OAAO,aAAa,cAAc,WAAW;AAElD,OAAI,CAAC,eACH;GAGF,MAAM,kBAAkB,GAAG,EAAE,GAAG;AAChC,QAAK,KAAK;IACR;IACA;IACA;IACA;IACA;IACD,CAAC;;EAGJ,MAAM,WAAW,IAAI,IAAI,KAAK,KAAK,MAAM,EAAE,gBAAgB,CAAC;AAE5D,OAAK,MAAM,CAAC,KAAK,WAAW,kBAC1B,KAAI,CAAC,SAAS,IAAI,IAAI,IAAI,OAAO,OAAO,SACtC,QAAO,OAAO,YAAY;AAI9B,OAAK,MAAM,OAAO,MAAM;GACtB,MAAM,EAAE,iBAAiB,KAAK,WAAW,eAAe,mBACtD;GAEF,MAAM,WAAW,kBAAkB,IAAI,gBAAgB;AACvD,OAAI,UAAU,OAAO,YAAY,SAAS,WAAW,gBAAgB;AACnE,sBAAkB,IAAI,iBAAiB,SAAS;AAChD;;AAGF,OAAI,UAAU,OAAO,SACnB,UAAS,OAAO,YAAY;GAG9B,MAAM,SAAS,WAAW,QAAQ,SAAS,WAAW,IAAI,UAAU;IAClE,GAAG;IACH,QAAQ;IACT,CAAC;AACF,qBAAkB,IAAI,iBAAiB;IACrC;IACA,QAAQ;IACT,CAAC;;AAGJ,mBAAiB,UAAU;GAC3B;AAEF,iBAAgB;AACd,eAAa;AACX,QAAK,MAAM,EAAE,YAAY,iBAAiB,QAAQ,QAAQ,CACxD,KAAI,OAAO,SACT,QAAO,YAAY;AAGvB,oBAAiB,0BAAU,IAAI,KAAK;;IAErC,EAAE,CAAC;AAEN,MAAK,IAAI,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK;EACvC,MAAM,MAAM,QAAQ;EACpB,MAAM,YAAY,cAAc;EAChC,MAAM,kBAAkB,GAAG,EAAE,GAAG;EAChC,MAAM,SAAS,iBAAiB,QAAQ,IAAI,gBAAgB,EAAE;AAE9D,MAAI,QAAQ,UAAU;AACpB,UAAO,WAAW,IAAI;GAMtB,MAAM,EAAE,QAAQ,SAAS,GAAG,yBALN;IACpB,GAAG;IACH,GAAG;IACH,GAAG,IAAI;IACR;AAED,UAAO,WAAW,qBAAqB"}