@mantine/hooks 6.0.0-alpha.2 → 6.0.0-alpha.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/cjs/use-focus-trap/use-focus-trap.js +16 -15
- package/cjs/use-focus-trap/use-focus-trap.js.map +1 -1
- package/cjs/use-hotkeys/use-hotkeys.js +6 -3
- package/cjs/use-hotkeys/use-hotkeys.js.map +1 -1
- package/esm/use-focus-trap/use-focus-trap.js +16 -15
- package/esm/use-focus-trap/use-focus-trap.js.map +1 -1
- package/esm/use-hotkeys/use-hotkeys.js +6 -3
- package/esm/use-hotkeys/use-hotkeys.js.map +1 -1
- package/lib/use-focus-trap/use-focus-trap.d.ts.map +1 -1
- package/lib/use-hotkeys/use-hotkeys.d.ts +1 -1
- package/lib/use-hotkeys/use-hotkeys.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -10,6 +10,20 @@ var createAriaHider = require('./create-aria-hider.js');
|
|
|
10
10
|
function useFocusTrap(active = true) {
|
|
11
11
|
const ref = React.useRef();
|
|
12
12
|
const restoreAria = React.useRef(null);
|
|
13
|
+
const focusNode = (node) => {
|
|
14
|
+
let focusElement = node.querySelector("[data-autofocus]");
|
|
15
|
+
if (!focusElement) {
|
|
16
|
+
const children = Array.from(node.querySelectorAll(tabbable.FOCUS_SELECTOR));
|
|
17
|
+
focusElement = children.find(tabbable.tabbable) || children.find(tabbable.focusable) || null;
|
|
18
|
+
if (!focusElement && tabbable.focusable(node))
|
|
19
|
+
focusElement = node;
|
|
20
|
+
}
|
|
21
|
+
if (focusElement) {
|
|
22
|
+
focusElement.focus({ preventScroll: true });
|
|
23
|
+
} else if (process.env.NODE_ENV === "development") {
|
|
24
|
+
console.warn("[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node", node);
|
|
25
|
+
}
|
|
26
|
+
};
|
|
13
27
|
const setRef = React.useCallback((node) => {
|
|
14
28
|
if (!active) {
|
|
15
29
|
return;
|
|
@@ -22,23 +36,9 @@ function useFocusTrap(active = true) {
|
|
|
22
36
|
return;
|
|
23
37
|
}
|
|
24
38
|
if (node) {
|
|
25
|
-
const processNode = () => {
|
|
26
|
-
let focusElement = node.querySelector("[data-autofocus]");
|
|
27
|
-
if (!focusElement) {
|
|
28
|
-
const children = Array.from(node.querySelectorAll(tabbable.FOCUS_SELECTOR));
|
|
29
|
-
focusElement = children.find(tabbable.tabbable) || children.find(tabbable.focusable) || null;
|
|
30
|
-
if (!focusElement && tabbable.focusable(node))
|
|
31
|
-
focusElement = node;
|
|
32
|
-
}
|
|
33
|
-
if (focusElement) {
|
|
34
|
-
focusElement.focus({ preventScroll: true });
|
|
35
|
-
} else if (process.env.NODE_ENV === "development") {
|
|
36
|
-
console.warn("[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node", node);
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
39
|
setTimeout(() => {
|
|
40
40
|
if (node.getRootNode()) {
|
|
41
|
-
|
|
41
|
+
focusNode(node);
|
|
42
42
|
} else if (process.env.NODE_ENV === "development") {
|
|
43
43
|
console.warn("[@mantine/hooks/use-focus-trap] Ref node is not part of the dom", node);
|
|
44
44
|
}
|
|
@@ -52,6 +52,7 @@ function useFocusTrap(active = true) {
|
|
|
52
52
|
if (!active) {
|
|
53
53
|
return void 0;
|
|
54
54
|
}
|
|
55
|
+
ref.current && setTimeout(() => focusNode(ref.current));
|
|
55
56
|
const handleKeyDown = (event) => {
|
|
56
57
|
if (event.key === "Tab" && ref.current) {
|
|
57
58
|
scopeTab.scopeTab(ref.current, event);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-trap.js","sources":["../../src/use-focus-trap/use-focus-trap.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { FOCUS_SELECTOR, focusable, tabbable } from './tabbable';\nimport { scopeTab } from './scope-tab';\nimport { createAriaHider } from './create-aria-hider';\n\nexport function useFocusTrap(active = true): (instance: HTMLElement | null) => void {\n const ref = useRef<HTMLElement | null>();\n const restoreAria = useRef<Function | null>(null);\n\n const
|
|
1
|
+
{"version":3,"file":"use-focus-trap.js","sources":["../../src/use-focus-trap/use-focus-trap.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { FOCUS_SELECTOR, focusable, tabbable } from './tabbable';\nimport { scopeTab } from './scope-tab';\nimport { createAriaHider } from './create-aria-hider';\n\nexport function useFocusTrap(active = true): (instance: HTMLElement | null) => void {\n const ref = useRef<HTMLElement | null>();\n const restoreAria = useRef<Function | null>(null);\n\n const focusNode = (node: HTMLElement) => {\n let focusElement: HTMLElement = node.querySelector('[data-autofocus]');\n\n if (!focusElement) {\n const children = Array.from<HTMLElement>(node.querySelectorAll(FOCUS_SELECTOR));\n focusElement = children.find(tabbable) || children.find(focusable) || null;\n if (!focusElement && focusable(node)) focusElement = node;\n }\n\n if (focusElement) {\n focusElement.focus({ preventScroll: true });\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n '[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node',\n node\n );\n }\n };\n\n const setRef = useCallback(\n (node: HTMLElement | null) => {\n if (!active) {\n return;\n }\n\n if (node === null) {\n return;\n }\n\n restoreAria.current = createAriaHider(node);\n if (ref.current === node) {\n return;\n }\n\n if (node) {\n // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.\n setTimeout(() => {\n if (node.getRootNode()) {\n focusNode(node);\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('[@mantine/hooks/use-focus-trap] Ref node is not part of the dom', node);\n }\n });\n\n ref.current = node;\n } else {\n ref.current = null;\n }\n },\n [active]\n );\n\n useEffect(() => {\n if (!active) {\n return undefined;\n }\n\n ref.current && setTimeout(() => focusNode(ref.current));\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Tab' && ref.current) {\n scopeTab(ref.current, event);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n\n if (restoreAria.current) {\n restoreAria.current();\n }\n };\n }, [active]);\n\n return setRef;\n}\n"],"names":["useRef","FOCUS_SELECTOR","tabbable","focusable","useCallback","createAriaHider","useEffect","scopeTab"],"mappings":"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"}
|
|
@@ -5,17 +5,20 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var parseHotkey = require('./parse-hotkey.js');
|
|
7
7
|
|
|
8
|
-
function shouldFireEvent(event, tagsToIgnore) {
|
|
8
|
+
function shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable = false) {
|
|
9
9
|
if (event.target instanceof HTMLElement) {
|
|
10
|
+
if (triggerOnContentEditable) {
|
|
11
|
+
return !tagsToIgnore.includes(event.target.tagName);
|
|
12
|
+
}
|
|
10
13
|
return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);
|
|
11
14
|
}
|
|
12
15
|
return true;
|
|
13
16
|
}
|
|
14
|
-
function useHotkeys(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"]) {
|
|
17
|
+
function useHotkeys(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"], triggerOnContentEditable = false) {
|
|
15
18
|
React.useEffect(() => {
|
|
16
19
|
const keydownListener = (event) => {
|
|
17
20
|
hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {
|
|
18
|
-
if (parseHotkey.getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event, tagsToIgnore)) {
|
|
21
|
+
if (parseHotkey.getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)) {
|
|
19
22
|
if (options.preventDefault) {
|
|
20
23
|
event.preventDefault();
|
|
21
24
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hotkeys.js","sources":["../../src/use-hotkeys/use-hotkeys.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"use-hotkeys.js","sources":["../../src/use-hotkeys/use-hotkeys.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { getHotkeyHandler, getHotkeyMatcher, HotkeyItemOptions } from './parse-hotkey';\n\nexport type { HotkeyItemOptions };\nexport { getHotkeyHandler };\n\nexport type HotkeyItem = [string, (event: KeyboardEvent) => void, HotkeyItemOptions?];\n\nfunction shouldFireEvent(\n event: KeyboardEvent,\n tagsToIgnore: string[],\n triggerOnContentEditable = false\n) {\n if (event.target instanceof HTMLElement) {\n if (triggerOnContentEditable) {\n return !tagsToIgnore.includes(event.target.tagName);\n }\n\n return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);\n }\n\n return true;\n}\n\nexport function useHotkeys(\n hotkeys: HotkeyItem[],\n tagsToIgnore: string[] = ['INPUT', 'TEXTAREA', 'SELECT'],\n triggerOnContentEditable = false\n) {\n useEffect(() => {\n const keydownListener = (event: KeyboardEvent) => {\n hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {\n if (\n getHotkeyMatcher(hotkey)(event) &&\n shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)\n ) {\n if (options.preventDefault) {\n event.preventDefault();\n }\n\n handler(event);\n }\n });\n };\n\n document.documentElement.addEventListener('keydown', keydownListener);\n return () => document.documentElement.removeEventListener('keydown', keydownListener);\n }, [hotkeys]);\n}\n"],"names":["useEffect","getHotkeyMatcher"],"mappings":";;;;;;;AAGA,SAAS,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,wBAAwB,GAAG,KAAK,EAAE;AAChF,EAAE,IAAI,KAAK,CAAC,MAAM,YAAY,WAAW,EAAE;AAC3C,IAAI,IAAI,wBAAwB,EAAE;AAClC,MAAM,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAC1D,KAAK;AACL,IAAI,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,iBAAiB,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAC3F,GAAG;AACH,EAAE,OAAO,IAAI,CAAC;AACd,CAAC;AACM,SAAS,UAAU,CAAC,OAAO,EAAE,YAAY,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,wBAAwB,GAAG,KAAK,EAAE;AACtH,EAAEA,eAAS,CAAC,MAAM;AAClB,IAAI,MAAM,eAAe,GAAG,CAAC,KAAK,KAAK;AACvC,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,KAAK;AACjF,QAAQ,IAAIC,4BAAgB,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,IAAI,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,wBAAwB,CAAC,EAAE;AAC/G,UAAU,IAAI,OAAO,CAAC,cAAc,EAAE;AACtC,YAAY,KAAK,CAAC,cAAc,EAAE,CAAC;AACnC,WAAW;AACX,UAAU,OAAO,CAAC,KAAK,CAAC,CAAC;AACzB,SAAS;AACT,OAAO,CAAC,CAAC;AACT,KAAK,CAAC;AACN,IAAI,QAAQ,CAAC,eAAe,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;AAC1E,IAAI,OAAO,MAAM,QAAQ,CAAC,eAAe,CAAC,mBAAmB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;AAC1F,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AAChB;;;;;"}
|
|
@@ -6,6 +6,20 @@ import { createAriaHider } from './create-aria-hider.js';
|
|
|
6
6
|
function useFocusTrap(active = true) {
|
|
7
7
|
const ref = useRef();
|
|
8
8
|
const restoreAria = useRef(null);
|
|
9
|
+
const focusNode = (node) => {
|
|
10
|
+
let focusElement = node.querySelector("[data-autofocus]");
|
|
11
|
+
if (!focusElement) {
|
|
12
|
+
const children = Array.from(node.querySelectorAll(FOCUS_SELECTOR));
|
|
13
|
+
focusElement = children.find(tabbable) || children.find(focusable) || null;
|
|
14
|
+
if (!focusElement && focusable(node))
|
|
15
|
+
focusElement = node;
|
|
16
|
+
}
|
|
17
|
+
if (focusElement) {
|
|
18
|
+
focusElement.focus({ preventScroll: true });
|
|
19
|
+
} else if (process.env.NODE_ENV === "development") {
|
|
20
|
+
console.warn("[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node", node);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
9
23
|
const setRef = useCallback((node) => {
|
|
10
24
|
if (!active) {
|
|
11
25
|
return;
|
|
@@ -18,23 +32,9 @@ function useFocusTrap(active = true) {
|
|
|
18
32
|
return;
|
|
19
33
|
}
|
|
20
34
|
if (node) {
|
|
21
|
-
const processNode = () => {
|
|
22
|
-
let focusElement = node.querySelector("[data-autofocus]");
|
|
23
|
-
if (!focusElement) {
|
|
24
|
-
const children = Array.from(node.querySelectorAll(FOCUS_SELECTOR));
|
|
25
|
-
focusElement = children.find(tabbable) || children.find(focusable) || null;
|
|
26
|
-
if (!focusElement && focusable(node))
|
|
27
|
-
focusElement = node;
|
|
28
|
-
}
|
|
29
|
-
if (focusElement) {
|
|
30
|
-
focusElement.focus({ preventScroll: true });
|
|
31
|
-
} else if (process.env.NODE_ENV === "development") {
|
|
32
|
-
console.warn("[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node", node);
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
35
|
setTimeout(() => {
|
|
36
36
|
if (node.getRootNode()) {
|
|
37
|
-
|
|
37
|
+
focusNode(node);
|
|
38
38
|
} else if (process.env.NODE_ENV === "development") {
|
|
39
39
|
console.warn("[@mantine/hooks/use-focus-trap] Ref node is not part of the dom", node);
|
|
40
40
|
}
|
|
@@ -48,6 +48,7 @@ function useFocusTrap(active = true) {
|
|
|
48
48
|
if (!active) {
|
|
49
49
|
return void 0;
|
|
50
50
|
}
|
|
51
|
+
ref.current && setTimeout(() => focusNode(ref.current));
|
|
51
52
|
const handleKeyDown = (event) => {
|
|
52
53
|
if (event.key === "Tab" && ref.current) {
|
|
53
54
|
scopeTab(ref.current, event);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-trap.js","sources":["../../src/use-focus-trap/use-focus-trap.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { FOCUS_SELECTOR, focusable, tabbable } from './tabbable';\nimport { scopeTab } from './scope-tab';\nimport { createAriaHider } from './create-aria-hider';\n\nexport function useFocusTrap(active = true): (instance: HTMLElement | null) => void {\n const ref = useRef<HTMLElement | null>();\n const restoreAria = useRef<Function | null>(null);\n\n const
|
|
1
|
+
{"version":3,"file":"use-focus-trap.js","sources":["../../src/use-focus-trap/use-focus-trap.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { FOCUS_SELECTOR, focusable, tabbable } from './tabbable';\nimport { scopeTab } from './scope-tab';\nimport { createAriaHider } from './create-aria-hider';\n\nexport function useFocusTrap(active = true): (instance: HTMLElement | null) => void {\n const ref = useRef<HTMLElement | null>();\n const restoreAria = useRef<Function | null>(null);\n\n const focusNode = (node: HTMLElement) => {\n let focusElement: HTMLElement = node.querySelector('[data-autofocus]');\n\n if (!focusElement) {\n const children = Array.from<HTMLElement>(node.querySelectorAll(FOCUS_SELECTOR));\n focusElement = children.find(tabbable) || children.find(focusable) || null;\n if (!focusElement && focusable(node)) focusElement = node;\n }\n\n if (focusElement) {\n focusElement.focus({ preventScroll: true });\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n '[@mantine/hooks/use-focus-trap] Failed to find focusable element within provided node',\n node\n );\n }\n };\n\n const setRef = useCallback(\n (node: HTMLElement | null) => {\n if (!active) {\n return;\n }\n\n if (node === null) {\n return;\n }\n\n restoreAria.current = createAriaHider(node);\n if (ref.current === node) {\n return;\n }\n\n if (node) {\n // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.\n setTimeout(() => {\n if (node.getRootNode()) {\n focusNode(node);\n } else if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn('[@mantine/hooks/use-focus-trap] Ref node is not part of the dom', node);\n }\n });\n\n ref.current = node;\n } else {\n ref.current = null;\n }\n },\n [active]\n );\n\n useEffect(() => {\n if (!active) {\n return undefined;\n }\n\n ref.current && setTimeout(() => focusNode(ref.current));\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Tab' && ref.current) {\n scopeTab(ref.current, event);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n\n if (restoreAria.current) {\n restoreAria.current();\n }\n };\n }, [active]);\n\n return setRef;\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -2,17 +2,20 @@ import { useEffect } from 'react';
|
|
|
2
2
|
import { getHotkeyMatcher } from './parse-hotkey.js';
|
|
3
3
|
export { getHotkeyHandler } from './parse-hotkey.js';
|
|
4
4
|
|
|
5
|
-
function shouldFireEvent(event, tagsToIgnore) {
|
|
5
|
+
function shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable = false) {
|
|
6
6
|
if (event.target instanceof HTMLElement) {
|
|
7
|
+
if (triggerOnContentEditable) {
|
|
8
|
+
return !tagsToIgnore.includes(event.target.tagName);
|
|
9
|
+
}
|
|
7
10
|
return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);
|
|
8
11
|
}
|
|
9
12
|
return true;
|
|
10
13
|
}
|
|
11
|
-
function useHotkeys(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"]) {
|
|
14
|
+
function useHotkeys(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"], triggerOnContentEditable = false) {
|
|
12
15
|
useEffect(() => {
|
|
13
16
|
const keydownListener = (event) => {
|
|
14
17
|
hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {
|
|
15
|
-
if (getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event, tagsToIgnore)) {
|
|
18
|
+
if (getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)) {
|
|
16
19
|
if (options.preventDefault) {
|
|
17
20
|
event.preventDefault();
|
|
18
21
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hotkeys.js","sources":["../../src/use-hotkeys/use-hotkeys.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"use-hotkeys.js","sources":["../../src/use-hotkeys/use-hotkeys.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { getHotkeyHandler, getHotkeyMatcher, HotkeyItemOptions } from './parse-hotkey';\n\nexport type { HotkeyItemOptions };\nexport { getHotkeyHandler };\n\nexport type HotkeyItem = [string, (event: KeyboardEvent) => void, HotkeyItemOptions?];\n\nfunction shouldFireEvent(\n event: KeyboardEvent,\n tagsToIgnore: string[],\n triggerOnContentEditable = false\n) {\n if (event.target instanceof HTMLElement) {\n if (triggerOnContentEditable) {\n return !tagsToIgnore.includes(event.target.tagName);\n }\n\n return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);\n }\n\n return true;\n}\n\nexport function useHotkeys(\n hotkeys: HotkeyItem[],\n tagsToIgnore: string[] = ['INPUT', 'TEXTAREA', 'SELECT'],\n triggerOnContentEditable = false\n) {\n useEffect(() => {\n const keydownListener = (event: KeyboardEvent) => {\n hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {\n if (\n getHotkeyMatcher(hotkey)(event) &&\n shouldFireEvent(event, tagsToIgnore, triggerOnContentEditable)\n ) {\n if (options.preventDefault) {\n event.preventDefault();\n }\n\n handler(event);\n }\n });\n };\n\n document.documentElement.addEventListener('keydown', keydownListener);\n return () => document.documentElement.removeEventListener('keydown', keydownListener);\n }, [hotkeys]);\n}\n"],"names":[],"mappings":";;;;AAGA,SAAS,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,wBAAwB,GAAG,KAAK,EAAE;AAChF,EAAE,IAAI,KAAK,CAAC,MAAM,YAAY,WAAW,EAAE;AAC3C,IAAI,IAAI,wBAAwB,EAAE;AAClC,MAAM,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAC1D,KAAK;AACL,IAAI,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,iBAAiB,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AAC3F,GAAG;AACH,EAAE,OAAO,IAAI,CAAC;AACd,CAAC;AACM,SAAS,UAAU,CAAC,OAAO,EAAE,YAAY,GAAG,CAAC,OAAO,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,wBAAwB,GAAG,KAAK,EAAE;AACtH,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,MAAM,eAAe,GAAG,CAAC,KAAK,KAAK;AACvC,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,KAAK;AACjF,QAAQ,IAAI,gBAAgB,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,IAAI,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,wBAAwB,CAAC,EAAE;AAC/G,UAAU,IAAI,OAAO,CAAC,cAAc,EAAE;AACtC,YAAY,KAAK,CAAC,cAAc,EAAE,CAAC;AACnC,WAAW;AACX,UAAU,OAAO,CAAC,KAAK,CAAC,CAAC;AACzB,SAAS;AACT,OAAO,CAAC,CAAC;AACT,KAAK,CAAC;AACN,IAAI,QAAQ,CAAC,eAAe,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;AAC1E,IAAI,OAAO,MAAM,QAAQ,CAAC,eAAe,CAAC,mBAAmB,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC;AAC1F,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;AAChB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-trap.d.ts","sourceRoot":"","sources":["../../src/use-focus-trap/use-focus-trap.ts"],"names":[],"mappings":"AAKA,wBAAgB,YAAY,CAAC,MAAM,UAAO,GAAG,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,
|
|
1
|
+
{"version":3,"file":"use-focus-trap.d.ts","sourceRoot":"","sources":["../../src/use-focus-trap/use-focus-trap.ts"],"names":[],"mappings":"AAKA,wBAAgB,YAAY,CAAC,MAAM,UAAO,GAAG,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAkFlF"}
|
|
@@ -2,5 +2,5 @@ import { getHotkeyHandler, HotkeyItemOptions } from './parse-hotkey';
|
|
|
2
2
|
export type { HotkeyItemOptions };
|
|
3
3
|
export { getHotkeyHandler };
|
|
4
4
|
export type HotkeyItem = [string, (event: KeyboardEvent) => void, HotkeyItemOptions?];
|
|
5
|
-
export declare function useHotkeys(hotkeys: HotkeyItem[], tagsToIgnore?: string[]): void;
|
|
5
|
+
export declare function useHotkeys(hotkeys: HotkeyItem[], tagsToIgnore?: string[], triggerOnContentEditable?: boolean): void;
|
|
6
6
|
//# sourceMappingURL=use-hotkeys.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hotkeys.d.ts","sourceRoot":"","sources":["../../src/use-hotkeys/use-hotkeys.ts"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"use-hotkeys.d.ts","sourceRoot":"","sources":["../../src/use-hotkeys/use-hotkeys.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAoB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEvF,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,MAAM,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAkBtF,wBAAgB,UAAU,CACxB,OAAO,EAAE,UAAU,EAAE,EACrB,YAAY,GAAE,MAAM,EAAoC,EACxD,wBAAwB,UAAQ,QAqBjC"}
|