@humanlayer/react-hotkeys-hook 5.2.4
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/LICENSE +21 -0
- package/README.md +223 -0
- package/package.json +52 -0
- package/packages/react-hotkeys-hook/dist/BoundHotkeysProxyProvider.d.ts +14 -0
- package/packages/react-hotkeys-hook/dist/HotkeysProvider.d.ts +16 -0
- package/packages/react-hotkeys-hook/dist/deepEqual.d.ts +1 -0
- package/packages/react-hotkeys-hook/dist/index.d.ts +6 -0
- package/packages/react-hotkeys-hook/dist/index.js +288 -0
- package/packages/react-hotkeys-hook/dist/isHotkeyPressed.d.ts +4 -0
- package/packages/react-hotkeys-hook/dist/parseHotkeys.d.ts +5 -0
- package/packages/react-hotkeys-hook/dist/types.d.ts +50 -0
- package/packages/react-hotkeys-hook/dist/useDeepEqualMemo.d.ts +1 -0
- package/packages/react-hotkeys-hook/dist/useHotkeys.d.ts +2 -0
- package/packages/react-hotkeys-hook/dist/useRecordHotkeys.d.ts +6 -0
- package/packages/react-hotkeys-hook/dist/validators.d.ts +8 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2018 Johannes Klauss
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
<hr>
|
|
2
|
+
<div align="center">
|
|
3
|
+
<h1 align="center">
|
|
4
|
+
useHotkeys(keys, callback)
|
|
5
|
+
</h1>
|
|
6
|
+
</div>
|
|
7
|
+
|
|
8
|
+
<p align="center">
|
|
9
|
+
<a href="https://bundlephobia.com/result?p=react-hotkeys-hook">
|
|
10
|
+
<img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/react-hotkeys-hook?style=for-the-badge&labelColor=24292e">
|
|
11
|
+
</a>
|
|
12
|
+
<a aria-label="Types" href="https://www.npmjs.com/package/react-hotkeys-hook">
|
|
13
|
+
<img alt="Types" src="https://img.shields.io/npm/types/react-hotkeys-hook?style=for-the-badge&labelColor=24292e">
|
|
14
|
+
</a>
|
|
15
|
+
<a aria-label="NPM version" href="https://www.npmjs.com/package/react-hotkeys-hook">
|
|
16
|
+
<img alt="NPM Version" src="https://img.shields.io/npm/v/react-hotkeys-hook?style=for-the-badge&labelColor=24292e">
|
|
17
|
+
</a>
|
|
18
|
+
<a aria-label="License" href="https://jaredlunde.mit-license.org/">
|
|
19
|
+
<img alt="MIT License" src="https://img.shields.io/npm/l/react-hotkeys-hook?style=for-the-badge&labelColor=24292e">
|
|
20
|
+
</a>
|
|
21
|
+
</p>
|
|
22
|
+
|
|
23
|
+
<p align="center">
|
|
24
|
+
<a aria-label="Sponsored by Spaceteams" href="https://spaceteams.de">
|
|
25
|
+
<img alt="Sponsored by Spaceteams" src="https://raw.githubusercontent.com/spaceteams/badges/main/sponsored-by-spaceteams.svg">
|
|
26
|
+
</a>
|
|
27
|
+
</p>
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
npm i react-hotkeys-hook
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
<p align="center">
|
|
34
|
+
A React hook for using keyboard shortcuts in components in a declarative way.
|
|
35
|
+
</p>
|
|
36
|
+
|
|
37
|
+
<hr>
|
|
38
|
+
|
|
39
|
+
## Quick Start
|
|
40
|
+
|
|
41
|
+
The easiest way to use the hook.
|
|
42
|
+
|
|
43
|
+
```jsx harmony
|
|
44
|
+
import { useHotkeys } from 'react-hotkeys-hook'
|
|
45
|
+
|
|
46
|
+
export const ExampleComponent = () => {
|
|
47
|
+
const [count, setCount] = useState(0)
|
|
48
|
+
useHotkeys('ctrl+k', () => setCount(count + 1), [count])
|
|
49
|
+
|
|
50
|
+
return (
|
|
51
|
+
<p>
|
|
52
|
+
Pressed {count} times.
|
|
53
|
+
</p>
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Scopes
|
|
59
|
+
|
|
60
|
+
Scopes allow you to group hotkeys together. You can use scopes to prevent hotkeys from colliding with each other.
|
|
61
|
+
|
|
62
|
+
```jsx harmony
|
|
63
|
+
const App = () => {
|
|
64
|
+
return (
|
|
65
|
+
<HotkeysProvider initiallyActiveScopes={['settings']}>
|
|
66
|
+
<ExampleComponent />
|
|
67
|
+
</HotkeysProvider>
|
|
68
|
+
)
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export const ExampleComponent = () => {
|
|
72
|
+
const [count, setCount] = useState(0)
|
|
73
|
+
useHotkeys('ctrl+k', () => setCount(prevCount => prevCount + 1), { scopes: ['settings'] })
|
|
74
|
+
|
|
75
|
+
return (
|
|
76
|
+
<p>
|
|
77
|
+
Pressed {count} times.
|
|
78
|
+
</p>
|
|
79
|
+
)
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
#### Changing a scope's active state
|
|
84
|
+
|
|
85
|
+
You can change the active state of a scope using the `disableScope`, `enableScope` and `toggleScope` functions
|
|
86
|
+
returned by the `useHotkeysContext()` hook. Note that you have to have your app wrapped in a `<HotkeysProvider>` component.
|
|
87
|
+
|
|
88
|
+
```jsx harmony
|
|
89
|
+
const App = () => {
|
|
90
|
+
return (
|
|
91
|
+
<HotkeysProvider initiallyActiveScopes={['settings']}>
|
|
92
|
+
<ExampleComponent />
|
|
93
|
+
</HotkeysProvider>
|
|
94
|
+
)
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
export const ExampleComponent = () => {
|
|
98
|
+
const { toggleScope } = useHotkeysContext()
|
|
99
|
+
|
|
100
|
+
return (
|
|
101
|
+
<button onClick={() => toggleScope('settings')}>
|
|
102
|
+
Change scope active state
|
|
103
|
+
</button>
|
|
104
|
+
)
|
|
105
|
+
}
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Focus trap
|
|
109
|
+
|
|
110
|
+
This will only trigger the hotkey if the component is focused.
|
|
111
|
+
|
|
112
|
+
```tsx harmony
|
|
113
|
+
export const ExampleComponent = () => {
|
|
114
|
+
const [count, setCount] = useState(0)
|
|
115
|
+
const ref = useHotkeys<HTMLParagraphElement>('ctrl+k', () => setCount(prevCount => prevCount + 1))
|
|
116
|
+
|
|
117
|
+
return (
|
|
118
|
+
<p tabIndex={-1} ref={ref}>
|
|
119
|
+
Pressed {count} times.
|
|
120
|
+
</p>
|
|
121
|
+
)
|
|
122
|
+
}
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
## Documentation & Live Examples
|
|
126
|
+
|
|
127
|
+
* [Quick Start](https://react-hotkeys-hook.vercel.app/docs/intro)
|
|
128
|
+
* [Documentation](https://react-hotkeys-hook.vercel.app/docs/documentation/installation)
|
|
129
|
+
* [API](https://react-hotkeys-hook.vercel.app/docs/api/use-hotkeys)
|
|
130
|
+
|
|
131
|
+
## API
|
|
132
|
+
|
|
133
|
+
### useHotkeys(keys, callback)
|
|
134
|
+
|
|
135
|
+
```typescript
|
|
136
|
+
useHotkeys(keys: string | string[], callback: (event: KeyboardEvent, handler: HotkeysEvent) => void, options: Options = {}, deps: DependencyList = [])
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
| Parameter | Type | Required? | Default value | Description |
|
|
140
|
+
|---------------|---------------------------------------------------------|-----------|---------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
141
|
+
| `keys` | `string` or `string[]` | required | - | set the hotkeys you want the hook to listen to. You can use single or multiple keys, modifier combinations, etc. This will either be a string or an array of strings. To separate multiple keys, use a comma. This split key value can be overridden with the `splitKey` option. |
|
|
142
|
+
| `callback` | `(event: KeyboardEvent, handler: HotkeysEvent) => void` | required | - | This is the callback function that will be called when the hotkey is pressed. The callback will receive the browsers native `KeyboardEvent` and the libraries `HotkeysEvent`. |
|
|
143
|
+
| `options` | `Options` | optional | `{}` | Object to modify the behavior of the hook. Default options are given below. |
|
|
144
|
+
| `dependencies` | `DependencyList` | optional | `[]` | The given callback will always be memoised inside the hook. So if you reference any outside variables, you need to set them here for the callback to get updated (Much like `useCallback` works in React). |
|
|
145
|
+
|
|
146
|
+
### Options
|
|
147
|
+
|
|
148
|
+
All options are optional and have a default value which you can override to change the behavior of the hook.
|
|
149
|
+
|
|
150
|
+
| Option | Type | Default value | Description |
|
|
151
|
+
|--------------------------|--------------------------------------------------------------------------------------|---------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
152
|
+
| `enabled` | `boolean` or `(keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => boolean` | `true` | This option determines whether the hotkey is active or not. It can take a boolean (for example a flag from a state outside) or a function which gets executed once the hotkey is pressed. If the function returns `false` the hotkey won't get executed and all browser events are prevented. |
|
|
153
|
+
| `enableOnFormTags` | `boolean` or `FormTags[]` | `false` | By default hotkeys are not registered if a focus focuses on an input field. This will prevent accidental triggering of hotkeys when the user is typing. If you want to enable hotkeys, use this option. Setting it to true will enable on all form tags, otherwise you can give an array of form tags to enable the hotkey on (possible options are: `['input', 'textarea', 'select']`) |
|
|
154
|
+
| `enableOnContentEditable` | `boolean` | `false` | Set this option to enable hotkeys on tags that have set the `contentEditable` prop to `true` |
|
|
155
|
+
| `combinationKey` | `string` | `+` | Character to indicate keystrokes like `shift+c`. You might want to change this if you want to listen to the `+` character like `ctrl-+`. |
|
|
156
|
+
| `splitKey` | `string` | `,` | Character to separate different keystrokes like `ctrl+a, ctrl+b`. |
|
|
157
|
+
| `scopes` | `string` or `string[]` | `*` | With scopes you can group hotkeys together. The default scope is the wildcard `*` which matches all hotkeys. Use the `<HotkeysProvider>` component to change active scopes. |
|
|
158
|
+
| `keyup` | `boolean` | `false` | Determines whether to listen to the browsers `keyup` event for triggering the callback. |
|
|
159
|
+
| `keydown` | `boolean` | `true` | Determines whether to listen to the browsers `keydown` event for triggering the callback. If you set both `keyup`and `keydown` to true, the callback will trigger on both events. |
|
|
160
|
+
| `preventDefault` | `boolean` or `(keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => boolean` | `false` | Set this to a `true` if you want the hook to prevent the browsers default behavior on certain keystrokes like `meta+s` to save a page. NOTE: Certain keystrokes are not preventable, like `meta+w` to close a tab in chrome. |
|
|
161
|
+
| `description` | `string` | `undefined` | Use this option to describe what the hotkey does. this is helpful if you want to display a list of active hotkeys to the user. |
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
#### Overloads
|
|
165
|
+
|
|
166
|
+
The hooks call signature is very flexible. For example if you don't need to set any special options you can use the dependency
|
|
167
|
+
array as your third parameter:
|
|
168
|
+
|
|
169
|
+
`useHotkeys('ctrl+k', () => console.log(counter + 1), [counter])`
|
|
170
|
+
|
|
171
|
+
### `isHotkeyPressed(keys: string | string[], splitKey?: string = ',')`
|
|
172
|
+
|
|
173
|
+
This function allows us to check if the user is currently pressing down a key.
|
|
174
|
+
|
|
175
|
+
```ts
|
|
176
|
+
import { isHotkeyPressed } from 'react-hotkeys-hook'
|
|
177
|
+
|
|
178
|
+
isHotkeyPressed('esc') // Returns true if Escape key is pressed down.
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
You can also check for multiple keys at the same time:
|
|
182
|
+
|
|
183
|
+
```ts
|
|
184
|
+
isHotkeyPressed(['esc', 'ctrl+s']) // Returns true if Escape or Ctrl+S are pressed down.
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
## Support
|
|
188
|
+
|
|
189
|
+
* Ask your question in the [Github Discussions]([Support](https://github.com/JohannesKlauss/react-hotkeys-hook/discussions))
|
|
190
|
+
* Ask your question on [StackOverflow](https://stackoverflow.com/search?page=1&tab=Relevance&q=react-hotkeys-hook)
|
|
191
|
+
|
|
192
|
+
## Found an issue or have a feature request?
|
|
193
|
+
|
|
194
|
+
Open up an [issue](https://github.com/JohannesKlauss/react-hotkeys-hook/issues/new)
|
|
195
|
+
or [pull request](https://github.com/JohannesKlauss/react-hotkeys-hook/compare) and participate.
|
|
196
|
+
|
|
197
|
+
## Local Development
|
|
198
|
+
|
|
199
|
+
Checkout this repo, run `yarn` or `npm i` and then run the `test` script to test the behavior of the hook.
|
|
200
|
+
|
|
201
|
+
## Contributing
|
|
202
|
+
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
|
|
203
|
+
|
|
204
|
+
1. Fork the Project
|
|
205
|
+
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
|
|
206
|
+
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
|
|
207
|
+
4. Push to the Branch (`git push origin feature/AmazingFeature`)
|
|
208
|
+
5. Open a Pull Request
|
|
209
|
+
|
|
210
|
+
## License
|
|
211
|
+
Distributed under the MIT License. See `LICENSE` for more information.
|
|
212
|
+
|
|
213
|
+
## Contact
|
|
214
|
+
|
|
215
|
+
Johannes Klauss - [@JohannesKlauss](https://github.com/JohannesKlauss) - klauss.johannes@gmail.com
|
|
216
|
+
|
|
217
|
+
Project Link: [https://github.com/JohannesKlauss/react-hotkeys-hook](https://github.com/JohannesKlauss/react-hotkeys-hook)
|
|
218
|
+
|
|
219
|
+
## Contributors
|
|
220
|
+
|
|
221
|
+
<a href="https://github.com/johannesklauss/react-hotkeys-hook/graphs/contributors">
|
|
222
|
+
<img src="https://contrib.rocks/image?repo=johannesklauss/react-hotkeys-hook" />
|
|
223
|
+
</a>
|
package/package.json
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@humanlayer/react-hotkeys-hook",
|
|
3
|
+
"description": "React hook for handling keyboard shortcuts (HumanLayer fork)",
|
|
4
|
+
"version": "5.2.4",
|
|
5
|
+
"sideEffects": false,
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/humanlayer/react-hotkeys-hook.git"
|
|
9
|
+
},
|
|
10
|
+
"homepage": "https://github.com/humanlayer/react-hotkeys-hook",
|
|
11
|
+
"author": "Johannes Klauss",
|
|
12
|
+
"type": "module",
|
|
13
|
+
"main": "packages/react-hotkeys-hook/dist/index.js",
|
|
14
|
+
"types": "packages/react-hotkeys-hook/dist/index.d.ts",
|
|
15
|
+
"files": [
|
|
16
|
+
"packages/react-hotkeys-hook/dist"
|
|
17
|
+
],
|
|
18
|
+
"keywords": [
|
|
19
|
+
"react",
|
|
20
|
+
"hook",
|
|
21
|
+
"hooks",
|
|
22
|
+
"component",
|
|
23
|
+
"hotkey",
|
|
24
|
+
"shortcut",
|
|
25
|
+
"keyboard",
|
|
26
|
+
"shortcuts",
|
|
27
|
+
"keypress",
|
|
28
|
+
"hotkeys"
|
|
29
|
+
],
|
|
30
|
+
"license": "MIT",
|
|
31
|
+
"scripts": {
|
|
32
|
+
"build": "npm run -w packages/react-hotkeys-hook build",
|
|
33
|
+
"build:documentation": "npm run -w packages/documentation build",
|
|
34
|
+
"test": "npm run -w packages/react-hotkeys-hook test",
|
|
35
|
+
"prepack": "npm run build",
|
|
36
|
+
"format": "npx @biomejs/biome format --write packages",
|
|
37
|
+
"lint": "npx @biomejs/biome lint --write packages"
|
|
38
|
+
},
|
|
39
|
+
"workspaces": [
|
|
40
|
+
"packages/*"
|
|
41
|
+
],
|
|
42
|
+
"peerDependencies": {
|
|
43
|
+
"react": ">=16.8.0",
|
|
44
|
+
"react-dom": ">=16.8.0"
|
|
45
|
+
},
|
|
46
|
+
"publishConfig": {
|
|
47
|
+
"access": "public"
|
|
48
|
+
},
|
|
49
|
+
"devDependencies": {
|
|
50
|
+
"@biomejs/biome": "2.3.11"
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { Hotkey } from './types';
|
|
3
|
+
type BoundHotkeysProxyProviderType = {
|
|
4
|
+
addHotkey: (hotkey: Hotkey) => void;
|
|
5
|
+
removeHotkey: (hotkey: Hotkey) => void;
|
|
6
|
+
};
|
|
7
|
+
export declare const useBoundHotkeysProxy: () => BoundHotkeysProxyProviderType | undefined;
|
|
8
|
+
interface Props {
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
addHotkey: (hotkey: Hotkey) => void;
|
|
11
|
+
removeHotkey: (hotkey: Hotkey) => void;
|
|
12
|
+
}
|
|
13
|
+
export default function BoundHotkeysProxyProviderProvider({ addHotkey, removeHotkey, children }: Props): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { Hotkey } from './types';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
export type HotkeysContextType = {
|
|
4
|
+
hotkeys: ReadonlyArray<Hotkey>;
|
|
5
|
+
activeScopes: string[];
|
|
6
|
+
toggleScope: (scope: string) => void;
|
|
7
|
+
enableScope: (scope: string) => void;
|
|
8
|
+
disableScope: (scope: string) => void;
|
|
9
|
+
};
|
|
10
|
+
export declare const useHotkeysContext: () => HotkeysContextType;
|
|
11
|
+
interface Props {
|
|
12
|
+
initiallyActiveScopes?: string[];
|
|
13
|
+
children: ReactNode;
|
|
14
|
+
}
|
|
15
|
+
export declare const HotkeysProvider: ({ initiallyActiveScopes, children }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function deepEqual(x?: unknown, y?: unknown): boolean;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { default as useHotkeys } from './useHotkeys';
|
|
2
|
+
import { Options, Keys, HotkeyCallback } from './types';
|
|
3
|
+
import { HotkeysProvider, useHotkeysContext } from './HotkeysProvider';
|
|
4
|
+
import { isHotkeyPressed } from './isHotkeyPressed';
|
|
5
|
+
import { default as useRecordHotkeys } from './useRecordHotkeys';
|
|
6
|
+
export { useHotkeys, useRecordHotkeys, useHotkeysContext, isHotkeyPressed, HotkeysProvider, type Options, type Keys, type HotkeyCallback, };
|
|
@@ -0,0 +1,288 @@
|
|
|
1
|
+
import { createContext as T, useContext as M, useState as A, useCallback as w, useRef as S, useLayoutEffect as z, useEffect as J } from "react";
|
|
2
|
+
import { jsx as b } from "react/jsx-runtime";
|
|
3
|
+
const j = ["shift", "alt", "meta", "mod", "ctrl", "control"], Q = {
|
|
4
|
+
esc: "escape",
|
|
5
|
+
return: "enter",
|
|
6
|
+
left: "arrowleft",
|
|
7
|
+
right: "arrowright",
|
|
8
|
+
up: "arrowup",
|
|
9
|
+
down: "arrowdown",
|
|
10
|
+
ShiftLeft: "shift",
|
|
11
|
+
ShiftRight: "shift",
|
|
12
|
+
AltLeft: "alt",
|
|
13
|
+
AltRight: "alt",
|
|
14
|
+
MetaLeft: "meta",
|
|
15
|
+
MetaRight: "meta",
|
|
16
|
+
OSLeft: "meta",
|
|
17
|
+
OSRight: "meta",
|
|
18
|
+
ControlLeft: "ctrl",
|
|
19
|
+
ControlRight: "ctrl"
|
|
20
|
+
};
|
|
21
|
+
function K(e) {
|
|
22
|
+
return (Q[e.trim()] || e.trim()).toLowerCase().replace(/key|digit|numpad/, "");
|
|
23
|
+
}
|
|
24
|
+
function D(e) {
|
|
25
|
+
return j.includes(e);
|
|
26
|
+
}
|
|
27
|
+
function H(e, r = ",") {
|
|
28
|
+
return e.toLowerCase().split(r);
|
|
29
|
+
}
|
|
30
|
+
function P(e, r = "+", o = ">", i = !1, c, a) {
|
|
31
|
+
let n = [], y = !1;
|
|
32
|
+
e = e.trim(), e.includes(o) ? (y = !0, n = e.toLocaleLowerCase().split(o).map((f) => K(f))) : n = e.toLocaleLowerCase().split(r).map((f) => K(f));
|
|
33
|
+
const u = {
|
|
34
|
+
alt: n.includes("alt"),
|
|
35
|
+
ctrl: n.includes("ctrl") || n.includes("control"),
|
|
36
|
+
shift: n.includes("shift"),
|
|
37
|
+
meta: n.includes("meta"),
|
|
38
|
+
mod: n.includes("mod"),
|
|
39
|
+
useKey: i
|
|
40
|
+
}, l = n.filter((f) => !j.includes(f));
|
|
41
|
+
return {
|
|
42
|
+
...u,
|
|
43
|
+
keys: l,
|
|
44
|
+
description: c,
|
|
45
|
+
isSequence: y,
|
|
46
|
+
hotkey: e,
|
|
47
|
+
metadata: a
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
typeof document < "u" && (document.addEventListener("keydown", (e) => {
|
|
51
|
+
e.code !== void 0 && _([K(e.code)]);
|
|
52
|
+
}), document.addEventListener("keyup", (e) => {
|
|
53
|
+
e.code !== void 0 && I([K(e.code)]);
|
|
54
|
+
})), typeof window < "u" && (window.addEventListener("blur", () => {
|
|
55
|
+
L.clear();
|
|
56
|
+
}), window.addEventListener("contextmenu", () => {
|
|
57
|
+
setTimeout(() => {
|
|
58
|
+
L.clear();
|
|
59
|
+
}, 0);
|
|
60
|
+
}));
|
|
61
|
+
const L = /* @__PURE__ */ new Set();
|
|
62
|
+
function R(e) {
|
|
63
|
+
return Array.isArray(e);
|
|
64
|
+
}
|
|
65
|
+
function U(e, r = ",") {
|
|
66
|
+
return (R(e) ? e : e.split(r)).every((i) => L.has(i.trim().toLowerCase()));
|
|
67
|
+
}
|
|
68
|
+
function _(e) {
|
|
69
|
+
const r = Array.isArray(e) ? e : [e];
|
|
70
|
+
L.has("meta") && L.forEach((o) => {
|
|
71
|
+
D(o) || L.delete(o.toLowerCase());
|
|
72
|
+
}), r.forEach((o) => {
|
|
73
|
+
L.add(o.toLowerCase());
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
function I(e) {
|
|
77
|
+
const r = Array.isArray(e) ? e : [e];
|
|
78
|
+
e === "meta" ? L.clear() : r.forEach((o) => {
|
|
79
|
+
L.delete(o.toLowerCase());
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
function V(e, r, o) {
|
|
83
|
+
(typeof o == "function" && o(e, r) || o === !0) && e.preventDefault();
|
|
84
|
+
}
|
|
85
|
+
function X(e, r, o) {
|
|
86
|
+
return typeof o == "function" ? o(e, r) : o === !0 || o === void 0;
|
|
87
|
+
}
|
|
88
|
+
const Y = [
|
|
89
|
+
"input",
|
|
90
|
+
"textarea",
|
|
91
|
+
"select",
|
|
92
|
+
"searchbox",
|
|
93
|
+
"slider",
|
|
94
|
+
"spinbutton",
|
|
95
|
+
"menuitem",
|
|
96
|
+
"menuitemcheckbox",
|
|
97
|
+
"menuitemradio",
|
|
98
|
+
"option",
|
|
99
|
+
"radio",
|
|
100
|
+
"textbox"
|
|
101
|
+
];
|
|
102
|
+
function Z(e) {
|
|
103
|
+
return F(e, Y);
|
|
104
|
+
}
|
|
105
|
+
function F(e, r = !1) {
|
|
106
|
+
const { target: o, composed: i } = e;
|
|
107
|
+
let c, a;
|
|
108
|
+
return ee(o) && i ? (c = e.composedPath()[0] && e.composedPath()[0].tagName, a = e.composedPath()[0] && e.composedPath()[0].role) : (c = o && o.tagName, a = o && o.role), R(r) ? !!(c && r && r.some((n) => n.toLowerCase() === c.toLowerCase() || n === a)) : !!(c && r && r);
|
|
109
|
+
}
|
|
110
|
+
function ee(e) {
|
|
111
|
+
return !!e.tagName && !e.tagName.startsWith("-") && e.tagName.includes("-");
|
|
112
|
+
}
|
|
113
|
+
function te(e, r) {
|
|
114
|
+
return e.length === 0 && r ? !1 : r ? e.some((o) => r.includes(o)) || e.includes("*") : !0;
|
|
115
|
+
}
|
|
116
|
+
const re = (e, r, o = !1) => {
|
|
117
|
+
const { alt: i, meta: c, mod: a, shift: n, ctrl: y, keys: u, useKey: l } = r, { code: f, key: t, ctrlKey: d, metaKey: m, shiftKey: g, altKey: k } = e, p = K(f);
|
|
118
|
+
if (!l && !u?.includes(p) && !["ctrl", "control", "unknown", "meta", "alt", "shift", "os"].includes(p))
|
|
119
|
+
return !1;
|
|
120
|
+
if (!o) {
|
|
121
|
+
if (i !== k && p !== "alt" || n !== g && p !== "shift")
|
|
122
|
+
return !1;
|
|
123
|
+
if (a) {
|
|
124
|
+
if (!m && !d)
|
|
125
|
+
return !1;
|
|
126
|
+
} else if (c !== m && p !== "meta" && p !== "os" || y !== d && p !== "ctrl" && p !== "control")
|
|
127
|
+
return !1;
|
|
128
|
+
}
|
|
129
|
+
return l && u?.length === 1 && u.includes(t.toLowerCase()) || u && u.length === 1 && u.includes(p) ? !0 : u && u.length > 0 ? u.includes(p) ? U(u) : !1 : !u || u.length === 0;
|
|
130
|
+
}, $ = T(void 0), oe = () => M($);
|
|
131
|
+
function ne({ addHotkey: e, removeHotkey: r, children: o }) {
|
|
132
|
+
return /* @__PURE__ */ b($.Provider, { value: { addHotkey: e, removeHotkey: r }, children: o });
|
|
133
|
+
}
|
|
134
|
+
function x(e, r) {
|
|
135
|
+
return e && r && typeof e == "object" && typeof r == "object" ? Object.keys(e).length === Object.keys(r).length && // @ts-expect-error TS7053
|
|
136
|
+
Object.keys(e).reduce((o, i) => o && x(e[i], r[i]), !0) : e === r;
|
|
137
|
+
}
|
|
138
|
+
const W = T({
|
|
139
|
+
hotkeys: [],
|
|
140
|
+
activeScopes: [],
|
|
141
|
+
// This array has to be empty instead of containing '*' as default, to check if the provider is set or not
|
|
142
|
+
toggleScope: () => {
|
|
143
|
+
},
|
|
144
|
+
enableScope: () => {
|
|
145
|
+
},
|
|
146
|
+
disableScope: () => {
|
|
147
|
+
}
|
|
148
|
+
}), se = () => M(W), de = ({ initiallyActiveScopes: e = ["*"], children: r }) => {
|
|
149
|
+
const [o, i] = A(e), [c, a] = A([]), n = w((t) => {
|
|
150
|
+
i((d) => d.includes("*") ? [t] : Array.from(/* @__PURE__ */ new Set([...d, t])));
|
|
151
|
+
}, []), y = w((t) => {
|
|
152
|
+
i((d) => d.filter((m) => m !== t));
|
|
153
|
+
}, []), u = w((t) => {
|
|
154
|
+
i((d) => d.includes(t) ? d.filter((m) => m !== t) : d.includes("*") ? [t] : Array.from(/* @__PURE__ */ new Set([...d, t])));
|
|
155
|
+
}, []), l = w((t) => {
|
|
156
|
+
a((d) => [...d, t]);
|
|
157
|
+
}, []), f = w((t) => {
|
|
158
|
+
a((d) => d.filter((m) => !x(m, t)));
|
|
159
|
+
}, []);
|
|
160
|
+
return /* @__PURE__ */ b(
|
|
161
|
+
W.Provider,
|
|
162
|
+
{
|
|
163
|
+
value: { activeScopes: o, hotkeys: c, enableScope: n, disableScope: y, toggleScope: u },
|
|
164
|
+
children: /* @__PURE__ */ b(ne, { addHotkey: l, removeHotkey: f, children: r })
|
|
165
|
+
}
|
|
166
|
+
);
|
|
167
|
+
};
|
|
168
|
+
function ie(e) {
|
|
169
|
+
const r = S(void 0);
|
|
170
|
+
return x(r.current, e) || (r.current = e), r.current;
|
|
171
|
+
}
|
|
172
|
+
const N = (e) => {
|
|
173
|
+
e.stopPropagation(), e.preventDefault(), e.stopImmediatePropagation();
|
|
174
|
+
}, ce = typeof window < "u" ? z : J;
|
|
175
|
+
function fe(e, r, o, i) {
|
|
176
|
+
const c = S(null), a = S(!1), n = Array.isArray(o) ? Array.isArray(i) ? void 0 : i : o, y = R(e) ? e.join(n?.delimiter) : e, u = Array.isArray(o) ? o : Array.isArray(i) ? i : void 0, l = w(r, u ?? []), f = S(l);
|
|
177
|
+
u ? f.current = l : f.current = r;
|
|
178
|
+
const t = ie(n), { activeScopes: d } = se(), m = oe();
|
|
179
|
+
return ce(() => {
|
|
180
|
+
if (t?.enabled === !1 || !te(d, t?.scopes))
|
|
181
|
+
return;
|
|
182
|
+
let g = [], k;
|
|
183
|
+
const p = (s, B = !1) => {
|
|
184
|
+
if (!(Z(s) && !F(s, t?.enableOnFormTags))) {
|
|
185
|
+
if (c.current !== null) {
|
|
186
|
+
const v = c.current.getRootNode();
|
|
187
|
+
if ((v instanceof Document || v instanceof ShadowRoot) && v.activeElement !== c.current && !c.current.contains(v.activeElement)) {
|
|
188
|
+
N(s);
|
|
189
|
+
return;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
s.target?.isContentEditable && !t?.enableOnContentEditable || H(y, t?.delimiter).forEach((v) => {
|
|
193
|
+
if (v.includes(t?.splitKey ?? "+") && v.includes(t?.sequenceSplitKey ?? ">")) {
|
|
194
|
+
console.warn(
|
|
195
|
+
`Hotkey ${v} contains both ${t?.splitKey ?? "+"} and ${t?.sequenceSplitKey ?? ">"} which is not supported.`
|
|
196
|
+
);
|
|
197
|
+
return;
|
|
198
|
+
}
|
|
199
|
+
const h = P(
|
|
200
|
+
v,
|
|
201
|
+
t?.splitKey,
|
|
202
|
+
t?.sequenceSplitKey,
|
|
203
|
+
t?.useKey,
|
|
204
|
+
t?.description,
|
|
205
|
+
t?.metadata
|
|
206
|
+
);
|
|
207
|
+
if (h.isSequence) {
|
|
208
|
+
k = setTimeout(() => {
|
|
209
|
+
g = [];
|
|
210
|
+
}, t?.sequenceTimeoutMs ?? 1e3);
|
|
211
|
+
const C = h.useKey ? s.key : K(s.code);
|
|
212
|
+
if (D(C.toLowerCase()))
|
|
213
|
+
return;
|
|
214
|
+
g.push(C);
|
|
215
|
+
const G = h.keys?.[g.length - 1];
|
|
216
|
+
if (C !== G) {
|
|
217
|
+
g = [], k && clearTimeout(k);
|
|
218
|
+
return;
|
|
219
|
+
}
|
|
220
|
+
g.length === h.keys?.length && (f.current(s, h), k && clearTimeout(k), g = []);
|
|
221
|
+
} else if (re(s, h, t?.ignoreModifiers) || h.keys?.includes("*")) {
|
|
222
|
+
if (t?.ignoreEventWhen?.(s) || B && a.current)
|
|
223
|
+
return;
|
|
224
|
+
if (V(s, h, t?.preventDefault), !X(s, h, t?.enabled)) {
|
|
225
|
+
N(s);
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
228
|
+
f.current(s, h), B || (a.current = !0);
|
|
229
|
+
}
|
|
230
|
+
});
|
|
231
|
+
}
|
|
232
|
+
}, O = (s) => {
|
|
233
|
+
s.code !== void 0 && (_(K(s.code)), (t?.keydown === void 0 && t?.keyup !== !0 || t?.keydown) && p(s));
|
|
234
|
+
}, q = (s) => {
|
|
235
|
+
s.code !== void 0 && (I(K(s.code)), a.current = !1, t?.keyup && p(s, !0));
|
|
236
|
+
}, E = c.current || n?.document || document;
|
|
237
|
+
return E.addEventListener("keyup", q, n?.eventListenerOptions), E.addEventListener("keydown", O, n?.eventListenerOptions), m && H(y, t?.delimiter).forEach((s) => {
|
|
238
|
+
m.addHotkey(
|
|
239
|
+
P(
|
|
240
|
+
s,
|
|
241
|
+
t?.splitKey,
|
|
242
|
+
t?.sequenceSplitKey,
|
|
243
|
+
t?.useKey,
|
|
244
|
+
t?.description,
|
|
245
|
+
t?.metadata
|
|
246
|
+
)
|
|
247
|
+
);
|
|
248
|
+
}), () => {
|
|
249
|
+
E.removeEventListener("keyup", q, n?.eventListenerOptions), E.removeEventListener("keydown", O, n?.eventListenerOptions), m && H(y, t?.delimiter).forEach((s) => {
|
|
250
|
+
m.removeHotkey(
|
|
251
|
+
P(
|
|
252
|
+
s,
|
|
253
|
+
t?.splitKey,
|
|
254
|
+
t?.sequenceSplitKey,
|
|
255
|
+
t?.useKey,
|
|
256
|
+
t?.description,
|
|
257
|
+
t?.metadata
|
|
258
|
+
)
|
|
259
|
+
);
|
|
260
|
+
}), g = [], k && clearTimeout(k);
|
|
261
|
+
};
|
|
262
|
+
}, [y, t, d]), c;
|
|
263
|
+
}
|
|
264
|
+
function le(e = !1) {
|
|
265
|
+
const [r, o] = A(/* @__PURE__ */ new Set()), [i, c] = A(!1), a = w(
|
|
266
|
+
(l) => {
|
|
267
|
+
l.code !== void 0 && (l.preventDefault(), l.stopPropagation(), o((f) => {
|
|
268
|
+
const t = new Set(f);
|
|
269
|
+
return t.add(K(e ? l.key : l.code)), t;
|
|
270
|
+
}));
|
|
271
|
+
},
|
|
272
|
+
[e]
|
|
273
|
+
), n = w(() => {
|
|
274
|
+
typeof document < "u" && (document.removeEventListener("keydown", a), c(!1));
|
|
275
|
+
}, [a]), y = w(() => {
|
|
276
|
+
o(/* @__PURE__ */ new Set()), typeof document < "u" && (n(), document.addEventListener("keydown", a), c(!0));
|
|
277
|
+
}, [a, n]), u = w(() => {
|
|
278
|
+
o(/* @__PURE__ */ new Set());
|
|
279
|
+
}, []);
|
|
280
|
+
return [r, { start: y, stop: n, resetKeys: u, isRecording: i }];
|
|
281
|
+
}
|
|
282
|
+
export {
|
|
283
|
+
de as HotkeysProvider,
|
|
284
|
+
U as isHotkeyPressed,
|
|
285
|
+
fe as useHotkeys,
|
|
286
|
+
se as useHotkeysContext,
|
|
287
|
+
le as useRecordHotkeys
|
|
288
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare function isReadonlyArray(value: unknown): value is readonly unknown[];
|
|
2
|
+
export declare function isHotkeyPressed(key: string | readonly string[], delimiter?: string): boolean;
|
|
3
|
+
export declare function pushToCurrentlyPressedKeys(key: string | string[]): void;
|
|
4
|
+
export declare function removeFromCurrentlyPressedKeys(key: string | string[]): void;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Hotkey } from './types';
|
|
2
|
+
export declare function mapCode(key: string): string;
|
|
3
|
+
export declare function isHotkeyModifier(key: string): boolean;
|
|
4
|
+
export declare function parseKeysHookInput(keys: string, delimiter?: string): string[];
|
|
5
|
+
export declare function parseHotkey(hotkey: string, splitKey?: string, sequenceSplitKey?: string, useKey?: boolean, description?: string, metadata?: Record<string, unknown>): Hotkey;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { DependencyList } from 'react';
|
|
2
|
+
export type FormTags = 'input' | 'textarea' | 'select' | 'INPUT' | 'TEXTAREA' | 'SELECT' | 'searchbox' | 'slider' | 'spinbutton' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'radio' | 'textbox';
|
|
3
|
+
export type Keys = string | readonly string[];
|
|
4
|
+
export type Scopes = string | readonly string[];
|
|
5
|
+
export type EventListenerOptions = {
|
|
6
|
+
capture?: boolean;
|
|
7
|
+
once?: boolean;
|
|
8
|
+
passive?: boolean;
|
|
9
|
+
signal?: AbortSignal;
|
|
10
|
+
} | boolean;
|
|
11
|
+
export type KeyboardModifiers = {
|
|
12
|
+
alt?: boolean;
|
|
13
|
+
ctrl?: boolean;
|
|
14
|
+
meta?: boolean;
|
|
15
|
+
shift?: boolean;
|
|
16
|
+
mod?: boolean;
|
|
17
|
+
useKey?: boolean;
|
|
18
|
+
};
|
|
19
|
+
export type Hotkey = KeyboardModifiers & {
|
|
20
|
+
keys?: readonly string[];
|
|
21
|
+
scopes?: Scopes;
|
|
22
|
+
description?: string;
|
|
23
|
+
isSequence?: boolean;
|
|
24
|
+
hotkey: string;
|
|
25
|
+
metadata?: Record<string, unknown>;
|
|
26
|
+
};
|
|
27
|
+
export type HotkeysEvent = Hotkey;
|
|
28
|
+
export type HotkeyCallback = (keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => void;
|
|
29
|
+
export type Trigger = boolean | ((keyboardEvent: KeyboardEvent, hotkeysEvent: HotkeysEvent) => boolean);
|
|
30
|
+
export type Options = {
|
|
31
|
+
enabled?: Trigger;
|
|
32
|
+
enableOnFormTags?: readonly FormTags[] | boolean;
|
|
33
|
+
enableOnContentEditable?: boolean;
|
|
34
|
+
ignoreEventWhen?: (e: KeyboardEvent) => boolean;
|
|
35
|
+
splitKey?: string;
|
|
36
|
+
delimiter?: string;
|
|
37
|
+
scopes?: Scopes;
|
|
38
|
+
keyup?: boolean;
|
|
39
|
+
keydown?: boolean;
|
|
40
|
+
preventDefault?: Trigger;
|
|
41
|
+
description?: string;
|
|
42
|
+
document?: Document;
|
|
43
|
+
ignoreModifiers?: boolean;
|
|
44
|
+
eventListenerOptions?: EventListenerOptions;
|
|
45
|
+
useKey?: boolean;
|
|
46
|
+
sequenceTimeoutMs?: number;
|
|
47
|
+
sequenceSplitKey?: string;
|
|
48
|
+
metadata?: Record<string, unknown>;
|
|
49
|
+
};
|
|
50
|
+
export type OptionsOrDependencyArray = Options | DependencyList;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function useDeepEqualMemo<T>(value: T): T | undefined;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { HotkeyCallback, Keys, OptionsOrDependencyArray } from './types';
|
|
2
|
+
export default function useHotkeys<T extends HTMLElement>(keys: Keys, callback: HotkeyCallback, options?: OptionsOrDependencyArray, dependencies?: OptionsOrDependencyArray): import('react').RefObject<T | null>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { FormTags, Hotkey, Scopes, Trigger } from './types';
|
|
2
|
+
export declare function maybePreventDefault(e: KeyboardEvent, hotkey: Hotkey, preventDefault?: Trigger): void;
|
|
3
|
+
export declare function isHotkeyEnabled(e: KeyboardEvent, hotkey: Hotkey, enabled?: Trigger): boolean;
|
|
4
|
+
export declare function isKeyboardEventTriggeredByInput(ev: KeyboardEvent): boolean;
|
|
5
|
+
export declare function isHotkeyEnabledOnTag(event: KeyboardEvent, enabledOnTags?: readonly FormTags[] | boolean): boolean;
|
|
6
|
+
export declare function isCustomElement(element: HTMLElement): boolean;
|
|
7
|
+
export declare function isScopeActive(activeScopes: string[], scopes?: Scopes): boolean;
|
|
8
|
+
export declare const isHotkeyMatchingKeyboardEvent: (e: KeyboardEvent, hotkey: Hotkey, ignoreModifiers?: boolean) => boolean;
|