@yamada-ui/use-focus-visible 1.1.1 → 1.1.2-dev-20240618074731
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.js +7 -14
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +7 -14
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -48,25 +48,21 @@ var onPointer = (ev) => {
|
|
|
48
48
|
if (ev.type === "mousedown" || ev.type === "pointerdown" || ev.type === "pointerup") {
|
|
49
49
|
hasEventBeforeFocus = true;
|
|
50
50
|
const target = ev.composedPath ? ev.composedPath()[0] : ev.target;
|
|
51
|
-
if (target.matches(":focus-visible"))
|
|
52
|
-
return;
|
|
51
|
+
if (target.matches(":focus-visible")) return;
|
|
53
52
|
trigger("pointer", ev);
|
|
54
53
|
}
|
|
55
54
|
};
|
|
56
55
|
var isVirtualClick = (ev) => {
|
|
57
|
-
if (ev.mozInputSource === 0 && ev.isTrusted)
|
|
58
|
-
return true;
|
|
56
|
+
if (ev.mozInputSource === 0 && ev.isTrusted) return true;
|
|
59
57
|
return ev.detail === 0 && !ev.pointerType;
|
|
60
58
|
};
|
|
61
59
|
var onClick = (ev) => {
|
|
62
|
-
if (!isVirtualClick(ev))
|
|
63
|
-
return;
|
|
60
|
+
if (!isVirtualClick(ev)) return;
|
|
64
61
|
hasEventBeforeFocus = true;
|
|
65
62
|
modality = "virtual";
|
|
66
63
|
};
|
|
67
64
|
var onFocus = (ev) => {
|
|
68
|
-
if (ev.target === window || ev.target === document)
|
|
69
|
-
return;
|
|
65
|
+
if (ev.target === window || ev.target === document) return;
|
|
70
66
|
if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
|
|
71
67
|
modality = "virtual";
|
|
72
68
|
trigger("virtual", ev);
|
|
@@ -80,13 +76,11 @@ var onBlur = () => {
|
|
|
80
76
|
};
|
|
81
77
|
var isFocusVisible = () => modality !== "pointer";
|
|
82
78
|
var setGlobalFocusEvents = () => {
|
|
83
|
-
if (typeof window === "undefined" || hasSetup)
|
|
84
|
-
return;
|
|
79
|
+
if (typeof window === "undefined" || hasSetup) return;
|
|
85
80
|
const { focus } = HTMLElement.prototype;
|
|
86
81
|
HTMLElement.prototype.focus = function customFocus(...args) {
|
|
87
82
|
hasEventBeforeFocus = true;
|
|
88
|
-
if (this)
|
|
89
|
-
focus.apply(this, args);
|
|
83
|
+
if (this) focus.apply(this, args);
|
|
90
84
|
};
|
|
91
85
|
document.addEventListener("keydown", onKeyboard, true);
|
|
92
86
|
document.addEventListener("keyup", onKeyboard, true);
|
|
@@ -105,8 +99,7 @@ var setGlobalFocusEvents = () => {
|
|
|
105
99
|
hasSetup = true;
|
|
106
100
|
};
|
|
107
101
|
var trackFocusVisible = (func, { force } = {}) => {
|
|
108
|
-
if (force)
|
|
109
|
-
hasSetup = false;
|
|
102
|
+
if (force) hasSetup = false;
|
|
110
103
|
setGlobalFocusEvents();
|
|
111
104
|
func(isFocusVisible());
|
|
112
105
|
const handler = () => func(isFocusVisible());
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { isMac } from \"@yamada-ui/utils\"\nimport { useEffect, useState } from \"react\"\n\ntype Modality = \"keyboard\" | \"pointer\" | \"virtual\"\ntype HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent\ntype Handler = (modality: Modality, e: HandlerEvent | null) => void\ntype FocusVisibleCallback = (isFocusVisible: boolean) => void\n\nlet hasSetup = false\nlet modality: Modality | null = null\nlet hasEventBeforeFocus = false\nlet hasBlurredWindowRecently = false\n\nconst handlers = new Set<Handler>()\n\nconst trigger = (modality: Modality, ev: HandlerEvent | null) =>\n handlers.forEach((handler) => handler(modality, ev))\n\nconst onValid = (e: KeyboardEvent) => {\n return !(\n e.metaKey ||\n (!isMac && e.altKey) ||\n e.ctrlKey ||\n e.key === \"Control\" ||\n e.key === \"Shift\" ||\n e.key === \"Meta\"\n )\n}\n\nconst onKeyboard = (ev: KeyboardEvent) => {\n hasEventBeforeFocus = true\n\n if (onValid(ev)) {\n modality = \"keyboard\"\n\n trigger(\"keyboard\", ev)\n }\n}\n\nconst onPointer = (ev: PointerEvent | MouseEvent) => {\n modality = \"pointer\"\n\n if (\n ev.type === \"mousedown\" ||\n ev.type === \"pointerdown\" ||\n ev.type === \"pointerup\"\n ) {\n hasEventBeforeFocus = true\n\n const target = ev.composedPath ? ev.composedPath()[0] : ev.target\n\n if ((target as HTMLElement).matches(\":focus-visible\")) return\n\n trigger(\"pointer\", ev)\n }\n}\n\nconst isVirtualClick = (ev: MouseEvent | PointerEvent): boolean => {\n if ((ev as any).mozInputSource === 0 && ev.isTrusted) return true\n\n return ev.detail === 0 && !(ev as PointerEvent).pointerType\n}\n\nconst onClick = (ev: MouseEvent) => {\n if (!isVirtualClick(ev)) return\n\n hasEventBeforeFocus = true\n\n modality = \"virtual\"\n}\n\nconst onFocus = (ev: FocusEvent) => {\n if (ev.target === window || ev.target === document) return\n\n if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {\n modality = \"virtual\"\n\n trigger(\"virtual\", ev)\n }\n\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = false\n}\n\nconst onBlur = () => {\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = true\n}\n\nconst isFocusVisible = () => modality !== \"pointer\"\n\nconst setGlobalFocusEvents = () => {\n if (typeof window === \"undefined\" || hasSetup) return\n\n const { focus } = HTMLElement.prototype\n\n HTMLElement.prototype.focus = function customFocus(...args) {\n hasEventBeforeFocus = true\n\n if (this) focus.apply(this, args)\n }\n\n document.addEventListener(\"keydown\", onKeyboard, true)\n document.addEventListener(\"keyup\", onKeyboard, true)\n document.addEventListener(\"click\", onClick, true)\n\n window.addEventListener(\"focus\", onFocus, true)\n window.addEventListener(\"blur\", onBlur, false)\n\n if (typeof PointerEvent !== \"undefined\") {\n document.addEventListener(\"pointerdown\", onPointer, true)\n document.addEventListener(\"pointermove\", onPointer, true)\n document.addEventListener(\"pointerup\", onPointer, true)\n } else {\n document.addEventListener(\"mousedown\", onPointer, true)\n document.addEventListener(\"mousemove\", onPointer, true)\n document.addEventListener(\"mouseup\", onPointer, true)\n }\n\n hasSetup = true\n}\n\ntype TrackFocusVisibleOptions = {\n force?: boolean\n}\n\nexport const trackFocusVisible = (\n func: FocusVisibleCallback,\n { force }: TrackFocusVisibleOptions = {},\n) => {\n if (force) hasSetup = false\n\n setGlobalFocusEvents()\n\n func(isFocusVisible())\n\n const handler = () => func(isFocusVisible())\n\n handlers.add(handler)\n\n return () => {\n handlers.delete(handler)\n }\n}\n\nexport const useFocusVisible = (options?: TrackFocusVisibleOptions) => {\n const [focusVisible, setFocusVisible] = useState(false)\n const [focus, setFocus] = useState(false)\n\n useEffect(() => {\n return trackFocusVisible(setFocusVisible, options)\n }, [options])\n\n return {\n focusVisible: focusVisible && focus,\n onFocus: () => setFocus(true),\n onBlur: () => setFocus(false),\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;AACtB,mBAAoC;AAOpC,IAAI,WAAW;AACf,IAAI,WAA4B;AAChC,IAAI,sBAAsB;AAC1B,IAAI,2BAA2B;AAE/B,IAAM,WAAW,oBAAI,IAAa;AAElC,IAAM,UAAU,CAACA,WAAoB,OACnC,SAAS,QAAQ,CAAC,YAAY,QAAQA,WAAU,EAAE,CAAC;AAErD,IAAM,UAAU,CAAC,MAAqB;AACpC,SAAO,EACL,EAAE,WACD,CAAC,sBAAS,EAAE,UACb,EAAE,WACF,EAAE,QAAQ,aACV,EAAE,QAAQ,WACV,EAAE,QAAQ;AAEd;AAEA,IAAM,aAAa,CAAC,OAAsB;AACxC,wBAAsB;AAEtB,MAAI,QAAQ,EAAE,GAAG;AACf,eAAW;AAEX,YAAQ,YAAY,EAAE;AAAA,EACxB;AACF;AAEA,IAAM,YAAY,CAAC,OAAkC;AACnD,aAAW;AAEX,MACE,GAAG,SAAS,eACZ,GAAG,SAAS,iBACZ,GAAG,SAAS,aACZ;AACA,0BAAsB;AAEtB,UAAM,SAAS,GAAG,eAAe,GAAG,aAAa,EAAE,CAAC,IAAI,GAAG;AAE3D,QAAK,OAAuB,QAAQ,gBAAgB;
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { isMac } from \"@yamada-ui/utils\"\nimport { useEffect, useState } from \"react\"\n\ntype Modality = \"keyboard\" | \"pointer\" | \"virtual\"\ntype HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent\ntype Handler = (modality: Modality, e: HandlerEvent | null) => void\ntype FocusVisibleCallback = (isFocusVisible: boolean) => void\n\nlet hasSetup = false\nlet modality: Modality | null = null\nlet hasEventBeforeFocus = false\nlet hasBlurredWindowRecently = false\n\nconst handlers = new Set<Handler>()\n\nconst trigger = (modality: Modality, ev: HandlerEvent | null) =>\n handlers.forEach((handler) => handler(modality, ev))\n\nconst onValid = (e: KeyboardEvent) => {\n return !(\n e.metaKey ||\n (!isMac && e.altKey) ||\n e.ctrlKey ||\n e.key === \"Control\" ||\n e.key === \"Shift\" ||\n e.key === \"Meta\"\n )\n}\n\nconst onKeyboard = (ev: KeyboardEvent) => {\n hasEventBeforeFocus = true\n\n if (onValid(ev)) {\n modality = \"keyboard\"\n\n trigger(\"keyboard\", ev)\n }\n}\n\nconst onPointer = (ev: PointerEvent | MouseEvent) => {\n modality = \"pointer\"\n\n if (\n ev.type === \"mousedown\" ||\n ev.type === \"pointerdown\" ||\n ev.type === \"pointerup\"\n ) {\n hasEventBeforeFocus = true\n\n const target = ev.composedPath ? ev.composedPath()[0] : ev.target\n\n if ((target as HTMLElement).matches(\":focus-visible\")) return\n\n trigger(\"pointer\", ev)\n }\n}\n\nconst isVirtualClick = (ev: MouseEvent | PointerEvent): boolean => {\n if ((ev as any).mozInputSource === 0 && ev.isTrusted) return true\n\n return ev.detail === 0 && !(ev as PointerEvent).pointerType\n}\n\nconst onClick = (ev: MouseEvent) => {\n if (!isVirtualClick(ev)) return\n\n hasEventBeforeFocus = true\n\n modality = \"virtual\"\n}\n\nconst onFocus = (ev: FocusEvent) => {\n if (ev.target === window || ev.target === document) return\n\n if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {\n modality = \"virtual\"\n\n trigger(\"virtual\", ev)\n }\n\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = false\n}\n\nconst onBlur = () => {\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = true\n}\n\nconst isFocusVisible = () => modality !== \"pointer\"\n\nconst setGlobalFocusEvents = () => {\n if (typeof window === \"undefined\" || hasSetup) return\n\n const { focus } = HTMLElement.prototype\n\n HTMLElement.prototype.focus = function customFocus(...args) {\n hasEventBeforeFocus = true\n\n if (this) focus.apply(this, args)\n }\n\n document.addEventListener(\"keydown\", onKeyboard, true)\n document.addEventListener(\"keyup\", onKeyboard, true)\n document.addEventListener(\"click\", onClick, true)\n\n window.addEventListener(\"focus\", onFocus, true)\n window.addEventListener(\"blur\", onBlur, false)\n\n if (typeof PointerEvent !== \"undefined\") {\n document.addEventListener(\"pointerdown\", onPointer, true)\n document.addEventListener(\"pointermove\", onPointer, true)\n document.addEventListener(\"pointerup\", onPointer, true)\n } else {\n document.addEventListener(\"mousedown\", onPointer, true)\n document.addEventListener(\"mousemove\", onPointer, true)\n document.addEventListener(\"mouseup\", onPointer, true)\n }\n\n hasSetup = true\n}\n\ntype TrackFocusVisibleOptions = {\n force?: boolean\n}\n\nexport const trackFocusVisible = (\n func: FocusVisibleCallback,\n { force }: TrackFocusVisibleOptions = {},\n) => {\n if (force) hasSetup = false\n\n setGlobalFocusEvents()\n\n func(isFocusVisible())\n\n const handler = () => func(isFocusVisible())\n\n handlers.add(handler)\n\n return () => {\n handlers.delete(handler)\n }\n}\n\nexport const useFocusVisible = (options?: TrackFocusVisibleOptions) => {\n const [focusVisible, setFocusVisible] = useState(false)\n const [focus, setFocus] = useState(false)\n\n useEffect(() => {\n return trackFocusVisible(setFocusVisible, options)\n }, [options])\n\n return {\n focusVisible: focusVisible && focus,\n onFocus: () => setFocus(true),\n onBlur: () => setFocus(false),\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;AACtB,mBAAoC;AAOpC,IAAI,WAAW;AACf,IAAI,WAA4B;AAChC,IAAI,sBAAsB;AAC1B,IAAI,2BAA2B;AAE/B,IAAM,WAAW,oBAAI,IAAa;AAElC,IAAM,UAAU,CAACA,WAAoB,OACnC,SAAS,QAAQ,CAAC,YAAY,QAAQA,WAAU,EAAE,CAAC;AAErD,IAAM,UAAU,CAAC,MAAqB;AACpC,SAAO,EACL,EAAE,WACD,CAAC,sBAAS,EAAE,UACb,EAAE,WACF,EAAE,QAAQ,aACV,EAAE,QAAQ,WACV,EAAE,QAAQ;AAEd;AAEA,IAAM,aAAa,CAAC,OAAsB;AACxC,wBAAsB;AAEtB,MAAI,QAAQ,EAAE,GAAG;AACf,eAAW;AAEX,YAAQ,YAAY,EAAE;AAAA,EACxB;AACF;AAEA,IAAM,YAAY,CAAC,OAAkC;AACnD,aAAW;AAEX,MACE,GAAG,SAAS,eACZ,GAAG,SAAS,iBACZ,GAAG,SAAS,aACZ;AACA,0BAAsB;AAEtB,UAAM,SAAS,GAAG,eAAe,GAAG,aAAa,EAAE,CAAC,IAAI,GAAG;AAE3D,QAAK,OAAuB,QAAQ,gBAAgB,EAAG;AAEvD,YAAQ,WAAW,EAAE;AAAA,EACvB;AACF;AAEA,IAAM,iBAAiB,CAAC,OAA2C;AACjE,MAAK,GAAW,mBAAmB,KAAK,GAAG,UAAW,QAAO;AAE7D,SAAO,GAAG,WAAW,KAAK,CAAE,GAAoB;AAClD;AAEA,IAAM,UAAU,CAAC,OAAmB;AAClC,MAAI,CAAC,eAAe,EAAE,EAAG;AAEzB,wBAAsB;AAEtB,aAAW;AACb;AAEA,IAAM,UAAU,CAAC,OAAmB;AAClC,MAAI,GAAG,WAAW,UAAU,GAAG,WAAW,SAAU;AAEpD,MAAI,CAAC,uBAAuB,CAAC,0BAA0B;AACrD,eAAW;AAEX,YAAQ,WAAW,EAAE;AAAA,EACvB;AAEA,wBAAsB;AACtB,6BAA2B;AAC7B;AAEA,IAAM,SAAS,MAAM;AACnB,wBAAsB;AACtB,6BAA2B;AAC7B;AAEA,IAAM,iBAAiB,MAAM,aAAa;AAE1C,IAAM,uBAAuB,MAAM;AACjC,MAAI,OAAO,WAAW,eAAe,SAAU;AAE/C,QAAM,EAAE,MAAM,IAAI,YAAY;AAE9B,cAAY,UAAU,QAAQ,SAAS,eAAe,MAAM;AAC1D,0BAAsB;AAEtB,QAAI,KAAM,OAAM,MAAM,MAAM,IAAI;AAAA,EAClC;AAEA,WAAS,iBAAiB,WAAW,YAAY,IAAI;AACrD,WAAS,iBAAiB,SAAS,YAAY,IAAI;AACnD,WAAS,iBAAiB,SAAS,SAAS,IAAI;AAEhD,SAAO,iBAAiB,SAAS,SAAS,IAAI;AAC9C,SAAO,iBAAiB,QAAQ,QAAQ,KAAK;AAE7C,MAAI,OAAO,iBAAiB,aAAa;AACvC,aAAS,iBAAiB,eAAe,WAAW,IAAI;AACxD,aAAS,iBAAiB,eAAe,WAAW,IAAI;AACxD,aAAS,iBAAiB,aAAa,WAAW,IAAI;AAAA,EACxD,OAAO;AACL,aAAS,iBAAiB,aAAa,WAAW,IAAI;AACtD,aAAS,iBAAiB,aAAa,WAAW,IAAI;AACtD,aAAS,iBAAiB,WAAW,WAAW,IAAI;AAAA,EACtD;AAEA,aAAW;AACb;AAMO,IAAM,oBAAoB,CAC/B,MACA,EAAE,MAAM,IAA8B,CAAC,MACpC;AACH,MAAI,MAAO,YAAW;AAEtB,uBAAqB;AAErB,OAAK,eAAe,CAAC;AAErB,QAAM,UAAU,MAAM,KAAK,eAAe,CAAC;AAE3C,WAAS,IAAI,OAAO;AAEpB,SAAO,MAAM;AACX,aAAS,OAAO,OAAO;AAAA,EACzB;AACF;AAEO,IAAM,kBAAkB,CAAC,YAAuC;AACrE,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,KAAK;AACtD,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,KAAK;AAExC,8BAAU,MAAM;AACd,WAAO,kBAAkB,iBAAiB,OAAO;AAAA,EACnD,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO;AAAA,IACL,cAAc,gBAAgB;AAAA,IAC9B,SAAS,MAAM,SAAS,IAAI;AAAA,IAC5B,QAAQ,MAAM,SAAS,KAAK;AAAA,EAC9B;AACF;","names":["modality"]}
|
package/dist/index.mjs
CHANGED
|
@@ -24,25 +24,21 @@ var onPointer = (ev) => {
|
|
|
24
24
|
if (ev.type === "mousedown" || ev.type === "pointerdown" || ev.type === "pointerup") {
|
|
25
25
|
hasEventBeforeFocus = true;
|
|
26
26
|
const target = ev.composedPath ? ev.composedPath()[0] : ev.target;
|
|
27
|
-
if (target.matches(":focus-visible"))
|
|
28
|
-
return;
|
|
27
|
+
if (target.matches(":focus-visible")) return;
|
|
29
28
|
trigger("pointer", ev);
|
|
30
29
|
}
|
|
31
30
|
};
|
|
32
31
|
var isVirtualClick = (ev) => {
|
|
33
|
-
if (ev.mozInputSource === 0 && ev.isTrusted)
|
|
34
|
-
return true;
|
|
32
|
+
if (ev.mozInputSource === 0 && ev.isTrusted) return true;
|
|
35
33
|
return ev.detail === 0 && !ev.pointerType;
|
|
36
34
|
};
|
|
37
35
|
var onClick = (ev) => {
|
|
38
|
-
if (!isVirtualClick(ev))
|
|
39
|
-
return;
|
|
36
|
+
if (!isVirtualClick(ev)) return;
|
|
40
37
|
hasEventBeforeFocus = true;
|
|
41
38
|
modality = "virtual";
|
|
42
39
|
};
|
|
43
40
|
var onFocus = (ev) => {
|
|
44
|
-
if (ev.target === window || ev.target === document)
|
|
45
|
-
return;
|
|
41
|
+
if (ev.target === window || ev.target === document) return;
|
|
46
42
|
if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
|
|
47
43
|
modality = "virtual";
|
|
48
44
|
trigger("virtual", ev);
|
|
@@ -56,13 +52,11 @@ var onBlur = () => {
|
|
|
56
52
|
};
|
|
57
53
|
var isFocusVisible = () => modality !== "pointer";
|
|
58
54
|
var setGlobalFocusEvents = () => {
|
|
59
|
-
if (typeof window === "undefined" || hasSetup)
|
|
60
|
-
return;
|
|
55
|
+
if (typeof window === "undefined" || hasSetup) return;
|
|
61
56
|
const { focus } = HTMLElement.prototype;
|
|
62
57
|
HTMLElement.prototype.focus = function customFocus(...args) {
|
|
63
58
|
hasEventBeforeFocus = true;
|
|
64
|
-
if (this)
|
|
65
|
-
focus.apply(this, args);
|
|
59
|
+
if (this) focus.apply(this, args);
|
|
66
60
|
};
|
|
67
61
|
document.addEventListener("keydown", onKeyboard, true);
|
|
68
62
|
document.addEventListener("keyup", onKeyboard, true);
|
|
@@ -81,8 +75,7 @@ var setGlobalFocusEvents = () => {
|
|
|
81
75
|
hasSetup = true;
|
|
82
76
|
};
|
|
83
77
|
var trackFocusVisible = (func, { force } = {}) => {
|
|
84
|
-
if (force)
|
|
85
|
-
hasSetup = false;
|
|
78
|
+
if (force) hasSetup = false;
|
|
86
79
|
setGlobalFocusEvents();
|
|
87
80
|
func(isFocusVisible());
|
|
88
81
|
const handler = () => func(isFocusVisible());
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { isMac } from \"@yamada-ui/utils\"\nimport { useEffect, useState } from \"react\"\n\ntype Modality = \"keyboard\" | \"pointer\" | \"virtual\"\ntype HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent\ntype Handler = (modality: Modality, e: HandlerEvent | null) => void\ntype FocusVisibleCallback = (isFocusVisible: boolean) => void\n\nlet hasSetup = false\nlet modality: Modality | null = null\nlet hasEventBeforeFocus = false\nlet hasBlurredWindowRecently = false\n\nconst handlers = new Set<Handler>()\n\nconst trigger = (modality: Modality, ev: HandlerEvent | null) =>\n handlers.forEach((handler) => handler(modality, ev))\n\nconst onValid = (e: KeyboardEvent) => {\n return !(\n e.metaKey ||\n (!isMac && e.altKey) ||\n e.ctrlKey ||\n e.key === \"Control\" ||\n e.key === \"Shift\" ||\n e.key === \"Meta\"\n )\n}\n\nconst onKeyboard = (ev: KeyboardEvent) => {\n hasEventBeforeFocus = true\n\n if (onValid(ev)) {\n modality = \"keyboard\"\n\n trigger(\"keyboard\", ev)\n }\n}\n\nconst onPointer = (ev: PointerEvent | MouseEvent) => {\n modality = \"pointer\"\n\n if (\n ev.type === \"mousedown\" ||\n ev.type === \"pointerdown\" ||\n ev.type === \"pointerup\"\n ) {\n hasEventBeforeFocus = true\n\n const target = ev.composedPath ? ev.composedPath()[0] : ev.target\n\n if ((target as HTMLElement).matches(\":focus-visible\")) return\n\n trigger(\"pointer\", ev)\n }\n}\n\nconst isVirtualClick = (ev: MouseEvent | PointerEvent): boolean => {\n if ((ev as any).mozInputSource === 0 && ev.isTrusted) return true\n\n return ev.detail === 0 && !(ev as PointerEvent).pointerType\n}\n\nconst onClick = (ev: MouseEvent) => {\n if (!isVirtualClick(ev)) return\n\n hasEventBeforeFocus = true\n\n modality = \"virtual\"\n}\n\nconst onFocus = (ev: FocusEvent) => {\n if (ev.target === window || ev.target === document) return\n\n if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {\n modality = \"virtual\"\n\n trigger(\"virtual\", ev)\n }\n\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = false\n}\n\nconst onBlur = () => {\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = true\n}\n\nconst isFocusVisible = () => modality !== \"pointer\"\n\nconst setGlobalFocusEvents = () => {\n if (typeof window === \"undefined\" || hasSetup) return\n\n const { focus } = HTMLElement.prototype\n\n HTMLElement.prototype.focus = function customFocus(...args) {\n hasEventBeforeFocus = true\n\n if (this) focus.apply(this, args)\n }\n\n document.addEventListener(\"keydown\", onKeyboard, true)\n document.addEventListener(\"keyup\", onKeyboard, true)\n document.addEventListener(\"click\", onClick, true)\n\n window.addEventListener(\"focus\", onFocus, true)\n window.addEventListener(\"blur\", onBlur, false)\n\n if (typeof PointerEvent !== \"undefined\") {\n document.addEventListener(\"pointerdown\", onPointer, true)\n document.addEventListener(\"pointermove\", onPointer, true)\n document.addEventListener(\"pointerup\", onPointer, true)\n } else {\n document.addEventListener(\"mousedown\", onPointer, true)\n document.addEventListener(\"mousemove\", onPointer, true)\n document.addEventListener(\"mouseup\", onPointer, true)\n }\n\n hasSetup = true\n}\n\ntype TrackFocusVisibleOptions = {\n force?: boolean\n}\n\nexport const trackFocusVisible = (\n func: FocusVisibleCallback,\n { force }: TrackFocusVisibleOptions = {},\n) => {\n if (force) hasSetup = false\n\n setGlobalFocusEvents()\n\n func(isFocusVisible())\n\n const handler = () => func(isFocusVisible())\n\n handlers.add(handler)\n\n return () => {\n handlers.delete(handler)\n }\n}\n\nexport const useFocusVisible = (options?: TrackFocusVisibleOptions) => {\n const [focusVisible, setFocusVisible] = useState(false)\n const [focus, setFocus] = useState(false)\n\n useEffect(() => {\n return trackFocusVisible(setFocusVisible, options)\n }, [options])\n\n return {\n focusVisible: focusVisible && focus,\n onFocus: () => setFocus(true),\n onBlur: () => setFocus(false),\n }\n}\n"],"mappings":";;;AAAA,SAAS,aAAa;AACtB,SAAS,WAAW,gBAAgB;AAOpC,IAAI,WAAW;AACf,IAAI,WAA4B;AAChC,IAAI,sBAAsB;AAC1B,IAAI,2BAA2B;AAE/B,IAAM,WAAW,oBAAI,IAAa;AAElC,IAAM,UAAU,CAACA,WAAoB,OACnC,SAAS,QAAQ,CAAC,YAAY,QAAQA,WAAU,EAAE,CAAC;AAErD,IAAM,UAAU,CAAC,MAAqB;AACpC,SAAO,EACL,EAAE,WACD,CAAC,SAAS,EAAE,UACb,EAAE,WACF,EAAE,QAAQ,aACV,EAAE,QAAQ,WACV,EAAE,QAAQ;AAEd;AAEA,IAAM,aAAa,CAAC,OAAsB;AACxC,wBAAsB;AAEtB,MAAI,QAAQ,EAAE,GAAG;AACf,eAAW;AAEX,YAAQ,YAAY,EAAE;AAAA,EACxB;AACF;AAEA,IAAM,YAAY,CAAC,OAAkC;AACnD,aAAW;AAEX,MACE,GAAG,SAAS,eACZ,GAAG,SAAS,iBACZ,GAAG,SAAS,aACZ;AACA,0BAAsB;AAEtB,UAAM,SAAS,GAAG,eAAe,GAAG,aAAa,EAAE,CAAC,IAAI,GAAG;AAE3D,QAAK,OAAuB,QAAQ,gBAAgB;
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { isMac } from \"@yamada-ui/utils\"\nimport { useEffect, useState } from \"react\"\n\ntype Modality = \"keyboard\" | \"pointer\" | \"virtual\"\ntype HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent\ntype Handler = (modality: Modality, e: HandlerEvent | null) => void\ntype FocusVisibleCallback = (isFocusVisible: boolean) => void\n\nlet hasSetup = false\nlet modality: Modality | null = null\nlet hasEventBeforeFocus = false\nlet hasBlurredWindowRecently = false\n\nconst handlers = new Set<Handler>()\n\nconst trigger = (modality: Modality, ev: HandlerEvent | null) =>\n handlers.forEach((handler) => handler(modality, ev))\n\nconst onValid = (e: KeyboardEvent) => {\n return !(\n e.metaKey ||\n (!isMac && e.altKey) ||\n e.ctrlKey ||\n e.key === \"Control\" ||\n e.key === \"Shift\" ||\n e.key === \"Meta\"\n )\n}\n\nconst onKeyboard = (ev: KeyboardEvent) => {\n hasEventBeforeFocus = true\n\n if (onValid(ev)) {\n modality = \"keyboard\"\n\n trigger(\"keyboard\", ev)\n }\n}\n\nconst onPointer = (ev: PointerEvent | MouseEvent) => {\n modality = \"pointer\"\n\n if (\n ev.type === \"mousedown\" ||\n ev.type === \"pointerdown\" ||\n ev.type === \"pointerup\"\n ) {\n hasEventBeforeFocus = true\n\n const target = ev.composedPath ? ev.composedPath()[0] : ev.target\n\n if ((target as HTMLElement).matches(\":focus-visible\")) return\n\n trigger(\"pointer\", ev)\n }\n}\n\nconst isVirtualClick = (ev: MouseEvent | PointerEvent): boolean => {\n if ((ev as any).mozInputSource === 0 && ev.isTrusted) return true\n\n return ev.detail === 0 && !(ev as PointerEvent).pointerType\n}\n\nconst onClick = (ev: MouseEvent) => {\n if (!isVirtualClick(ev)) return\n\n hasEventBeforeFocus = true\n\n modality = \"virtual\"\n}\n\nconst onFocus = (ev: FocusEvent) => {\n if (ev.target === window || ev.target === document) return\n\n if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {\n modality = \"virtual\"\n\n trigger(\"virtual\", ev)\n }\n\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = false\n}\n\nconst onBlur = () => {\n hasEventBeforeFocus = false\n hasBlurredWindowRecently = true\n}\n\nconst isFocusVisible = () => modality !== \"pointer\"\n\nconst setGlobalFocusEvents = () => {\n if (typeof window === \"undefined\" || hasSetup) return\n\n const { focus } = HTMLElement.prototype\n\n HTMLElement.prototype.focus = function customFocus(...args) {\n hasEventBeforeFocus = true\n\n if (this) focus.apply(this, args)\n }\n\n document.addEventListener(\"keydown\", onKeyboard, true)\n document.addEventListener(\"keyup\", onKeyboard, true)\n document.addEventListener(\"click\", onClick, true)\n\n window.addEventListener(\"focus\", onFocus, true)\n window.addEventListener(\"blur\", onBlur, false)\n\n if (typeof PointerEvent !== \"undefined\") {\n document.addEventListener(\"pointerdown\", onPointer, true)\n document.addEventListener(\"pointermove\", onPointer, true)\n document.addEventListener(\"pointerup\", onPointer, true)\n } else {\n document.addEventListener(\"mousedown\", onPointer, true)\n document.addEventListener(\"mousemove\", onPointer, true)\n document.addEventListener(\"mouseup\", onPointer, true)\n }\n\n hasSetup = true\n}\n\ntype TrackFocusVisibleOptions = {\n force?: boolean\n}\n\nexport const trackFocusVisible = (\n func: FocusVisibleCallback,\n { force }: TrackFocusVisibleOptions = {},\n) => {\n if (force) hasSetup = false\n\n setGlobalFocusEvents()\n\n func(isFocusVisible())\n\n const handler = () => func(isFocusVisible())\n\n handlers.add(handler)\n\n return () => {\n handlers.delete(handler)\n }\n}\n\nexport const useFocusVisible = (options?: TrackFocusVisibleOptions) => {\n const [focusVisible, setFocusVisible] = useState(false)\n const [focus, setFocus] = useState(false)\n\n useEffect(() => {\n return trackFocusVisible(setFocusVisible, options)\n }, [options])\n\n return {\n focusVisible: focusVisible && focus,\n onFocus: () => setFocus(true),\n onBlur: () => setFocus(false),\n }\n}\n"],"mappings":"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","names":["modality"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/use-focus-visible",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2-dev-20240618074731",
|
|
4
4
|
"description": "Yamada UI useFocusVisible custom hook",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"use-focus-visible"
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"url": "https://github.com/yamada-ui/yamada-ui/issues"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@yamada-ui/utils": "1.
|
|
28
|
+
"@yamada-ui/utils": "1.3.0-dev-20240618074731"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"react": "^18.0.0",
|