@tanstack/react-hotkeys 0.8.4 → 0.9.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/HotkeysProvider.cjs.map +1 -1
- package/dist/HotkeysProvider.d.cts +1 -1
- package/dist/HotkeysProvider.d.ts +1 -1
- package/dist/HotkeysProvider.js.map +1 -1
- package/dist/index.cjs +2 -0
- package/dist/index.d.cts +2 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/useHotkeyRegistrations.cjs +49 -0
- package/dist/useHotkeyRegistrations.cjs.map +1 -0
- package/dist/useHotkeyRegistrations.d.cts +48 -0
- package/dist/useHotkeyRegistrations.d.ts +48 -0
- package/dist/useHotkeyRegistrations.js +48 -0
- package/dist/useHotkeyRegistrations.js.map +1 -0
- package/dist/useKeyHold.cjs.map +1 -1
- package/dist/useKeyHold.d.cts +2 -2
- package/dist/useKeyHold.d.ts +2 -2
- package/dist/useKeyHold.js.map +1 -1
- package/package.json +2 -2
- package/src/HotkeysProvider.tsx +1 -1
- package/src/index.ts +1 -0
- package/src/useHotkeyRegistrations.ts +67 -0
- package/src/useKeyHold.ts +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HotkeysProvider.cjs","names":[],"sources":["../src/HotkeysProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react'\nimport type { ReactNode } from 'react'\nimport type {\n HotkeyRecorderOptions,\n HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type { UseHotkeySequenceOptions } from './useHotkeySequence'\n\nexport interface HotkeysProviderOptions {\n hotkey?: Partial<UseHotkeyOptions>\n hotkeyRecorder?: Partial<HotkeyRecorderOptions>\n
|
|
1
|
+
{"version":3,"file":"HotkeysProvider.cjs","names":[],"sources":["../src/HotkeysProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react'\nimport type { ReactNode } from 'react'\nimport type {\n HotkeyRecorderOptions,\n HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type { UseHotkeySequenceOptions } from './useHotkeySequence'\n\nexport interface HotkeysProviderOptions {\n hotkey?: Partial<UseHotkeyOptions>\n hotkeyRecorder?: Partial<HotkeyRecorderOptions>\n hotkeySequence?: Partial<UseHotkeySequenceOptions>\n hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>\n}\n\ninterface HotkeysContextValue {\n defaultOptions: HotkeysProviderOptions\n}\n\nconst HotkeysContext = createContext<HotkeysContextValue | null>(null)\n\nexport interface HotkeysProviderProps {\n children: ReactNode\n defaultOptions?: HotkeysProviderOptions\n}\n\nconst DEFAULT_OPTIONS: HotkeysProviderOptions = {}\n\nexport function HotkeysProvider({\n children,\n defaultOptions = DEFAULT_OPTIONS,\n}: HotkeysProviderProps) {\n const contextValue: HotkeysContextValue = useMemo(\n () => ({\n defaultOptions,\n }),\n [defaultOptions],\n )\n\n return (\n // eslint-disable-next-line @eslint-react/no-context-provider -- React 19+ only; we support React >=16.8\n <HotkeysContext.Provider value={contextValue}>\n {children}\n </HotkeysContext.Provider>\n )\n}\n\nexport function useHotkeysContext() {\n // eslint-disable-next-line @eslint-react/no-use-context -- React 19+ only; we support React >=16.8\n return useContext(HotkeysContext)\n}\n\nexport function useDefaultHotkeysOptions() {\n // eslint-disable-next-line @eslint-react/no-use-context -- React 19+ only; we support React >=16.8\n const context = useContext(HotkeysContext)\n return context?.defaultOptions ?? {}\n}\n"],"mappings":";;;;;AAoBA,MAAM,0CAA2D,KAAK;AAOtE,MAAM,kBAA0C,EAAE;AAElD,SAAgB,gBAAgB,EAC9B,UACA,iBAAiB,mBACM;CACvB,MAAM,yCACG,EACL,gBACD,GACD,CAAC,eAAe,CACjB;AAED,QAEE,4CAAC,eAAe,UAAhB,EAAyB,OAAO,cAEN,EADvB,SACuB;;AAI9B,SAAgB,oBAAoB;AAElC,8BAAkB,eAAe;;AAGnC,SAAgB,2BAA2B;AAGzC,8BAD2B,eAAe,EAC1B,kBAAkB,EAAE"}
|
|
@@ -7,8 +7,8 @@ import React, { ReactNode } from "react";
|
|
|
7
7
|
interface HotkeysProviderOptions {
|
|
8
8
|
hotkey?: Partial<UseHotkeyOptions>;
|
|
9
9
|
hotkeyRecorder?: Partial<HotkeyRecorderOptions>;
|
|
10
|
-
hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>;
|
|
11
10
|
hotkeySequence?: Partial<UseHotkeySequenceOptions>;
|
|
11
|
+
hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>;
|
|
12
12
|
}
|
|
13
13
|
interface HotkeysContextValue {
|
|
14
14
|
defaultOptions: HotkeysProviderOptions;
|
|
@@ -7,8 +7,8 @@ import React, { ReactNode } from "react";
|
|
|
7
7
|
interface HotkeysProviderOptions {
|
|
8
8
|
hotkey?: Partial<UseHotkeyOptions>;
|
|
9
9
|
hotkeyRecorder?: Partial<HotkeyRecorderOptions>;
|
|
10
|
-
hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>;
|
|
11
10
|
hotkeySequence?: Partial<UseHotkeySequenceOptions>;
|
|
11
|
+
hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>;
|
|
12
12
|
}
|
|
13
13
|
interface HotkeysContextValue {
|
|
14
14
|
defaultOptions: HotkeysProviderOptions;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HotkeysProvider.js","names":[],"sources":["../src/HotkeysProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react'\nimport type { ReactNode } from 'react'\nimport type {\n HotkeyRecorderOptions,\n HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type { UseHotkeySequenceOptions } from './useHotkeySequence'\n\nexport interface HotkeysProviderOptions {\n hotkey?: Partial<UseHotkeyOptions>\n hotkeyRecorder?: Partial<HotkeyRecorderOptions>\n
|
|
1
|
+
{"version":3,"file":"HotkeysProvider.js","names":[],"sources":["../src/HotkeysProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useMemo } from 'react'\nimport type { ReactNode } from 'react'\nimport type {\n HotkeyRecorderOptions,\n HotkeySequenceRecorderOptions,\n} from '@tanstack/hotkeys'\nimport type { UseHotkeyOptions } from './useHotkey'\nimport type { UseHotkeySequenceOptions } from './useHotkeySequence'\n\nexport interface HotkeysProviderOptions {\n hotkey?: Partial<UseHotkeyOptions>\n hotkeyRecorder?: Partial<HotkeyRecorderOptions>\n hotkeySequence?: Partial<UseHotkeySequenceOptions>\n hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>\n}\n\ninterface HotkeysContextValue {\n defaultOptions: HotkeysProviderOptions\n}\n\nconst HotkeysContext = createContext<HotkeysContextValue | null>(null)\n\nexport interface HotkeysProviderProps {\n children: ReactNode\n defaultOptions?: HotkeysProviderOptions\n}\n\nconst DEFAULT_OPTIONS: HotkeysProviderOptions = {}\n\nexport function HotkeysProvider({\n children,\n defaultOptions = DEFAULT_OPTIONS,\n}: HotkeysProviderProps) {\n const contextValue: HotkeysContextValue = useMemo(\n () => ({\n defaultOptions,\n }),\n [defaultOptions],\n )\n\n return (\n // eslint-disable-next-line @eslint-react/no-context-provider -- React 19+ only; we support React >=16.8\n <HotkeysContext.Provider value={contextValue}>\n {children}\n </HotkeysContext.Provider>\n )\n}\n\nexport function useHotkeysContext() {\n // eslint-disable-next-line @eslint-react/no-use-context -- React 19+ only; we support React >=16.8\n return useContext(HotkeysContext)\n}\n\nexport function useDefaultHotkeysOptions() {\n // eslint-disable-next-line @eslint-react/no-use-context -- React 19+ only; we support React >=16.8\n const context = useContext(HotkeysContext)\n return context?.defaultOptions ?? {}\n}\n"],"mappings":";;;AAoBA,MAAM,iBAAiB,cAA0C,KAAK;AAOtE,MAAM,kBAA0C,EAAE;AAElD,SAAgB,gBAAgB,EAC9B,UACA,iBAAiB,mBACM;CACvB,MAAM,eAAoC,eACjC,EACL,gBACD,GACD,CAAC,eAAe,CACjB;AAED,QAEE,oCAAC,eAAe,UAAhB,EAAyB,OAAO,cAEN,EADvB,SACuB;;AAI9B,SAAgB,oBAAoB;AAElC,QAAO,WAAW,eAAe;;AAGnC,SAAgB,2BAA2B;AAGzC,QADgB,WAAW,eAAe,EAC1B,kBAAkB,EAAE"}
|
package/dist/index.cjs
CHANGED
|
@@ -8,6 +8,7 @@ const require_useKeyHold = require('./useKeyHold.cjs');
|
|
|
8
8
|
const require_useHotkeySequence = require('./useHotkeySequence.cjs');
|
|
9
9
|
const require_useHotkeySequences = require('./useHotkeySequences.cjs');
|
|
10
10
|
const require_useHotkeyRecorder = require('./useHotkeyRecorder.cjs');
|
|
11
|
+
const require_useHotkeyRegistrations = require('./useHotkeyRegistrations.cjs');
|
|
11
12
|
const require_useHotkeySequenceRecorder = require('./useHotkeySequenceRecorder.cjs');
|
|
12
13
|
|
|
13
14
|
exports.HotkeysProvider = require_HotkeysProvider.HotkeysProvider;
|
|
@@ -16,6 +17,7 @@ exports.useHeldKeyCodes = require_useHeldKeyCodes.useHeldKeyCodes;
|
|
|
16
17
|
exports.useHeldKeys = require_useHeldKeys.useHeldKeys;
|
|
17
18
|
exports.useHotkey = require_useHotkey.useHotkey;
|
|
18
19
|
exports.useHotkeyRecorder = require_useHotkeyRecorder.useHotkeyRecorder;
|
|
20
|
+
exports.useHotkeyRegistrations = require_useHotkeyRegistrations.useHotkeyRegistrations;
|
|
19
21
|
exports.useHotkeySequence = require_useHotkeySequence.useHotkeySequence;
|
|
20
22
|
exports.useHotkeySequenceRecorder = require_useHotkeySequenceRecorder.useHotkeySequenceRecorder;
|
|
21
23
|
exports.useHotkeySequences = require_useHotkeySequences.useHotkeySequences;
|
package/dist/index.d.cts
CHANGED
|
@@ -7,6 +7,7 @@ import { useHeldKeyCodes } from "./useHeldKeyCodes.cjs";
|
|
|
7
7
|
import { useKeyHold } from "./useKeyHold.cjs";
|
|
8
8
|
import { UseHotkeySequenceDefinition, useHotkeySequences } from "./useHotkeySequences.cjs";
|
|
9
9
|
import { ReactHotkeyRecorder, useHotkeyRecorder } from "./useHotkeyRecorder.cjs";
|
|
10
|
+
import { HotkeyRegistrationsResult, useHotkeyRegistrations } from "./useHotkeyRegistrations.cjs";
|
|
10
11
|
import { ReactHotkeySequenceRecorder, useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.cjs";
|
|
11
12
|
export * from "@tanstack/hotkeys";
|
|
12
|
-
export { HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, ReactHotkeyRecorder, ReactHotkeySequenceRecorder, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
|
|
13
|
+
export { HotkeyRegistrationsResult, HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, ReactHotkeyRecorder, ReactHotkeySequenceRecorder, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ import { useHeldKeyCodes } from "./useHeldKeyCodes.js";
|
|
|
7
7
|
import { useKeyHold } from "./useKeyHold.js";
|
|
8
8
|
import { UseHotkeySequenceDefinition, useHotkeySequences } from "./useHotkeySequences.js";
|
|
9
9
|
import { ReactHotkeyRecorder, useHotkeyRecorder } from "./useHotkeyRecorder.js";
|
|
10
|
+
import { HotkeyRegistrationsResult, useHotkeyRegistrations } from "./useHotkeyRegistrations.js";
|
|
10
11
|
import { ReactHotkeySequenceRecorder, useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
|
|
11
12
|
export * from "@tanstack/hotkeys";
|
|
12
|
-
export { HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, ReactHotkeyRecorder, ReactHotkeySequenceRecorder, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
|
|
13
|
+
export { HotkeyRegistrationsResult, HotkeysProvider, HotkeysProviderOptions, HotkeysProviderProps, ReactHotkeyRecorder, ReactHotkeySequenceRecorder, UseHotkeyDefinition, UseHotkeyOptions, UseHotkeySequenceDefinition, UseHotkeySequenceOptions, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
|
package/dist/index.js
CHANGED
|
@@ -7,8 +7,9 @@ import { useKeyHold } from "./useKeyHold.js";
|
|
|
7
7
|
import { useHotkeySequence } from "./useHotkeySequence.js";
|
|
8
8
|
import { useHotkeySequences } from "./useHotkeySequences.js";
|
|
9
9
|
import { useHotkeyRecorder } from "./useHotkeyRecorder.js";
|
|
10
|
+
import { useHotkeyRegistrations } from "./useHotkeyRegistrations.js";
|
|
10
11
|
import { useHotkeySequenceRecorder } from "./useHotkeySequenceRecorder.js";
|
|
11
12
|
|
|
12
13
|
export * from "@tanstack/hotkeys"
|
|
13
14
|
|
|
14
|
-
export { HotkeysProvider, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
|
|
15
|
+
export { HotkeysProvider, useDefaultHotkeysOptions, useHeldKeyCodes, useHeldKeys, useHotkey, useHotkeyRecorder, useHotkeyRegistrations, useHotkeySequence, useHotkeySequenceRecorder, useHotkeySequences, useHotkeys, useHotkeysContext, useKeyHold };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
const require_runtime = require('./_virtual/_rolldown/runtime.cjs');
|
|
2
|
+
let _tanstack_hotkeys = require("@tanstack/hotkeys");
|
|
3
|
+
let _tanstack_react_store = require("@tanstack/react-store");
|
|
4
|
+
|
|
5
|
+
//#region src/useHotkeyRegistrations.ts
|
|
6
|
+
/**
|
|
7
|
+
* React hook that reactively reads all hotkey and sequence registrations
|
|
8
|
+
* from the singleton managers.
|
|
9
|
+
*
|
|
10
|
+
* This is a standalone hook that does NOT require the HotkeysProvider.
|
|
11
|
+
* It subscribes to both HotkeyManager and SequenceManager stores and
|
|
12
|
+
* re-renders when registrations change.
|
|
13
|
+
*
|
|
14
|
+
* @returns Object with `hotkeys` and `sequences` arrays
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```tsx
|
|
18
|
+
* function ShortcutPalette() {
|
|
19
|
+
* const { hotkeys, sequences } = useHotkeyRegistrations()
|
|
20
|
+
*
|
|
21
|
+
* return (
|
|
22
|
+
* <ul>
|
|
23
|
+
* {hotkeys.map((reg) => (
|
|
24
|
+
* <li key={reg.id}>
|
|
25
|
+
* {reg.options.meta?.name ?? reg.hotkey}
|
|
26
|
+
* </li>
|
|
27
|
+
* ))}
|
|
28
|
+
* {sequences.map((reg) => (
|
|
29
|
+
* <li key={reg.id}>
|
|
30
|
+
* {reg.options.meta?.name ?? reg.sequence.join(' ')}
|
|
31
|
+
* </li>
|
|
32
|
+
* ))}
|
|
33
|
+
* </ul>
|
|
34
|
+
* )
|
|
35
|
+
* }
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
38
|
+
function useHotkeyRegistrations() {
|
|
39
|
+
const hotkeyManager = (0, _tanstack_hotkeys.getHotkeyManager)();
|
|
40
|
+
const sequenceManager = (0, _tanstack_hotkeys.getSequenceManager)();
|
|
41
|
+
return {
|
|
42
|
+
hotkeys: (0, _tanstack_react_store.useStore)(hotkeyManager.registrations, (state) => Array.from(state.values()).map(_tanstack_hotkeys.toHotkeyRegistrationView)),
|
|
43
|
+
sequences: (0, _tanstack_react_store.useStore)(sequenceManager.registrations, (state) => Array.from(state.values()))
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
//#endregion
|
|
48
|
+
exports.useHotkeyRegistrations = useHotkeyRegistrations;
|
|
49
|
+
//# sourceMappingURL=useHotkeyRegistrations.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useHotkeyRegistrations.cjs","names":["toHotkeyRegistrationView"],"sources":["../src/useHotkeyRegistrations.ts"],"sourcesContent":["import { useStore } 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 = useStore(hotkeyManager.registrations, (state) =>\n Array.from(state.values()).map(toHotkeyRegistrationView),\n )\n\n const sequences = useStore(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,6CARgB,cAAc,gBAAgB,UACrD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAIA,2CAAyB,CACzD;EAMiB,+CAJS,gBAAgB,gBAAgB,UACzD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAC3B;EAE4B"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { HotkeyRegistrationView, SequenceRegistrationView } from "@tanstack/hotkeys";
|
|
2
|
+
|
|
3
|
+
//#region src/useHotkeyRegistrations.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* Return type for useHotkeyRegistrations.
|
|
6
|
+
*/
|
|
7
|
+
interface HotkeyRegistrationsResult {
|
|
8
|
+
/** All registered hotkeys (public view, no callbacks) */
|
|
9
|
+
hotkeys: Array<HotkeyRegistrationView>;
|
|
10
|
+
/** All registered sequences */
|
|
11
|
+
sequences: Array<SequenceRegistrationView>;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* React hook that reactively reads all hotkey and sequence registrations
|
|
15
|
+
* from the singleton managers.
|
|
16
|
+
*
|
|
17
|
+
* This is a standalone hook that does NOT require the HotkeysProvider.
|
|
18
|
+
* It subscribes to both HotkeyManager and SequenceManager stores and
|
|
19
|
+
* re-renders when registrations change.
|
|
20
|
+
*
|
|
21
|
+
* @returns Object with `hotkeys` and `sequences` arrays
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```tsx
|
|
25
|
+
* function ShortcutPalette() {
|
|
26
|
+
* const { hotkeys, sequences } = useHotkeyRegistrations()
|
|
27
|
+
*
|
|
28
|
+
* return (
|
|
29
|
+
* <ul>
|
|
30
|
+
* {hotkeys.map((reg) => (
|
|
31
|
+
* <li key={reg.id}>
|
|
32
|
+
* {reg.options.meta?.name ?? reg.hotkey}
|
|
33
|
+
* </li>
|
|
34
|
+
* ))}
|
|
35
|
+
* {sequences.map((reg) => (
|
|
36
|
+
* <li key={reg.id}>
|
|
37
|
+
* {reg.options.meta?.name ?? reg.sequence.join(' ')}
|
|
38
|
+
* </li>
|
|
39
|
+
* ))}
|
|
40
|
+
* </ul>
|
|
41
|
+
* )
|
|
42
|
+
* }
|
|
43
|
+
* ```
|
|
44
|
+
*/
|
|
45
|
+
declare function useHotkeyRegistrations(): HotkeyRegistrationsResult;
|
|
46
|
+
//#endregion
|
|
47
|
+
export { HotkeyRegistrationsResult, useHotkeyRegistrations };
|
|
48
|
+
//# sourceMappingURL=useHotkeyRegistrations.d.cts.map
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { HotkeyRegistrationView, SequenceRegistrationView } from "@tanstack/hotkeys";
|
|
2
|
+
|
|
3
|
+
//#region src/useHotkeyRegistrations.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* Return type for useHotkeyRegistrations.
|
|
6
|
+
*/
|
|
7
|
+
interface HotkeyRegistrationsResult {
|
|
8
|
+
/** All registered hotkeys (public view, no callbacks) */
|
|
9
|
+
hotkeys: Array<HotkeyRegistrationView>;
|
|
10
|
+
/** All registered sequences */
|
|
11
|
+
sequences: Array<SequenceRegistrationView>;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* React hook that reactively reads all hotkey and sequence registrations
|
|
15
|
+
* from the singleton managers.
|
|
16
|
+
*
|
|
17
|
+
* This is a standalone hook that does NOT require the HotkeysProvider.
|
|
18
|
+
* It subscribes to both HotkeyManager and SequenceManager stores and
|
|
19
|
+
* re-renders when registrations change.
|
|
20
|
+
*
|
|
21
|
+
* @returns Object with `hotkeys` and `sequences` arrays
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```tsx
|
|
25
|
+
* function ShortcutPalette() {
|
|
26
|
+
* const { hotkeys, sequences } = useHotkeyRegistrations()
|
|
27
|
+
*
|
|
28
|
+
* return (
|
|
29
|
+
* <ul>
|
|
30
|
+
* {hotkeys.map((reg) => (
|
|
31
|
+
* <li key={reg.id}>
|
|
32
|
+
* {reg.options.meta?.name ?? reg.hotkey}
|
|
33
|
+
* </li>
|
|
34
|
+
* ))}
|
|
35
|
+
* {sequences.map((reg) => (
|
|
36
|
+
* <li key={reg.id}>
|
|
37
|
+
* {reg.options.meta?.name ?? reg.sequence.join(' ')}
|
|
38
|
+
* </li>
|
|
39
|
+
* ))}
|
|
40
|
+
* </ul>
|
|
41
|
+
* )
|
|
42
|
+
* }
|
|
43
|
+
* ```
|
|
44
|
+
*/
|
|
45
|
+
declare function useHotkeyRegistrations(): HotkeyRegistrationsResult;
|
|
46
|
+
//#endregion
|
|
47
|
+
export { HotkeyRegistrationsResult, useHotkeyRegistrations };
|
|
48
|
+
//# sourceMappingURL=useHotkeyRegistrations.d.ts.map
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { getHotkeyManager, getSequenceManager, toHotkeyRegistrationView } from "@tanstack/hotkeys";
|
|
2
|
+
import { useStore } from "@tanstack/react-store";
|
|
3
|
+
|
|
4
|
+
//#region src/useHotkeyRegistrations.ts
|
|
5
|
+
/**
|
|
6
|
+
* React hook that reactively reads all hotkey and sequence registrations
|
|
7
|
+
* from the singleton managers.
|
|
8
|
+
*
|
|
9
|
+
* This is a standalone hook that does NOT require the HotkeysProvider.
|
|
10
|
+
* It subscribes to both HotkeyManager and SequenceManager stores and
|
|
11
|
+
* re-renders when registrations change.
|
|
12
|
+
*
|
|
13
|
+
* @returns Object with `hotkeys` and `sequences` arrays
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* function ShortcutPalette() {
|
|
18
|
+
* const { hotkeys, sequences } = useHotkeyRegistrations()
|
|
19
|
+
*
|
|
20
|
+
* return (
|
|
21
|
+
* <ul>
|
|
22
|
+
* {hotkeys.map((reg) => (
|
|
23
|
+
* <li key={reg.id}>
|
|
24
|
+
* {reg.options.meta?.name ?? reg.hotkey}
|
|
25
|
+
* </li>
|
|
26
|
+
* ))}
|
|
27
|
+
* {sequences.map((reg) => (
|
|
28
|
+
* <li key={reg.id}>
|
|
29
|
+
* {reg.options.meta?.name ?? reg.sequence.join(' ')}
|
|
30
|
+
* </li>
|
|
31
|
+
* ))}
|
|
32
|
+
* </ul>
|
|
33
|
+
* )
|
|
34
|
+
* }
|
|
35
|
+
* ```
|
|
36
|
+
*/
|
|
37
|
+
function useHotkeyRegistrations() {
|
|
38
|
+
const hotkeyManager = getHotkeyManager();
|
|
39
|
+
const sequenceManager = getSequenceManager();
|
|
40
|
+
return {
|
|
41
|
+
hotkeys: useStore(hotkeyManager.registrations, (state) => Array.from(state.values()).map(toHotkeyRegistrationView)),
|
|
42
|
+
sequences: useStore(sequenceManager.registrations, (state) => Array.from(state.values()))
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
//#endregion
|
|
47
|
+
export { useHotkeyRegistrations };
|
|
48
|
+
//# sourceMappingURL=useHotkeyRegistrations.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useHotkeyRegistrations.js","names":[],"sources":["../src/useHotkeyRegistrations.ts"],"sourcesContent":["import { useStore } 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 = useStore(hotkeyManager.registrations, (state) =>\n Array.from(state.values()).map(toHotkeyRegistrationView),\n )\n\n const sequences = useStore(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,SAAS,cAAc,gBAAgB,UACrD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAAC,IAAI,yBAAyB,CACzD;EAMiB,WAJA,SAAS,gBAAgB,gBAAgB,UACzD,MAAM,KAAK,MAAM,QAAQ,CAAC,CAC3B;EAE4B"}
|
package/dist/useKeyHold.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyHold.cjs","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useStore } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type {
|
|
1
|
+
{"version":3,"file":"useKeyHold.cjs","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useStore } 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 `useStore` 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 useStore(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,4CAAgB,QAAQ,QAAQ,UAC9B,MAAM,SAAS,MAAM,YAAY,QAAQ,aAAa,KAAK,cAAc,CAC1E"}
|
package/dist/useKeyHold.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IndividualKey } from "@tanstack/hotkeys";
|
|
2
2
|
|
|
3
3
|
//#region src/useKeyHold.d.ts
|
|
4
4
|
/**
|
|
@@ -41,7 +41,7 @@ import { HeldKey } from "@tanstack/hotkeys";
|
|
|
41
41
|
* }
|
|
42
42
|
* ```
|
|
43
43
|
*/
|
|
44
|
-
declare function useKeyHold(key:
|
|
44
|
+
declare function useKeyHold(key: IndividualKey): boolean;
|
|
45
45
|
//#endregion
|
|
46
46
|
export { useKeyHold };
|
|
47
47
|
//# sourceMappingURL=useKeyHold.d.cts.map
|
package/dist/useKeyHold.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { IndividualKey } from "@tanstack/hotkeys";
|
|
2
2
|
|
|
3
3
|
//#region src/useKeyHold.d.ts
|
|
4
4
|
/**
|
|
@@ -41,7 +41,7 @@ import { HeldKey } from "@tanstack/hotkeys";
|
|
|
41
41
|
* }
|
|
42
42
|
* ```
|
|
43
43
|
*/
|
|
44
|
-
declare function useKeyHold(key:
|
|
44
|
+
declare function useKeyHold(key: IndividualKey): boolean;
|
|
45
45
|
//#endregion
|
|
46
46
|
export { useKeyHold };
|
|
47
47
|
//# sourceMappingURL=useKeyHold.d.ts.map
|
package/dist/useKeyHold.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useKeyHold.js","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useStore } from '@tanstack/react-store'\nimport { getKeyStateTracker } from '@tanstack/hotkeys'\nimport type {
|
|
1
|
+
{"version":3,"file":"useKeyHold.js","names":[],"sources":["../src/useKeyHold.ts"],"sourcesContent":["import { useStore } 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 `useStore` 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 useStore(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,SAAS,QAAQ,QAAQ,UAC9B,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.9.0",
|
|
4
4
|
"description": "React adapter for TanStack Hotkeys",
|
|
5
5
|
"author": "Tanner Linsley",
|
|
6
6
|
"license": "MIT",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
],
|
|
41
41
|
"dependencies": {
|
|
42
42
|
"@tanstack/react-store": "^0.9.3",
|
|
43
|
-
"@tanstack/hotkeys": "0.
|
|
43
|
+
"@tanstack/hotkeys": "0.7.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@eslint-react/eslint-plugin": "^3.0.0",
|
package/src/HotkeysProvider.tsx
CHANGED
|
@@ -10,8 +10,8 @@ import type { UseHotkeySequenceOptions } from './useHotkeySequence'
|
|
|
10
10
|
export interface HotkeysProviderOptions {
|
|
11
11
|
hotkey?: Partial<UseHotkeyOptions>
|
|
12
12
|
hotkeyRecorder?: Partial<HotkeyRecorderOptions>
|
|
13
|
-
hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>
|
|
14
13
|
hotkeySequence?: Partial<UseHotkeySequenceOptions>
|
|
14
|
+
hotkeySequenceRecorder?: Partial<HotkeySequenceRecorderOptions>
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
interface HotkeysContextValue {
|
package/src/index.ts
CHANGED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { useStore } from '@tanstack/react-store'
|
|
2
|
+
import {
|
|
3
|
+
getHotkeyManager,
|
|
4
|
+
getSequenceManager,
|
|
5
|
+
toHotkeyRegistrationView,
|
|
6
|
+
} from '@tanstack/hotkeys'
|
|
7
|
+
import type {
|
|
8
|
+
HotkeyRegistrationView,
|
|
9
|
+
SequenceRegistrationView,
|
|
10
|
+
} from '@tanstack/hotkeys'
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Return type for useHotkeyRegistrations.
|
|
14
|
+
*/
|
|
15
|
+
export interface HotkeyRegistrationsResult {
|
|
16
|
+
/** All registered hotkeys (public view, no callbacks) */
|
|
17
|
+
hotkeys: Array<HotkeyRegistrationView>
|
|
18
|
+
/** All registered sequences */
|
|
19
|
+
sequences: Array<SequenceRegistrationView>
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* React hook that reactively reads all hotkey and sequence registrations
|
|
24
|
+
* from the singleton managers.
|
|
25
|
+
*
|
|
26
|
+
* This is a standalone hook that does NOT require the HotkeysProvider.
|
|
27
|
+
* It subscribes to both HotkeyManager and SequenceManager stores and
|
|
28
|
+
* re-renders when registrations change.
|
|
29
|
+
*
|
|
30
|
+
* @returns Object with `hotkeys` and `sequences` arrays
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* ```tsx
|
|
34
|
+
* function ShortcutPalette() {
|
|
35
|
+
* const { hotkeys, sequences } = useHotkeyRegistrations()
|
|
36
|
+
*
|
|
37
|
+
* return (
|
|
38
|
+
* <ul>
|
|
39
|
+
* {hotkeys.map((reg) => (
|
|
40
|
+
* <li key={reg.id}>
|
|
41
|
+
* {reg.options.meta?.name ?? reg.hotkey}
|
|
42
|
+
* </li>
|
|
43
|
+
* ))}
|
|
44
|
+
* {sequences.map((reg) => (
|
|
45
|
+
* <li key={reg.id}>
|
|
46
|
+
* {reg.options.meta?.name ?? reg.sequence.join(' ')}
|
|
47
|
+
* </li>
|
|
48
|
+
* ))}
|
|
49
|
+
* </ul>
|
|
50
|
+
* )
|
|
51
|
+
* }
|
|
52
|
+
* ```
|
|
53
|
+
*/
|
|
54
|
+
export function useHotkeyRegistrations(): HotkeyRegistrationsResult {
|
|
55
|
+
const hotkeyManager = getHotkeyManager()
|
|
56
|
+
const sequenceManager = getSequenceManager()
|
|
57
|
+
|
|
58
|
+
const hotkeys = useStore(hotkeyManager.registrations, (state) =>
|
|
59
|
+
Array.from(state.values()).map(toHotkeyRegistrationView),
|
|
60
|
+
)
|
|
61
|
+
|
|
62
|
+
const sequences = useStore(sequenceManager.registrations, (state) =>
|
|
63
|
+
Array.from(state.values()),
|
|
64
|
+
)
|
|
65
|
+
|
|
66
|
+
return { hotkeys, sequences }
|
|
67
|
+
}
|
package/src/useKeyHold.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useStore } from '@tanstack/react-store'
|
|
2
2
|
import { getKeyStateTracker } from '@tanstack/hotkeys'
|
|
3
|
-
import type {
|
|
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.
|
|
@@ -42,7 +42,7 @@ import type { HeldKey } from '@tanstack/hotkeys'
|
|
|
42
42
|
* }
|
|
43
43
|
* ```
|
|
44
44
|
*/
|
|
45
|
-
export function useKeyHold(key:
|
|
45
|
+
export function useKeyHold(key: IndividualKey): boolean {
|
|
46
46
|
const tracker = getKeyStateTracker()
|
|
47
47
|
const normalizedKey = key.toLowerCase()
|
|
48
48
|
|