@mantine/hooks 5.9.0 → 5.9.1
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-hash/use-hash.js +8 -4
- package/cjs/use-hash/use-hash.js.map +1 -1
- package/cjs/use-hotkeys/use-hotkeys.js +4 -4
- package/cjs/use-hotkeys/use-hotkeys.js.map +1 -1
- package/cjs/use-media-query/use-media-query.js +1 -1
- package/cjs/use-media-query/use-media-query.js.map +1 -1
- package/esm/use-hash/use-hash.js +8 -4
- package/esm/use-hash/use-hash.js.map +1 -1
- package/esm/use-hotkeys/use-hotkeys.js +4 -4
- package/esm/use-hotkeys/use-hotkeys.js.map +1 -1
- package/esm/use-media-query/use-media-query.js +1 -1
- package/esm/use-media-query/use-media-query.js.map +1 -1
- package/lib/use-hash/use-hash.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
package/cjs/use-hash/use-hash.js
CHANGED
|
@@ -8,14 +8,18 @@ var useWindowEvent = require('../use-window-event/use-window-event.js');
|
|
|
8
8
|
function useHash() {
|
|
9
9
|
const [hash, setHashValue] = React.useState("");
|
|
10
10
|
const setHash = (value) => {
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
const valueWithHash = value.startsWith("#") ? value : `#${value}`;
|
|
12
|
+
window.location.hash = valueWithHash;
|
|
13
|
+
setHashValue(valueWithHash);
|
|
13
14
|
};
|
|
14
15
|
useWindowEvent.useWindowEvent("hashchange", () => {
|
|
15
|
-
|
|
16
|
+
const newHash = window.location.hash;
|
|
17
|
+
if (hash !== newHash) {
|
|
18
|
+
setHashValue(hash);
|
|
19
|
+
}
|
|
16
20
|
});
|
|
17
21
|
React.useEffect(() => {
|
|
18
|
-
|
|
22
|
+
setHashValue(window.location.hash);
|
|
19
23
|
}, []);
|
|
20
24
|
return [hash, setHash];
|
|
21
25
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hash.js","sources":["../../src/use-hash/use-hash.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nexport function useHash() {\n const [hash, setHashValue] = useState<string>('');\n\n const setHash = (value: string) => {\n window.location.hash =
|
|
1
|
+
{"version":3,"file":"use-hash.js","sources":["../../src/use-hash/use-hash.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nexport function useHash() {\n const [hash, setHashValue] = useState<string>('');\n\n const setHash = (value: string) => {\n const valueWithHash = value.startsWith('#') ? value : `#${value}`;\n window.location.hash = valueWithHash;\n setHashValue(valueWithHash);\n };\n\n useWindowEvent('hashchange', () => {\n const newHash = window.location.hash;\n if (hash !== newHash) {\n setHashValue(hash);\n }\n });\n\n useEffect(() => {\n setHashValue(window.location.hash);\n }, []);\n\n return [hash, setHash] as const;\n}\n"],"names":["useState","useWindowEvent","useEffect"],"mappings":";;;;;;;AAEO,SAAS,OAAO,GAAG;AAC1B,EAAE,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,EAAE,CAAC,CAAC;AAC5C,EAAE,MAAM,OAAO,GAAG,CAAC,KAAK,KAAK;AAC7B,IAAI,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AACtE,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,aAAa,CAAC;AACzC,IAAI,YAAY,CAAC,aAAa,CAAC,CAAC;AAChC,GAAG,CAAC;AACJ,EAAEC,6BAAc,CAAC,YAAY,EAAE,MAAM;AACrC,IAAI,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;AACzC,IAAI,IAAI,IAAI,KAAK,OAAO,EAAE;AAC1B,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;AACzB,KAAK;AACL,GAAG,CAAC,CAAC;AACL,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AACvC,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AACzB;;;;"}
|
|
@@ -5,17 +5,17 @@ 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) {
|
|
8
|
+
function shouldFireEvent(event, tagsToIgnore) {
|
|
9
9
|
if (event.target instanceof HTMLElement) {
|
|
10
|
-
return !event.target.isContentEditable && !
|
|
10
|
+
return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);
|
|
11
11
|
}
|
|
12
12
|
return true;
|
|
13
13
|
}
|
|
14
|
-
function useHotkeys(hotkeys) {
|
|
14
|
+
function useHotkeys(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"]) {
|
|
15
15
|
React.useEffect(() => {
|
|
16
16
|
const keydownListener = (event) => {
|
|
17
17
|
hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {
|
|
18
|
-
if (parseHotkey.getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event)) {
|
|
18
|
+
if (parseHotkey.getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event, tagsToIgnore)) {
|
|
19
19
|
if (options.preventDefault) {
|
|
20
20
|
event.preventDefault();
|
|
21
21
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hotkeys.js","sources":["../../src/use-hotkeys/use-hotkeys.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { getHotkeyMatcher, getHotkeyHandler, HotkeyItemOptions } from './parse-hotkey';\n\nexport type { HotkeyItemOptions };\nexport { getHotkeyHandler };\n\nexport type HotkeyItem = [string, (event: KeyboardEvent) => void, HotkeyItemOptions?];\n\nfunction shouldFireEvent(event: KeyboardEvent) {\n if (event.target instanceof HTMLElement) {\n return
|
|
1
|
+
{"version":3,"file":"use-hotkeys.js","sources":["../../src/use-hotkeys/use-hotkeys.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { getHotkeyMatcher, getHotkeyHandler, HotkeyItemOptions } from './parse-hotkey';\n\nexport type { HotkeyItemOptions };\nexport { getHotkeyHandler };\n\nexport type HotkeyItem = [string, (event: KeyboardEvent) => void, HotkeyItemOptions?];\n\nfunction shouldFireEvent(event: KeyboardEvent, tagsToIgnore: string[]) {\n if (event.target instanceof HTMLElement) {\n return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);\n }\n return true;\n}\n\nexport function useHotkeys(\n hotkeys: HotkeyItem[],\n tagsToIgnore: string[] = ['INPUT', 'TEXTAREA', 'SELECT']\n) {\n useEffect(() => {\n const keydownListener = (event: KeyboardEvent) => {\n hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {\n if (getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event, tagsToIgnore)) {\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;AAC9C,EAAE,IAAI,KAAK,CAAC,MAAM,YAAY,WAAW,EAAE;AAC3C,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;AACpF,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,CAAC,EAAE;AACrF,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;;;;;"}
|
|
@@ -25,7 +25,7 @@ function getInitialValue(query, initialValue) {
|
|
|
25
25
|
function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
|
|
26
26
|
getInitialValueInEffect: true
|
|
27
27
|
}) {
|
|
28
|
-
const [matches, setMatches] = React.useState(getInitialValueInEffect ?
|
|
28
|
+
const [matches, setMatches] = React.useState(getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue));
|
|
29
29
|
const queryRef = React.useRef();
|
|
30
30
|
React.useEffect(() => {
|
|
31
31
|
if ("matchMedia" in window) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-media-query.js","sources":["../../src/use-media-query/use-media-query.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\n\nexport interface UseMediaQueryOptions {\n getInitialValueInEffect: boolean;\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\n/**\n * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia\n * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent\n * */\nfunction attachMediaListener(query: MediaQueryList, callback: MediaQueryCallback) {\n try {\n query.addEventListener('change', callback);\n return () => query.removeEventListener('change', callback);\n } catch (e) {\n query.addListener(callback);\n return () => query.removeListener(callback);\n }\n}\n\nfunction getInitialValue(query: string, initialValue?: boolean) {\n if (typeof initialValue === 'boolean') {\n return initialValue;\n }\n\n if (typeof window !== 'undefined' && 'matchMedia' in window) {\n return window.matchMedia(query).matches;\n }\n\n return false;\n}\n\nexport function useMediaQuery(\n query: string,\n initialValue?: boolean,\n { getInitialValueInEffect }: UseMediaQueryOptions = {\n getInitialValueInEffect: true,\n }\n) {\n const [matches, setMatches] = useState(\n getInitialValueInEffect ?
|
|
1
|
+
{"version":3,"file":"use-media-query.js","sources":["../../src/use-media-query/use-media-query.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\n\nexport interface UseMediaQueryOptions {\n getInitialValueInEffect: boolean;\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\n/**\n * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia\n * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent\n * */\nfunction attachMediaListener(query: MediaQueryList, callback: MediaQueryCallback) {\n try {\n query.addEventListener('change', callback);\n return () => query.removeEventListener('change', callback);\n } catch (e) {\n query.addListener(callback);\n return () => query.removeListener(callback);\n }\n}\n\nfunction getInitialValue(query: string, initialValue?: boolean) {\n if (typeof initialValue === 'boolean') {\n return initialValue;\n }\n\n if (typeof window !== 'undefined' && 'matchMedia' in window) {\n return window.matchMedia(query).matches;\n }\n\n return false;\n}\n\nexport function useMediaQuery(\n query: string,\n initialValue?: boolean,\n { getInitialValueInEffect }: UseMediaQueryOptions = {\n getInitialValueInEffect: true,\n }\n) {\n const [matches, setMatches] = useState(\n getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)\n );\n const queryRef = useRef<MediaQueryList>();\n\n useEffect(() => {\n if ('matchMedia' in window) {\n queryRef.current = window.matchMedia(query);\n setMatches(queryRef.current.matches);\n return attachMediaListener(queryRef.current, (event) => setMatches(event.matches));\n }\n\n return undefined;\n }, [query]);\n\n return matches;\n}\n"],"names":["useState","useRef","useEffect"],"mappings":";;;;;;AACA,SAAS,mBAAmB,CAAC,KAAK,EAAE,QAAQ,EAAE;AAC9C,EAAE,IAAI;AACN,IAAI,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC/C,IAAI,OAAO,MAAM,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC/D,GAAG,CAAC,OAAO,CAAC,EAAE;AACd,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AAChC,IAAI,OAAO,MAAM,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAChD,GAAG;AACH,CAAC;AACD,SAAS,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE;AAC9C,EAAE,IAAI,OAAO,YAAY,KAAK,SAAS,EAAE;AACzC,IAAI,OAAO,YAAY,CAAC;AACxB,GAAG;AACH,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,YAAY,IAAI,MAAM,EAAE;AAC/D,IAAI,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;AAC5C,GAAG;AACH,EAAE,OAAO,KAAK,CAAC;AACf,CAAC;AACM,SAAS,aAAa,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,uBAAuB,EAAE,GAAG;AACjF,EAAE,uBAAuB,EAAE,IAAI;AAC/B,CAAC,EAAE;AACH,EAAE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGA,cAAQ,CAAC,uBAAuB,GAAG,YAAY,GAAG,eAAe,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;AACxH,EAAE,MAAM,QAAQ,GAAGC,YAAM,EAAE,CAAC;AAC5B,EAAEC,eAAS,CAAC,MAAM;AAClB,IAAI,IAAI,YAAY,IAAI,MAAM,EAAE;AAChC,MAAM,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AAClD,MAAM,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC3C,MAAM,OAAO,mBAAmB,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACzF,KAAK;AACL,IAAI,OAAO,KAAK,CAAC,CAAC;AAClB,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,EAAE,OAAO,OAAO,CAAC;AACjB;;;;"}
|
package/esm/use-hash/use-hash.js
CHANGED
|
@@ -4,14 +4,18 @@ import { useWindowEvent } from '../use-window-event/use-window-event.js';
|
|
|
4
4
|
function useHash() {
|
|
5
5
|
const [hash, setHashValue] = useState("");
|
|
6
6
|
const setHash = (value) => {
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
const valueWithHash = value.startsWith("#") ? value : `#${value}`;
|
|
8
|
+
window.location.hash = valueWithHash;
|
|
9
|
+
setHashValue(valueWithHash);
|
|
9
10
|
};
|
|
10
11
|
useWindowEvent("hashchange", () => {
|
|
11
|
-
|
|
12
|
+
const newHash = window.location.hash;
|
|
13
|
+
if (hash !== newHash) {
|
|
14
|
+
setHashValue(hash);
|
|
15
|
+
}
|
|
12
16
|
});
|
|
13
17
|
useEffect(() => {
|
|
14
|
-
|
|
18
|
+
setHashValue(window.location.hash);
|
|
15
19
|
}, []);
|
|
16
20
|
return [hash, setHash];
|
|
17
21
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hash.js","sources":["../../src/use-hash/use-hash.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nexport function useHash() {\n const [hash, setHashValue] = useState<string>('');\n\n const setHash = (value: string) => {\n window.location.hash =
|
|
1
|
+
{"version":3,"file":"use-hash.js","sources":["../../src/use-hash/use-hash.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport { useWindowEvent } from '../use-window-event/use-window-event';\n\nexport function useHash() {\n const [hash, setHashValue] = useState<string>('');\n\n const setHash = (value: string) => {\n const valueWithHash = value.startsWith('#') ? value : `#${value}`;\n window.location.hash = valueWithHash;\n setHashValue(valueWithHash);\n };\n\n useWindowEvent('hashchange', () => {\n const newHash = window.location.hash;\n if (hash !== newHash) {\n setHashValue(hash);\n }\n });\n\n useEffect(() => {\n setHashValue(window.location.hash);\n }, []);\n\n return [hash, setHash] as const;\n}\n"],"names":[],"mappings":";;;AAEO,SAAS,OAAO,GAAG;AAC1B,EAAE,MAAM,CAAC,IAAI,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAC5C,EAAE,MAAM,OAAO,GAAG,CAAC,KAAK,KAAK;AAC7B,IAAI,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AACtE,IAAI,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,aAAa,CAAC;AACzC,IAAI,YAAY,CAAC,aAAa,CAAC,CAAC;AAChC,GAAG,CAAC;AACJ,EAAE,cAAc,CAAC,YAAY,EAAE,MAAM;AACrC,IAAI,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC;AACzC,IAAI,IAAI,IAAI,KAAK,OAAO,EAAE;AAC1B,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;AACzB,KAAK;AACL,GAAG,CAAC,CAAC;AACL,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;AACvC,GAAG,EAAE,EAAE,CAAC,CAAC;AACT,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AACzB;;;;"}
|
|
@@ -2,17 +2,17 @@ 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) {
|
|
5
|
+
function shouldFireEvent(event, tagsToIgnore) {
|
|
6
6
|
if (event.target instanceof HTMLElement) {
|
|
7
|
-
return !event.target.isContentEditable && !
|
|
7
|
+
return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);
|
|
8
8
|
}
|
|
9
9
|
return true;
|
|
10
10
|
}
|
|
11
|
-
function useHotkeys(hotkeys) {
|
|
11
|
+
function useHotkeys(hotkeys, tagsToIgnore = ["INPUT", "TEXTAREA", "SELECT"]) {
|
|
12
12
|
useEffect(() => {
|
|
13
13
|
const keydownListener = (event) => {
|
|
14
14
|
hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {
|
|
15
|
-
if (getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event)) {
|
|
15
|
+
if (getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event, tagsToIgnore)) {
|
|
16
16
|
if (options.preventDefault) {
|
|
17
17
|
event.preventDefault();
|
|
18
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hotkeys.js","sources":["../../src/use-hotkeys/use-hotkeys.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { getHotkeyMatcher, getHotkeyHandler, HotkeyItemOptions } from './parse-hotkey';\n\nexport type { HotkeyItemOptions };\nexport { getHotkeyHandler };\n\nexport type HotkeyItem = [string, (event: KeyboardEvent) => void, HotkeyItemOptions?];\n\nfunction shouldFireEvent(event: KeyboardEvent) {\n if (event.target instanceof HTMLElement) {\n return
|
|
1
|
+
{"version":3,"file":"use-hotkeys.js","sources":["../../src/use-hotkeys/use-hotkeys.ts"],"sourcesContent":["import { useEffect } from 'react';\nimport { getHotkeyMatcher, getHotkeyHandler, HotkeyItemOptions } from './parse-hotkey';\n\nexport type { HotkeyItemOptions };\nexport { getHotkeyHandler };\n\nexport type HotkeyItem = [string, (event: KeyboardEvent) => void, HotkeyItemOptions?];\n\nfunction shouldFireEvent(event: KeyboardEvent, tagsToIgnore: string[]) {\n if (event.target instanceof HTMLElement) {\n return !event.target.isContentEditable && !tagsToIgnore.includes(event.target.tagName);\n }\n return true;\n}\n\nexport function useHotkeys(\n hotkeys: HotkeyItem[],\n tagsToIgnore: string[] = ['INPUT', 'TEXTAREA', 'SELECT']\n) {\n useEffect(() => {\n const keydownListener = (event: KeyboardEvent) => {\n hotkeys.forEach(([hotkey, handler, options = { preventDefault: true }]) => {\n if (getHotkeyMatcher(hotkey)(event) && shouldFireEvent(event, tagsToIgnore)) {\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;AAC9C,EAAE,IAAI,KAAK,CAAC,MAAM,YAAY,WAAW,EAAE;AAC3C,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;AACpF,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,CAAC,EAAE;AACrF,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;;;;"}
|
|
@@ -21,7 +21,7 @@ function getInitialValue(query, initialValue) {
|
|
|
21
21
|
function useMediaQuery(query, initialValue, { getInitialValueInEffect } = {
|
|
22
22
|
getInitialValueInEffect: true
|
|
23
23
|
}) {
|
|
24
|
-
const [matches, setMatches] = useState(getInitialValueInEffect ?
|
|
24
|
+
const [matches, setMatches] = useState(getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue));
|
|
25
25
|
const queryRef = useRef();
|
|
26
26
|
useEffect(() => {
|
|
27
27
|
if ("matchMedia" in window) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-media-query.js","sources":["../../src/use-media-query/use-media-query.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\n\nexport interface UseMediaQueryOptions {\n getInitialValueInEffect: boolean;\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\n/**\n * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia\n * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent\n * */\nfunction attachMediaListener(query: MediaQueryList, callback: MediaQueryCallback) {\n try {\n query.addEventListener('change', callback);\n return () => query.removeEventListener('change', callback);\n } catch (e) {\n query.addListener(callback);\n return () => query.removeListener(callback);\n }\n}\n\nfunction getInitialValue(query: string, initialValue?: boolean) {\n if (typeof initialValue === 'boolean') {\n return initialValue;\n }\n\n if (typeof window !== 'undefined' && 'matchMedia' in window) {\n return window.matchMedia(query).matches;\n }\n\n return false;\n}\n\nexport function useMediaQuery(\n query: string,\n initialValue?: boolean,\n { getInitialValueInEffect }: UseMediaQueryOptions = {\n getInitialValueInEffect: true,\n }\n) {\n const [matches, setMatches] = useState(\n getInitialValueInEffect ?
|
|
1
|
+
{"version":3,"file":"use-media-query.js","sources":["../../src/use-media-query/use-media-query.ts"],"sourcesContent":["import { useState, useEffect, useRef } from 'react';\n\nexport interface UseMediaQueryOptions {\n getInitialValueInEffect: boolean;\n}\n\ntype MediaQueryCallback = (event: { matches: boolean; media: string }) => void;\n\n/**\n * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia\n * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent\n * */\nfunction attachMediaListener(query: MediaQueryList, callback: MediaQueryCallback) {\n try {\n query.addEventListener('change', callback);\n return () => query.removeEventListener('change', callback);\n } catch (e) {\n query.addListener(callback);\n return () => query.removeListener(callback);\n }\n}\n\nfunction getInitialValue(query: string, initialValue?: boolean) {\n if (typeof initialValue === 'boolean') {\n return initialValue;\n }\n\n if (typeof window !== 'undefined' && 'matchMedia' in window) {\n return window.matchMedia(query).matches;\n }\n\n return false;\n}\n\nexport function useMediaQuery(\n query: string,\n initialValue?: boolean,\n { getInitialValueInEffect }: UseMediaQueryOptions = {\n getInitialValueInEffect: true,\n }\n) {\n const [matches, setMatches] = useState(\n getInitialValueInEffect ? initialValue : getInitialValue(query, initialValue)\n );\n const queryRef = useRef<MediaQueryList>();\n\n useEffect(() => {\n if ('matchMedia' in window) {\n queryRef.current = window.matchMedia(query);\n setMatches(queryRef.current.matches);\n return attachMediaListener(queryRef.current, (event) => setMatches(event.matches));\n }\n\n return undefined;\n }, [query]);\n\n return matches;\n}\n"],"names":[],"mappings":";;AACA,SAAS,mBAAmB,CAAC,KAAK,EAAE,QAAQ,EAAE;AAC9C,EAAE,IAAI;AACN,IAAI,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC/C,IAAI,OAAO,MAAM,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC/D,GAAG,CAAC,OAAO,CAAC,EAAE;AACd,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AAChC,IAAI,OAAO,MAAM,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AAChD,GAAG;AACH,CAAC;AACD,SAAS,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE;AAC9C,EAAE,IAAI,OAAO,YAAY,KAAK,SAAS,EAAE;AACzC,IAAI,OAAO,YAAY,CAAC;AACxB,GAAG;AACH,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,YAAY,IAAI,MAAM,EAAE;AAC/D,IAAI,OAAO,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;AAC5C,GAAG;AACH,EAAE,OAAO,KAAK,CAAC;AACf,CAAC;AACM,SAAS,aAAa,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,uBAAuB,EAAE,GAAG;AACjF,EAAE,uBAAuB,EAAE,IAAI;AAC/B,CAAC,EAAE;AACH,EAAE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,uBAAuB,GAAG,YAAY,GAAG,eAAe,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;AACxH,EAAE,MAAM,QAAQ,GAAG,MAAM,EAAE,CAAC;AAC5B,EAAE,SAAS,CAAC,MAAM;AAClB,IAAI,IAAI,YAAY,IAAI,MAAM,EAAE;AAChC,MAAM,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AAClD,MAAM,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAC3C,MAAM,OAAO,mBAAmB,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACzF,KAAK;AACL,IAAI,OAAO,KAAK,CAAC,CAAC;AAClB,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,EAAE,OAAO,OAAO,CAAC;AACjB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-hash.d.ts","sourceRoot":"","sources":["../../src/use-hash/use-hash.ts"],"names":[],"mappings":"AAGA,wBAAgB,OAAO,8BAGG,MAAM,
|
|
1
|
+
{"version":3,"file":"use-hash.d.ts","sourceRoot":"","sources":["../../src/use-hash/use-hash.ts"],"names":[],"mappings":"AAGA,wBAAgB,OAAO,8BAGG,MAAM,WAkB/B"}
|
|
@@ -2,5 +2,5 @@ import { getHotkeyHandler, HotkeyItemOptions } from './parse-hotkey';
|
|
|
2
2
|
export type { HotkeyItemOptions };
|
|
3
3
|
export { getHotkeyHandler };
|
|
4
4
|
export declare type HotkeyItem = [string, (event: KeyboardEvent) => void, HotkeyItemOptions?];
|
|
5
|
-
export declare function useHotkeys(hotkeys: HotkeyItem[]): void;
|
|
5
|
+
export declare function useHotkeys(hotkeys: HotkeyItem[], tagsToIgnore?: string[]): 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,EAAoB,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEvF,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,oBAAY,UAAU,GAAG,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"use-hotkeys.d.ts","sourceRoot":"","sources":["../../src/use-hotkeys/use-hotkeys.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEvF,YAAY,EAAE,iBAAiB,EAAE,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,oBAAY,UAAU,GAAG,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAStF,wBAAgB,UAAU,CACxB,OAAO,EAAE,UAAU,EAAE,EACrB,YAAY,GAAE,MAAM,EAAoC,QAkBzD"}
|