@zag-js/focus-visible 0.68.1 → 0.70.0

package/dist/index.d.mts

@@ -1,8 +1,39 @@
 type Modality = "keyboard" | "pointer" | "virtual";
-type FocusVisibleCallback = (isFocusVisible: boolean) => void;
-declare function trackFocusVisible(fn: FocusVisibleCallback): () => void;
-declare function trackInteractionModality(fn: (value: Modality | null) => void): () => void;
-declare function setInteractionModality(value: Modality): void;
+type RootNode = Document | ShadowRoot | Node;
+interface GlobalListenerData {
+    focus: VoidFunction;
+}
+declare let listenerMap: Map<Window, GlobalListenerData>;
 declare function getInteractionModality(): Modality | null;
+declare function setInteractionModality(modality: Modality): void;
+interface InteractionModalityChangeDetails {
+    /** The modality of the interaction that caused the focus to be visible. */
+    modality: Modality | null;
+}
+interface InteractionModalityProps {
+    /** The root element to track focus visibility for. */
+    root?: RootNode;
+    /** Callback to be called when the interaction modality changes. */
+    onChange: (details: InteractionModalityChangeDetails) => void;
+}
+declare function trackInteractionModality(props: InteractionModalityProps): VoidFunction;
+declare function isFocusVisible(): boolean;
+interface FocusVisibleChangeDetails {
+    /** Whether keyboard focus is visible globally. */
+    isFocusVisible: boolean;
+    /** The modality of the interaction that caused the focus to be visible. */
+    modality: Modality | null;
+}
+interface FocusVisibleProps {
+    /** The root element to track focus visibility for. */
+    root?: RootNode;
+    /** Whether the element is a text input. */
+    isTextInput?: boolean;
+    /** Whether the element will be auto focused. */
+    autoFocus?: boolean;
+    /** Callback to be called when the focus visibility changes. */
+    onChange?: (details: FocusVisibleChangeDetails) => void;
+}
+declare function trackFocusVisible(props?: FocusVisibleProps): VoidFunction;
 
-export { getInteractionModality, setInteractionModality, trackFocusVisible, trackInteractionModality };
+export { type FocusVisibleChangeDetails, type FocusVisibleProps, type InteractionModalityChangeDetails, type InteractionModalityProps, type Modality, getInteractionModality, isFocusVisible, listenerMap, setInteractionModality, trackFocusVisible, trackInteractionModality };

package/dist/index.d.ts

@@ -1,8 +1,39 @@
 type Modality = "keyboard" | "pointer" | "virtual";
-type FocusVisibleCallback = (isFocusVisible: boolean) => void;
-declare function trackFocusVisible(fn: FocusVisibleCallback): () => void;
-declare function trackInteractionModality(fn: (value: Modality | null) => void): () => void;
-declare function setInteractionModality(value: Modality): void;
+type RootNode = Document | ShadowRoot | Node;
+interface GlobalListenerData {
+    focus: VoidFunction;
+}
+declare let listenerMap: Map<Window, GlobalListenerData>;
 declare function getInteractionModality(): Modality | null;
+declare function setInteractionModality(modality: Modality): void;
+interface InteractionModalityChangeDetails {
+    /** The modality of the interaction that caused the focus to be visible. */
+    modality: Modality | null;
+}
+interface InteractionModalityProps {
+    /** The root element to track focus visibility for. */
+    root?: RootNode;
+    /** Callback to be called when the interaction modality changes. */
+    onChange: (details: InteractionModalityChangeDetails) => void;
+}
+declare function trackInteractionModality(props: InteractionModalityProps): VoidFunction;
+declare function isFocusVisible(): boolean;
+interface FocusVisibleChangeDetails {
+    /** Whether keyboard focus is visible globally. */
+    isFocusVisible: boolean;
+    /** The modality of the interaction that caused the focus to be visible. */
+    modality: Modality | null;
+}
+interface FocusVisibleProps {
+    /** The root element to track focus visibility for. */
+    root?: RootNode;
+    /** Whether the element is a text input. */
+    isTextInput?: boolean;
+    /** Whether the element will be auto focused. */
+    autoFocus?: boolean;
+    /** Callback to be called when the focus visibility changes. */
+    onChange?: (details: FocusVisibleChangeDetails) => void;
+}
+declare function trackFocusVisible(props?: FocusVisibleProps): VoidFunction;
 
-export { getInteractionModality, setInteractionModality, trackFocusVisible, trackInteractionModality };
+export { type FocusVisibleChangeDetails, type FocusVisibleProps, type InteractionModalityChangeDetails, type InteractionModalityProps, type Modality, getInteractionModality, isFocusVisible, listenerMap, setInteractionModality, trackFocusVisible, trackInteractionModality };

package/dist/index.js

@@ -21,129 +21,179 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   getInteractionModality: () => getInteractionModality,
+  isFocusVisible: () => isFocusVisible,
+  listenerMap: () => listenerMap,
   setInteractionModality: () => setInteractionModality,
   trackFocusVisible: () => trackFocusVisible,
   trackInteractionModality: () => trackInteractionModality
 });
 module.exports = __toCommonJS(src_exports);
 var import_dom_query = require("@zag-js/dom-query");
-var hasSetup = false;
-var modality = null;
-var hasEventBeforeFocus = false;
-var hasBlurredWindowRecently = false;
-var handlers = /* @__PURE__ */ new Set();
-function trigger(modality2, event) {
-  handlers.forEach((handler) => handler(modality2, event));
+function isVirtualClick(event) {
+  if (event.mozInputSource === 0 && event.isTrusted) return true;
+  return event.detail === 0 && !event.pointerType;
 }
-var isMac = typeof window !== "undefined" && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false;
 function isValidKey(e) {
-  return !(e.metaKey || !isMac && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
+  return !(e.metaKey || !(0, import_dom_query.isMac)() && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
 }
-function onKeyboardEvent(event) {
+var nonTextInputTypes = /* @__PURE__ */ new Set(["checkbox", "radio", "range", "color", "file", "image", "button", "submit", "reset"]);
+function isKeyboardFocusEvent(isTextInput, modality, e) {
+  const IHTMLInputElement = typeof window !== "undefined" ? (0, import_dom_query.getWindow)(e?.target).HTMLInputElement : HTMLInputElement;
+  const IHTMLTextAreaElement = typeof window !== "undefined" ? (0, import_dom_query.getWindow)(e?.target).HTMLTextAreaElement : HTMLTextAreaElement;
+  const IHTMLElement = typeof window !== "undefined" ? (0, import_dom_query.getWindow)(e?.target).HTMLElement : HTMLElement;
+  const IKeyboardEvent = typeof window !== "undefined" ? (0, import_dom_query.getWindow)(e?.target).KeyboardEvent : KeyboardEvent;
+  isTextInput = isTextInput || e?.target instanceof IHTMLInputElement && !nonTextInputTypes.has(e?.target?.type) || e?.target instanceof IHTMLTextAreaElement || e?.target instanceof IHTMLElement && e?.target.isContentEditable;
+  return !(isTextInput && modality === "keyboard" && e instanceof IKeyboardEvent && !Reflect.has(FOCUS_VISIBLE_INPUT_KEYS, e.key));
+}
+var currentModality = null;
+var changeHandlers = /* @__PURE__ */ new Set();
+var listenerMap = /* @__PURE__ */ new Map();
+var hasEventBeforeFocus = false;
+var hasBlurredWindowRecently = false;
+var FOCUS_VISIBLE_INPUT_KEYS = {
+  Tab: true,
+  Escape: true
+};
+function triggerChangeHandlers(modality, e) {
+  for (let handler of changeHandlers) {
+    handler(modality, e);
+  }
+}
+function handleKeyboardEvent(e) {
   hasEventBeforeFocus = true;
-  if (isValidKey(event)) {
-    modality = "keyboard";
-    trigger("keyboard", event);
+  if (isValidKey(e)) {
+    currentModality = "keyboard";
+    triggerChangeHandlers("keyboard", e);
   }
 }
-function onPointerEvent(event) {
-  modality = "pointer";
-  if (event.type === "mousedown" || event.type === "pointerdown") {
+function handlePointerEvent(e) {
+  currentModality = "pointer";
+  if (e.type === "mousedown" || e.type === "pointerdown") {
     hasEventBeforeFocus = true;
-    const target = event.composedPath ? event.composedPath()[0] : event.target;
-    let matches = false;
-    try {
-      matches = target.matches(":focus-visible");
-    } catch {
-    }
-    if (matches) return;
-    trigger("pointer", event);
+    triggerChangeHandlers("pointer", e);
   }
 }
-function isVirtualClick(event) {
-  if (event.mozInputSource === 0 && event.isTrusted) return true;
-  return event.detail === 0 && !event.pointerType;
-}
-function onClickEvent(e) {
+function handleClickEvent(e) {
   if (isVirtualClick(e)) {
     hasEventBeforeFocus = true;
-    modality = "virtual";
+    currentModality = "virtual";
   }
 }
-function onWindowFocus(event) {
-  if (event.target === window || event.target === document) {
-    return;
-  }
-  if (event.target instanceof Element && event.target.hasAttribute("tabindex")) {
+function handleFocusEvent(e) {
+  if (e.target === (0, import_dom_query.getWindow)(e.target) || e.target === (0, import_dom_query.getDocument)(e.target)) {
     return;
   }
   if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
-    modality = "virtual";
-    trigger("virtual", event);
+    currentModality = "virtual";
+    triggerChangeHandlers("virtual", e);
   }
   hasEventBeforeFocus = false;
   hasBlurredWindowRecently = false;
 }
-function onWindowBlur() {
+function handleWindowBlur() {
   hasEventBeforeFocus = false;
   hasBlurredWindowRecently = true;
 }
-function isFocusVisible() {
-  return modality !== "pointer";
-}
-function setupGlobalFocusEvents() {
-  if (!(0, import_dom_query.isDom)() || hasSetup) {
+function setupGlobalFocusEvents(root) {
+  if (typeof window === "undefined" || listenerMap.get((0, import_dom_query.getWindow)(root))) {
     return;
   }
-  const { focus } = HTMLElement.prototype;
-  HTMLElement.prototype.focus = function focusElement(...args) {
+  const win = (0, import_dom_query.getWindow)(root);
+  const doc = (0, import_dom_query.getDocument)(root);
+  let focus = win.HTMLElement.prototype.focus;
+  win.HTMLElement.prototype.focus = function() {
+    currentModality = "virtual";
+    triggerChangeHandlers("virtual", null);
     hasEventBeforeFocus = true;
-    focus.apply(this, args);
+    focus.apply(this, arguments);
   };
-  document.addEventListener("keydown", onKeyboardEvent, true);
-  document.addEventListener("keyup", onKeyboardEvent, true);
-  document.addEventListener("click", onClickEvent, true);
-  window.addEventListener("focus", onWindowFocus, true);
-  window.addEventListener("blur", onWindowBlur, false);
-  if (typeof PointerEvent !== "undefined") {
-    document.addEventListener("pointerdown", onPointerEvent, true);
-    document.addEventListener("pointermove", onPointerEvent, true);
-    document.addEventListener("pointerup", onPointerEvent, true);
+  doc.addEventListener("keydown", handleKeyboardEvent, true);
+  doc.addEventListener("keyup", handleKeyboardEvent, true);
+  doc.addEventListener("click", handleClickEvent, true);
+  win.addEventListener("focus", handleFocusEvent, true);
+  win.addEventListener("blur", handleWindowBlur, false);
+  if (typeof win.PointerEvent !== "undefined") {
+    doc.addEventListener("pointerdown", handlePointerEvent, true);
+    doc.addEventListener("pointermove", handlePointerEvent, true);
+    doc.addEventListener("pointerup", handlePointerEvent, true);
   } else {
-    document.addEventListener("mousedown", onPointerEvent, true);
-    document.addEventListener("mousemove", onPointerEvent, true);
-    document.addEventListener("mouseup", onPointerEvent, true);
+    doc.addEventListener("mousedown", handlePointerEvent, true);
+    doc.addEventListener("mousemove", handlePointerEvent, true);
+    doc.addEventListener("mouseup", handlePointerEvent, true);
   }
-  hasSetup = true;
+  win.addEventListener(
+    "beforeunload",
+    () => {
+      tearDownWindowFocusTracking(root);
+    },
+    { once: true }
+  );
+  listenerMap.set(win, { focus });
 }
-function trackFocusVisible(fn) {
-  setupGlobalFocusEvents();
-  fn(isFocusVisible());
-  const handler = () => fn(isFocusVisible());
-  handlers.add(handler);
-  return () => {
-    handlers.delete(handler);
-  };
+var tearDownWindowFocusTracking = (root, loadListener) => {
+  const win = (0, import_dom_query.getWindow)(root);
+  const doc = (0, import_dom_query.getDocument)(root);
+  if (loadListener) {
+    doc.removeEventListener("DOMContentLoaded", loadListener);
+  }
+  if (!listenerMap.has(win)) {
+    return;
+  }
+  win.HTMLElement.prototype.focus = listenerMap.get(win).focus;
+  doc.removeEventListener("keydown", handleKeyboardEvent, true);
+  doc.removeEventListener("keyup", handleKeyboardEvent, true);
+  doc.removeEventListener("click", handleClickEvent, true);
+  win.removeEventListener("focus", handleFocusEvent, true);
+  win.removeEventListener("blur", handleWindowBlur, false);
+  if (typeof win.PointerEvent !== "undefined") {
+    doc.removeEventListener("pointerdown", handlePointerEvent, true);
+    doc.removeEventListener("pointermove", handlePointerEvent, true);
+    doc.removeEventListener("pointerup", handlePointerEvent, true);
+  } else {
+    doc.removeEventListener("mousedown", handlePointerEvent, true);
+    doc.removeEventListener("mousemove", handlePointerEvent, true);
+    doc.removeEventListener("mouseup", handlePointerEvent, true);
+  }
+  listenerMap.delete(win);
+};
+function getInteractionModality() {
+  return currentModality;
 }
-function trackInteractionModality(fn) {
-  setupGlobalFocusEvents();
-  fn(modality);
-  const handler = () => fn(modality);
-  handlers.add(handler);
+function setInteractionModality(modality) {
+  currentModality = modality;
+  triggerChangeHandlers(modality, null);
+}
+function trackInteractionModality(props) {
+  const { onChange, root } = props;
+  setupGlobalFocusEvents(root);
+  onChange({ modality: currentModality });
+  const handler = () => onChange({ modality: currentModality });
+  changeHandlers.add(handler);
   return () => {
-    handlers.delete(handler);
+    changeHandlers.delete(handler);
   };
 }
-function setInteractionModality(value) {
-  modality = value;
-  trigger(value, null);
+function isFocusVisible() {
+  return currentModality === "keyboard";
 }
-function getInteractionModality() {
-  return modality;
+function trackFocusVisible(props = {}) {
+  const { isTextInput, autoFocus, onChange, root } = props;
+  setupGlobalFocusEvents(root);
+  onChange?.({ isFocusVisible: autoFocus || isFocusVisible(), modality: currentModality });
+  const handler = (modality, e) => {
+    if (!isKeyboardFocusEvent(!!isTextInput, modality, e)) return;
+    onChange?.({ isFocusVisible: isFocusVisible(), modality });
+  };
+  changeHandlers.add(handler);
+  return () => {
+    changeHandlers.delete(handler);
+  };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getInteractionModality,
+  isFocusVisible,
+  listenerMap,
   setInteractionModality,
   trackFocusVisible,
   trackInteractionModality

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { isDom } from \"@zag-js/dom-query\"\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\nfunction trigger(modality: Modality, event: HandlerEvent | null) {\n  handlers.forEach((handler) => handler(modality, event))\n}\n\nconst isMac = typeof window !== \"undefined\" && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false\n\nfunction isValidKey(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\nfunction onKeyboardEvent(event: KeyboardEvent) {\n  hasEventBeforeFocus = true\n  if (isValidKey(event)) {\n    modality = \"keyboard\"\n    trigger(\"keyboard\", event)\n  }\n}\n\nfunction onPointerEvent(event: PointerEvent | MouseEvent) {\n  modality = \"pointer\"\n\n  if (event.type === \"mousedown\" || event.type === \"pointerdown\") {\n    hasEventBeforeFocus = true\n    const target = event.composedPath ? event.composedPath()[0] : event.target\n\n    let matches = false\n    try {\n      matches = (target as any).matches(\":focus-visible\")\n    } catch {}\n\n    if (matches) return\n    trigger(\"pointer\", event)\n  }\n}\n\nfunction isVirtualClick(event: MouseEvent | PointerEvent): boolean {\n  // JAWS/NVDA with Firefox.\n  if ((event as any).mozInputSource === 0 && event.isTrusted) return true\n  return event.detail === 0 && !(event as PointerEvent).pointerType\n}\n\nfunction onClickEvent(e: MouseEvent) {\n  if (isVirtualClick(e)) {\n    hasEventBeforeFocus = true\n    modality = \"virtual\"\n  }\n}\n\nfunction onWindowFocus(event: FocusEvent) {\n  // Firefox fires two extra focus events when the user first clicks into an iframe:\n  // first on the window, then on the document. We ignore these events so they don't\n  // cause keyboard focus rings to appear.\n  if (event.target === window || event.target === document) {\n    return\n  }\n\n  // An extra event is fired when the user first clicks inside an element with tabindex attribute.\n  // We ignore these events so they don't cause keyboard focus ring to appear.\n  if (event.target instanceof Element && event.target.hasAttribute(\"tabindex\")) {\n    return\n  }\n\n  // If a focus event occurs without a preceding keyboard or pointer event, switch to keyboard modality.\n  // This occurs, for example, when navigating a form with the next/previous buttons on iOS.\n  if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {\n    modality = \"virtual\"\n    trigger(\"virtual\", event)\n  }\n\n  hasEventBeforeFocus = false\n  hasBlurredWindowRecently = false\n}\n\nfunction onWindowBlur() {\n  // When the window is blurred, reset state. This is necessary when tabbing out of the window,\n  // for example, since a subsequent focus event won't be fired.\n  hasEventBeforeFocus = false\n  hasBlurredWindowRecently = true\n}\n\nfunction isFocusVisible() {\n  return modality !== \"pointer\"\n}\n\nfunction setupGlobalFocusEvents() {\n  if (!isDom() || hasSetup) {\n    return\n  }\n\n  // Programmatic focus() calls shouldn't affect the current input modality.\n  // However, we need to detect other cases when a focus event occurs without\n  // a preceding user event (e.g. screen reader focus). Overriding the focus\n  // method on HTMLElement.prototype is a bit hacky, but works.\n  const { focus } = HTMLElement.prototype\n  HTMLElement.prototype.focus = function focusElement(...args) {\n    hasEventBeforeFocus = true\n    focus.apply(this, args)\n  }\n\n  document.addEventListener(\"keydown\", onKeyboardEvent, true)\n  document.addEventListener(\"keyup\", onKeyboardEvent, true)\n  document.addEventListener(\"click\", onClickEvent, true)\n\n  // Register focus events on the window so they are sure to happen\n  // before React's event listeners (registered on the document).\n  window.addEventListener(\"focus\", onWindowFocus, true)\n  window.addEventListener(\"blur\", onWindowBlur, false)\n\n  if (typeof PointerEvent !== \"undefined\") {\n    document.addEventListener(\"pointerdown\", onPointerEvent, true)\n    document.addEventListener(\"pointermove\", onPointerEvent, true)\n    document.addEventListener(\"pointerup\", onPointerEvent, true)\n  } else {\n    document.addEventListener(\"mousedown\", onPointerEvent, true)\n    document.addEventListener(\"mousemove\", onPointerEvent, true)\n    document.addEventListener(\"mouseup\", onPointerEvent, true)\n  }\n\n  hasSetup = true\n}\n\nexport function trackFocusVisible(fn: FocusVisibleCallback) {\n  setupGlobalFocusEvents()\n\n  fn(isFocusVisible())\n  const handler = () => fn(isFocusVisible())\n\n  handlers.add(handler)\n  return () => {\n    handlers.delete(handler)\n  }\n}\n\nexport function trackInteractionModality(fn: (value: Modality | null) => void) {\n  setupGlobalFocusEvents()\n\n  fn(modality)\n  const handler = () => fn(modality)\n\n  handlers.add(handler)\n  return () => {\n    handlers.delete(handler)\n  }\n}\n\nexport function setInteractionModality(value: Modality) {\n  modality = value\n  trigger(value, null)\n}\n\nexport function getInteractionModality() {\n  return modality\n}\n"],"mappings":"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","names":["modality"]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * Credit: Huge props to the team at Adobe for inspiring this implementation.\n * https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/useFocusVisible.ts\n */\nimport { getDocument, getWindow, isMac } from \"@zag-js/dom-query\"\n\nfunction isVirtualClick(event: MouseEvent | PointerEvent): boolean {\n  if ((event as any).mozInputSource === 0 && event.isTrusted) return true\n  return event.detail === 0 && !(event as PointerEvent).pointerType\n}\n\nfunction isValidKey(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 nonTextInputTypes = new Set([\"checkbox\", \"radio\", \"range\", \"color\", \"file\", \"image\", \"button\", \"submit\", \"reset\"])\n\nfunction isKeyboardFocusEvent(isTextInput: boolean, modality: Modality, e: HandlerEvent) {\n  const IHTMLInputElement =\n    typeof window !== \"undefined\" ? getWindow(e?.target as Element).HTMLInputElement : HTMLInputElement\n  const IHTMLTextAreaElement =\n    typeof window !== \"undefined\" ? getWindow(e?.target as Element).HTMLTextAreaElement : HTMLTextAreaElement\n  const IHTMLElement = typeof window !== \"undefined\" ? getWindow(e?.target as Element).HTMLElement : HTMLElement\n  const IKeyboardEvent = typeof window !== \"undefined\" ? getWindow(e?.target as Element).KeyboardEvent : KeyboardEvent\n\n  isTextInput =\n    isTextInput ||\n    (e?.target instanceof IHTMLInputElement && !nonTextInputTypes.has(e?.target?.type)) ||\n    e?.target instanceof IHTMLTextAreaElement ||\n    (e?.target instanceof IHTMLElement && e?.target.isContentEditable)\n\n  return !(\n    isTextInput &&\n    modality === \"keyboard\" &&\n    e instanceof IKeyboardEvent &&\n    !Reflect.has(FOCUS_VISIBLE_INPUT_KEYS, e.key)\n  )\n}\n\n/////////////////////////////////////////////////////////////////////////////////////////////\n\nexport type Modality = \"keyboard\" | \"pointer\" | \"virtual\"\n\ntype RootNode = Document | ShadowRoot | Node\n\ntype HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent | null\n\ntype Handler = (modality: Modality, e: HandlerEvent) => void\n\n/////////////////////////////////////////////////////////////////////////////////////////////\n\nlet currentModality: Modality | null = null\n\nlet changeHandlers = new Set<Handler>()\n\ninterface GlobalListenerData {\n  focus: VoidFunction\n}\n\nexport let listenerMap = new Map<Window, GlobalListenerData>()\n\nlet hasEventBeforeFocus = false\nlet hasBlurredWindowRecently = false\n\n// Only Tab or Esc keys will make focus visible on text input elements\nconst FOCUS_VISIBLE_INPUT_KEYS = {\n  Tab: true,\n  Escape: true,\n}\n\nfunction triggerChangeHandlers(modality: Modality, e: HandlerEvent) {\n  for (let handler of changeHandlers) {\n    handler(modality, e)\n  }\n}\n\nfunction handleKeyboardEvent(e: KeyboardEvent) {\n  hasEventBeforeFocus = true\n  if (isValidKey(e)) {\n    currentModality = \"keyboard\"\n    triggerChangeHandlers(\"keyboard\", e)\n  }\n}\n\nfunction handlePointerEvent(e: PointerEvent | MouseEvent) {\n  currentModality = \"pointer\"\n  if (e.type === \"mousedown\" || e.type === \"pointerdown\") {\n    hasEventBeforeFocus = true\n    triggerChangeHandlers(\"pointer\", e)\n  }\n}\n\nfunction handleClickEvent(e: MouseEvent) {\n  if (isVirtualClick(e)) {\n    hasEventBeforeFocus = true\n    currentModality = \"virtual\"\n  }\n}\n\nfunction handleFocusEvent(e: FocusEvent) {\n  // Firefox fires two extra focus events when the user first clicks into an iframe:\n  // first on the window, then on the document. We ignore these events so they don't\n  // cause keyboard focus rings to appear.\n  if (e.target === getWindow(e.target as Element) || e.target === getDocument(e.target as Element)) {\n    return\n  }\n\n  // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.\n  // This occurs, for example, when navigating a form with the next/previous buttons on iOS.\n  if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {\n    currentModality = \"virtual\"\n    triggerChangeHandlers(\"virtual\", e)\n  }\n\n  hasEventBeforeFocus = false\n  hasBlurredWindowRecently = false\n}\n\nfunction handleWindowBlur() {\n  // When the window is blurred, reset state. This is necessary when tabbing out of the window,\n  // for example, since a subsequent focus event won't be fired.\n  hasEventBeforeFocus = false\n  hasBlurredWindowRecently = true\n}\n\n/**\n * Setup global event listeners to control when keyboard focus style should be visible.\n */\nfunction setupGlobalFocusEvents(root?: RootNode) {\n  if (typeof window === \"undefined\" || listenerMap.get(getWindow(root))) {\n    return\n  }\n\n  const win = getWindow(root)\n  const doc = getDocument(root)\n\n  let focus = win.HTMLElement.prototype.focus\n  win.HTMLElement.prototype.focus = function () {\n    // For programmatic focus, we remove the focus visible state to prevent showing focus rings\n    // When `options.focusVisible` is supported in most browsers, we can remove this\n    // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible\n    currentModality = \"virtual\"\n    triggerChangeHandlers(\"virtual\", null)\n\n    hasEventBeforeFocus = true\n    focus.apply(this, arguments as unknown as [options?: FocusOptions | undefined])\n  }\n\n  doc.addEventListener(\"keydown\", handleKeyboardEvent, true)\n  doc.addEventListener(\"keyup\", handleKeyboardEvent, true)\n  doc.addEventListener(\"click\", handleClickEvent, true)\n\n  win.addEventListener(\"focus\", handleFocusEvent, true)\n  win.addEventListener(\"blur\", handleWindowBlur, false)\n\n  if (typeof win.PointerEvent !== \"undefined\") {\n    doc.addEventListener(\"pointerdown\", handlePointerEvent, true)\n    doc.addEventListener(\"pointermove\", handlePointerEvent, true)\n    doc.addEventListener(\"pointerup\", handlePointerEvent, true)\n  } else {\n    doc.addEventListener(\"mousedown\", handlePointerEvent, true)\n    doc.addEventListener(\"mousemove\", handlePointerEvent, true)\n    doc.addEventListener(\"mouseup\", handlePointerEvent, true)\n  }\n\n  // Add unmount handler\n  win.addEventListener(\n    \"beforeunload\",\n    () => {\n      tearDownWindowFocusTracking(root)\n    },\n    { once: true },\n  )\n\n  listenerMap.set(win, { focus })\n}\n\nconst tearDownWindowFocusTracking = (root?: RootNode, loadListener?: () => void) => {\n  const win = getWindow(root)\n  const doc = getDocument(root)\n\n  if (loadListener) {\n    doc.removeEventListener(\"DOMContentLoaded\", loadListener)\n  }\n\n  if (!listenerMap.has(win)) {\n    return\n  }\n\n  win.HTMLElement.prototype.focus = listenerMap.get(win)!.focus\n\n  doc.removeEventListener(\"keydown\", handleKeyboardEvent, true)\n  doc.removeEventListener(\"keyup\", handleKeyboardEvent, true)\n  doc.removeEventListener(\"click\", handleClickEvent, true)\n  win.removeEventListener(\"focus\", handleFocusEvent, true)\n  win.removeEventListener(\"blur\", handleWindowBlur, false)\n\n  if (typeof win.PointerEvent !== \"undefined\") {\n    doc.removeEventListener(\"pointerdown\", handlePointerEvent, true)\n    doc.removeEventListener(\"pointermove\", handlePointerEvent, true)\n    doc.removeEventListener(\"pointerup\", handlePointerEvent, true)\n  } else {\n    doc.removeEventListener(\"mousedown\", handlePointerEvent, true)\n    doc.removeEventListener(\"mousemove\", handlePointerEvent, true)\n    doc.removeEventListener(\"mouseup\", handlePointerEvent, true)\n  }\n\n  listenerMap.delete(win)\n}\n\n/////////////////////////////////////////////////////////////////////////////////////////////\n\nexport function getInteractionModality(): Modality | null {\n  return currentModality\n}\n\nexport function setInteractionModality(modality: Modality) {\n  currentModality = modality\n  triggerChangeHandlers(modality, null)\n}\n\nexport interface InteractionModalityChangeDetails {\n  /** The modality of the interaction that caused the focus to be visible. */\n  modality: Modality | null\n}\n\nexport interface InteractionModalityProps {\n  /** The root element to track focus visibility for. */\n  root?: RootNode\n  /** Callback to be called when the interaction modality changes. */\n  onChange: (details: InteractionModalityChangeDetails) => void\n}\n\nexport function trackInteractionModality(props: InteractionModalityProps): VoidFunction {\n  const { onChange, root } = props\n\n  setupGlobalFocusEvents(root)\n\n  onChange({ modality: currentModality })\n\n  const handler = () => onChange({ modality: currentModality })\n\n  changeHandlers.add(handler)\n  return () => {\n    changeHandlers.delete(handler)\n  }\n}\n\n/////////////////////////////////////////////////////////////////////////////////////////////\n\nexport function isFocusVisible(): boolean {\n  return currentModality === \"keyboard\"\n}\n\nexport interface FocusVisibleChangeDetails {\n  /** Whether keyboard focus is visible globally. */\n  isFocusVisible: boolean\n  /** The modality of the interaction that caused the focus to be visible. */\n  modality: Modality | null\n}\n\nexport interface FocusVisibleProps {\n  /** The root element to track focus visibility for. */\n  root?: RootNode\n  /** Whether the element is a text input. */\n  isTextInput?: boolean\n  /** Whether the element will be auto focused. */\n  autoFocus?: boolean\n  /** Callback to be called when the focus visibility changes. */\n  onChange?: (details: FocusVisibleChangeDetails) => void\n}\n\nexport function trackFocusVisible(props: FocusVisibleProps = {}): VoidFunction {\n  const { isTextInput, autoFocus, onChange, root } = props\n\n  setupGlobalFocusEvents(root)\n\n  onChange?.({ isFocusVisible: autoFocus || isFocusVisible(), modality: currentModality })\n\n  const handler = (modality: Modality, e: HandlerEvent) => {\n    if (!isKeyboardFocusEvent(!!isTextInput, modality, e)) return\n    onChange?.({ isFocusVisible: isFocusVisible(), modality })\n  }\n\n  changeHandlers.add(handler)\n\n  return () => {\n    changeHandlers.delete(handler)\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -1,121 +1,169 @@
 // src/index.ts
-import { isDom } from "@zag-js/dom-query";
-var hasSetup = false;
-var modality = null;
-var hasEventBeforeFocus = false;
-var hasBlurredWindowRecently = false;
-var handlers = /* @__PURE__ */ new Set();
-function trigger(modality2, event) {
-  handlers.forEach((handler) => handler(modality2, event));
+import { getDocument, getWindow, isMac } from "@zag-js/dom-query";
+function isVirtualClick(event) {
+  if (event.mozInputSource === 0 && event.isTrusted) return true;
+  return event.detail === 0 && !event.pointerType;
 }
-var isMac = typeof window !== "undefined" && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false;
 function isValidKey(e) {
-  return !(e.metaKey || !isMac && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
+  return !(e.metaKey || !isMac() && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
 }
-function onKeyboardEvent(event) {
+var nonTextInputTypes = /* @__PURE__ */ new Set(["checkbox", "radio", "range", "color", "file", "image", "button", "submit", "reset"]);
+function isKeyboardFocusEvent(isTextInput, modality, e) {
+  const IHTMLInputElement = typeof window !== "undefined" ? getWindow(e?.target).HTMLInputElement : HTMLInputElement;
+  const IHTMLTextAreaElement = typeof window !== "undefined" ? getWindow(e?.target).HTMLTextAreaElement : HTMLTextAreaElement;
+  const IHTMLElement = typeof window !== "undefined" ? getWindow(e?.target).HTMLElement : HTMLElement;
+  const IKeyboardEvent = typeof window !== "undefined" ? getWindow(e?.target).KeyboardEvent : KeyboardEvent;
+  isTextInput = isTextInput || e?.target instanceof IHTMLInputElement && !nonTextInputTypes.has(e?.target?.type) || e?.target instanceof IHTMLTextAreaElement || e?.target instanceof IHTMLElement && e?.target.isContentEditable;
+  return !(isTextInput && modality === "keyboard" && e instanceof IKeyboardEvent && !Reflect.has(FOCUS_VISIBLE_INPUT_KEYS, e.key));
+}
+var currentModality = null;
+var changeHandlers = /* @__PURE__ */ new Set();
+var listenerMap = /* @__PURE__ */ new Map();
+var hasEventBeforeFocus = false;
+var hasBlurredWindowRecently = false;
+var FOCUS_VISIBLE_INPUT_KEYS = {
+  Tab: true,
+  Escape: true
+};
+function triggerChangeHandlers(modality, e) {
+  for (let handler of changeHandlers) {
+    handler(modality, e);
+  }
+}
+function handleKeyboardEvent(e) {
   hasEventBeforeFocus = true;
-  if (isValidKey(event)) {
-    modality = "keyboard";
-    trigger("keyboard", event);
+  if (isValidKey(e)) {
+    currentModality = "keyboard";
+    triggerChangeHandlers("keyboard", e);
   }
 }
-function onPointerEvent(event) {
-  modality = "pointer";
-  if (event.type === "mousedown" || event.type === "pointerdown") {
+function handlePointerEvent(e) {
+  currentModality = "pointer";
+  if (e.type === "mousedown" || e.type === "pointerdown") {
     hasEventBeforeFocus = true;
-    const target = event.composedPath ? event.composedPath()[0] : event.target;
-    let matches = false;
-    try {
-      matches = target.matches(":focus-visible");
-    } catch {
-    }
-    if (matches) return;
-    trigger("pointer", event);
+    triggerChangeHandlers("pointer", e);
   }
 }
-function isVirtualClick(event) {
-  if (event.mozInputSource === 0 && event.isTrusted) return true;
-  return event.detail === 0 && !event.pointerType;
-}
-function onClickEvent(e) {
+function handleClickEvent(e) {
   if (isVirtualClick(e)) {
     hasEventBeforeFocus = true;
-    modality = "virtual";
+    currentModality = "virtual";
   }
 }
-function onWindowFocus(event) {
-  if (event.target === window || event.target === document) {
-    return;
-  }
-  if (event.target instanceof Element && event.target.hasAttribute("tabindex")) {
+function handleFocusEvent(e) {
+  if (e.target === getWindow(e.target) || e.target === getDocument(e.target)) {
     return;
   }
   if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
-    modality = "virtual";
-    trigger("virtual", event);
+    currentModality = "virtual";
+    triggerChangeHandlers("virtual", e);
   }
   hasEventBeforeFocus = false;
   hasBlurredWindowRecently = false;
 }
-function onWindowBlur() {
+function handleWindowBlur() {
   hasEventBeforeFocus = false;
   hasBlurredWindowRecently = true;
 }
-function isFocusVisible() {
-  return modality !== "pointer";
-}
-function setupGlobalFocusEvents() {
-  if (!isDom() || hasSetup) {
+function setupGlobalFocusEvents(root) {
+  if (typeof window === "undefined" || listenerMap.get(getWindow(root))) {
     return;
   }
-  const { focus } = HTMLElement.prototype;
-  HTMLElement.prototype.focus = function focusElement(...args) {
+  const win = getWindow(root);
+  const doc = getDocument(root);
+  let focus = win.HTMLElement.prototype.focus;
+  win.HTMLElement.prototype.focus = function() {
+    currentModality = "virtual";
+    triggerChangeHandlers("virtual", null);
     hasEventBeforeFocus = true;
-    focus.apply(this, args);
+    focus.apply(this, arguments);
   };
-  document.addEventListener("keydown", onKeyboardEvent, true);
-  document.addEventListener("keyup", onKeyboardEvent, true);
-  document.addEventListener("click", onClickEvent, true);
-  window.addEventListener("focus", onWindowFocus, true);
-  window.addEventListener("blur", onWindowBlur, false);
-  if (typeof PointerEvent !== "undefined") {
-    document.addEventListener("pointerdown", onPointerEvent, true);
-    document.addEventListener("pointermove", onPointerEvent, true);
-    document.addEventListener("pointerup", onPointerEvent, true);
+  doc.addEventListener("keydown", handleKeyboardEvent, true);
+  doc.addEventListener("keyup", handleKeyboardEvent, true);
+  doc.addEventListener("click", handleClickEvent, true);
+  win.addEventListener("focus", handleFocusEvent, true);
+  win.addEventListener("blur", handleWindowBlur, false);
+  if (typeof win.PointerEvent !== "undefined") {
+    doc.addEventListener("pointerdown", handlePointerEvent, true);
+    doc.addEventListener("pointermove", handlePointerEvent, true);
+    doc.addEventListener("pointerup", handlePointerEvent, true);
   } else {
-    document.addEventListener("mousedown", onPointerEvent, true);
-    document.addEventListener("mousemove", onPointerEvent, true);
-    document.addEventListener("mouseup", onPointerEvent, true);
+    doc.addEventListener("mousedown", handlePointerEvent, true);
+    doc.addEventListener("mousemove", handlePointerEvent, true);
+    doc.addEventListener("mouseup", handlePointerEvent, true);
   }
-  hasSetup = true;
+  win.addEventListener(
+    "beforeunload",
+    () => {
+      tearDownWindowFocusTracking(root);
+    },
+    { once: true }
+  );
+  listenerMap.set(win, { focus });
 }
-function trackFocusVisible(fn) {
-  setupGlobalFocusEvents();
-  fn(isFocusVisible());
-  const handler = () => fn(isFocusVisible());
-  handlers.add(handler);
-  return () => {
-    handlers.delete(handler);
-  };
+var tearDownWindowFocusTracking = (root, loadListener) => {
+  const win = getWindow(root);
+  const doc = getDocument(root);
+  if (loadListener) {
+    doc.removeEventListener("DOMContentLoaded", loadListener);
+  }
+  if (!listenerMap.has(win)) {
+    return;
+  }
+  win.HTMLElement.prototype.focus = listenerMap.get(win).focus;
+  doc.removeEventListener("keydown", handleKeyboardEvent, true);
+  doc.removeEventListener("keyup", handleKeyboardEvent, true);
+  doc.removeEventListener("click", handleClickEvent, true);
+  win.removeEventListener("focus", handleFocusEvent, true);
+  win.removeEventListener("blur", handleWindowBlur, false);
+  if (typeof win.PointerEvent !== "undefined") {
+    doc.removeEventListener("pointerdown", handlePointerEvent, true);
+    doc.removeEventListener("pointermove", handlePointerEvent, true);
+    doc.removeEventListener("pointerup", handlePointerEvent, true);
+  } else {
+    doc.removeEventListener("mousedown", handlePointerEvent, true);
+    doc.removeEventListener("mousemove", handlePointerEvent, true);
+    doc.removeEventListener("mouseup", handlePointerEvent, true);
+  }
+  listenerMap.delete(win);
+};
+function getInteractionModality() {
+  return currentModality;
 }
-function trackInteractionModality(fn) {
-  setupGlobalFocusEvents();
-  fn(modality);
-  const handler = () => fn(modality);
-  handlers.add(handler);
+function setInteractionModality(modality) {
+  currentModality = modality;
+  triggerChangeHandlers(modality, null);
+}
+function trackInteractionModality(props) {
+  const { onChange, root } = props;
+  setupGlobalFocusEvents(root);
+  onChange({ modality: currentModality });
+  const handler = () => onChange({ modality: currentModality });
+  changeHandlers.add(handler);
   return () => {
-    handlers.delete(handler);
+    changeHandlers.delete(handler);
   };
 }
-function setInteractionModality(value) {
-  modality = value;
-  trigger(value, null);
+function isFocusVisible() {
+  return currentModality === "keyboard";
 }
-function getInteractionModality() {
-  return modality;
+function trackFocusVisible(props = {}) {
+  const { isTextInput, autoFocus, onChange, root } = props;
+  setupGlobalFocusEvents(root);
+  onChange?.({ isFocusVisible: autoFocus || isFocusVisible(), modality: currentModality });
+  const handler = (modality, e) => {
+    if (!isKeyboardFocusEvent(!!isTextInput, modality, e)) return;
+    onChange?.({ isFocusVisible: isFocusVisible(), modality });
+  };
+  changeHandlers.add(handler);
+  return () => {
+    changeHandlers.delete(handler);
+  };
 }
 export {
   getInteractionModality,
+  isFocusVisible,
+  listenerMap,
   setInteractionModality,
   trackFocusVisible,
   trackInteractionModality

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { isDom } from \"@zag-js/dom-query\"\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\nfunction trigger(modality: Modality, event: HandlerEvent | null) {\n  handlers.forEach((handler) => handler(modality, event))\n}\n\nconst isMac = typeof window !== \"undefined\" && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false\n\nfunction isValidKey(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\nfunction onKeyboardEvent(event: KeyboardEvent) {\n  hasEventBeforeFocus = true\n  if (isValidKey(event)) {\n    modality = \"keyboard\"\n    trigger(\"keyboard\", event)\n  }\n}\n\nfunction onPointerEvent(event: PointerEvent | MouseEvent) {\n  modality = \"pointer\"\n\n  if (event.type === \"mousedown\" || event.type === \"pointerdown\") {\n    hasEventBeforeFocus = true\n    const target = event.composedPath ? event.composedPath()[0] : event.target\n\n    let matches = false\n    try {\n      matches = (target as any).matches(\":focus-visible\")\n    } catch {}\n\n    if (matches) return\n    trigger(\"pointer\", event)\n  }\n}\n\nfunction isVirtualClick(event: MouseEvent | PointerEvent): boolean {\n  // JAWS/NVDA with Firefox.\n  if ((event as any).mozInputSource === 0 && event.isTrusted) return true\n  return event.detail === 0 && !(event as PointerEvent).pointerType\n}\n\nfunction onClickEvent(e: MouseEvent) {\n  if (isVirtualClick(e)) {\n    hasEventBeforeFocus = true\n    modality = \"virtual\"\n  }\n}\n\nfunction onWindowFocus(event: FocusEvent) {\n  // Firefox fires two extra focus events when the user first clicks into an iframe:\n  // first on the window, then on the document. We ignore these events so they don't\n  // cause keyboard focus rings to appear.\n  if (event.target === window || event.target === document) {\n    return\n  }\n\n  // An extra event is fired when the user first clicks inside an element with tabindex attribute.\n  // We ignore these events so they don't cause keyboard focus ring to appear.\n  if (event.target instanceof Element && event.target.hasAttribute(\"tabindex\")) {\n    return\n  }\n\n  // If a focus event occurs without a preceding keyboard or pointer event, switch to keyboard modality.\n  // This occurs, for example, when navigating a form with the next/previous buttons on iOS.\n  if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {\n    modality = \"virtual\"\n    trigger(\"virtual\", event)\n  }\n\n  hasEventBeforeFocus = false\n  hasBlurredWindowRecently = false\n}\n\nfunction onWindowBlur() {\n  // When the window is blurred, reset state. This is necessary when tabbing out of the window,\n  // for example, since a subsequent focus event won't be fired.\n  hasEventBeforeFocus = false\n  hasBlurredWindowRecently = true\n}\n\nfunction isFocusVisible() {\n  return modality !== \"pointer\"\n}\n\nfunction setupGlobalFocusEvents() {\n  if (!isDom() || hasSetup) {\n    return\n  }\n\n  // Programmatic focus() calls shouldn't affect the current input modality.\n  // However, we need to detect other cases when a focus event occurs without\n  // a preceding user event (e.g. screen reader focus). Overriding the focus\n  // method on HTMLElement.prototype is a bit hacky, but works.\n  const { focus } = HTMLElement.prototype\n  HTMLElement.prototype.focus = function focusElement(...args) {\n    hasEventBeforeFocus = true\n    focus.apply(this, args)\n  }\n\n  document.addEventListener(\"keydown\", onKeyboardEvent, true)\n  document.addEventListener(\"keyup\", onKeyboardEvent, true)\n  document.addEventListener(\"click\", onClickEvent, true)\n\n  // Register focus events on the window so they are sure to happen\n  // before React's event listeners (registered on the document).\n  window.addEventListener(\"focus\", onWindowFocus, true)\n  window.addEventListener(\"blur\", onWindowBlur, false)\n\n  if (typeof PointerEvent !== \"undefined\") {\n    document.addEventListener(\"pointerdown\", onPointerEvent, true)\n    document.addEventListener(\"pointermove\", onPointerEvent, true)\n    document.addEventListener(\"pointerup\", onPointerEvent, true)\n  } else {\n    document.addEventListener(\"mousedown\", onPointerEvent, true)\n    document.addEventListener(\"mousemove\", onPointerEvent, true)\n    document.addEventListener(\"mouseup\", onPointerEvent, true)\n  }\n\n  hasSetup = true\n}\n\nexport function trackFocusVisible(fn: FocusVisibleCallback) {\n  setupGlobalFocusEvents()\n\n  fn(isFocusVisible())\n  const handler = () => fn(isFocusVisible())\n\n  handlers.add(handler)\n  return () => {\n    handlers.delete(handler)\n  }\n}\n\nexport function trackInteractionModality(fn: (value: Modality | null) => void) {\n  setupGlobalFocusEvents()\n\n  fn(modality)\n  const handler = () => fn(modality)\n\n  handlers.add(handler)\n  return () => {\n    handlers.delete(handler)\n  }\n}\n\nexport function setInteractionModality(value: Modality) {\n  modality = value\n  trigger(value, null)\n}\n\nexport function getInteractionModality() {\n  return modality\n}\n"],"mappings":"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","names":["modality"]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["/**\n * Credit: Huge props to the team at Adobe for inspiring this implementation.\n * https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/useFocusVisible.ts\n */\nimport { getDocument, getWindow, isMac } from \"@zag-js/dom-query\"\n\nfunction isVirtualClick(event: MouseEvent | PointerEvent): boolean {\n  if ((event as any).mozInputSource === 0 && event.isTrusted) return true\n  return event.detail === 0 && !(event as PointerEvent).pointerType\n}\n\nfunction isValidKey(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 nonTextInputTypes = new Set([\"checkbox\", \"radio\", \"range\", \"color\", \"file\", \"image\", \"button\", \"submit\", \"reset\"])\n\nfunction isKeyboardFocusEvent(isTextInput: boolean, modality: Modality, e: HandlerEvent) {\n  const IHTMLInputElement =\n    typeof window !== \"undefined\" ? getWindow(e?.target as Element).HTMLInputElement : HTMLInputElement\n  const IHTMLTextAreaElement =\n    typeof window !== \"undefined\" ? getWindow(e?.target as Element).HTMLTextAreaElement : HTMLTextAreaElement\n  const IHTMLElement = typeof window !== \"undefined\" ? getWindow(e?.target as Element).HTMLElement : HTMLElement\n  const IKeyboardEvent = typeof window !== \"undefined\" ? getWindow(e?.target as Element).KeyboardEvent : KeyboardEvent\n\n  isTextInput =\n    isTextInput ||\n    (e?.target instanceof IHTMLInputElement && !nonTextInputTypes.has(e?.target?.type)) ||\n    e?.target instanceof IHTMLTextAreaElement ||\n    (e?.target instanceof IHTMLElement && e?.target.isContentEditable)\n\n  return !(\n    isTextInput &&\n    modality === \"keyboard\" &&\n    e instanceof IKeyboardEvent &&\n    !Reflect.has(FOCUS_VISIBLE_INPUT_KEYS, e.key)\n  )\n}\n\n/////////////////////////////////////////////////////////////////////////////////////////////\n\nexport type Modality = \"keyboard\" | \"pointer\" | \"virtual\"\n\ntype RootNode = Document | ShadowRoot | Node\n\ntype HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent | null\n\ntype Handler = (modality: Modality, e: HandlerEvent) => void\n\n/////////////////////////////////////////////////////////////////////////////////////////////\n\nlet currentModality: Modality | null = null\n\nlet changeHandlers = new Set<Handler>()\n\ninterface GlobalListenerData {\n  focus: VoidFunction\n}\n\nexport let listenerMap = new Map<Window, GlobalListenerData>()\n\nlet hasEventBeforeFocus = false\nlet hasBlurredWindowRecently = false\n\n// Only Tab or Esc keys will make focus visible on text input elements\nconst FOCUS_VISIBLE_INPUT_KEYS = {\n  Tab: true,\n  Escape: true,\n}\n\nfunction triggerChangeHandlers(modality: Modality, e: HandlerEvent) {\n  for (let handler of changeHandlers) {\n    handler(modality, e)\n  }\n}\n\nfunction handleKeyboardEvent(e: KeyboardEvent) {\n  hasEventBeforeFocus = true\n  if (isValidKey(e)) {\n    currentModality = \"keyboard\"\n    triggerChangeHandlers(\"keyboard\", e)\n  }\n}\n\nfunction handlePointerEvent(e: PointerEvent | MouseEvent) {\n  currentModality = \"pointer\"\n  if (e.type === \"mousedown\" || e.type === \"pointerdown\") {\n    hasEventBeforeFocus = true\n    triggerChangeHandlers(\"pointer\", e)\n  }\n}\n\nfunction handleClickEvent(e: MouseEvent) {\n  if (isVirtualClick(e)) {\n    hasEventBeforeFocus = true\n    currentModality = \"virtual\"\n  }\n}\n\nfunction handleFocusEvent(e: FocusEvent) {\n  // Firefox fires two extra focus events when the user first clicks into an iframe:\n  // first on the window, then on the document. We ignore these events so they don't\n  // cause keyboard focus rings to appear.\n  if (e.target === getWindow(e.target as Element) || e.target === getDocument(e.target as Element)) {\n    return\n  }\n\n  // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.\n  // This occurs, for example, when navigating a form with the next/previous buttons on iOS.\n  if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {\n    currentModality = \"virtual\"\n    triggerChangeHandlers(\"virtual\", e)\n  }\n\n  hasEventBeforeFocus = false\n  hasBlurredWindowRecently = false\n}\n\nfunction handleWindowBlur() {\n  // When the window is blurred, reset state. This is necessary when tabbing out of the window,\n  // for example, since a subsequent focus event won't be fired.\n  hasEventBeforeFocus = false\n  hasBlurredWindowRecently = true\n}\n\n/**\n * Setup global event listeners to control when keyboard focus style should be visible.\n */\nfunction setupGlobalFocusEvents(root?: RootNode) {\n  if (typeof window === \"undefined\" || listenerMap.get(getWindow(root))) {\n    return\n  }\n\n  const win = getWindow(root)\n  const doc = getDocument(root)\n\n  let focus = win.HTMLElement.prototype.focus\n  win.HTMLElement.prototype.focus = function () {\n    // For programmatic focus, we remove the focus visible state to prevent showing focus rings\n    // When `options.focusVisible` is supported in most browsers, we can remove this\n    // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible\n    currentModality = \"virtual\"\n    triggerChangeHandlers(\"virtual\", null)\n\n    hasEventBeforeFocus = true\n    focus.apply(this, arguments as unknown as [options?: FocusOptions | undefined])\n  }\n\n  doc.addEventListener(\"keydown\", handleKeyboardEvent, true)\n  doc.addEventListener(\"keyup\", handleKeyboardEvent, true)\n  doc.addEventListener(\"click\", handleClickEvent, true)\n\n  win.addEventListener(\"focus\", handleFocusEvent, true)\n  win.addEventListener(\"blur\", handleWindowBlur, false)\n\n  if (typeof win.PointerEvent !== \"undefined\") {\n    doc.addEventListener(\"pointerdown\", handlePointerEvent, true)\n    doc.addEventListener(\"pointermove\", handlePointerEvent, true)\n    doc.addEventListener(\"pointerup\", handlePointerEvent, true)\n  } else {\n    doc.addEventListener(\"mousedown\", handlePointerEvent, true)\n    doc.addEventListener(\"mousemove\", handlePointerEvent, true)\n    doc.addEventListener(\"mouseup\", handlePointerEvent, true)\n  }\n\n  // Add unmount handler\n  win.addEventListener(\n    \"beforeunload\",\n    () => {\n      tearDownWindowFocusTracking(root)\n    },\n    { once: true },\n  )\n\n  listenerMap.set(win, { focus })\n}\n\nconst tearDownWindowFocusTracking = (root?: RootNode, loadListener?: () => void) => {\n  const win = getWindow(root)\n  const doc = getDocument(root)\n\n  if (loadListener) {\n    doc.removeEventListener(\"DOMContentLoaded\", loadListener)\n  }\n\n  if (!listenerMap.has(win)) {\n    return\n  }\n\n  win.HTMLElement.prototype.focus = listenerMap.get(win)!.focus\n\n  doc.removeEventListener(\"keydown\", handleKeyboardEvent, true)\n  doc.removeEventListener(\"keyup\", handleKeyboardEvent, true)\n  doc.removeEventListener(\"click\", handleClickEvent, true)\n  win.removeEventListener(\"focus\", handleFocusEvent, true)\n  win.removeEventListener(\"blur\", handleWindowBlur, false)\n\n  if (typeof win.PointerEvent !== \"undefined\") {\n    doc.removeEventListener(\"pointerdown\", handlePointerEvent, true)\n    doc.removeEventListener(\"pointermove\", handlePointerEvent, true)\n    doc.removeEventListener(\"pointerup\", handlePointerEvent, true)\n  } else {\n    doc.removeEventListener(\"mousedown\", handlePointerEvent, true)\n    doc.removeEventListener(\"mousemove\", handlePointerEvent, true)\n    doc.removeEventListener(\"mouseup\", handlePointerEvent, true)\n  }\n\n  listenerMap.delete(win)\n}\n\n/////////////////////////////////////////////////////////////////////////////////////////////\n\nexport function getInteractionModality(): Modality | null {\n  return currentModality\n}\n\nexport function setInteractionModality(modality: Modality) {\n  currentModality = modality\n  triggerChangeHandlers(modality, null)\n}\n\nexport interface InteractionModalityChangeDetails {\n  /** The modality of the interaction that caused the focus to be visible. */\n  modality: Modality | null\n}\n\nexport interface InteractionModalityProps {\n  /** The root element to track focus visibility for. */\n  root?: RootNode\n  /** Callback to be called when the interaction modality changes. */\n  onChange: (details: InteractionModalityChangeDetails) => void\n}\n\nexport function trackInteractionModality(props: InteractionModalityProps): VoidFunction {\n  const { onChange, root } = props\n\n  setupGlobalFocusEvents(root)\n\n  onChange({ modality: currentModality })\n\n  const handler = () => onChange({ modality: currentModality })\n\n  changeHandlers.add(handler)\n  return () => {\n    changeHandlers.delete(handler)\n  }\n}\n\n/////////////////////////////////////////////////////////////////////////////////////////////\n\nexport function isFocusVisible(): boolean {\n  return currentModality === \"keyboard\"\n}\n\nexport interface FocusVisibleChangeDetails {\n  /** Whether keyboard focus is visible globally. */\n  isFocusVisible: boolean\n  /** The modality of the interaction that caused the focus to be visible. */\n  modality: Modality | null\n}\n\nexport interface FocusVisibleProps {\n  /** The root element to track focus visibility for. */\n  root?: RootNode\n  /** Whether the element is a text input. */\n  isTextInput?: boolean\n  /** Whether the element will be auto focused. */\n  autoFocus?: boolean\n  /** Callback to be called when the focus visibility changes. */\n  onChange?: (details: FocusVisibleChangeDetails) => void\n}\n\nexport function trackFocusVisible(props: FocusVisibleProps = {}): VoidFunction {\n  const { isTextInput, autoFocus, onChange, root } = props\n\n  setupGlobalFocusEvents(root)\n\n  onChange?.({ isFocusVisible: autoFocus || isFocusVisible(), modality: currentModality })\n\n  const handler = (modality: Modality, e: HandlerEvent) => {\n    if (!isKeyboardFocusEvent(!!isTextInput, modality, e)) return\n    onChange?.({ isFocusVisible: isFocusVisible(), modality })\n  }\n\n  changeHandlers.add(handler)\n\n  return () => {\n    changeHandlers.delete(handler)\n  }\n}\n"],"mappings":"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","names":[]}

package/package.json

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

package/src/index.ts

@@ -1,27 +1,18 @@
-import { isDom } from "@zag-js/dom-query"
+/**
+ * Credit: Huge props to the team at Adobe for inspiring this implementation.
+ * https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/useFocusVisible.ts
+ */
+import { getDocument, getWindow, isMac } from "@zag-js/dom-query"
 
-type Modality = "keyboard" | "pointer" | "virtual"
-type HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent
-type Handler = (modality: Modality, e: HandlerEvent | null) => void
-type FocusVisibleCallback = (isFocusVisible: boolean) => void
-
-let hasSetup = false
-let modality: Modality | null = null
-let hasEventBeforeFocus = false
-let hasBlurredWindowRecently = false
-
-const handlers = new Set<Handler>()
-
-function trigger(modality: Modality, event: HandlerEvent | null) {
-  handlers.forEach((handler) => handler(modality, event))
+function isVirtualClick(event: MouseEvent | PointerEvent): boolean {
+  if ((event as any).mozInputSource === 0 && event.isTrusted) return true
+  return event.detail === 0 && !(event as PointerEvent).pointerType
 }
 
-const isMac = typeof window !== "undefined" && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false
-
 function isValidKey(e: KeyboardEvent) {
   return !(
     e.metaKey ||
-    (!isMac && e.altKey) ||
+    (!isMac() && e.altKey) ||
     e.ctrlKey ||
     e.key === "Control" ||
     e.key === "Shift" ||
@@ -29,146 +20,278 @@ function isValidKey(e: KeyboardEvent) {
   )
 }
 
-function onKeyboardEvent(event: KeyboardEvent) {
-  hasEventBeforeFocus = true
-  if (isValidKey(event)) {
-    modality = "keyboard"
-    trigger("keyboard", event)
-  }
+const nonTextInputTypes = new Set(["checkbox", "radio", "range", "color", "file", "image", "button", "submit", "reset"])
+
+function isKeyboardFocusEvent(isTextInput: boolean, modality: Modality, e: HandlerEvent) {
+  const IHTMLInputElement =
+    typeof window !== "undefined" ? getWindow(e?.target as Element).HTMLInputElement : HTMLInputElement
+  const IHTMLTextAreaElement =
+    typeof window !== "undefined" ? getWindow(e?.target as Element).HTMLTextAreaElement : HTMLTextAreaElement
+  const IHTMLElement = typeof window !== "undefined" ? getWindow(e?.target as Element).HTMLElement : HTMLElement
+  const IKeyboardEvent = typeof window !== "undefined" ? getWindow(e?.target as Element).KeyboardEvent : KeyboardEvent
+
+  isTextInput =
+    isTextInput ||
+    (e?.target instanceof IHTMLInputElement && !nonTextInputTypes.has(e?.target?.type)) ||
+    e?.target instanceof IHTMLTextAreaElement ||
+    (e?.target instanceof IHTMLElement && e?.target.isContentEditable)
+
+  return !(
+    isTextInput &&
+    modality === "keyboard" &&
+    e instanceof IKeyboardEvent &&
+    !Reflect.has(FOCUS_VISIBLE_INPUT_KEYS, e.key)
+  )
 }
 
-function onPointerEvent(event: PointerEvent | MouseEvent) {
-  modality = "pointer"
+/////////////////////////////////////////////////////////////////////////////////////////////
 
-  if (event.type === "mousedown" || event.type === "pointerdown") {
-    hasEventBeforeFocus = true
-    const target = event.composedPath ? event.composedPath()[0] : event.target
+export type Modality = "keyboard" | "pointer" | "virtual"
+
+type RootNode = Document | ShadowRoot | Node
+
+type HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent | null
+
+type Handler = (modality: Modality, e: HandlerEvent) => void
+
+/////////////////////////////////////////////////////////////////////////////////////////////
 
-    let matches = false
-    try {
-      matches = (target as any).matches(":focus-visible")
-    } catch {}
+let currentModality: Modality | null = null
 
-    if (matches) return
-    trigger("pointer", event)
+let changeHandlers = new Set<Handler>()
+
+interface GlobalListenerData {
+  focus: VoidFunction
+}
+
+export let listenerMap = new Map<Window, GlobalListenerData>()
+
+let hasEventBeforeFocus = false
+let hasBlurredWindowRecently = false
+
+// Only Tab or Esc keys will make focus visible on text input elements
+const FOCUS_VISIBLE_INPUT_KEYS = {
+  Tab: true,
+  Escape: true,
+}
+
+function triggerChangeHandlers(modality: Modality, e: HandlerEvent) {
+  for (let handler of changeHandlers) {
+    handler(modality, e)
   }
 }
 
-function isVirtualClick(event: MouseEvent | PointerEvent): boolean {
-  // JAWS/NVDA with Firefox.
-  if ((event as any).mozInputSource === 0 && event.isTrusted) return true
-  return event.detail === 0 && !(event as PointerEvent).pointerType
+function handleKeyboardEvent(e: KeyboardEvent) {
+  hasEventBeforeFocus = true
+  if (isValidKey(e)) {
+    currentModality = "keyboard"
+    triggerChangeHandlers("keyboard", e)
+  }
+}
+
+function handlePointerEvent(e: PointerEvent | MouseEvent) {
+  currentModality = "pointer"
+  if (e.type === "mousedown" || e.type === "pointerdown") {
+    hasEventBeforeFocus = true
+    triggerChangeHandlers("pointer", e)
+  }
 }
 
-function onClickEvent(e: MouseEvent) {
+function handleClickEvent(e: MouseEvent) {
   if (isVirtualClick(e)) {
     hasEventBeforeFocus = true
-    modality = "virtual"
+    currentModality = "virtual"
   }
 }
 
-function onWindowFocus(event: FocusEvent) {
+function handleFocusEvent(e: FocusEvent) {
   // Firefox fires two extra focus events when the user first clicks into an iframe:
   // first on the window, then on the document. We ignore these events so they don't
   // cause keyboard focus rings to appear.
-  if (event.target === window || event.target === document) {
+  if (e.target === getWindow(e.target as Element) || e.target === getDocument(e.target as Element)) {
     return
   }
 
-  // An extra event is fired when the user first clicks inside an element with tabindex attribute.
-  // We ignore these events so they don't cause keyboard focus ring to appear.
-  if (event.target instanceof Element && event.target.hasAttribute("tabindex")) {
-    return
-  }
-
-  // If a focus event occurs without a preceding keyboard or pointer event, switch to keyboard modality.
+  // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.
   // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
   if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
-    modality = "virtual"
-    trigger("virtual", event)
+    currentModality = "virtual"
+    triggerChangeHandlers("virtual", e)
   }
 
   hasEventBeforeFocus = false
   hasBlurredWindowRecently = false
 }
 
-function onWindowBlur() {
+function handleWindowBlur() {
   // When the window is blurred, reset state. This is necessary when tabbing out of the window,
   // for example, since a subsequent focus event won't be fired.
   hasEventBeforeFocus = false
   hasBlurredWindowRecently = true
 }
 
-function isFocusVisible() {
-  return modality !== "pointer"
-}
-
-function setupGlobalFocusEvents() {
-  if (!isDom() || hasSetup) {
+/**
+ * Setup global event listeners to control when keyboard focus style should be visible.
+ */
+function setupGlobalFocusEvents(root?: RootNode) {
+  if (typeof window === "undefined" || listenerMap.get(getWindow(root))) {
     return
   }
 
-  // Programmatic focus() calls shouldn't affect the current input modality.
-  // However, we need to detect other cases when a focus event occurs without
-  // a preceding user event (e.g. screen reader focus). Overriding the focus
-  // method on HTMLElement.prototype is a bit hacky, but works.
-  const { focus } = HTMLElement.prototype
-  HTMLElement.prototype.focus = function focusElement(...args) {
+  const win = getWindow(root)
+  const doc = getDocument(root)
+
+  let focus = win.HTMLElement.prototype.focus
+  win.HTMLElement.prototype.focus = function () {
+    // For programmatic focus, we remove the focus visible state to prevent showing focus rings
+    // When `options.focusVisible` is supported in most browsers, we can remove this
+    // @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#focusvisible
+    currentModality = "virtual"
+    triggerChangeHandlers("virtual", null)
+
     hasEventBeforeFocus = true
-    focus.apply(this, args)
+    focus.apply(this, arguments as unknown as [options?: FocusOptions | undefined])
   }
 
-  document.addEventListener("keydown", onKeyboardEvent, true)
-  document.addEventListener("keyup", onKeyboardEvent, true)
-  document.addEventListener("click", onClickEvent, true)
+  doc.addEventListener("keydown", handleKeyboardEvent, true)
+  doc.addEventListener("keyup", handleKeyboardEvent, true)
+  doc.addEventListener("click", handleClickEvent, true)
 
-  // Register focus events on the window so they are sure to happen
-  // before React's event listeners (registered on the document).
-  window.addEventListener("focus", onWindowFocus, true)
-  window.addEventListener("blur", onWindowBlur, false)
+  win.addEventListener("focus", handleFocusEvent, true)
+  win.addEventListener("blur", handleWindowBlur, false)
 
-  if (typeof PointerEvent !== "undefined") {
-    document.addEventListener("pointerdown", onPointerEvent, true)
-    document.addEventListener("pointermove", onPointerEvent, true)
-    document.addEventListener("pointerup", onPointerEvent, true)
+  if (typeof win.PointerEvent !== "undefined") {
+    doc.addEventListener("pointerdown", handlePointerEvent, true)
+    doc.addEventListener("pointermove", handlePointerEvent, true)
+    doc.addEventListener("pointerup", handlePointerEvent, true)
   } else {
-    document.addEventListener("mousedown", onPointerEvent, true)
-    document.addEventListener("mousemove", onPointerEvent, true)
-    document.addEventListener("mouseup", onPointerEvent, true)
+    doc.addEventListener("mousedown", handlePointerEvent, true)
+    doc.addEventListener("mousemove", handlePointerEvent, true)
+    doc.addEventListener("mouseup", handlePointerEvent, true)
   }
 
-  hasSetup = true
+  // Add unmount handler
+  win.addEventListener(
+    "beforeunload",
+    () => {
+      tearDownWindowFocusTracking(root)
+    },
+    { once: true },
+  )
+
+  listenerMap.set(win, { focus })
 }
 
-export function trackFocusVisible(fn: FocusVisibleCallback) {
-  setupGlobalFocusEvents()
+const tearDownWindowFocusTracking = (root?: RootNode, loadListener?: () => void) => {
+  const win = getWindow(root)
+  const doc = getDocument(root)
 
-  fn(isFocusVisible())
-  const handler = () => fn(isFocusVisible())
+  if (loadListener) {
+    doc.removeEventListener("DOMContentLoaded", loadListener)
+  }
 
-  handlers.add(handler)
-  return () => {
-    handlers.delete(handler)
+  if (!listenerMap.has(win)) {
+    return
   }
+
+  win.HTMLElement.prototype.focus = listenerMap.get(win)!.focus
+
+  doc.removeEventListener("keydown", handleKeyboardEvent, true)
+  doc.removeEventListener("keyup", handleKeyboardEvent, true)
+  doc.removeEventListener("click", handleClickEvent, true)
+  win.removeEventListener("focus", handleFocusEvent, true)
+  win.removeEventListener("blur", handleWindowBlur, false)
+
+  if (typeof win.PointerEvent !== "undefined") {
+    doc.removeEventListener("pointerdown", handlePointerEvent, true)
+    doc.removeEventListener("pointermove", handlePointerEvent, true)
+    doc.removeEventListener("pointerup", handlePointerEvent, true)
+  } else {
+    doc.removeEventListener("mousedown", handlePointerEvent, true)
+    doc.removeEventListener("mousemove", handlePointerEvent, true)
+    doc.removeEventListener("mouseup", handlePointerEvent, true)
+  }
+
+  listenerMap.delete(win)
+}
+
+/////////////////////////////////////////////////////////////////////////////////////////////
+
+export function getInteractionModality(): Modality | null {
+  return currentModality
+}
+
+export function setInteractionModality(modality: Modality) {
+  currentModality = modality
+  triggerChangeHandlers(modality, null)
+}
+
+export interface InteractionModalityChangeDetails {
+  /** The modality of the interaction that caused the focus to be visible. */
+  modality: Modality | null
+}
+
+export interface InteractionModalityProps {
+  /** The root element to track focus visibility for. */
+  root?: RootNode
+  /** Callback to be called when the interaction modality changes. */
+  onChange: (details: InteractionModalityChangeDetails) => void
 }
 
-export function trackInteractionModality(fn: (value: Modality | null) => void) {
-  setupGlobalFocusEvents()
+export function trackInteractionModality(props: InteractionModalityProps): VoidFunction {
+  const { onChange, root } = props
 
-  fn(modality)
-  const handler = () => fn(modality)
+  setupGlobalFocusEvents(root)
 
-  handlers.add(handler)
+  onChange({ modality: currentModality })
+
+  const handler = () => onChange({ modality: currentModality })
+
+  changeHandlers.add(handler)
   return () => {
-    handlers.delete(handler)
+    changeHandlers.delete(handler)
   }
 }
 
-export function setInteractionModality(value: Modality) {
-  modality = value
-  trigger(value, null)
+/////////////////////////////////////////////////////////////////////////////////////////////
+
+export function isFocusVisible(): boolean {
+  return currentModality === "keyboard"
+}
+
+export interface FocusVisibleChangeDetails {
+  /** Whether keyboard focus is visible globally. */
+  isFocusVisible: boolean
+  /** The modality of the interaction that caused the focus to be visible. */
+  modality: Modality | null
 }
 
-export function getInteractionModality() {
-  return modality
+export interface FocusVisibleProps {
+  /** The root element to track focus visibility for. */
+  root?: RootNode
+  /** Whether the element is a text input. */
+  isTextInput?: boolean
+  /** Whether the element will be auto focused. */
+  autoFocus?: boolean
+  /** Callback to be called when the focus visibility changes. */
+  onChange?: (details: FocusVisibleChangeDetails) => void
+}
+
+export function trackFocusVisible(props: FocusVisibleProps = {}): VoidFunction {
+  const { isTextInput, autoFocus, onChange, root } = props
+
+  setupGlobalFocusEvents(root)
+
+  onChange?.({ isFocusVisible: autoFocus || isFocusVisible(), modality: currentModality })
+
+  const handler = (modality: Modality, e: HandlerEvent) => {
+    if (!isKeyboardFocusEvent(!!isTextInput, modality, e)) return
+    onChange?.({ isFocusVisible: isFocusVisible(), modality })
+  }
+
+  changeHandlers.add(handler)
+
+  return () => {
+    changeHandlers.delete(handler)
+  }
 }