@zag-js/focus-visible 0.1.5 → 0.1.6

package/dist/index.js

@@ -1,4 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
 // src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  getInteractionModality: () => getInteractionModality,
+  setInteractionModality: () => setInteractionModality,
+  trackFocusVisible: () => trackFocusVisible,
+  trackInteractionModality: () => trackInteractionModality
+});
+module.exports = __toCommonJS(src_exports);
 var hasSetup = false;
 var modality = null;
 var hasEventBeforeFocus = false;
@@ -107,9 +134,10 @@ function setInteractionModality(value) {
 function getInteractionModality() {
   return modality;
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   getInteractionModality,
   setInteractionModality,
   trackFocusVisible,
   trackInteractionModality
-};
+});

package/dist/index.mjs

@@ -0,0 +1,115 @@
+// src/index.ts
+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));
+}
+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");
+}
+function onKeyboardEvent(event) {
+  hasEventBeforeFocus = true;
+  if (isValidKey(event)) {
+    modality = "keyboard";
+    trigger("keyboard", event);
+  }
+}
+function onPointerEvent(event) {
+  modality = "pointer";
+  if (event.type === "mousedown" || event.type === "pointerdown") {
+    hasEventBeforeFocus = true;
+    const target = event.composedPath ? event.composedPath()[0] : event.target;
+    if (target.matches(":focus-visible"))
+      return;
+    trigger("pointer", event);
+  }
+}
+function isVirtualClick(event) {
+  if (event.mozInputSource === 0 && event.isTrusted)
+    return true;
+  return event.detail === 0 && !event.pointerType;
+}
+function onClickEvent(e) {
+  if (isVirtualClick(e)) {
+    hasEventBeforeFocus = true;
+    modality = "virtual";
+  }
+}
+function onWindowFocus(event) {
+  if (event.target === window || event.target === document) {
+    return;
+  }
+  if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
+    modality = "virtual";
+    trigger("virtual", event);
+  }
+  hasEventBeforeFocus = false;
+  hasBlurredWindowRecently = false;
+}
+function onWindowBlur() {
+  hasEventBeforeFocus = false;
+  hasBlurredWindowRecently = true;
+}
+function isFocusVisible() {
+  return modality !== "pointer";
+}
+function setupGlobalFocusEvents() {
+  if (typeof window === "undefined" || hasSetup) {
+    return;
+  }
+  const { focus } = HTMLElement.prototype;
+  HTMLElement.prototype.focus = function focusElement(...args) {
+    hasEventBeforeFocus = true;
+    focus.apply(this, args);
+  };
+  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);
+  } else {
+    document.addEventListener("mousedown", onPointerEvent, true);
+    document.addEventListener("mousemove", onPointerEvent, true);
+    document.addEventListener("mouseup", onPointerEvent, true);
+  }
+  hasSetup = true;
+}
+function trackFocusVisible(fn) {
+  setupGlobalFocusEvents();
+  fn(isFocusVisible());
+  const handler = () => fn(isFocusVisible());
+  handlers.add(handler);
+  return () => {
+    handlers.delete(handler);
+  };
+}
+function trackInteractionModality(fn) {
+  setupGlobalFocusEvents();
+  fn(modality);
+  const handler = () => fn(modality);
+  handlers.add(handler);
+  return () => {
+    handlers.delete(handler);
+  };
+}
+function setInteractionModality(value) {
+  modality = value;
+  trigger(value, null);
+}
+function getInteractionModality() {
+  return modality;
+}
+export {
+  getInteractionModality,
+  setInteractionModality,
+  trackFocusVisible,
+  trackInteractionModality
+};

package/package.json

@@ -1,8 +1,10 @@
 {
-  "type": "module",
   "name": "@zag-js/focus-visible",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Focus visible polyfill utility based on WICG",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "keywords": [
     "js",
     "utils",
@@ -12,8 +14,6 @@
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/focus-visible",
   "sideEffects": false,
   "files": [
@@ -26,9 +26,9 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "scripts": {
-    "build-fast": "tsup src/index.ts --format=esm",
+    "build-fast": "tsup src/index.ts --format=esm,cjs",
     "start": "pnpm build --watch",
-    "build": "tsup src/index.ts --format=esm --dts",
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
     "test": "jest --config ../../../jest.config.js --rootDir tests",
     "lint": "eslint src --ext .ts,.tsx",
     "test-ci": "pnpm test --ci --runInBand -u",