Packages
corex
0.1.0
0.1.2
0.1.1
0.1.0
0.1.0-rc.1
0.1.0-rc.0
0.1.0-beta.5
0.1.0-beta.4
0.1.0-beta.3
0.1.0-beta.2
0.1.0-beta.1
0.1.0-alpha.33
0.1.0-alpha.32
0.1.0-alpha.31
0.1.0-alpha.30
0.1.0-alpha.29
0.1.0-alpha.28
0.1.0-alpha.27
0.1.0-alpha.26
0.1.0-alpha.25
0.1.0-alpha.24
0.1.0-alpha.23
0.1.0-alpha.22
0.1.0-alpha.21
0.1.0-alpha.20
0.1.0-alpha.19
0.1.0-alpha.18
0.1.0-alpha.17
0.1.0-alpha.16
0.1.0-alpha.15
0.1.0-alpha.14
0.1.0-alpha.13
0.1.0-alpha.12
0.1.0-alpha.11
0.1.0-alpha.10
0.1.0-alpha.9
0.1.0-alpha.8
0.1.0-alpha.7
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
Accessible and unstyled UI components library written in Elixir and TypeScript that integrates Zag.js state machines into the Phoenix Framework.
Current section
Files
Jump to
Current section
Files
priv/static/chunks/chunk-V4PB2O2G.mjs
import {
getActiveElement,
getDocument,
getEventTarget,
getWindow,
isMac,
isVirtualClick
} from "./chunk-EWT2BP2N.mjs";
// ../node_modules/.pnpm/@zag-js+focus-visible@1.40.0/node_modules/@zag-js/focus-visible/dist/index.mjs
function isValidKey(e) {
return !(e.metaKey || !isMac() && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
}
var nonTextInputTypes = /* @__PURE__ */ new Set(["checkbox", "radio", "range", "color", "file", "image", "button", "submit", "reset"]);
function isKeyboardFocusEvent(isTextInput, modality, e) {
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;
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
};
function triggerChangeHandlers(modality, e) {
for (let handler of changeHandlers) {
handler(modality, e);
}
}
function handleKeyboardEvent(e) {
hasEventBeforeFocus = true;
if (isValidKey(e)) {
currentModality = "keyboard";
triggerChangeHandlers("keyboard", e);
}
}
function handlePointerEvent(e) {
currentModality = "pointer";
if (e.type === "mousedown" || e.type === "pointerdown") {
hasEventBeforeFocus = true;
triggerChangeHandlers("pointer", e);
}
}
function handleClickEvent(e) {
if (isVirtualClick(e)) {
hasEventBeforeFocus = true;
currentModality = "virtual";
}
}
function handleFocusEvent(e) {
const target = getEventTarget(e);
if (target === getWindow(target) || target === getDocument(target) || ignoreFocusEvent || !e.isTrusted) {
return;
}
if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
currentModality = "virtual";
triggerChangeHandlers("virtual", e);
}
hasEventBeforeFocus = false;
hasBlurredWindowRecently = false;
}
function handleWindowBlur() {
if (ignoreFocusEvent) return;
hasEventBeforeFocus = false;
hasBlurredWindowRecently = true;
}
function setupGlobalFocusEvents(root) {
if (typeof window === "undefined" || listenerMap.get(getWindow(root))) {
return;
}
const win = getWindow(root);
const doc = getDocument(root);
let focus = win.HTMLElement.prototype.focus;
function patchedFocus() {
hasEventBeforeFocus = true;
focus.apply(this, arguments);
}
try {
Object.defineProperty(win.HTMLElement.prototype, "focus", {
configurable: true,
value: patchedFocus
});
} catch {
}
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 {
doc.addEventListener("mousedown", handlePointerEvent, true);
doc.addEventListener("mousemove", handlePointerEvent, true);
doc.addEventListener("mouseup", handlePointerEvent, true);
}
win.addEventListener(
"beforeunload",
() => {
tearDownWindowFocusTracking(root);
},
{ once: true }
);
listenerMap.set(win, { focus });
}
var tearDownWindowFocusTracking = (root, loadListener) => {
const win = getWindow(root);
const doc = getDocument(root);
if (loadListener) {
doc.removeEventListener("DOMContentLoaded", loadListener);
}
const listenerData = listenerMap.get(win);
if (!listenerData) {
return;
}
try {
Object.defineProperty(win.HTMLElement.prototype, "focus", {
configurable: true,
value: listenerData.focus
});
} catch {
}
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 setInteractionModality(modality) {
currentModality = modality;
triggerChangeHandlers(modality, null);
}
function isFocusVisible() {
return currentModality === "keyboard" || currentModality === "virtual";
}
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,
setInteractionModality,
isFocusVisible,
trackFocusVisible
};