Packages
corex
0.1.0-alpha.21
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/chunk-BPSX7Z7Y.mjs
import {
addDomEvent,
callAll,
contains,
getDocument,
getEventTarget,
getNearestOverflowAncestor,
getWindow,
isContextMenuEvent,
isControlledElement,
isFocusable,
isFunction,
isHTMLElement,
isShadowRoot,
isTouchDevice,
nextTick,
raf,
setStyle,
waitForElement,
warn
} from "./chunk-GFGFZBBD.mjs";
// ../node_modules/.pnpm/@zag-js+interact-outside@1.33.1/node_modules/@zag-js/interact-outside/dist/index.mjs
function getWindowFrames(win) {
const frames = {
each(cb) {
for (let i = 0; i < win.frames?.length; i += 1) {
const frame = win.frames[i];
if (frame) cb(frame);
}
},
addEventListener(event, listener, options) {
frames.each((frame) => {
try {
frame.document.addEventListener(event, listener, options);
} catch {
}
});
return () => {
try {
frames.removeEventListener(event, listener, options);
} catch {
}
};
},
removeEventListener(event, listener, options) {
frames.each((frame) => {
try {
frame.document.removeEventListener(event, listener, options);
} catch {
}
});
}
};
return frames;
}
function getParentWindow(win) {
const parent = win.frameElement != null ? win.parent : null;
return {
addEventListener: (event, listener, options) => {
try {
parent?.addEventListener(event, listener, options);
} catch {
}
return () => {
try {
parent?.removeEventListener(event, listener, options);
} catch {
}
};
},
removeEventListener: (event, listener, options) => {
try {
parent?.removeEventListener(event, listener, options);
} catch {
}
}
};
}
var POINTER_OUTSIDE_EVENT = "pointerdown.outside";
var FOCUS_OUTSIDE_EVENT = "focus.outside";
function isComposedPathFocusable(composedPath) {
for (const node of composedPath) {
if (isHTMLElement(node) && isFocusable(node)) return true;
}
return false;
}
var isPointerEvent = (event) => "clientY" in event;
function isEventPointWithin(node, event) {
if (!isPointerEvent(event) || !node) return false;
const rect = node.getBoundingClientRect();
if (rect.width === 0 || rect.height === 0) return false;
return rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
}
function isPointInRect(rect, point) {
return rect.y <= point.y && point.y <= rect.y + rect.height && rect.x <= point.x && point.x <= rect.x + rect.width;
}
function isEventWithinScrollbar(event, ancestor) {
if (!ancestor || !isPointerEvent(event)) return false;
const isScrollableY = ancestor.scrollHeight > ancestor.clientHeight;
const onScrollbarY = isScrollableY && event.clientX > ancestor.offsetLeft + ancestor.clientWidth;
const isScrollableX = ancestor.scrollWidth > ancestor.clientWidth;
const onScrollbarX = isScrollableX && event.clientY > ancestor.offsetTop + ancestor.clientHeight;
const rect = {
x: ancestor.offsetLeft,
y: ancestor.offsetTop,
width: ancestor.clientWidth + (isScrollableY ? 16 : 0),
height: ancestor.clientHeight + (isScrollableX ? 16 : 0)
};
const point = {
x: event.clientX,
y: event.clientY
};
if (!isPointInRect(rect, point)) return false;
return onScrollbarY || onScrollbarX;
}
function trackInteractOutsideImpl(node, options) {
const {
exclude,
onFocusOutside,
onPointerDownOutside,
onInteractOutside,
defer,
followControlledElements = true
} = options;
if (!node) return;
const doc = getDocument(node);
const win = getWindow(node);
const frames = getWindowFrames(win);
const parentWin = getParentWindow(win);
function isEventOutside(event, target) {
if (!isHTMLElement(target)) return false;
if (!target.isConnected) return false;
if (contains(node, target)) return false;
if (isEventPointWithin(node, event)) return false;
if (followControlledElements && isControlledElement(node, target)) return false;
const triggerEl = doc.querySelector(`[aria-controls="${node.id}"]`);
if (triggerEl) {
const triggerAncestor = getNearestOverflowAncestor(triggerEl);
if (isEventWithinScrollbar(event, triggerAncestor)) return false;
}
const nodeAncestor = getNearestOverflowAncestor(node);
if (isEventWithinScrollbar(event, nodeAncestor)) return false;
return !exclude?.(target);
}
const pointerdownCleanups = /* @__PURE__ */ new Set();
const isInShadowRoot = isShadowRoot(node?.getRootNode());
function onPointerDown(event) {
function handler(clickEvent) {
const func = defer && !isTouchDevice() ? raf : (v) => v();
const evt = clickEvent ?? event;
const composedPath = evt?.composedPath?.() ?? [evt?.target];
func(() => {
const target = isInShadowRoot ? composedPath[0] : getEventTarget(event);
if (!node || !isEventOutside(event, target)) return;
if (onPointerDownOutside || onInteractOutside) {
const handler2 = callAll(onPointerDownOutside, onInteractOutside);
node.addEventListener(POINTER_OUTSIDE_EVENT, handler2, { once: true });
}
fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {
bubbles: false,
cancelable: true,
detail: {
originalEvent: evt,
contextmenu: isContextMenuEvent(evt),
focusable: isComposedPathFocusable(composedPath),
target
}
});
});
}
if (event.pointerType === "touch") {
pointerdownCleanups.forEach((fn) => fn());
pointerdownCleanups.add(addDomEvent(doc, "click", handler, { once: true }));
pointerdownCleanups.add(parentWin.addEventListener("click", handler, { once: true }));
pointerdownCleanups.add(frames.addEventListener("click", handler, { once: true }));
} else {
handler();
}
}
const cleanups = /* @__PURE__ */ new Set();
const timer = setTimeout(() => {
cleanups.add(addDomEvent(doc, "pointerdown", onPointerDown, true));
cleanups.add(parentWin.addEventListener("pointerdown", onPointerDown, true));
cleanups.add(frames.addEventListener("pointerdown", onPointerDown, true));
}, 0);
function onFocusin(event) {
const func = defer ? raf : (v) => v();
func(() => {
const composedPath = event?.composedPath?.() ?? [event?.target];
const target = isInShadowRoot ? composedPath[0] : getEventTarget(event);
if (!node || !isEventOutside(event, target)) return;
if (onFocusOutside || onInteractOutside) {
const handler = callAll(onFocusOutside, onInteractOutside);
node.addEventListener(FOCUS_OUTSIDE_EVENT, handler, { once: true });
}
fireCustomEvent(node, FOCUS_OUTSIDE_EVENT, {
bubbles: false,
cancelable: true,
detail: {
originalEvent: event,
contextmenu: false,
focusable: isFocusable(target),
target
}
});
});
}
if (!isTouchDevice()) {
cleanups.add(addDomEvent(doc, "focusin", onFocusin, true));
cleanups.add(parentWin.addEventListener("focusin", onFocusin, true));
cleanups.add(frames.addEventListener("focusin", onFocusin, true));
}
return () => {
clearTimeout(timer);
pointerdownCleanups.forEach((fn) => fn());
cleanups.forEach((fn) => fn());
};
}
function trackInteractOutside(nodeOrFn, options) {
const { defer } = options;
const func = defer ? raf : (v) => v();
const cleanups = [];
cleanups.push(
func(() => {
const node = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn;
cleanups.push(trackInteractOutsideImpl(node, options));
})
);
return () => {
cleanups.forEach((fn) => fn?.());
};
}
function fireCustomEvent(el, type, init) {
const win = el.ownerDocument.defaultView || window;
const event = new win.CustomEvent(type, init);
return el.dispatchEvent(event);
}
// ../node_modules/.pnpm/@zag-js+dismissable@1.33.1/node_modules/@zag-js/dismissable/dist/index.mjs
function trackEscapeKeydown(node, fn) {
const handleKeyDown = (event) => {
if (event.key !== "Escape") return;
if (event.isComposing) return;
fn?.(event);
};
return addDomEvent(getDocument(node), "keydown", handleKeyDown, { capture: true });
}
var LAYER_REQUEST_DISMISS_EVENT = "layer:request-dismiss";
var layerStack = {
layers: [],
branches: [],
recentlyRemoved: /* @__PURE__ */ new Set(),
count() {
return this.layers.length;
},
pointerBlockingLayers() {
return this.layers.filter((layer) => layer.pointerBlocking);
},
topMostPointerBlockingLayer() {
return [...this.pointerBlockingLayers()].slice(-1)[0];
},
hasPointerBlockingLayer() {
return this.pointerBlockingLayers().length > 0;
},
isBelowPointerBlockingLayer(node) {
const index = this.indexOf(node);
const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
return index < highestBlockingIndex;
},
isTopMost(node) {
const layer = this.layers[this.count() - 1];
return layer?.node === node;
},
getNestedLayers(node) {
return Array.from(this.layers).slice(this.indexOf(node) + 1);
},
getLayersByType(type) {
return this.layers.filter((layer) => layer.type === type);
},
getNestedLayersByType(node, type) {
const index = this.indexOf(node);
if (index === -1) return [];
return this.layers.slice(index + 1).filter((layer) => layer.type === type);
},
getParentLayerOfType(node, type) {
const index = this.indexOf(node);
if (index <= 0) return void 0;
return this.layers.slice(0, index).reverse().find((layer) => layer.type === type);
},
countNestedLayersOfType(node, type) {
return this.getNestedLayersByType(node, type).length;
},
isInNestedLayer(node, target) {
const inNested = this.getNestedLayers(node).some((layer) => contains(layer.node, target));
if (inNested) return true;
if (this.recentlyRemoved.size > 0) return true;
return false;
},
isInBranch(target) {
return Array.from(this.branches).some((branch) => contains(branch, target));
},
add(layer) {
this.layers.push(layer);
this.syncLayers();
},
addBranch(node) {
this.branches.push(node);
},
remove(node) {
const index = this.indexOf(node);
if (index < 0) return;
this.recentlyRemoved.add(node);
nextTick(() => this.recentlyRemoved.delete(node));
if (index < this.count() - 1) {
const _layers = this.getNestedLayers(node);
_layers.forEach((layer) => layerStack.dismiss(layer.node, node));
}
this.layers.splice(index, 1);
this.syncLayers();
},
removeBranch(node) {
const index = this.branches.indexOf(node);
if (index >= 0) this.branches.splice(index, 1);
},
syncLayers() {
this.layers.forEach((layer, index) => {
layer.node.style.setProperty("--layer-index", `${index}`);
layer.node.removeAttribute("data-nested");
layer.node.removeAttribute("data-has-nested");
const parentOfSameType = this.getParentLayerOfType(layer.node, layer.type);
if (parentOfSameType) {
layer.node.setAttribute("data-nested", layer.type);
}
const nestedCount = this.countNestedLayersOfType(layer.node, layer.type);
if (nestedCount > 0) {
layer.node.setAttribute("data-has-nested", layer.type);
}
layer.node.style.setProperty("--nested-layer-count", `${nestedCount}`);
});
},
indexOf(node) {
return this.layers.findIndex((layer) => layer.node === node);
},
dismiss(node, parent) {
const index = this.indexOf(node);
if (index === -1) return;
const layer = this.layers[index];
addListenerOnce(node, LAYER_REQUEST_DISMISS_EVENT, (event) => {
layer.requestDismiss?.(event);
if (!event.defaultPrevented) {
layer?.dismiss();
}
});
fireCustomEvent2(node, LAYER_REQUEST_DISMISS_EVENT, {
originalLayer: node,
targetLayer: parent,
originalIndex: index,
targetIndex: parent ? this.indexOf(parent) : -1
});
this.syncLayers();
},
clear() {
this.remove(this.layers[0].node);
}
};
function fireCustomEvent2(el, type, detail) {
const win = el.ownerDocument.defaultView || window;
const event = new win.CustomEvent(type, { cancelable: true, bubbles: true, detail });
return el.dispatchEvent(event);
}
function addListenerOnce(el, type, callback) {
el.addEventListener(type, callback, { once: true });
}
var originalBodyPointerEvents;
function assignPointerEventToLayers() {
layerStack.layers.forEach(({ node }) => {
node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
});
}
function clearPointerEvent(node) {
node.style.pointerEvents = "";
}
function disablePointerEventsOutside(node, persistentElements) {
const doc = getDocument(node);
const cleanups = [];
if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute("data-inert")) {
originalBodyPointerEvents = document.body.style.pointerEvents;
queueMicrotask(() => {
doc.body.style.pointerEvents = "none";
doc.body.setAttribute("data-inert", "");
});
}
persistentElements?.forEach((el) => {
const [promise, abort] = waitForElement(
() => {
const node2 = el();
return isHTMLElement(node2) ? node2 : null;
},
{ timeout: 1e3 }
);
promise.then((el2) => cleanups.push(setStyle(el2, { pointerEvents: "auto" })));
cleanups.push(abort);
});
return () => {
if (layerStack.hasPointerBlockingLayer()) return;
queueMicrotask(() => {
doc.body.style.pointerEvents = originalBodyPointerEvents;
doc.body.removeAttribute("data-inert");
if (doc.body.style.length === 0) doc.body.removeAttribute("style");
});
cleanups.forEach((fn) => fn());
};
}
function trackDismissableElementImpl(node, options) {
const { warnOnMissingNode = true } = options;
if (warnOnMissingNode && !node) {
warn("[@zag-js/dismissable] node is `null` or `undefined`");
return;
}
if (!node) {
return;
}
const { onDismiss, onRequestDismiss, pointerBlocking, exclude: excludeContainers, debug, type = "dialog" } = options;
const layer = { dismiss: onDismiss, node, type, pointerBlocking, requestDismiss: onRequestDismiss };
layerStack.add(layer);
assignPointerEventToLayers();
function onPointerDownOutside(event) {
const target = getEventTarget(event.detail.originalEvent);
if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target)) return;
options.onPointerDownOutside?.(event);
options.onInteractOutside?.(event);
if (event.defaultPrevented) return;
if (debug) {
console.log("onPointerDownOutside:", event.detail.originalEvent);
}
onDismiss?.();
}
function onFocusOutside(event) {
const target = getEventTarget(event.detail.originalEvent);
if (layerStack.isInBranch(target)) return;
options.onFocusOutside?.(event);
options.onInteractOutside?.(event);
if (event.defaultPrevented) return;
if (debug) {
console.log("onFocusOutside:", event.detail.originalEvent);
}
onDismiss?.();
}
function onEscapeKeyDown(event) {
if (!layerStack.isTopMost(node)) return;
options.onEscapeKeyDown?.(event);
if (!event.defaultPrevented && onDismiss) {
event.preventDefault();
onDismiss();
}
}
function exclude(target) {
if (!node) return false;
const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
const _containers = Array.isArray(containers) ? containers : [containers];
const persistentElements = options.persistentElements?.map((fn) => fn()).filter(isHTMLElement);
if (persistentElements) _containers.push(...persistentElements);
return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
}
const cleanups = [
pointerBlocking ? disablePointerEventsOutside(node, options.persistentElements) : void 0,
trackEscapeKeydown(node, onEscapeKeyDown),
trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside, defer: options.defer })
];
return () => {
layerStack.remove(node);
assignPointerEventToLayers();
clearPointerEvent(node);
cleanups.forEach((fn) => fn?.());
};
}
function trackDismissableElement(nodeOrFn, options) {
const { defer } = options;
const func = defer ? raf : (v) => v();
const cleanups = [];
cleanups.push(
func(() => {
const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn;
cleanups.push(trackDismissableElementImpl(node, options));
})
);
return () => {
cleanups.forEach((fn) => fn?.());
};
}
function trackDismissableBranch(nodeOrFn, options = {}) {
const { defer } = options;
const func = defer ? raf : (v) => v();
const cleanups = [];
cleanups.push(
func(() => {
const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn;
if (!node) {
warn("[@zag-js/dismissable] branch node is `null` or `undefined`");
return;
}
layerStack.addBranch(node);
cleanups.push(() => {
layerStack.removeBranch(node);
});
})
);
return () => {
cleanups.forEach((fn) => fn?.());
};
}
export {
trackDismissableElement,
trackDismissableBranch
};