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-57TWBSTW.mjs
import {
trackInteractOutside
} from "./chunk-4QMNVH3P.mjs";
import {
addDomEvent,
contains,
getDocument,
getEventTarget,
isFunction,
isHTMLElement,
nextTick,
raf,
setStyle,
waitForElement,
warn
} from "./chunk-EWT2BP2N.mjs";
// ../node_modules/.pnpm/@zag-js+dismissable@1.40.0/node_modules/@zag-js/dismissable/dist/escape-keydown.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 });
}
// ../node_modules/.pnpm/@zag-js+dismissable@1.40.0/node_modules/@zag-js/dismissable/dist/layer-stack.mjs
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();
}
});
fireCustomEvent(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 fireCustomEvent(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 });
}
// ../node_modules/.pnpm/@zag-js+dismissable@1.40.0/node_modules/@zag-js/dismissable/dist/pointer-event-outside.mjs
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());
};
}
// ../node_modules/.pnpm/@zag-js+dismissable@1.40.0/node_modules/@zag-js/dismissable/dist/dismissable-layer.mjs
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
};