@trackunit/react-components 1.15.21 → 1.15.23
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/index.cjs.js +401 -0
- package/index.esm.js +401 -1
- package/package.json +5 -5
- package/src/hooks/useKeyboardShortcut/formatShortcutLabel.d.ts +24 -0
- package/src/hooks/useKeyboardShortcut/platformUtils.d.ts +20 -0
- package/src/hooks/useKeyboardShortcut/reservedShortcutTypes.d.ts +188 -0
- package/src/hooks/useKeyboardShortcut/reservedShortcuts.d.ts +20 -0
- package/src/hooks/useKeyboardShortcut/shortcutMatcher.d.ts +18 -0
- package/src/hooks/useKeyboardShortcut/shortcutUtils.d.ts +6 -0
- package/src/hooks/useKeyboardShortcut/shortcutUtils.testUtils.d.ts +12 -0
- package/src/hooks/useKeyboardShortcut/types.d.ts +97 -0
- package/src/hooks/useKeyboardShortcut/useKeyboardShortcut.d.ts +56 -0
- package/src/hooks/useKeyboardShortcut/useShortcutConflicts.d.ts +41 -0
- package/src/index.d.ts +1 -0
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
import { ShortcutDefinition } from "./types";
|
|
2
|
+
/**
|
|
3
|
+
* Type-level utilities for preventing reserved shortcuts from being used.
|
|
4
|
+
*
|
|
5
|
+
* There are two categories of reserved shortcuts:
|
|
6
|
+
*
|
|
7
|
+
* 1. APP-RESERVED: Host-level shortcuts used by our application
|
|
8
|
+
* - mod+k: Global search
|
|
9
|
+
* - mod+shift+l: Local dev mode toggle
|
|
10
|
+
*
|
|
11
|
+
* 2. BROWSER-RESERVED: Native browser shortcuts that should not be overridden
|
|
12
|
+
* - Clipboard: mod+c, mod+v, mod+x, mod+a
|
|
13
|
+
* - Undo/Redo: mod+z, mod+shift+z, mod+y
|
|
14
|
+
* - Find: mod+f, mod+g, mod+shift+g
|
|
15
|
+
* - Navigation: mod+r, mod+shift+r, mod+t, mod+w, mod+shift+t, mod+n, mod+shift+n, mod+l, mod+d
|
|
16
|
+
* - Zoom: mod+=, mod+-, mod+0
|
|
17
|
+
* - Other: mod+p, mod+s, mod+o, mod+h, mod+j, mod+q
|
|
18
|
+
*
|
|
19
|
+
* The type system prevents their use. Legitimate uses (in host-navigation)
|
|
20
|
+
* must use ts-expect-error comments with an explanation.
|
|
21
|
+
*/
|
|
22
|
+
/** Template for reserved shortcut error messages */
|
|
23
|
+
type ReservedMessage<TCategory extends string, TKeys extends string, TFeature extends string> = `${TCategory} reserved: ${TKeys} is used for ${TFeature}, which should not be overwritten`;
|
|
24
|
+
/** App reserved: mod+k for Global Search */
|
|
25
|
+
type AppReservedModK = {
|
|
26
|
+
readonly key: "k";
|
|
27
|
+
readonly modifiers: "mod";
|
|
28
|
+
};
|
|
29
|
+
/** App reserved: mod+shift+l for Local Dev Mode Toggle */
|
|
30
|
+
type AppReservedModShiftL = {
|
|
31
|
+
readonly key: "l";
|
|
32
|
+
readonly modifiers: "mod+shift";
|
|
33
|
+
};
|
|
34
|
+
/** Union of all app-reserved shortcuts */
|
|
35
|
+
type AppReservedShortcut = AppReservedModK | AppReservedModShiftL;
|
|
36
|
+
/** Maps each app-reserved shortcut to its feature description */
|
|
37
|
+
type AppShortcutFeature<TShortcut> = TShortcut extends AppReservedModK ? "Global Search" : TShortcut extends AppReservedModShiftL ? "Local Dev Mode Toggle" : never;
|
|
38
|
+
/** Maps each app-reserved shortcut to its key string */
|
|
39
|
+
type AppShortcutKeys<TShortcut> = TShortcut extends AppReservedModK ? "mod+k" : TShortcut extends AppReservedModShiftL ? "mod+shift+l" : never;
|
|
40
|
+
/** Maps each app-reserved shortcut to its error message */
|
|
41
|
+
type AppReservedErrorMessage<TShortcut> = ReservedMessage<"App", AppShortcutKeys<TShortcut>, AppShortcutFeature<TShortcut>>;
|
|
42
|
+
type BrowserReservedModC = {
|
|
43
|
+
readonly key: "c";
|
|
44
|
+
readonly modifiers: "mod";
|
|
45
|
+
};
|
|
46
|
+
type BrowserReservedModV = {
|
|
47
|
+
readonly key: "v";
|
|
48
|
+
readonly modifiers: "mod";
|
|
49
|
+
};
|
|
50
|
+
type BrowserReservedModX = {
|
|
51
|
+
readonly key: "x";
|
|
52
|
+
readonly modifiers: "mod";
|
|
53
|
+
};
|
|
54
|
+
type BrowserReservedModA = {
|
|
55
|
+
readonly key: "a";
|
|
56
|
+
readonly modifiers: "mod";
|
|
57
|
+
};
|
|
58
|
+
type BrowserReservedModZ = {
|
|
59
|
+
readonly key: "z";
|
|
60
|
+
readonly modifiers: "mod";
|
|
61
|
+
};
|
|
62
|
+
type BrowserReservedModShiftZ = {
|
|
63
|
+
readonly key: "z";
|
|
64
|
+
readonly modifiers: "mod+shift";
|
|
65
|
+
};
|
|
66
|
+
type BrowserReservedModY = {
|
|
67
|
+
readonly key: "y";
|
|
68
|
+
readonly modifiers: "mod";
|
|
69
|
+
};
|
|
70
|
+
type BrowserReservedModF = {
|
|
71
|
+
readonly key: "f";
|
|
72
|
+
readonly modifiers: "mod";
|
|
73
|
+
};
|
|
74
|
+
type BrowserReservedModG = {
|
|
75
|
+
readonly key: "g";
|
|
76
|
+
readonly modifiers: "mod";
|
|
77
|
+
};
|
|
78
|
+
type BrowserReservedModShiftG = {
|
|
79
|
+
readonly key: "g";
|
|
80
|
+
readonly modifiers: "mod+shift";
|
|
81
|
+
};
|
|
82
|
+
type BrowserReservedModR = {
|
|
83
|
+
readonly key: "r";
|
|
84
|
+
readonly modifiers: "mod";
|
|
85
|
+
};
|
|
86
|
+
type BrowserReservedModShiftR = {
|
|
87
|
+
readonly key: "r";
|
|
88
|
+
readonly modifiers: "mod+shift";
|
|
89
|
+
};
|
|
90
|
+
type BrowserReservedModT = {
|
|
91
|
+
readonly key: "t";
|
|
92
|
+
readonly modifiers: "mod";
|
|
93
|
+
};
|
|
94
|
+
type BrowserReservedModW = {
|
|
95
|
+
readonly key: "w";
|
|
96
|
+
readonly modifiers: "mod";
|
|
97
|
+
};
|
|
98
|
+
type BrowserReservedModShiftT = {
|
|
99
|
+
readonly key: "t";
|
|
100
|
+
readonly modifiers: "mod+shift";
|
|
101
|
+
};
|
|
102
|
+
type BrowserReservedModN = {
|
|
103
|
+
readonly key: "n";
|
|
104
|
+
readonly modifiers: "mod";
|
|
105
|
+
};
|
|
106
|
+
type BrowserReservedModShiftN = {
|
|
107
|
+
readonly key: "n";
|
|
108
|
+
readonly modifiers: "mod+shift";
|
|
109
|
+
};
|
|
110
|
+
type BrowserReservedModL = {
|
|
111
|
+
readonly key: "l";
|
|
112
|
+
readonly modifiers: "mod";
|
|
113
|
+
};
|
|
114
|
+
type BrowserReservedModD = {
|
|
115
|
+
readonly key: "d";
|
|
116
|
+
readonly modifiers: "mod";
|
|
117
|
+
};
|
|
118
|
+
type BrowserReservedModEquals = {
|
|
119
|
+
readonly key: "=";
|
|
120
|
+
readonly modifiers: "mod";
|
|
121
|
+
};
|
|
122
|
+
type BrowserReservedModMinus = {
|
|
123
|
+
readonly key: "-";
|
|
124
|
+
readonly modifiers: "mod";
|
|
125
|
+
};
|
|
126
|
+
type BrowserReservedMod0 = {
|
|
127
|
+
readonly key: "0";
|
|
128
|
+
readonly modifiers: "mod";
|
|
129
|
+
};
|
|
130
|
+
type BrowserReservedModP = {
|
|
131
|
+
readonly key: "p";
|
|
132
|
+
readonly modifiers: "mod";
|
|
133
|
+
};
|
|
134
|
+
type BrowserReservedModS = {
|
|
135
|
+
readonly key: "s";
|
|
136
|
+
readonly modifiers: "mod";
|
|
137
|
+
};
|
|
138
|
+
type BrowserReservedModO = {
|
|
139
|
+
readonly key: "o";
|
|
140
|
+
readonly modifiers: "mod";
|
|
141
|
+
};
|
|
142
|
+
type BrowserReservedModH = {
|
|
143
|
+
readonly key: "h";
|
|
144
|
+
readonly modifiers: "mod";
|
|
145
|
+
};
|
|
146
|
+
type BrowserReservedModJ = {
|
|
147
|
+
readonly key: "j";
|
|
148
|
+
readonly modifiers: "mod";
|
|
149
|
+
};
|
|
150
|
+
type BrowserReservedModQ = {
|
|
151
|
+
readonly key: "q";
|
|
152
|
+
readonly modifiers: "mod";
|
|
153
|
+
};
|
|
154
|
+
/** Union of all browser-reserved shortcuts */
|
|
155
|
+
type BrowserReservedShortcut = BrowserReservedModC | BrowserReservedModV | BrowserReservedModX | BrowserReservedModA | BrowserReservedModZ | BrowserReservedModShiftZ | BrowserReservedModY | BrowserReservedModF | BrowserReservedModG | BrowserReservedModShiftG | BrowserReservedModR | BrowserReservedModShiftR | BrowserReservedModT | BrowserReservedModW | BrowserReservedModShiftT | BrowserReservedModN | BrowserReservedModShiftN | BrowserReservedModL | BrowserReservedModD | BrowserReservedModEquals | BrowserReservedModMinus | BrowserReservedMod0 | BrowserReservedModP | BrowserReservedModS | BrowserReservedModO | BrowserReservedModH | BrowserReservedModJ | BrowserReservedModQ;
|
|
156
|
+
/** Maps each browser-reserved shortcut to its feature description */
|
|
157
|
+
type BrowserShortcutFeature<TShortcut> = TShortcut extends BrowserReservedModC ? "Copy" : TShortcut extends BrowserReservedModV ? "Paste" : TShortcut extends BrowserReservedModX ? "Cut" : TShortcut extends BrowserReservedModA ? "Select All" : TShortcut extends BrowserReservedModZ ? "Undo" : TShortcut extends BrowserReservedModShiftZ ? "Redo (Mac)" : TShortcut extends BrowserReservedModY ? "Redo (Windows/Linux)" : TShortcut extends BrowserReservedModF ? "Find on page" : TShortcut extends BrowserReservedModG ? "Find next" : TShortcut extends BrowserReservedModShiftG ? "Find previous" : TShortcut extends BrowserReservedModR ? "Reload page" : TShortcut extends BrowserReservedModShiftR ? "Hard reload" : TShortcut extends BrowserReservedModT ? "New tab" : TShortcut extends BrowserReservedModW ? "Close tab" : TShortcut extends BrowserReservedModShiftT ? "Reopen closed tab" : TShortcut extends BrowserReservedModN ? "New window" : TShortcut extends BrowserReservedModShiftN ? "New incognito/private window" : TShortcut extends BrowserReservedModL ? "Focus address bar" : TShortcut extends BrowserReservedModD ? "Bookmark page" : TShortcut extends BrowserReservedModEquals ? "Zoom in" : TShortcut extends BrowserReservedModMinus ? "Zoom out" : TShortcut extends BrowserReservedMod0 ? "Reset zoom" : TShortcut extends BrowserReservedModP ? "Print" : TShortcut extends BrowserReservedModS ? "Save page" : TShortcut extends BrowserReservedModO ? "Open file" : TShortcut extends BrowserReservedModH ? "History (Chrome) / Hide window (Mac)" : TShortcut extends BrowserReservedModJ ? "Downloads" : TShortcut extends BrowserReservedModQ ? "Quit application (Mac only)" : never;
|
|
158
|
+
/** Maps each browser-reserved shortcut to its key string */
|
|
159
|
+
type BrowserShortcutKeys<TShortcut> = TShortcut extends BrowserReservedModC ? "mod+c" : TShortcut extends BrowserReservedModV ? "mod+v" : TShortcut extends BrowserReservedModX ? "mod+x" : TShortcut extends BrowserReservedModA ? "mod+a" : TShortcut extends BrowserReservedModZ ? "mod+z" : TShortcut extends BrowserReservedModShiftZ ? "mod+shift+z" : TShortcut extends BrowserReservedModY ? "mod+y" : TShortcut extends BrowserReservedModF ? "mod+f" : TShortcut extends BrowserReservedModG ? "mod+g" : TShortcut extends BrowserReservedModShiftG ? "mod+shift+g" : TShortcut extends BrowserReservedModR ? "mod+r" : TShortcut extends BrowserReservedModShiftR ? "mod+shift+r" : TShortcut extends BrowserReservedModT ? "mod+t" : TShortcut extends BrowserReservedModW ? "mod+w" : TShortcut extends BrowserReservedModShiftT ? "mod+shift+t" : TShortcut extends BrowserReservedModN ? "mod+n" : TShortcut extends BrowserReservedModShiftN ? "mod+shift+n" : TShortcut extends BrowserReservedModL ? "mod+l" : TShortcut extends BrowserReservedModD ? "mod+d" : TShortcut extends BrowserReservedModEquals ? "mod+=" : TShortcut extends BrowserReservedModMinus ? "mod+-" : TShortcut extends BrowserReservedMod0 ? "mod+0" : TShortcut extends BrowserReservedModP ? "mod+p" : TShortcut extends BrowserReservedModS ? "mod+s" : TShortcut extends BrowserReservedModO ? "mod+o" : TShortcut extends BrowserReservedModH ? "mod+h" : TShortcut extends BrowserReservedModJ ? "mod+j" : TShortcut extends BrowserReservedModQ ? "mod+q" : never;
|
|
160
|
+
/** Maps each browser-reserved shortcut to its error message */
|
|
161
|
+
type BrowserReservedErrorMessage<TShortcut> = ReservedMessage<"Browser", BrowserShortcutKeys<TShortcut>, BrowserShortcutFeature<TShortcut>>;
|
|
162
|
+
/** Union of all reserved shortcuts (app + browser) */
|
|
163
|
+
type ReservedShortcut = AppReservedShortcut | BrowserReservedShortcut;
|
|
164
|
+
/**
|
|
165
|
+
* Type predicate that returns true if the shortcut is reserved.
|
|
166
|
+
* Reserved shortcuts cannot be used without explicit ts-expect-error.
|
|
167
|
+
*/
|
|
168
|
+
export type IsReservedShortcut<TShortcut extends ShortcutDefinition> = TShortcut extends ReservedShortcut ? true : false;
|
|
169
|
+
/** Maps any reserved shortcut to its specific error message */
|
|
170
|
+
type ReservedErrorMessage<TShortcut> = TShortcut extends AppReservedShortcut ? AppReservedErrorMessage<TShortcut> : TShortcut extends BrowserReservedShortcut ? BrowserReservedErrorMessage<TShortcut> : never;
|
|
171
|
+
/**
|
|
172
|
+
* Validates a shortcut parameter at the type level.
|
|
173
|
+
* Returns the shortcut type if valid, or a specific error message if reserved.
|
|
174
|
+
*
|
|
175
|
+
* @example
|
|
176
|
+
* // This type-checks:
|
|
177
|
+
* const shortcut: ValidShortcutParam<{ key: "m"; modifiers: "mod" }> = { key: "m", modifiers: "mod" };
|
|
178
|
+
*
|
|
179
|
+
* // This fails type-checking with app-reserved error:
|
|
180
|
+
* const reserved: ValidShortcutParam<{ key: "k"; modifiers: "mod" }> = { key: "k", modifiers: "mod" };
|
|
181
|
+
* // Error: Type '...' is not assignable to type '"App reserved: mod+k is used for Global Search, which should not be overwritten"'
|
|
182
|
+
*
|
|
183
|
+
* // This fails type-checking with browser-reserved error:
|
|
184
|
+
* const browserReserved: ValidShortcutParam<{ key: "c"; modifiers: "mod" }> = { key: "c", modifiers: "mod" };
|
|
185
|
+
* // Error: Type '...' is not assignable to type '"Browser reserved: mod+c is used for Copy, which should not be overwritten"'
|
|
186
|
+
*/
|
|
187
|
+
export type ValidShortcutParam<TShortcut extends ShortcutDefinition> = TShortcut extends ReservedShortcut ? ReservedErrorMessage<TShortcut> : TShortcut;
|
|
188
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ReservedShortcutInfo } from "./types";
|
|
2
|
+
/**
|
|
3
|
+
* Reserved application shortcuts.
|
|
4
|
+
* These are host-level shortcuts that are blocked at the type level.
|
|
5
|
+
* See reservedShortcutTypes.ts for the type-level enforcement.
|
|
6
|
+
*
|
|
7
|
+
* IMPORTANT: When adding a new reserved shortcut here, you must also
|
|
8
|
+
* update the type definitions in reservedShortcutTypes.ts and the
|
|
9
|
+
* isGlobalShortcut() function in apps/iris-app-loader/src/forward-events-to-host.ts.
|
|
10
|
+
*/
|
|
11
|
+
export declare const RESERVED_SHORTCUTS: Record<string, ReservedShortcutInfo>;
|
|
12
|
+
/**
|
|
13
|
+
* Common browser shortcuts that cannot be reliably overridden.
|
|
14
|
+
* Using these shortcuts will trigger a development warning since
|
|
15
|
+
* the browser typically intercepts them before JavaScript can handle them.
|
|
16
|
+
*
|
|
17
|
+
* Note: Some of these can be overridden with preventDefault(), but it's
|
|
18
|
+
* generally a bad UX to override expected browser behavior.
|
|
19
|
+
*/
|
|
20
|
+
export declare const BROWSER_SHORTCUTS: Record<string, string>;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ShortcutDefinition } from "./types";
|
|
2
|
+
/**
|
|
3
|
+
* Checks if a keyboard event matches the shortcut definition.
|
|
4
|
+
*
|
|
5
|
+
* This is a pure function that handles:
|
|
6
|
+
* - Case-insensitive key matching
|
|
7
|
+
* - Platform-aware modifier key checking (Cmd on Mac, Ctrl on Windows/Linux)
|
|
8
|
+
* - Space key normalization
|
|
9
|
+
* - Extra modifier rejection (ensures only expected modifiers are pressed)
|
|
10
|
+
*
|
|
11
|
+
* @param event - The keyboard event to check
|
|
12
|
+
* @param shortcut - The shortcut definition to match against
|
|
13
|
+
* @returns {boolean} true if the event matches the shortcut, false otherwise
|
|
14
|
+
* @example
|
|
15
|
+
* // Check if Cmd+K (Mac) or Ctrl+K (Windows) was pressed
|
|
16
|
+
* const isMatch = matchesShortcut(event, { key: "k", modifiers: "mod" });
|
|
17
|
+
*/
|
|
18
|
+
export declare const matchesShortcut: (event: KeyboardEvent, shortcut: ShortcutDefinition) => boolean;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ShortcutDefinition } from "./types";
|
|
2
|
+
/**
|
|
3
|
+
* Converts a ShortcutDefinition to a normalized string key for lookup.
|
|
4
|
+
* Format: "mod+shift+k" (modifiers sorted alphabetically, then key)
|
|
5
|
+
*/
|
|
6
|
+
export declare const shortcutToString: (shortcut: ShortcutDefinition) => string;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ShortcutDefinition } from "./types";
|
|
2
|
+
/**
|
|
3
|
+
* Parses a string shortcut into a ShortcutDefinition.
|
|
4
|
+
* Useful for debugging and testing.
|
|
5
|
+
*
|
|
6
|
+
* @param shortcutStr - The shortcut string to parse (e.g., "mod+k")
|
|
7
|
+
* @returns {ShortcutDefinition} The parsed shortcut definition
|
|
8
|
+
* @example
|
|
9
|
+
* parseShortcut("mod+k") // { key: "k", modifiers: "mod" }
|
|
10
|
+
* parseShortcut("mod+shift+l") // { key: "l", modifiers: "mod+shift" }
|
|
11
|
+
*/
|
|
12
|
+
export declare const parseShortcut: (shortcutStr: string) => ShortcutDefinition;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { RefObject } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Individual semantic modifier keys (internal use for parsing).
|
|
4
|
+
*
|
|
5
|
+
* - `mod`: Primary action modifier - Cmd on Mac, Ctrl on Windows/Linux
|
|
6
|
+
* - `alt`: Alternative/Option key - Option on Mac, Alt on Windows/Linux
|
|
7
|
+
* - `shift`: Shift key on all platforms
|
|
8
|
+
*
|
|
9
|
+
* Note: Explicit ctrl/meta are intentionally not supported.
|
|
10
|
+
* Use "mod" for cross-platform shortcuts.
|
|
11
|
+
*/
|
|
12
|
+
export type SemanticModifier = "mod" | "alt" | "shift";
|
|
13
|
+
/**
|
|
14
|
+
* Valid modifier combinations as a string.
|
|
15
|
+
* Modifiers are joined with "+" in alphabetical order.
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* "mod" // Cmd on Mac, Ctrl on Windows/Linux
|
|
19
|
+
* "mod+shift" // Cmd+Shift on Mac, Ctrl+Shift on Windows/Linux
|
|
20
|
+
* "alt+mod+shift" // Option+Cmd+Shift on Mac, Alt+Ctrl+Shift on Windows/Linux
|
|
21
|
+
*/
|
|
22
|
+
export type ModifierString = "mod" | "alt" | "shift" | "alt+mod" | "alt+shift" | "mod+shift" | "alt+mod+shift";
|
|
23
|
+
/**
|
|
24
|
+
* Supported shortcut keys.
|
|
25
|
+
* These map to the `event.key` values from KeyboardEvent.
|
|
26
|
+
*/
|
|
27
|
+
export type ShortcutKey = "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "Enter" | "Escape" | "Tab" | "Space" | "Backspace" | "Delete" | "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight" | "F1" | "F2" | "F3" | "F4" | "F5" | "F6" | "F7" | "F8" | "F9" | "F10" | "F11" | "F12" | "/" | "[" | "]" | "," | "." | "-" | "=" | "`" | "\\";
|
|
28
|
+
/**
|
|
29
|
+
* Defines a keyboard shortcut with a key and optional modifiers.
|
|
30
|
+
*/
|
|
31
|
+
export type ShortcutDefinition = {
|
|
32
|
+
/** The primary key for the shortcut */
|
|
33
|
+
readonly key: ShortcutKey;
|
|
34
|
+
/**
|
|
35
|
+
* Optional modifier string. Modifiers are joined with "+" in alphabetical order.
|
|
36
|
+
*
|
|
37
|
+
* @example "mod" | "mod+shift" | "alt+mod+shift"
|
|
38
|
+
*/
|
|
39
|
+
readonly modifiers?: ModifierString;
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* Controls how the shortcut handles the browser's default behavior.
|
|
43
|
+
*
|
|
44
|
+
* - `"never"` - Never prevent default. Browser handles the event normally.
|
|
45
|
+
* - `"once"` - Prevent default on first trigger. Pressing the same shortcut
|
|
46
|
+
* twice within 400ms passes through to the browser, providing an escape
|
|
47
|
+
* hatch for accessing native browser shortcuts that are overridden.
|
|
48
|
+
* - `"always"` - Always prevent default on every press, including rapid repeats.
|
|
49
|
+
* No browser escape hatch.
|
|
50
|
+
*/
|
|
51
|
+
export type PreventDefaultMode = "never" | "once" | "always";
|
|
52
|
+
/**
|
|
53
|
+
* Options for the useKeyboardShortcut hook.
|
|
54
|
+
*/
|
|
55
|
+
export type UseKeyboardShortcutOptions = {
|
|
56
|
+
/** Called when the shortcut is triggered */
|
|
57
|
+
onTrigger: () => void;
|
|
58
|
+
/**
|
|
59
|
+
* Disable the shortcut conditionally.
|
|
60
|
+
*
|
|
61
|
+
* @default false
|
|
62
|
+
*/
|
|
63
|
+
disabled?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* Controls how the shortcut handles the browser's default behavior.
|
|
66
|
+
*
|
|
67
|
+
* - `"never"` - Never prevent default. Browser handles the event normally.
|
|
68
|
+
* - `"once"` - Prevent default on first trigger. Pressing the same shortcut
|
|
69
|
+
* twice within 400ms passes through to the browser, providing an escape
|
|
70
|
+
* hatch for accessing native browser shortcuts that are overridden.
|
|
71
|
+
* - `"always"` - Always prevent default on every press, including rapid repeats.
|
|
72
|
+
* No browser escape hatch.
|
|
73
|
+
*
|
|
74
|
+
* @default "never"
|
|
75
|
+
*/
|
|
76
|
+
preventDefault?: PreventDefaultMode;
|
|
77
|
+
/**
|
|
78
|
+
* Target element for the keyboard listener.
|
|
79
|
+
* Can be a ref to an HTMLElement or "window" for global shortcuts.
|
|
80
|
+
*
|
|
81
|
+
* @default "window"
|
|
82
|
+
*/
|
|
83
|
+
target?: RefObject<HTMLElement | null> | "window";
|
|
84
|
+
};
|
|
85
|
+
/**
|
|
86
|
+
* Detected platform for keyboard shortcut handling.
|
|
87
|
+
*/
|
|
88
|
+
export type Platform = "mac" | "windows" | "linux";
|
|
89
|
+
/**
|
|
90
|
+
* Information about a reserved shortcut.
|
|
91
|
+
*/
|
|
92
|
+
export type ReservedShortcutInfo = {
|
|
93
|
+
/** Human-readable name of the shortcut */
|
|
94
|
+
name: string;
|
|
95
|
+
/** The module/feature that owns this shortcut */
|
|
96
|
+
owner: string;
|
|
97
|
+
};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { ValidShortcutParam } from "./reservedShortcutTypes";
|
|
2
|
+
import { ShortcutDefinition, UseKeyboardShortcutOptions } from "./types";
|
|
3
|
+
/**
|
|
4
|
+
* Hook for handling keyboard shortcuts with platform-aware modifiers.
|
|
5
|
+
*
|
|
6
|
+
* Reserved shortcuts are blocked at the type level and will show specific error messages.
|
|
7
|
+
* There are two categories:
|
|
8
|
+
*
|
|
9
|
+
* **App-reserved** (host-level features):
|
|
10
|
+
* - mod+k: Global Search
|
|
11
|
+
* - mod+shift+l: Local Dev Mode Toggle
|
|
12
|
+
*
|
|
13
|
+
* **Browser-reserved** (native browser shortcuts):
|
|
14
|
+
* - Clipboard: mod+c (Copy), mod+v (Paste), mod+x (Cut), mod+a (Select All)
|
|
15
|
+
* - Undo/Redo: mod+z (Undo), mod+shift+z (Redo Mac), mod+y (Redo Win/Linux)
|
|
16
|
+
* - Find: mod+f (Find), mod+g (Find next), mod+shift+g (Find previous)
|
|
17
|
+
* - Navigation: mod+r (Reload), mod+shift+r (Hard reload), mod+t (New tab),
|
|
18
|
+
* mod+w (Close tab), mod+shift+t (Reopen tab), mod+n (New window),
|
|
19
|
+
* mod+shift+n (Incognito), mod+l (Address bar), mod+d (Bookmark)
|
|
20
|
+
* - Zoom: mod+= (Zoom in), mod+- (Zoom out), mod+0 (Reset zoom)
|
|
21
|
+
* - Other: mod+p (Print), mod+s (Save), mod+o (Open), mod+h (History/Hide),
|
|
22
|
+
* mod+j (Downloads), mod+q (Quit Mac)
|
|
23
|
+
*
|
|
24
|
+
* See reservedShortcutTypes.ts for the full list with error messages.
|
|
25
|
+
*
|
|
26
|
+
* @param shortcut - The shortcut definition with key and optional modifiers
|
|
27
|
+
* @param options - Configuration options for the shortcut handler
|
|
28
|
+
* @param options.onTrigger - Callback invoked when the shortcut is triggered
|
|
29
|
+
* @param options.disabled - Disable the shortcut conditionally (default: false)
|
|
30
|
+
* @param options.preventDefault - Controls browser default behavior:
|
|
31
|
+
* - `"never"` (default) - Browser handles the event normally
|
|
32
|
+
* - `"once"` - Prevent default, but rapid repeat (within 400ms) passes to browser
|
|
33
|
+
* - `"always"` - Always prevent default, no browser escape hatch
|
|
34
|
+
* @param options.target - Target element for the listener (default: "window")
|
|
35
|
+
* @returns {{ label: string }} Object containing the formatted shortcut label (e.g., "Cmd + K" on Mac)
|
|
36
|
+
* @example
|
|
37
|
+
* // Simple Escape key handler (no preventDefault)
|
|
38
|
+
* const { label } = useKeyboardShortcut(
|
|
39
|
+
* { key: "Escape" },
|
|
40
|
+
* { onTrigger: () => closeModal() }
|
|
41
|
+
* );
|
|
42
|
+
* // label = "Esc"
|
|
43
|
+
* @example
|
|
44
|
+
* // Always prevent default, allow rapid re-triggering
|
|
45
|
+
* const { label } = useKeyboardShortcut(
|
|
46
|
+
* { key: "m", modifiers: "mod" },
|
|
47
|
+
* {
|
|
48
|
+
* onTrigger: () => createNewItem(),
|
|
49
|
+
* preventDefault: "always",
|
|
50
|
+
* }
|
|
51
|
+
* );
|
|
52
|
+
* // label = "Cmd + M" (Mac) or "Ctrl + M" (Windows/Linux)
|
|
53
|
+
*/
|
|
54
|
+
export declare const useKeyboardShortcut: <const TShortcut extends ShortcutDefinition>(shortcut: TShortcut extends ValidShortcutParam<TShortcut> ? TShortcut : never, { onTrigger, disabled, preventDefault, target }: UseKeyboardShortcutOptions) => {
|
|
55
|
+
label: string;
|
|
56
|
+
};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { ReservedShortcutInfo, ShortcutDefinition } from "./types";
|
|
2
|
+
/**
|
|
3
|
+
* Information about shortcut conflicts.
|
|
4
|
+
*/
|
|
5
|
+
export type ShortcutConflictInfo = {
|
|
6
|
+
/** True if shortcut is reserved by the application */
|
|
7
|
+
isReserved: boolean;
|
|
8
|
+
/** Info about the reservation if reserved */
|
|
9
|
+
reservedInfo: ReservedShortcutInfo | undefined;
|
|
10
|
+
/** Browser action description if conflicts with browser shortcut */
|
|
11
|
+
browserConflict: string | undefined;
|
|
12
|
+
};
|
|
13
|
+
type UseShortcutConflictsOptions = {
|
|
14
|
+
/**
|
|
15
|
+
* If true, skip conflict checking and warnings.
|
|
16
|
+
*
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Hook for checking keyboard shortcut conflicts.
|
|
23
|
+
*
|
|
24
|
+
* This hook checks if a shortcut conflicts with:
|
|
25
|
+
* - Reserved application shortcuts (host-level features)
|
|
26
|
+
* - Browser shortcuts (that cannot be reliably overridden)
|
|
27
|
+
*
|
|
28
|
+
* In development mode, it logs a warning if the shortcut conflicts with
|
|
29
|
+
* browser shortcuts. Reserved shortcuts are blocked at the type level.
|
|
30
|
+
*
|
|
31
|
+
* @param shortcut - The shortcut definition to check
|
|
32
|
+
* @param options - Optional configuration
|
|
33
|
+
* @returns {ShortcutConflictInfo} Conflict information for the shortcut
|
|
34
|
+
* @example
|
|
35
|
+
* const conflicts = useShortcutConflicts({ key: "k", modifiers: "mod" });
|
|
36
|
+
* if (conflicts.isReserved) {
|
|
37
|
+
* console.log(`Reserved by: ${conflicts.reservedInfo?.owner}`);
|
|
38
|
+
* }
|
|
39
|
+
*/
|
|
40
|
+
export declare const useShortcutConflicts: (shortcut: ShortcutDefinition, options?: UseShortcutConflictsOptions) => ShortcutConflictInfo;
|
|
41
|
+
export {};
|
package/src/index.d.ts
CHANGED
|
@@ -117,6 +117,7 @@ export * from "./hooks/useInfiniteScroll";
|
|
|
117
117
|
export * from "./hooks/useIsFirstRender";
|
|
118
118
|
export * from "./hooks/useIsFullScreen";
|
|
119
119
|
export * from "./hooks/useIsTextTruncated";
|
|
120
|
+
export { useKeyboardShortcut } from "./hooks/useKeyboardShortcut/useKeyboardShortcut";
|
|
120
121
|
export * from "./hooks/useMeasure";
|
|
121
122
|
export * from "./hooks/useMergeRefs";
|
|
122
123
|
export * from "./hooks/useModifierKey";
|