@tanstack/react-hotkeys 0.9.1 → 0.10.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.
- package/dist/useHeldKeyCodes.cjs +1 -1
- package/dist/useHeldKeyCodes.cjs.map +1 -1
- package/dist/useHeldKeyCodes.js +2 -2
- package/dist/useHeldKeyCodes.js.map +1 -1
- package/dist/useHeldKeys.cjs +2 -2
- package/dist/useHeldKeys.cjs.map +1 -1
- package/dist/useHeldKeys.d.cts +1 -1
- package/dist/useHeldKeys.d.ts +1 -1
- package/dist/useHeldKeys.js +3 -3
- package/dist/useHeldKeys.js.map +1 -1
- package/dist/useHotkeyRecorder.cjs +2 -2
- package/dist/useHotkeyRecorder.cjs.map +1 -1
- package/dist/useHotkeyRecorder.js +3 -3
- package/dist/useHotkeyRecorder.js.map +1 -1
- package/dist/useHotkeyRegistrations.cjs +2 -2
- package/dist/useHotkeyRegistrations.cjs.map +1 -1
- package/dist/useHotkeyRegistrations.js +3 -3
- package/dist/useHotkeyRegistrations.js.map +1 -1
- package/dist/useHotkeySequenceRecorder.cjs +3 -3
- package/dist/useHotkeySequenceRecorder.cjs.map +1 -1
- package/dist/useHotkeySequenceRecorder.js +4 -4
- package/dist/useHotkeySequenceRecorder.js.map +1 -1
- package/dist/useKeyHold.cjs +2 -2
- package/dist/useKeyHold.cjs.map +1 -1
- package/dist/useKeyHold.d.cts +1 -1
- package/dist/useKeyHold.d.ts +1 -1
- package/dist/useKeyHold.js +3 -3
- package/dist/useKeyHold.js.map +1 -1
- package/package.json +7 -7
- package/src/useHeldKeyCodes.ts +2 -2
- package/src/useHeldKeys.ts +3 -3
- package/src/useHotkeyRecorder.ts +4 -4
- package/src/useHotkeyRegistrations.ts +3 -3
- package/src/useHotkeySequenceRecorder.ts +4 -4
- package/src/useKeyHold.ts +3 -3
package/dist/useHeldKeyCodes.cjs
CHANGED
|
@@ -30,7 +30,7 @@ let _tanstack_react_store = require("@tanstack/react-store");
|
|
|
30
30
|
* ```
|
|
31
31
|
*/
|
|
32
32
|
function useHeldKeyCodes() {
|
|
33
|
-
return (0, _tanstack_react_store.
|
|
33
|
+
return (0, _tanstack_react_store.useSelector)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldCodes);
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHeldKeyCodes.cjs","names":[],"sources":["../src/useHeldKeyCodes.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useHeldKeyCodes.cjs","names":[],"sources":["../src/useHeldKeyCodes.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns a map of currently held key names to their physical `event.code` values.\n *\n * This is useful for debugging which physical key was pressed (e.g. distinguishing\n * left vs right Shift via \"ShiftLeft\" / \"ShiftRight\").\n *\n * @returns Record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```tsx\n * function KeyDebugDisplay() {\n * const heldKeys = useHeldKeys()\n * const heldCodes = useHeldKeyCodes()\n *\n * return (\n * <div>\n * {heldKeys.map((key) => (\n * <kbd key={key}>\n * {key} <small>{heldCodes[key]}</small>\n * </kbd>\n * ))}\n * </div>\n * )\n * }\n * ```\n */\nexport function useHeldKeyCodes(): Record<string, string> {\n const tracker = getKeyStateTracker()\n return useSelector(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,kBAA0C;AAExD,0FADoC,CACT,QAAQ,UAAU,MAAM,UAAU"}
|
package/dist/useHeldKeyCodes.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getKeyStateTracker } from "@tanstack/hotkeys";
|
|
2
|
-
import {
|
|
2
|
+
import { useSelector } from "@tanstack/react-store";
|
|
3
3
|
|
|
4
4
|
//#region src/useHeldKeyCodes.ts
|
|
5
5
|
/**
|
|
@@ -29,7 +29,7 @@ import { useStore } from "@tanstack/react-store";
|
|
|
29
29
|
* ```
|
|
30
30
|
*/
|
|
31
31
|
function useHeldKeyCodes() {
|
|
32
|
-
return
|
|
32
|
+
return useSelector(getKeyStateTracker().store, (state) => state.heldCodes);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHeldKeyCodes.js","names":[],"sources":["../src/useHeldKeyCodes.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useHeldKeyCodes.js","names":[],"sources":["../src/useHeldKeyCodes.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns a map of currently held key names to their physical `event.code` values.\n *\n * This is useful for debugging which physical key was pressed (e.g. distinguishing\n * left vs right Shift via \"ShiftLeft\" / \"ShiftRight\").\n *\n * @returns Record mapping normalized key names to their `event.code` values\n *\n * @example\n * ```tsx\n * function KeyDebugDisplay() {\n * const heldKeys = useHeldKeys()\n * const heldCodes = useHeldKeyCodes()\n *\n * return (\n * <div>\n * {heldKeys.map((key) => (\n * <kbd key={key}>\n * {key} <small>{heldCodes[key]}</small>\n * </kbd>\n * ))}\n * </div>\n * )\n * }\n * ```\n */\nexport function useHeldKeyCodes(): Record<string, string> {\n const tracker = getKeyStateTracker()\n return useSelector(tracker.store, (state) => state.heldCodes)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAgB,kBAA0C;AAExD,QAAO,YADS,oBAAoB,CACT,QAAQ,UAAU,MAAM,UAAU"}
|
package/dist/useHeldKeys.cjs
CHANGED
|
@@ -6,7 +6,7 @@ let _tanstack_react_store = require("@tanstack/react-store");
|
|
|
6
6
|
/**
|
|
7
7
|
* React hook that returns an array of currently held keyboard keys.
|
|
8
8
|
*
|
|
9
|
-
* This hook uses `
|
|
9
|
+
* This hook uses `useSelector` from `@tanstack/react-store` to subscribe
|
|
10
10
|
* to the global KeyStateTracker and updates whenever keys are pressed
|
|
11
11
|
* or released.
|
|
12
12
|
*
|
|
@@ -26,7 +26,7 @@ let _tanstack_react_store = require("@tanstack/react-store");
|
|
|
26
26
|
* ```
|
|
27
27
|
*/
|
|
28
28
|
function useHeldKeys() {
|
|
29
|
-
return (0, _tanstack_react_store.
|
|
29
|
+
return (0, _tanstack_react_store.useSelector)((0, _tanstack_hotkeys.getKeyStateTracker)().store, (state) => state.heldKeys);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
//#endregion
|
package/dist/useHeldKeys.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHeldKeys.cjs","names":[],"sources":["../src/useHeldKeys.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useHeldKeys.cjs","names":[],"sources":["../src/useHeldKeys.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns an array of currently held keyboard keys.\n *\n * This hook uses `useSelector` from `@tanstack/react-store` to subscribe\n * to the global KeyStateTracker and updates whenever keys are pressed\n * or released.\n *\n * @returns Array of currently held key names\n *\n * @example\n * ```tsx\n * function KeyDisplay() {\n * const heldKeys = useHeldKeys()\n *\n * return (\n * <div>\n * Currently pressed: {heldKeys.join(' + ') || 'None'}\n * </div>\n * )\n * }\n * ```\n */\nexport function useHeldKeys(): Array<string> {\n const tracker = getKeyStateTracker()\n return useSelector(tracker.store, (state) => state.heldKeys)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,cAA6B;AAE3C,0FADoC,CACT,QAAQ,UAAU,MAAM,SAAS"}
|
package/dist/useHeldKeys.d.cts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/**
|
|
3
3
|
* React hook that returns an array of currently held keyboard keys.
|
|
4
4
|
*
|
|
5
|
-
* This hook uses `
|
|
5
|
+
* This hook uses `useSelector` from `@tanstack/react-store` to subscribe
|
|
6
6
|
* to the global KeyStateTracker and updates whenever keys are pressed
|
|
7
7
|
* or released.
|
|
8
8
|
*
|
package/dist/useHeldKeys.d.ts
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/**
|
|
3
3
|
* React hook that returns an array of currently held keyboard keys.
|
|
4
4
|
*
|
|
5
|
-
* This hook uses `
|
|
5
|
+
* This hook uses `useSelector` from `@tanstack/react-store` to subscribe
|
|
6
6
|
* to the global KeyStateTracker and updates whenever keys are pressed
|
|
7
7
|
* or released.
|
|
8
8
|
*
|
package/dist/useHeldKeys.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { getKeyStateTracker } from "@tanstack/hotkeys";
|
|
2
|
-
import {
|
|
2
|
+
import { useSelector } from "@tanstack/react-store";
|
|
3
3
|
|
|
4
4
|
//#region src/useHeldKeys.ts
|
|
5
5
|
/**
|
|
6
6
|
* React hook that returns an array of currently held keyboard keys.
|
|
7
7
|
*
|
|
8
|
-
* This hook uses `
|
|
8
|
+
* This hook uses `useSelector` from `@tanstack/react-store` to subscribe
|
|
9
9
|
* to the global KeyStateTracker and updates whenever keys are pressed
|
|
10
10
|
* or released.
|
|
11
11
|
*
|
|
@@ -25,7 +25,7 @@ import { useStore } from "@tanstack/react-store";
|
|
|
25
25
|
* ```
|
|
26
26
|
*/
|
|
27
27
|
function useHeldKeys() {
|
|
28
|
-
return
|
|
28
|
+
return useSelector(getKeyStateTracker().store, (state) => state.heldKeys);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
//#endregion
|
package/dist/useHeldKeys.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHeldKeys.js","names":[],"sources":["../src/useHeldKeys.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useHeldKeys.js","names":[],"sources":["../src/useHeldKeys.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns an array of currently held keyboard keys.\n *\n * This hook uses `useSelector` from `@tanstack/react-store` to subscribe\n * to the global KeyStateTracker and updates whenever keys are pressed\n * or released.\n *\n * @returns Array of currently held key names\n *\n * @example\n * ```tsx\n * function KeyDisplay() {\n * const heldKeys = useHeldKeys()\n *\n * return (\n * <div>\n * Currently pressed: {heldKeys.join(' + ') || 'None'}\n * </div>\n * )\n * }\n * ```\n */\nexport function useHeldKeys(): Array<string> {\n const tracker = getKeyStateTracker()\n return useSelector(tracker.store, (state) => state.heldKeys)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,SAAgB,cAA6B;AAE3C,QAAO,YADS,oBAAoB,CACT,QAAQ,UAAU,MAAM,SAAS"}
|
|
@@ -51,8 +51,8 @@ function useHotkeyRecorder(options) {
|
|
|
51
51
|
const recorderRef = (0, react.useRef)(null);
|
|
52
52
|
if (!recorderRef.current) recorderRef.current = new _tanstack_hotkeys.HotkeyRecorder(mergedOptions);
|
|
53
53
|
recorderRef.current.setOptions(mergedOptions);
|
|
54
|
-
const isRecording = (0, _tanstack_react_store.
|
|
55
|
-
const recordedHotkey = (0, _tanstack_react_store.
|
|
54
|
+
const isRecording = (0, _tanstack_react_store.useSelector)(recorderRef.current.store, (state) => state.isRecording);
|
|
55
|
+
const recordedHotkey = (0, _tanstack_react_store.useSelector)(recorderRef.current.store, (state) => state.recordedHotkey);
|
|
56
56
|
(0, react.useEffect)(() => {
|
|
57
57
|
return () => {
|
|
58
58
|
recorderRef.current?.destroy();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkeyRecorder.cjs","names":["useDefaultHotkeysOptions","HotkeyRecorder"],"sources":["../src/useHotkeyRecorder.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"useHotkeyRecorder.cjs","names":["useDefaultHotkeysOptions","HotkeyRecorder"],"sources":["../src/useHotkeyRecorder.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { useSelector } from '@tanstack/react-store'\nimport { HotkeyRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport type { Hotkey, HotkeyRecorderOptions } from '@tanstack/hotkeys'\n\nexport interface ReactHotkeyRecorder {\n /** Whether recording is currently active */\n isRecording: boolean\n /** The currently recorded hotkey (for live preview) */\n recordedHotkey: Hotkey | null\n /** Start recording a new hotkey */\n startRecording: () => void\n /** Stop recording (same as cancel) */\n stopRecording: () => void\n /** Cancel recording without saving */\n cancelRecording: () => void\n}\n\n/**\n * React hook for recording keyboard shortcuts.\n *\n * This hook provides a thin wrapper around the framework-agnostic `HotkeyRecorder`\n * class, managing all the complexity of capturing keyboard events, converting them\n * to hotkey strings, and handling edge cases like Escape to cancel or Backspace/Delete\n * to clear.\n *\n * @param options - Configuration options for the recorder\n * @returns An object with recording state and control functions\n *\n * @example\n * ```tsx\n * function ShortcutSettings() {\n * const [shortcut, setShortcut] = useState<Hotkey>('Mod+S')\n *\n * const recorder = useHotkeyRecorder({\n * onRecord: (hotkey) => {\n * setShortcut(hotkey)\n * },\n * onCancel: () => {\n * console.log('Recording cancelled')\n * },\n * })\n *\n * return (\n * <div>\n * <button onClick={recorder.startRecording}>\n * {recorder.isRecording ? 'Recording...' : 'Edit Shortcut'}\n * </button>\n * {recorder.recordedHotkey && (\n * <div>Recording: {recorder.recordedHotkey}</div>\n * )}\n * </div>\n * )\n * }\n * ```\n */\nexport function useHotkeyRecorder(\n options: HotkeyRecorderOptions,\n): ReactHotkeyRecorder {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkeyRecorder,\n ...options,\n } as HotkeyRecorderOptions\n\n const recorderRef = useRef<HotkeyRecorder | null>(null)\n\n // Create recorder instance once\n if (!recorderRef.current) {\n recorderRef.current = new HotkeyRecorder(mergedOptions)\n }\n\n // Sync options on every render (same pattern as useHotkey)\n // This ensures callbacks always have access to latest values\n recorderRef.current.setOptions(mergedOptions)\n\n // Subscribe to recorder state using useSelector (same pattern as useHeldKeys)\n const isRecording = useSelector(\n recorderRef.current.store,\n (state) => state.isRecording,\n )\n const recordedHotkey = useSelector(\n recorderRef.current.store,\n (state) => state.recordedHotkey,\n )\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n recorderRef.current?.destroy()\n }\n }, [])\n\n return {\n isRecording,\n recordedHotkey,\n startRecording: () => recorderRef.current?.start(),\n stopRecording: () => recorderRef.current?.stop(),\n cancelRecording: () => recorderRef.current?.cancel(),\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,kBACd,SACqB;CACrB,MAAM,gBAAgB;EACpB,GAAGA,kDAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,gCAA4C,KAAK;AAGvD,KAAI,CAAC,YAAY,QACf,aAAY,UAAU,IAAIC,iCAAe,cAAc;AAKzD,aAAY,QAAQ,WAAW,cAAc;CAG7C,MAAM,qDACJ,YAAY,QAAQ,QACnB,UAAU,MAAM,YAClB;CACD,MAAM,wDACJ,YAAY,QAAQ,QACnB,UAAU,MAAM,eAClB;AAGD,4BAAgB;AACd,eAAa;AACX,eAAY,SAAS,SAAS;;IAE/B,EAAE,CAAC;AAEN,QAAO;EACL;EACA;EACA,sBAAsB,YAAY,SAAS,OAAO;EAClD,qBAAqB,YAAY,SAAS,MAAM;EAChD,uBAAuB,YAAY,SAAS,QAAQ;EACrD"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useDefaultHotkeysOptions } from "./HotkeysProvider.js";
|
|
2
2
|
import { HotkeyRecorder } from "@tanstack/hotkeys";
|
|
3
3
|
import { useEffect, useRef } from "react";
|
|
4
|
-
import {
|
|
4
|
+
import { useSelector } from "@tanstack/react-store";
|
|
5
5
|
|
|
6
6
|
//#region src/useHotkeyRecorder.ts
|
|
7
7
|
/**
|
|
@@ -50,8 +50,8 @@ function useHotkeyRecorder(options) {
|
|
|
50
50
|
const recorderRef = useRef(null);
|
|
51
51
|
if (!recorderRef.current) recorderRef.current = new HotkeyRecorder(mergedOptions);
|
|
52
52
|
recorderRef.current.setOptions(mergedOptions);
|
|
53
|
-
const isRecording =
|
|
54
|
-
const recordedHotkey =
|
|
53
|
+
const isRecording = useSelector(recorderRef.current.store, (state) => state.isRecording);
|
|
54
|
+
const recordedHotkey = useSelector(recorderRef.current.store, (state) => state.recordedHotkey);
|
|
55
55
|
useEffect(() => {
|
|
56
56
|
return () => {
|
|
57
57
|
recorderRef.current?.destroy();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkeyRecorder.js","names":[],"sources":["../src/useHotkeyRecorder.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"useHotkeyRecorder.js","names":[],"sources":["../src/useHotkeyRecorder.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { useSelector } from '@tanstack/react-store'\nimport { HotkeyRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport type { Hotkey, HotkeyRecorderOptions } from '@tanstack/hotkeys'\n\nexport interface ReactHotkeyRecorder {\n /** Whether recording is currently active */\n isRecording: boolean\n /** The currently recorded hotkey (for live preview) */\n recordedHotkey: Hotkey | null\n /** Start recording a new hotkey */\n startRecording: () => void\n /** Stop recording (same as cancel) */\n stopRecording: () => void\n /** Cancel recording without saving */\n cancelRecording: () => void\n}\n\n/**\n * React hook for recording keyboard shortcuts.\n *\n * This hook provides a thin wrapper around the framework-agnostic `HotkeyRecorder`\n * class, managing all the complexity of capturing keyboard events, converting them\n * to hotkey strings, and handling edge cases like Escape to cancel or Backspace/Delete\n * to clear.\n *\n * @param options - Configuration options for the recorder\n * @returns An object with recording state and control functions\n *\n * @example\n * ```tsx\n * function ShortcutSettings() {\n * const [shortcut, setShortcut] = useState<Hotkey>('Mod+S')\n *\n * const recorder = useHotkeyRecorder({\n * onRecord: (hotkey) => {\n * setShortcut(hotkey)\n * },\n * onCancel: () => {\n * console.log('Recording cancelled')\n * },\n * })\n *\n * return (\n * <div>\n * <button onClick={recorder.startRecording}>\n * {recorder.isRecording ? 'Recording...' : 'Edit Shortcut'}\n * </button>\n * {recorder.recordedHotkey && (\n * <div>Recording: {recorder.recordedHotkey}</div>\n * )}\n * </div>\n * )\n * }\n * ```\n */\nexport function useHotkeyRecorder(\n options: HotkeyRecorderOptions,\n): ReactHotkeyRecorder {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkeyRecorder,\n ...options,\n } as HotkeyRecorderOptions\n\n const recorderRef = useRef<HotkeyRecorder | null>(null)\n\n // Create recorder instance once\n if (!recorderRef.current) {\n recorderRef.current = new HotkeyRecorder(mergedOptions)\n }\n\n // Sync options on every render (same pattern as useHotkey)\n // This ensures callbacks always have access to latest values\n recorderRef.current.setOptions(mergedOptions)\n\n // Subscribe to recorder state using useSelector (same pattern as useHeldKeys)\n const isRecording = useSelector(\n recorderRef.current.store,\n (state) => state.isRecording,\n )\n const recordedHotkey = useSelector(\n recorderRef.current.store,\n (state) => state.recordedHotkey,\n )\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n recorderRef.current?.destroy()\n }\n }, [])\n\n return {\n isRecording,\n recordedHotkey,\n startRecording: () => recorderRef.current?.start(),\n stopRecording: () => recorderRef.current?.stop(),\n cancelRecording: () => recorderRef.current?.cancel(),\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,kBACd,SACqB;CACrB,MAAM,gBAAgB;EACpB,GAAG,0BAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,cAAc,OAA8B,KAAK;AAGvD,KAAI,CAAC,YAAY,QACf,aAAY,UAAU,IAAI,eAAe,cAAc;AAKzD,aAAY,QAAQ,WAAW,cAAc;CAG7C,MAAM,cAAc,YAClB,YAAY,QAAQ,QACnB,UAAU,MAAM,YAClB;CACD,MAAM,iBAAiB,YACrB,YAAY,QAAQ,QACnB,UAAU,MAAM,eAClB;AAGD,iBAAgB;AACd,eAAa;AACX,eAAY,SAAS,SAAS;;IAE/B,EAAE,CAAC;AAEN,QAAO;EACL;EACA;EACA,sBAAsB,YAAY,SAAS,OAAO;EAClD,qBAAqB,YAAY,SAAS,MAAM;EAChD,uBAAuB,YAAY,SAAS,QAAQ;EACrD"}
|
|
@@ -39,8 +39,8 @@ function useHotkeyRegistrations() {
|
|
|
39
39
|
const hotkeyManager = (0, _tanstack_hotkeys.getHotkeyManager)();
|
|
40
40
|
const sequenceManager = (0, _tanstack_hotkeys.getSequenceManager)();
|
|
41
41
|
return {
|
|
42
|
-
hotkeys: (0, _tanstack_react_store.
|
|
43
|
-
sequences: (0, _tanstack_react_store.
|
|
42
|
+
hotkeys: (0, _tanstack_react_store.useSelector)(hotkeyManager.registrations, (state) => Array.from(state.values()).map(_tanstack_hotkeys.toHotkeyRegistrationView)),
|
|
43
|
+
sequences: (0, _tanstack_react_store.useSelector)(sequenceManager.registrations, (state) => Array.from(state.values()))
|
|
44
44
|
};
|
|
45
45
|
}
|
|
46
46
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkeyRegistrations.cjs","names":["toHotkeyRegistrationView"],"sources":["../src/useHotkeyRegistrations.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useHotkeyRegistrations.cjs","names":["toHotkeyRegistrationView"],"sources":["../src/useHotkeyRegistrations.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport {\n getHotkeyManager,\n getSequenceManager,\n toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n HotkeyRegistrationView,\n SequenceRegistrationView,\n} from '@tanstack/hotkeys'\n\n/**\n * Return type for useHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n /** All registered hotkeys (public view, no callbacks) */\n hotkeys: Array<HotkeyRegistrationView>\n /** All registered sequences */\n sequences: Array<SequenceRegistrationView>\n}\n\n/**\n * React hook that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone hook that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * re-renders when registrations change.\n *\n * @returns Object with `hotkeys` and `sequences` arrays\n *\n * @example\n * ```tsx\n * function ShortcutPalette() {\n * const { hotkeys, sequences } = useHotkeyRegistrations()\n *\n * return (\n * <ul>\n * {hotkeys.map((reg) => (\n * <li key={reg.id}>\n * {reg.options.meta?.name ?? reg.hotkey}\n * </li>\n * ))}\n * {sequences.map((reg) => (\n * <li key={reg.id}>\n * {reg.options.meta?.name ?? reg.sequence.join(' ')}\n * </li>\n * ))}\n * </ul>\n * )\n * }\n * ```\n */\nexport function useHotkeyRegistrations(): HotkeyRegistrationsResult {\n const hotkeyManager = getHotkeyManager()\n const sequenceManager = getSequenceManager()\n\n const hotkeys = useSelector(hotkeyManager.registrations, (state) =>\n Array.from(state.values()).map(toHotkeyRegistrationView),\n )\n\n const sequences = useSelector(sequenceManager.registrations, (state) =>\n Array.from(state.values()),\n )\n\n return { hotkeys, sequences }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,SAAgB,yBAAoD;CAClE,MAAM,yDAAkC;CACxC,MAAM,6DAAsC;AAU5C,QAAO;EAAE,gDARmB,cAAc,gBAAgB,UACxD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAIA,2CAAyB,CACzD;EAMiB,kDAJY,gBAAgB,gBAAgB,UAC5D,MAAM,KAAK,MAAM,QAAQ,CAAC,CAC3B;EAE4B"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getHotkeyManager, getSequenceManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
|
|
2
|
-
import {
|
|
2
|
+
import { useSelector } from "@tanstack/react-store";
|
|
3
3
|
|
|
4
4
|
//#region src/useHotkeyRegistrations.ts
|
|
5
5
|
/**
|
|
@@ -38,8 +38,8 @@ function useHotkeyRegistrations() {
|
|
|
38
38
|
const hotkeyManager = getHotkeyManager();
|
|
39
39
|
const sequenceManager = getSequenceManager();
|
|
40
40
|
return {
|
|
41
|
-
hotkeys:
|
|
42
|
-
sequences:
|
|
41
|
+
hotkeys: useSelector(hotkeyManager.registrations, (state) => Array.from(state.values()).map(toHotkeyRegistrationView)),
|
|
42
|
+
sequences: useSelector(sequenceManager.registrations, (state) => Array.from(state.values()))
|
|
43
43
|
};
|
|
44
44
|
}
|
|
45
45
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkeyRegistrations.js","names":[],"sources":["../src/useHotkeyRegistrations.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useHotkeyRegistrations.js","names":[],"sources":["../src/useHotkeyRegistrations.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport {\n getHotkeyManager,\n getSequenceManager,\n toHotkeyRegistrationView,\n} from '@tanstack/hotkeys'\nimport type {\n HotkeyRegistrationView,\n SequenceRegistrationView,\n} from '@tanstack/hotkeys'\n\n/**\n * Return type for useHotkeyRegistrations.\n */\nexport interface HotkeyRegistrationsResult {\n /** All registered hotkeys (public view, no callbacks) */\n hotkeys: Array<HotkeyRegistrationView>\n /** All registered sequences */\n sequences: Array<SequenceRegistrationView>\n}\n\n/**\n * React hook that reactively reads all hotkey and sequence registrations\n * from the singleton managers.\n *\n * This is a standalone hook that does NOT require the HotkeysProvider.\n * It subscribes to both HotkeyManager and SequenceManager stores and\n * re-renders when registrations change.\n *\n * @returns Object with `hotkeys` and `sequences` arrays\n *\n * @example\n * ```tsx\n * function ShortcutPalette() {\n * const { hotkeys, sequences } = useHotkeyRegistrations()\n *\n * return (\n * <ul>\n * {hotkeys.map((reg) => (\n * <li key={reg.id}>\n * {reg.options.meta?.name ?? reg.hotkey}\n * </li>\n * ))}\n * {sequences.map((reg) => (\n * <li key={reg.id}>\n * {reg.options.meta?.name ?? reg.sequence.join(' ')}\n * </li>\n * ))}\n * </ul>\n * )\n * }\n * ```\n */\nexport function useHotkeyRegistrations(): HotkeyRegistrationsResult {\n const hotkeyManager = getHotkeyManager()\n const sequenceManager = getSequenceManager()\n\n const hotkeys = useSelector(hotkeyManager.registrations, (state) =>\n Array.from(state.values()).map(toHotkeyRegistrationView),\n )\n\n const sequences = useSelector(sequenceManager.registrations, (state) =>\n Array.from(state.values()),\n )\n\n return { hotkeys, sequences }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,SAAgB,yBAAoD;CAClE,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,kBAAkB,oBAAoB;AAU5C,QAAO;EAAE,SARO,YAAY,cAAc,gBAAgB,UACxD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAI,yBAAyB,CACzD;EAMiB,WAJA,YAAY,gBAAgB,gBAAgB,UAC5D,MAAM,KAAK,MAAM,QAAQ,CAAC,CAC3B;EAE4B"}
|
|
@@ -18,9 +18,9 @@ function useHotkeySequenceRecorder(options) {
|
|
|
18
18
|
const recorderRef = (0, react.useRef)(null);
|
|
19
19
|
if (!recorderRef.current) recorderRef.current = new _tanstack_hotkeys.HotkeySequenceRecorder(mergedOptions);
|
|
20
20
|
recorderRef.current.setOptions(mergedOptions);
|
|
21
|
-
const isRecording = (0, _tanstack_react_store.
|
|
22
|
-
const steps = (0, _tanstack_react_store.
|
|
23
|
-
const recordedSequence = (0, _tanstack_react_store.
|
|
21
|
+
const isRecording = (0, _tanstack_react_store.useSelector)(recorderRef.current.store, (state) => state.isRecording);
|
|
22
|
+
const steps = (0, _tanstack_react_store.useSelector)(recorderRef.current.store, (state) => state.steps);
|
|
23
|
+
const recordedSequence = (0, _tanstack_react_store.useSelector)(recorderRef.current.store, (state) => state.recordedSequence);
|
|
24
24
|
(0, react.useEffect)(() => {
|
|
25
25
|
return () => {
|
|
26
26
|
recorderRef.current?.destroy();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkeySequenceRecorder.cjs","names":["useDefaultHotkeysOptions","HotkeySequenceRecorder"],"sources":["../src/useHotkeySequenceRecorder.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"useHotkeySequenceRecorder.cjs","names":["useDefaultHotkeysOptions","HotkeySequenceRecorder"],"sources":["../src/useHotkeySequenceRecorder.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { useSelector } from '@tanstack/react-store'\nimport { HotkeySequenceRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport type {\n HotkeySequence,\n HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\n\nexport interface ReactHotkeySequenceRecorder {\n /** Whether recording is currently active */\n isRecording: boolean\n /** Chords captured in the current session */\n steps: HotkeySequence\n /** Last committed sequence */\n recordedSequence: HotkeySequence | null\n startRecording: () => void\n stopRecording: () => void\n cancelRecording: () => void\n /** Commit current steps (no-op if empty) */\n commitRecording: () => void\n}\n\n/**\n * React hook for recording multi-chord sequences (Vim-style shortcuts).\n *\n * @param options - Configuration options for the hotkey sequence recorder\n */\nexport function useHotkeySequenceRecorder(\n options: HotkeySequenceRecorderOptions,\n): ReactHotkeySequenceRecorder {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkeySequenceRecorder,\n ...options,\n } as HotkeySequenceRecorderOptions\n\n const recorderRef = useRef<HotkeySequenceRecorder | null>(null)\n\n if (!recorderRef.current) {\n recorderRef.current = new HotkeySequenceRecorder(mergedOptions)\n }\n\n recorderRef.current.setOptions(mergedOptions)\n\n const isRecording = useSelector(\n recorderRef.current.store,\n (state) => state.isRecording,\n )\n const steps = useSelector(recorderRef.current.store, (state) => state.steps)\n const recordedSequence = useSelector(\n recorderRef.current.store,\n (state) => state.recordedSequence,\n )\n\n useEffect(() => {\n return () => {\n recorderRef.current?.destroy()\n }\n }, [])\n\n return {\n isRecording,\n steps,\n recordedSequence,\n startRecording: () => recorderRef.current?.start(),\n stopRecording: () => recorderRef.current?.stop(),\n cancelRecording: () => recorderRef.current?.cancel(),\n commitRecording: () => recorderRef.current?.commit(),\n }\n}\n"],"mappings":";;;;;;;;;;;;AA4BA,SAAgB,0BACd,SAC6B;CAC7B,MAAM,gBAAgB;EACpB,GAAGA,kDAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,gCAAoD,KAAK;AAE/D,KAAI,CAAC,YAAY,QACf,aAAY,UAAU,IAAIC,yCAAuB,cAAc;AAGjE,aAAY,QAAQ,WAAW,cAAc;CAE7C,MAAM,qDACJ,YAAY,QAAQ,QACnB,UAAU,MAAM,YAClB;CACD,MAAM,+CAAoB,YAAY,QAAQ,QAAQ,UAAU,MAAM,MAAM;CAC5E,MAAM,0DACJ,YAAY,QAAQ,QACnB,UAAU,MAAM,iBAClB;AAED,4BAAgB;AACd,eAAa;AACX,eAAY,SAAS,SAAS;;IAE/B,EAAE,CAAC;AAEN,QAAO;EACL;EACA;EACA;EACA,sBAAsB,YAAY,SAAS,OAAO;EAClD,qBAAqB,YAAY,SAAS,MAAM;EAChD,uBAAuB,YAAY,SAAS,QAAQ;EACpD,uBAAuB,YAAY,SAAS,QAAQ;EACrD"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useDefaultHotkeysOptions } from "./HotkeysProvider.js";
|
|
2
2
|
import { HotkeySequenceRecorder } from "@tanstack/hotkeys";
|
|
3
3
|
import { useEffect, useRef } from "react";
|
|
4
|
-
import {
|
|
4
|
+
import { useSelector } from "@tanstack/react-store";
|
|
5
5
|
|
|
6
6
|
//#region src/useHotkeySequenceRecorder.ts
|
|
7
7
|
/**
|
|
@@ -17,9 +17,9 @@ function useHotkeySequenceRecorder(options) {
|
|
|
17
17
|
const recorderRef = useRef(null);
|
|
18
18
|
if (!recorderRef.current) recorderRef.current = new HotkeySequenceRecorder(mergedOptions);
|
|
19
19
|
recorderRef.current.setOptions(mergedOptions);
|
|
20
|
-
const isRecording =
|
|
21
|
-
const steps =
|
|
22
|
-
const recordedSequence =
|
|
20
|
+
const isRecording = useSelector(recorderRef.current.store, (state) => state.isRecording);
|
|
21
|
+
const steps = useSelector(recorderRef.current.store, (state) => state.steps);
|
|
22
|
+
const recordedSequence = useSelector(recorderRef.current.store, (state) => state.recordedSequence);
|
|
23
23
|
useEffect(() => {
|
|
24
24
|
return () => {
|
|
25
25
|
recorderRef.current?.destroy();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useHotkeySequenceRecorder.js","names":[],"sources":["../src/useHotkeySequenceRecorder.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport {
|
|
1
|
+
{"version":3,"file":"useHotkeySequenceRecorder.js","names":[],"sources":["../src/useHotkeySequenceRecorder.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport { useSelector } from '@tanstack/react-store'\nimport { HotkeySequenceRecorder } from '@tanstack/hotkeys'\nimport { useDefaultHotkeysOptions } from './HotkeysProvider'\nimport type {\n HotkeySequence,\n HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\n\nexport interface ReactHotkeySequenceRecorder {\n /** Whether recording is currently active */\n isRecording: boolean\n /** Chords captured in the current session */\n steps: HotkeySequence\n /** Last committed sequence */\n recordedSequence: HotkeySequence | null\n startRecording: () => void\n stopRecording: () => void\n cancelRecording: () => void\n /** Commit current steps (no-op if empty) */\n commitRecording: () => void\n}\n\n/**\n * React hook for recording multi-chord sequences (Vim-style shortcuts).\n *\n * @param options - Configuration options for the hotkey sequence recorder\n */\nexport function useHotkeySequenceRecorder(\n options: HotkeySequenceRecorderOptions,\n): ReactHotkeySequenceRecorder {\n const mergedOptions = {\n ...useDefaultHotkeysOptions().hotkeySequenceRecorder,\n ...options,\n } as HotkeySequenceRecorderOptions\n\n const recorderRef = useRef<HotkeySequenceRecorder | null>(null)\n\n if (!recorderRef.current) {\n recorderRef.current = new HotkeySequenceRecorder(mergedOptions)\n }\n\n recorderRef.current.setOptions(mergedOptions)\n\n const isRecording = useSelector(\n recorderRef.current.store,\n (state) => state.isRecording,\n )\n const steps = useSelector(recorderRef.current.store, (state) => state.steps)\n const recordedSequence = useSelector(\n recorderRef.current.store,\n (state) => state.recordedSequence,\n )\n\n useEffect(() => {\n return () => {\n recorderRef.current?.destroy()\n }\n }, [])\n\n return {\n isRecording,\n steps,\n recordedSequence,\n startRecording: () => recorderRef.current?.start(),\n stopRecording: () => recorderRef.current?.stop(),\n cancelRecording: () => recorderRef.current?.cancel(),\n commitRecording: () => recorderRef.current?.commit(),\n }\n}\n"],"mappings":";;;;;;;;;;;AA4BA,SAAgB,0BACd,SAC6B;CAC7B,MAAM,gBAAgB;EACpB,GAAG,0BAA0B,CAAC;EAC9B,GAAG;EACJ;CAED,MAAM,cAAc,OAAsC,KAAK;AAE/D,KAAI,CAAC,YAAY,QACf,aAAY,UAAU,IAAI,uBAAuB,cAAc;AAGjE,aAAY,QAAQ,WAAW,cAAc;CAE7C,MAAM,cAAc,YAClB,YAAY,QAAQ,QACnB,UAAU,MAAM,YAClB;CACD,MAAM,QAAQ,YAAY,YAAY,QAAQ,QAAQ,UAAU,MAAM,MAAM;CAC5E,MAAM,mBAAmB,YACvB,YAAY,QAAQ,QACnB,UAAU,MAAM,iBAClB;AAED,iBAAgB;AACd,eAAa;AACX,eAAY,SAAS,SAAS;;IAE/B,EAAE,CAAC;AAEN,QAAO;EACL;EACA;EACA;EACA,sBAAsB,YAAY,SAAS,OAAO;EAClD,qBAAqB,YAAY,SAAS,MAAM;EAChD,uBAAuB,YAAY,SAAS,QAAQ;EACpD,uBAAuB,YAAY,SAAS,QAAQ;EACrD"}
|
package/dist/useKeyHold.cjs
CHANGED
|
@@ -6,7 +6,7 @@ let _tanstack_react_store = require("@tanstack/react-store");
|
|
|
6
6
|
/**
|
|
7
7
|
* React hook that returns whether a specific key is currently being held.
|
|
8
8
|
*
|
|
9
|
-
* This hook uses `
|
|
9
|
+
* This hook uses `useSelector` from `@tanstack/react-store` to subscribe
|
|
10
10
|
* to the global KeyStateTracker and uses a selector to determine if
|
|
11
11
|
* the specified key is held.
|
|
12
12
|
*
|
|
@@ -46,7 +46,7 @@ let _tanstack_react_store = require("@tanstack/react-store");
|
|
|
46
46
|
function useKeyHold(key) {
|
|
47
47
|
const tracker = (0, _tanstack_hotkeys.getKeyStateTracker)();
|
|
48
48
|
const normalizedKey = key.toLowerCase();
|
|
49
|
-
return (0, _tanstack_react_store.
|
|
49
|
+
return (0, _tanstack_react_store.useSelector)(tracker.store, (state) => state.heldKeys.some((heldKey) => heldKey.toLowerCase() === normalizedKey));
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
//#endregion
|
package/dist/useKeyHold.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyHold.cjs","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useKeyHold.cjs","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { IndividualKey } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns whether a specific key is currently being held.\n *\n * This hook uses `useSelector` from `@tanstack/react-store` to subscribe\n * to the global KeyStateTracker and uses a selector to determine if\n * the specified key is held.\n *\n * @param key - The key to check (e.g., 'Shift', 'Control', 'A')\n * @returns True if the key is currently held down\n *\n * @example\n * ```tsx\n * function ShiftIndicator() {\n * const isShiftHeld = useKeyHold('Shift')\n *\n * return (\n * <div style={{ opacity: isShiftHeld ? 1 : 0.5 }}>\n * {isShiftHeld ? 'Shift is pressed!' : 'Press Shift'}\n * </div>\n * )\n * }\n * ```\n *\n * @example\n * ```tsx\n * function ModifierIndicators() {\n * const ctrl = useKeyHold('Control')\n * const shift = useKeyHold('Shift')\n * const alt = useKeyHold('Alt')\n *\n * return (\n * <div>\n * <span style={{ opacity: ctrl ? 1 : 0.3 }}>Ctrl</span>\n * <span style={{ opacity: shift ? 1 : 0.3 }}>Shift</span>\n * <span style={{ opacity: alt ? 1 : 0.3 }}>Alt</span>\n * </div>\n * )\n * }\n * ```\n */\nexport function useKeyHold(key: IndividualKey): boolean {\n const tracker = getKeyStateTracker()\n const normalizedKey = key.toLowerCase()\n\n return useSelector(tracker.store, (state) =>\n state.heldKeys.some((heldKey) => heldKey.toLowerCase() === normalizedKey),\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,SAAgB,WAAW,KAA6B;CACtD,MAAM,qDAA8B;CACpC,MAAM,gBAAgB,IAAI,aAAa;AAEvC,+CAAmB,QAAQ,QAAQ,UACjC,MAAM,SAAS,MAAM,YAAY,QAAQ,aAAa,KAAK,cAAc,CAC1E"}
|
package/dist/useKeyHold.d.cts
CHANGED
|
@@ -4,7 +4,7 @@ import { IndividualKey } from "@tanstack/hotkeys";
|
|
|
4
4
|
/**
|
|
5
5
|
* React hook that returns whether a specific key is currently being held.
|
|
6
6
|
*
|
|
7
|
-
* This hook uses `
|
|
7
|
+
* This hook uses `useSelector` from `@tanstack/react-store` to subscribe
|
|
8
8
|
* to the global KeyStateTracker and uses a selector to determine if
|
|
9
9
|
* the specified key is held.
|
|
10
10
|
*
|
package/dist/useKeyHold.d.ts
CHANGED
|
@@ -4,7 +4,7 @@ import { IndividualKey } from "@tanstack/hotkeys";
|
|
|
4
4
|
/**
|
|
5
5
|
* React hook that returns whether a specific key is currently being held.
|
|
6
6
|
*
|
|
7
|
-
* This hook uses `
|
|
7
|
+
* This hook uses `useSelector` from `@tanstack/react-store` to subscribe
|
|
8
8
|
* to the global KeyStateTracker and uses a selector to determine if
|
|
9
9
|
* the specified key is held.
|
|
10
10
|
*
|
package/dist/useKeyHold.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { getKeyStateTracker } from "@tanstack/hotkeys";
|
|
2
|
-
import {
|
|
2
|
+
import { useSelector } from "@tanstack/react-store";
|
|
3
3
|
|
|
4
4
|
//#region src/useKeyHold.ts
|
|
5
5
|
/**
|
|
6
6
|
* React hook that returns whether a specific key is currently being held.
|
|
7
7
|
*
|
|
8
|
-
* This hook uses `
|
|
8
|
+
* This hook uses `useSelector` from `@tanstack/react-store` to subscribe
|
|
9
9
|
* to the global KeyStateTracker and uses a selector to determine if
|
|
10
10
|
* the specified key is held.
|
|
11
11
|
*
|
|
@@ -45,7 +45,7 @@ import { useStore } from "@tanstack/react-store";
|
|
|
45
45
|
function useKeyHold(key) {
|
|
46
46
|
const tracker = getKeyStateTracker();
|
|
47
47
|
const normalizedKey = key.toLowerCase();
|
|
48
|
-
return
|
|
48
|
+
return useSelector(tracker.store, (state) => state.heldKeys.some((heldKey) => heldKey.toLowerCase() === normalizedKey));
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
//#endregion
|
package/dist/useKeyHold.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyHold.js","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"useKeyHold.js","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useSelector } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type { IndividualKey } from '@tanstack/hotkeys'\n\n/**\n * React hook that returns whether a specific key is currently being held.\n *\n * This hook uses `useSelector` from `@tanstack/react-store` to subscribe\n * to the global KeyStateTracker and uses a selector to determine if\n * the specified key is held.\n *\n * @param key - The key to check (e.g., 'Shift', 'Control', 'A')\n * @returns True if the key is currently held down\n *\n * @example\n * ```tsx\n * function ShiftIndicator() {\n * const isShiftHeld = useKeyHold('Shift')\n *\n * return (\n * <div style={{ opacity: isShiftHeld ? 1 : 0.5 }}>\n * {isShiftHeld ? 'Shift is pressed!' : 'Press Shift'}\n * </div>\n * )\n * }\n * ```\n *\n * @example\n * ```tsx\n * function ModifierIndicators() {\n * const ctrl = useKeyHold('Control')\n * const shift = useKeyHold('Shift')\n * const alt = useKeyHold('Alt')\n *\n * return (\n * <div>\n * <span style={{ opacity: ctrl ? 1 : 0.3 }}>Ctrl</span>\n * <span style={{ opacity: shift ? 1 : 0.3 }}>Shift</span>\n * <span style={{ opacity: alt ? 1 : 0.3 }}>Alt</span>\n * </div>\n * )\n * }\n * ```\n */\nexport function useKeyHold(key: IndividualKey): boolean {\n const tracker = getKeyStateTracker()\n const normalizedKey = key.toLowerCase()\n\n return useSelector(tracker.store, (state) =>\n state.heldKeys.some((heldKey) => heldKey.toLowerCase() === normalizedKey),\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,SAAgB,WAAW,KAA6B;CACtD,MAAM,UAAU,oBAAoB;CACpC,MAAM,gBAAgB,IAAI,aAAa;AAEvC,QAAO,YAAY,QAAQ,QAAQ,UACjC,MAAM,SAAS,MAAM,YAAY,QAAQ,aAAa,KAAK,cAAc,CAC1E"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/react-hotkeys",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "React adapter for TanStack Hotkeys",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,18 +39,18 @@
|
|
|
39
39
|
"src"
|
|
40
40
|
],
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@tanstack/react-store": "^0.
|
|
43
|
-
"@tanstack/hotkeys": "0.
|
|
42
|
+
"@tanstack/react-store": "^0.11.0",
|
|
43
|
+
"@tanstack/hotkeys": "0.8.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@eslint-react/eslint-plugin": "^
|
|
46
|
+
"@eslint-react/eslint-plugin": "^4.2.3",
|
|
47
47
|
"@testing-library/react": "^16.3.2",
|
|
48
48
|
"@types/react": "^19.2.14",
|
|
49
49
|
"@vitejs/plugin-react": "^6.0.1",
|
|
50
50
|
"eslint-plugin-react-compiler": "19.1.0-rc.2",
|
|
51
|
-
"eslint-plugin-react-hooks": "^7.
|
|
52
|
-
"react": "^19.2.
|
|
53
|
-
"react-dom": "^19.2.
|
|
51
|
+
"eslint-plugin-react-hooks": "^7.1.1",
|
|
52
|
+
"react": "^19.2.5",
|
|
53
|
+
"react-dom": "^19.2.5"
|
|
54
54
|
},
|
|
55
55
|
"peerDependencies": {
|
|
56
56
|
"react": ">=16.8",
|
package/src/useHeldKeyCodes.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useSelector } from '@tanstack/react-store'
|
|
2
2
|
import { getKeyStateTracker } from '@tanstack/hotkeys'
|
|
3
3
|
|
|
4
4
|
/**
|
|
@@ -29,5 +29,5 @@ import { getKeyStateTracker } from '@tanstack/hotkeys'
|
|
|
29
29
|
*/
|
|
30
30
|
export function useHeldKeyCodes(): Record<string, string> {
|
|
31
31
|
const tracker = getKeyStateTracker()
|
|
32
|
-
return
|
|
32
|
+
return useSelector(tracker.store, (state) => state.heldCodes)
|
|
33
33
|
}
|
package/src/useHeldKeys.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useSelector } from '@tanstack/react-store'
|
|
2
2
|
import { getKeyStateTracker } from '@tanstack/hotkeys'
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
5
|
* React hook that returns an array of currently held keyboard keys.
|
|
6
6
|
*
|
|
7
|
-
* This hook uses `
|
|
7
|
+
* This hook uses `useSelector` from `@tanstack/react-store` to subscribe
|
|
8
8
|
* to the global KeyStateTracker and updates whenever keys are pressed
|
|
9
9
|
* or released.
|
|
10
10
|
*
|
|
@@ -25,5 +25,5 @@ import { getKeyStateTracker } from '@tanstack/hotkeys'
|
|
|
25
25
|
*/
|
|
26
26
|
export function useHeldKeys(): Array<string> {
|
|
27
27
|
const tracker = getKeyStateTracker()
|
|
28
|
-
return
|
|
28
|
+
return useSelector(tracker.store, (state) => state.heldKeys)
|
|
29
29
|
}
|
package/src/useHotkeyRecorder.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useEffect, useRef } from 'react'
|
|
2
|
-
import {
|
|
2
|
+
import { useSelector } from '@tanstack/react-store'
|
|
3
3
|
import { HotkeyRecorder } from '@tanstack/hotkeys'
|
|
4
4
|
import { useDefaultHotkeysOptions } from './HotkeysProvider'
|
|
5
5
|
import type { Hotkey, HotkeyRecorderOptions } from '@tanstack/hotkeys'
|
|
@@ -74,12 +74,12 @@ export function useHotkeyRecorder(
|
|
|
74
74
|
// This ensures callbacks always have access to latest values
|
|
75
75
|
recorderRef.current.setOptions(mergedOptions)
|
|
76
76
|
|
|
77
|
-
// Subscribe to recorder state using
|
|
78
|
-
const isRecording =
|
|
77
|
+
// Subscribe to recorder state using useSelector (same pattern as useHeldKeys)
|
|
78
|
+
const isRecording = useSelector(
|
|
79
79
|
recorderRef.current.store,
|
|
80
80
|
(state) => state.isRecording,
|
|
81
81
|
)
|
|
82
|
-
const recordedHotkey =
|
|
82
|
+
const recordedHotkey = useSelector(
|
|
83
83
|
recorderRef.current.store,
|
|
84
84
|
(state) => state.recordedHotkey,
|
|
85
85
|
)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useSelector } from '@tanstack/react-store'
|
|
2
2
|
import {
|
|
3
3
|
getHotkeyManager,
|
|
4
4
|
getSequenceManager,
|
|
@@ -55,11 +55,11 @@ export function useHotkeyRegistrations(): HotkeyRegistrationsResult {
|
|
|
55
55
|
const hotkeyManager = getHotkeyManager()
|
|
56
56
|
const sequenceManager = getSequenceManager()
|
|
57
57
|
|
|
58
|
-
const hotkeys =
|
|
58
|
+
const hotkeys = useSelector(hotkeyManager.registrations, (state) =>
|
|
59
59
|
Array.from(state.values()).map(toHotkeyRegistrationView),
|
|
60
60
|
)
|
|
61
61
|
|
|
62
|
-
const sequences =
|
|
62
|
+
const sequences = useSelector(sequenceManager.registrations, (state) =>
|
|
63
63
|
Array.from(state.values()),
|
|
64
64
|
)
|
|
65
65
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useEffect, useRef } from 'react'
|
|
2
|
-
import {
|
|
2
|
+
import { useSelector } from '@tanstack/react-store'
|
|
3
3
|
import { HotkeySequenceRecorder } from '@tanstack/hotkeys'
|
|
4
4
|
import { useDefaultHotkeysOptions } from './HotkeysProvider'
|
|
5
5
|
import type {
|
|
@@ -42,12 +42,12 @@ export function useHotkeySequenceRecorder(
|
|
|
42
42
|
|
|
43
43
|
recorderRef.current.setOptions(mergedOptions)
|
|
44
44
|
|
|
45
|
-
const isRecording =
|
|
45
|
+
const isRecording = useSelector(
|
|
46
46
|
recorderRef.current.store,
|
|
47
47
|
(state) => state.isRecording,
|
|
48
48
|
)
|
|
49
|
-
const steps =
|
|
50
|
-
const recordedSequence =
|
|
49
|
+
const steps = useSelector(recorderRef.current.store, (state) => state.steps)
|
|
50
|
+
const recordedSequence = useSelector(
|
|
51
51
|
recorderRef.current.store,
|
|
52
52
|
(state) => state.recordedSequence,
|
|
53
53
|
)
|
package/src/useKeyHold.ts
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useSelector } from '@tanstack/react-store'
|
|
2
2
|
import { getKeyStateTracker } from '@tanstack/hotkeys'
|
|
3
3
|
import type { IndividualKey } from '@tanstack/hotkeys'
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* React hook that returns whether a specific key is currently being held.
|
|
7
7
|
*
|
|
8
|
-
* This hook uses `
|
|
8
|
+
* This hook uses `useSelector` from `@tanstack/react-store` to subscribe
|
|
9
9
|
* to the global KeyStateTracker and uses a selector to determine if
|
|
10
10
|
* the specified key is held.
|
|
11
11
|
*
|
|
@@ -46,7 +46,7 @@ export function useKeyHold(key: IndividualKey): boolean {
|
|
|
46
46
|
const tracker = getKeyStateTracker()
|
|
47
47
|
const normalizedKey = key.toLowerCase()
|
|
48
48
|
|
|
49
|
-
return
|
|
49
|
+
return useSelector(tracker.store, (state) =>
|
|
50
50
|
state.heldKeys.some((heldKey) => heldKey.toLowerCase() === normalizedKey),
|
|
51
51
|
)
|
|
52
52
|
}
|