@zag-js/focus-visible 0.0.0-dev-20220616113129 → 0.0.0-dev-20220617070002

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.
Files changed (4) hide show
  1. package/dist/index.d.ts +2 -0
  2. package/dist/index.js +34 -9
  3. package/dist/index.mjs +34 -9
  4. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ declare type Modality = "keyboard" | "pointer" | "virtual";
1
2
  declare type FocusVisibleCallback = (isFocusVisible: boolean) => void;
2
3
  export declare function trackFocusVisible(fn: FocusVisibleCallback): () => void;
4
+ export declare function trackInteractionModality(fn: (v: Modality | null) => void): () => void;
3
5
  export {};
package/dist/index.js CHANGED
@@ -20,20 +20,22 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
20
20
  // src/index.ts
21
21
  var src_exports = {};
22
22
  __export(src_exports, {
23
- trackFocusVisible: () => trackFocusVisible
23
+ trackFocusVisible: () => trackFocusVisible,
24
+ trackInteractionModality: () => trackInteractionModality
24
25
  });
25
26
  module.exports = __toCommonJS(src_exports);
26
27
  var hasSetup = false;
27
28
  var modality = null;
28
29
  var hasEventBeforeFocus = false;
30
+ var hasBlurredWindowRecently = false;
29
31
  var handlers = /* @__PURE__ */ new Set();
30
- var isMac = typeof window !== "undefined" && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false;
31
- function isValidKey(event) {
32
- return !(event.metaKey || !isMac && event.altKey || event.ctrlKey);
33
- }
34
32
  function trigger(modality2, event) {
35
33
  handlers.forEach((handler) => handler(modality2, event));
36
34
  }
35
+ var isMac = typeof window !== "undefined" && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false;
36
+ function isValidKey(e) {
37
+ return !(e.metaKey || !isMac && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
38
+ }
37
39
  function onKeyboardEvent(event) {
38
40
  hasEventBeforeFocus = true;
39
41
  if (isValidKey(event)) {
@@ -51,21 +53,34 @@ function onPointerEvent(event) {
51
53
  trigger("pointer", event);
52
54
  }
53
55
  }
56
+ function isVirtualClick(event) {
57
+ if (event.mozInputSource === 0 && event.isTrusted)
58
+ return true;
59
+ return event.detail === 0 && !event.pointerType;
60
+ }
61
+ function onClickEvent(e) {
62
+ if (isVirtualClick(e)) {
63
+ hasEventBeforeFocus = true;
64
+ modality = "virtual";
65
+ }
66
+ }
54
67
  function onWindowFocus(event) {
55
68
  if (event.target === window || event.target === document) {
56
69
  return;
57
70
  }
58
- if (!hasEventBeforeFocus) {
59
- modality = "keyboard";
60
- trigger("keyboard", event);
71
+ if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
72
+ modality = "virtual";
73
+ trigger("virtual", event);
61
74
  }
62
75
  hasEventBeforeFocus = false;
76
+ hasBlurredWindowRecently = false;
63
77
  }
64
78
  function onWindowBlur() {
65
79
  hasEventBeforeFocus = false;
80
+ hasBlurredWindowRecently = true;
66
81
  }
67
82
  function isFocusVisible() {
68
- return modality === "keyboard";
83
+ return modality != null && modality !== "pointer";
69
84
  }
70
85
  function setupGlobalFocusEvents() {
71
86
  if (typeof window === "undefined" || hasSetup) {
@@ -78,6 +93,7 @@ function setupGlobalFocusEvents() {
78
93
  };
79
94
  document.addEventListener("keydown", onKeyboardEvent, true);
80
95
  document.addEventListener("keyup", onKeyboardEvent, true);
96
+ document.addEventListener("click", onClickEvent, true);
81
97
  window.addEventListener("focus", onWindowFocus, true);
82
98
  window.addEventListener("blur", onWindowBlur, false);
83
99
  if (typeof PointerEvent !== "undefined") {
@@ -100,3 +116,12 @@ function trackFocusVisible(fn) {
100
116
  handlers.delete(handler);
101
117
  };
102
118
  }
119
+ function trackInteractionModality(fn) {
120
+ setupGlobalFocusEvents();
121
+ fn(modality);
122
+ const handler = () => fn(modality);
123
+ handlers.add(handler);
124
+ return () => {
125
+ handlers.delete(handler);
126
+ };
127
+ }
package/dist/index.mjs CHANGED
@@ -4,14 +4,15 @@
4
4
  var hasSetup = false;
5
5
  var modality = null;
6
6
  var hasEventBeforeFocus = false;
7
+ var hasBlurredWindowRecently = false;
7
8
  var handlers = /* @__PURE__ */ new Set();
8
- var isMac = typeof window !== "undefined" && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false;
9
- function isValidKey(event) {
10
- return !(event.metaKey || !isMac && event.altKey || event.ctrlKey);
11
- }
12
9
  function trigger(modality2, event) {
13
10
  handlers.forEach((handler) => handler(modality2, event));
14
11
  }
12
+ var isMac = typeof window !== "undefined" && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false;
13
+ function isValidKey(e) {
14
+ return !(e.metaKey || !isMac && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
15
+ }
15
16
  function onKeyboardEvent(event) {
16
17
  hasEventBeforeFocus = true;
17
18
  if (isValidKey(event)) {
@@ -29,21 +30,34 @@ function onPointerEvent(event) {
29
30
  trigger("pointer", event);
30
31
  }
31
32
  }
33
+ function isVirtualClick(event) {
34
+ if (event.mozInputSource === 0 && event.isTrusted)
35
+ return true;
36
+ return event.detail === 0 && !event.pointerType;
37
+ }
38
+ function onClickEvent(e) {
39
+ if (isVirtualClick(e)) {
40
+ hasEventBeforeFocus = true;
41
+ modality = "virtual";
42
+ }
43
+ }
32
44
  function onWindowFocus(event) {
33
45
  if (event.target === window || event.target === document) {
34
46
  return;
35
47
  }
36
- if (!hasEventBeforeFocus) {
37
- modality = "keyboard";
38
- trigger("keyboard", event);
48
+ if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
49
+ modality = "virtual";
50
+ trigger("virtual", event);
39
51
  }
40
52
  hasEventBeforeFocus = false;
53
+ hasBlurredWindowRecently = false;
41
54
  }
42
55
  function onWindowBlur() {
43
56
  hasEventBeforeFocus = false;
57
+ hasBlurredWindowRecently = true;
44
58
  }
45
59
  function isFocusVisible() {
46
- return modality === "keyboard";
60
+ return modality != null && modality !== "pointer";
47
61
  }
48
62
  function setupGlobalFocusEvents() {
49
63
  if (typeof window === "undefined" || hasSetup) {
@@ -56,6 +70,7 @@ function setupGlobalFocusEvents() {
56
70
  };
57
71
  document.addEventListener("keydown", onKeyboardEvent, true);
58
72
  document.addEventListener("keyup", onKeyboardEvent, true);
73
+ document.addEventListener("click", onClickEvent, true);
59
74
  window.addEventListener("focus", onWindowFocus, true);
60
75
  window.addEventListener("blur", onWindowBlur, false);
61
76
  if (typeof PointerEvent !== "undefined") {
@@ -78,6 +93,16 @@ function trackFocusVisible(fn) {
78
93
  handlers.delete(handler);
79
94
  };
80
95
  }
96
+ function trackInteractionModality(fn) {
97
+ setupGlobalFocusEvents();
98
+ fn(modality);
99
+ const handler = () => fn(modality);
100
+ handlers.add(handler);
101
+ return () => {
102
+ handlers.delete(handler);
103
+ };
104
+ }
81
105
  export {
82
- trackFocusVisible
106
+ trackFocusVisible,
107
+ trackInteractionModality
83
108
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/focus-visible",
3
- "version": "0.0.0-dev-20220616113129",
3
+ "version": "0.0.0-dev-20220617070002",
4
4
  "description": "Focus visible polyfill utility based on WICG",
5
5
  "keywords": [
6
6
  "js",