@zag-js/focus-visible 1.33.1 → 1.34.1

package/dist/index.d.mts

@@ -4,6 +4,11 @@ interface GlobalListenerData {
     focus: VoidFunction;
 }
 declare let listenerMap: Map<Window, GlobalListenerData>;
+/**
+ * When true, the next focus event will be ignored. Used by preventFocus() to avoid
+ * focus rings when programmatically reverting focus.
+ */
+declare let ignoreFocusEvent: boolean;
 declare function getInteractionModality(): Modality | null;
 declare function setInteractionModality(modality: Modality): void;
 interface InteractionModalityChangeDetails {
@@ -36,4 +41,4 @@ interface FocusVisibleProps {
 }
 declare function trackFocusVisible(props?: FocusVisibleProps): VoidFunction;
 
-export { type FocusVisibleChangeDetails, type FocusVisibleProps, type InteractionModalityChangeDetails, type InteractionModalityProps, type Modality, getInteractionModality, isFocusVisible, listenerMap, setInteractionModality, trackFocusVisible, trackInteractionModality };
+export { type FocusVisibleChangeDetails, type FocusVisibleProps, type InteractionModalityChangeDetails, type InteractionModalityProps, type Modality, getInteractionModality, ignoreFocusEvent, isFocusVisible, listenerMap, setInteractionModality, trackFocusVisible, trackInteractionModality };

package/dist/index.d.ts

@@ -4,6 +4,11 @@ interface GlobalListenerData {
     focus: VoidFunction;
 }
 declare let listenerMap: Map<Window, GlobalListenerData>;
+/**
+ * When true, the next focus event will be ignored. Used by preventFocus() to avoid
+ * focus rings when programmatically reverting focus.
+ */
+declare let ignoreFocusEvent: boolean;
 declare function getInteractionModality(): Modality | null;
 declare function setInteractionModality(modality: Modality): void;
 interface InteractionModalityChangeDetails {
@@ -36,4 +41,4 @@ interface FocusVisibleProps {
 }
 declare function trackFocusVisible(props?: FocusVisibleProps): VoidFunction;
 
-export { type FocusVisibleChangeDetails, type FocusVisibleProps, type InteractionModalityChangeDetails, type InteractionModalityProps, type Modality, getInteractionModality, isFocusVisible, listenerMap, setInteractionModality, trackFocusVisible, trackInteractionModality };
+export { type FocusVisibleChangeDetails, type FocusVisibleProps, type InteractionModalityChangeDetails, type InteractionModalityProps, type Modality, getInteractionModality, ignoreFocusEvent, isFocusVisible, listenerMap, setInteractionModality, trackFocusVisible, trackInteractionModality };

package/dist/index.js

@@ -8,9 +8,11 @@ function isValidKey(e) {
 }
 var nonTextInputTypes = /* @__PURE__ */ new Set(["checkbox", "radio", "range", "color", "file", "image", "button", "submit", "reset"]);
 function isKeyboardFocusEvent(isTextInput, modality, e) {
-  const target = e ? domQuery.getEventTarget(e) : null;
-  const win = domQuery.getWindow(target);
-  isTextInput = isTextInput || target instanceof win.HTMLInputElement && !nonTextInputTypes.has(target?.type) || target instanceof win.HTMLTextAreaElement || target instanceof win.HTMLElement && target.isContentEditable;
+  const eventTarget = e ? domQuery.getEventTarget(e) : null;
+  const doc = domQuery.getDocument(eventTarget);
+  const win = domQuery.getWindow(eventTarget);
+  const activeElement = domQuery.getActiveElement(doc);
+  isTextInput = isTextInput || activeElement instanceof win.HTMLInputElement && !nonTextInputTypes.has(activeElement?.type) || activeElement instanceof win.HTMLTextAreaElement || activeElement instanceof win.HTMLElement && activeElement.isContentEditable;
   return !(isTextInput && modality === "keyboard" && e instanceof win.KeyboardEvent && !Reflect.has(FOCUS_VISIBLE_INPUT_KEYS, e.key));
 }
 var currentModality = null;
@@ -18,6 +20,7 @@ var changeHandlers = /* @__PURE__ */ new Set();
 var listenerMap = /* @__PURE__ */ new Map();
 var hasEventBeforeFocus = false;
 var hasBlurredWindowRecently = false;
+var ignoreFocusEvent = false;
 var FOCUS_VISIBLE_INPUT_KEYS = {
   Tab: true,
   Escape: true
@@ -49,7 +52,7 @@ function handleClickEvent(e) {
 }
 function handleFocusEvent(e) {
   const target = domQuery.getEventTarget(e);
-  if (target === domQuery.getWindow(target) || target === domQuery.getDocument(target)) {
+  if (target === domQuery.getWindow(target) || target === domQuery.getDocument(target) || ignoreFocusEvent || !e.isTrusted) {
     return;
   }
   if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
@@ -71,8 +74,6 @@ function setupGlobalFocusEvents(root) {
   const doc = domQuery.getDocument(root);
   let focus = win.HTMLElement.prototype.focus;
   function patchedFocus() {
-    currentModality = "virtual";
-    triggerChangeHandlers("virtual", null);
     hasEventBeforeFocus = true;
     focus.apply(this, arguments);
   }
@@ -154,7 +155,7 @@ function trackInteractionModality(props) {
   };
 }
 function isFocusVisible() {
-  return currentModality === "keyboard";
+  return currentModality === "keyboard" || currentModality === "virtual";
 }
 function trackFocusVisible(props = {}) {
   const { isTextInput, autoFocus, onChange, root } = props;
@@ -171,6 +172,7 @@ function trackFocusVisible(props = {}) {
 }
 
 exports.getInteractionModality = getInteractionModality;
+exports.ignoreFocusEvent = ignoreFocusEvent;
 exports.isFocusVisible = isFocusVisible;
 exports.listenerMap = listenerMap;
 exports.setInteractionModality = setInteractionModality;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { getWindow, getDocument, getEventTarget, isVirtualClick, isMac } from '@zag-js/dom-query';
+import { getWindow, getDocument, getEventTarget, getActiveElement, isVirtualClick, isMac } from '@zag-js/dom-query';
 
 // src/index.ts
 function isValidKey(e) {
@@ -6,9 +6,11 @@ function isValidKey(e) {
 }
 var nonTextInputTypes = /* @__PURE__ */ new Set(["checkbox", "radio", "range", "color", "file", "image", "button", "submit", "reset"]);
 function isKeyboardFocusEvent(isTextInput, modality, e) {
-  const target = e ? getEventTarget(e) : null;
-  const win = getWindow(target);
-  isTextInput = isTextInput || target instanceof win.HTMLInputElement && !nonTextInputTypes.has(target?.type) || target instanceof win.HTMLTextAreaElement || target instanceof win.HTMLElement && target.isContentEditable;
+  const eventTarget = e ? getEventTarget(e) : null;
+  const doc = getDocument(eventTarget);
+  const win = getWindow(eventTarget);
+  const activeElement = getActiveElement(doc);
+  isTextInput = isTextInput || activeElement instanceof win.HTMLInputElement && !nonTextInputTypes.has(activeElement?.type) || activeElement instanceof win.HTMLTextAreaElement || activeElement instanceof win.HTMLElement && activeElement.isContentEditable;
   return !(isTextInput && modality === "keyboard" && e instanceof win.KeyboardEvent && !Reflect.has(FOCUS_VISIBLE_INPUT_KEYS, e.key));
 }
 var currentModality = null;
@@ -16,6 +18,7 @@ var changeHandlers = /* @__PURE__ */ new Set();
 var listenerMap = /* @__PURE__ */ new Map();
 var hasEventBeforeFocus = false;
 var hasBlurredWindowRecently = false;
+var ignoreFocusEvent = false;
 var FOCUS_VISIBLE_INPUT_KEYS = {
   Tab: true,
   Escape: true
@@ -47,7 +50,7 @@ function handleClickEvent(e) {
 }
 function handleFocusEvent(e) {
   const target = getEventTarget(e);
-  if (target === getWindow(target) || target === getDocument(target)) {
+  if (target === getWindow(target) || target === getDocument(target) || ignoreFocusEvent || !e.isTrusted) {
     return;
   }
   if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
@@ -69,8 +72,6 @@ function setupGlobalFocusEvents(root) {
   const doc = getDocument(root);
   let focus = win.HTMLElement.prototype.focus;
   function patchedFocus() {
-    currentModality = "virtual";
-    triggerChangeHandlers("virtual", null);
     hasEventBeforeFocus = true;
     focus.apply(this, arguments);
   }
@@ -152,7 +153,7 @@ function trackInteractionModality(props) {
   };
 }
 function isFocusVisible() {
-  return currentModality === "keyboard";
+  return currentModality === "keyboard" || currentModality === "virtual";
 }
 function trackFocusVisible(props = {}) {
   const { isTextInput, autoFocus, onChange, root } = props;
@@ -168,4 +169,4 @@ function trackFocusVisible(props = {}) {
   };
 }
 
-export { getInteractionModality, isFocusVisible, listenerMap, setInteractionModality, trackFocusVisible, trackInteractionModality };
+export { getInteractionModality, ignoreFocusEvent, isFocusVisible, listenerMap, setInteractionModality, trackFocusVisible, trackInteractionModality };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/focus-visible",
-  "version": "1.33.1",
+  "version": "1.34.1",
   "description": "Focus visible polyfill utility based on WICG",
   "keywords": [
     "js",
@@ -25,7 +25,7 @@
   "clean-package": "../../../clean-package.config.json",
   "main": "dist/index.js",
   "dependencies": {
-    "@zag-js/dom-query": "1.33.1"
+    "@zag-js/dom-query": "1.34.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"