@oscarpalmer/oui 0.18.0 → 0.19.0

package/dist/js/floatable.full.js

@@ -1,11 +1,4 @@
-function isEventTarget(value) {
-	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
-}
-
-function getBoolean(value, defaultValue) {
-	return defaultValue ?? false;
-}
-
+function noop() {}
 function calculate() {
 	return new Promise((resolve) => {
 		const values = [];
@@ -13,37 +6,122 @@ function calculate() {
 		function step(now) {
 			if (last != null) values.push(now - last);
 			last = now;
-			if (values.length >= CALCULATION_TOTAL) {
-				const median = values.sort().slice(2, -2).reduce((first, second) => first + second, 0) / (values.length - CALCULATION_TRIM);
-				resolve(median);
-			} else requestAnimationFrame(step);
+			if (values.length >= TOTAL) resolve(values.sort().slice(TRIM_PART, -TRIM_PART).reduce((first, second) => first + second, 0) / (values.length - TRIM_TOTAL));
+			else requestAnimationFrame(step);
 		}
 		requestAnimationFrame(step);
 	});
 }
-function noop() {}
-var CALCULATION_TOTAL = 10;
-var CALCULATION_TRIM = 4;
-calculate().then((value) => {
-});
-
+var TOTAL = 10;
+var TRIM_PART = 2;
+var TRIM_TOTAL = 4;
+await calculate();
+function getBoolean(value, defaultValue) {
+	return typeof value === "boolean" ? value : defaultValue ?? false;
+}
+function isEventTarget(value) {
+	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
+}
+function addDelegatedHandler(doc, type, name, passive) {
+	if (DELEGATED.has(name)) return;
+	DELEGATED.add(name);
+	doc.addEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE, { passive });
+}
+function addDelegatedListener(target, type, name, listener, passive) {
+	target[name] ??= /* @__PURE__ */ new Set();
+	target[name].add(listener);
+	addDelegatedHandler(document, type, name, passive);
+	return () => {
+		removeDelegatedListener(target, name, listener);
+	};
+}
+function delegatedEventHandler(event) {
+	const key = `${EVENT_PREFIX}${event.type}${this ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
+	const items = event.composedPath();
+	const { length } = items;
+	let target = items[0];
+	Object.defineProperties(event, {
+		currentTarget: {
+			configurable: true,
+			get() {
+				return target;
+			}
+		},
+		target: {
+			configurable: true,
+			value: target
+		}
+	});
+	for (let index = 0; index < length; index += 1) {
+		const item = items[index];
+		const listeners = item[key];
+		if (item.disabled || listeners == null) continue;
+		target = item;
+		for (const listener of listeners) {
+			listener.call(item, event);
+			if (event.cancelBubble) return;
+		}
+	}
+}
+function getDelegatedName(target, type, options) {
+	if (isEventTarget(target) && EVENT_TYPES.has(type) && !options.capture && !options.once && options.signal == null) return `${EVENT_PREFIX}${type}${options.passive ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
+}
+function removeDelegatedListener(target, name, listener) {
+	const handlers = target[name];
+	if (handlers == null || !handlers.has(listener)) return false;
+	handlers.delete(listener);
+	if (handlers.size === 0) target[name] = void 0;
+	return true;
+}
+var DELEGATED = /* @__PURE__ */ new Set();
+var EVENT_PREFIX = "@";
+var EVENT_SUFFIX_ACTIVE = ":active";
+var EVENT_SUFFIX_PASSIVE = ":passive";
+var EVENT_TYPES = new Set([
+	"beforeinput",
+	"click",
+	"dblclick",
+	"contextmenu",
+	"focusin",
+	"focusout",
+	"input",
+	"keydown",
+	"keyup",
+	"mousedown",
+	"mousemove",
+	"mouseout",
+	"mouseover",
+	"mouseup",
+	"pointerdown",
+	"pointermove",
+	"pointerout",
+	"pointerover",
+	"pointerup",
+	"touchend",
+	"touchmove",
+	"touchstart"
+]);
+var HANDLER_ACTIVE = delegatedEventHandler.bind(false);
+var HANDLER_PASSIVE = delegatedEventHandler.bind(true);
 function createEventOptions(options) {
 	return {
-		capture: getBoolean(),
-		once: getBoolean(),
+		capture: getBoolean(options?.capture),
+		once: getBoolean(options?.once),
 		passive: getBoolean(options?.passive, true),
-		signal: options?.signal
+		signal: options?.signal instanceof AbortSignal ? options.signal : void 0
 	};
 }
 function on(target, type, listener, options) {
 	if (!isEventTarget(target) || typeof type !== "string" || typeof listener !== "function") return noop;
 	const extended = createEventOptions(options);
+	const delegated = getDelegatedName(target, type, extended);
+	if (delegated != null) return addDelegatedListener(target, type, delegated, listener, extended.passive);
 	target.addEventListener(type, listener, extended);
+	if (extended.once) return noop;
 	return () => {
 		target.removeEventListener(type, listener, extended);
 	};
 }
-
 function findAncestor(origin, selector) {
 	if (!(origin instanceof Element) || selector == null) return null;
 	if (typeof selector === "string") {
@@ -59,355 +137,262 @@ function findAncestor(origin, selector) {
 	}
 	return parent;
 }
-
-class Floatable {
-    options;
-    active = false;
-    disabled = false;
-    frame;
-    ignoreFocus = false;
-    constructor(options) {
-        this.options = options;
-        initialize(this);
-    }
-    destroy() {
-        stop(this);
-        const state = getState();
-        state?.active.delete(this);
-        state?.mapped.delete(this.options.anchor);
-        state?.mapped.delete(this.options.content);
-        this.options.anchor = undefined;
-        this.options.content = undefined;
-    }
-    disable() {
-        if (this.disabled) {
-            return;
-        }
-        this.disabled = true;
-        stop(this);
-        getState()?.active.delete(this);
-    }
-    enable() {
-        if (!this.disabled) {
-            return;
-        }
-        this.disabled = false;
-        initialize(this);
-    }
-    toggle(active, ignoreFocus) {
-        if (this.disabled || this.active === active) {
-            return;
-        }
-        const state = getState();
-        if (state == null) {
-            return;
-        }
-        this.ignoreFocus = !active && (ignoreFocus ?? false);
-        stop(this);
-        if (active) {
-            state.active.add(this);
-        }
-        else {
-            state.active.delete(this);
-        }
-        if (this.options.interactive) {
-            if (active) {
-                state.order.push(this);
-            }
-            else {
-                const index = state.order.indexOf(this);
-                if (index > -1) {
-                    state.order.splice(index, 1);
-                }
-            }
-        }
-        if (active) {
-            activate(this);
-        }
-        else {
-            deactivate(this);
-        }
-    }
-}
-//
+var Floatable = class {
+	active = false;
+	disabled = false;
+	frame;
+	ignoreFocus = false;
+	constructor(options) {
+		this.options = options;
+		initialize(this);
+	}
+	destroy() {
+		stop(this);
+		const state = getState();
+		state?.active.delete(this);
+		state?.mapped.delete(this.options.anchor);
+		state?.mapped.delete(this.options.content);
+		this.options.anchor = void 0;
+		this.options.content = void 0;
+	}
+	disable() {
+		if (this.disabled) return;
+		this.disabled = true;
+		stop(this);
+		getState()?.active.delete(this);
+	}
+	enable() {
+		if (!this.disabled) return;
+		this.disabled = false;
+		initialize(this);
+	}
+	toggle(active, ignoreFocus) {
+		if (this.disabled || this.active === active) return;
+		const state = getState();
+		if (state == null) return;
+		this.ignoreFocus = !active && (ignoreFocus ?? false);
+		stop(this);
+		if (active) state.active.add(this);
+		else state.active.delete(this);
+		if (this.options.interactive) if (active) state.order.push(this);
+		else {
+			const index = state.order.indexOf(this);
+			if (index > -1) state.order.splice(index, 1);
+		}
+		if (active) activate(this);
+		else deactivate(this);
+	}
+};
 function activate(floatable) {
-    floatable.active = true;
-    document.body.append(floatable.options.content);
-    floatable.options.content.hidden = false;
-    updatePosition(floatable);
+	floatable.active = true;
+	document.body.append(floatable.options.content);
+	floatable.options.content.hidden = false;
+	updatePosition(floatable);
 }
 function closeAbove(element) {
-    const state = getState();
-    if (state == null) {
-        return;
-    }
-    const index = state.order.findIndex(floatable => floatable.options.anchor === element ||
-        floatable.options.content === element);
-    if (index === -1 || index === state.order.length - 1) {
-        return;
-    }
-    while (index < state.order.length - 1) {
-        void state.order.pop()?.toggle(false, true);
-    }
+	const state = getState();
+	if (state == null) return;
+	const index = state.order.findIndex((floatable) => floatable.options.anchor === element || floatable.options.content === element);
+	if (index === -1 || index === state.order.length - 1) return;
+	while (index < state.order.length - 1) state.order.pop()?.toggle(false, true);
 }
 function closeAll() {
-    const state = getState();
-    const floatables = [...(state?.active ?? [])];
-    state?.active.clear();
-    for (const floatable of floatables) {
-        void floatable.toggle(false, true);
-    }
+	const state = getState();
+	const floatables = [...state?.active ?? []];
+	state?.active.clear();
+	for (const floatable of floatables) floatable.toggle(false, true);
 }
 function closeNonInteractive(state) {
-    for (const floatable of state.active) {
-        if (!floatable.options.interactive) {
-            void floatable.toggle(false);
-        }
-    }
+	for (const floatable of state.active) if (!floatable.options.interactive) floatable.toggle(false);
 }
 function deactivate(floatable) {
-    floatable.active = false;
-    floatable.options.content.hidden = true;
-    floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
-    floatable.options.onAfter?.(false);
+	floatable.active = false;
+	floatable.options.content.hidden = true;
+	floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
+	floatable.options.onAfter?.(false);
 }
 function getState() {
-    return window._oscarpalmer_oui_floatable;
+	return window._oscarpalmer_oui_floatable;
 }
 function getX(anchor, content, position) {
-    if (position.endsWith(POSITION_SUFFIX_END)) {
-        const end = anchor.right - content.width;
-        return end < 0 ? 0 : end;
-    }
-    if (position.endsWith(POSITION_SUFFIX_START)) {
-        const start = anchor.left;
-        return start + content.width > window.innerWidth
-            ? window.innerWidth - content.width
-            : start;
-    }
-    if (position.startsWith(POSITION_END)) {
-        return anchor.right;
-    }
-    if (position.startsWith(POSITION_START)) {
-        return anchor.left - content.width;
-    }
-    if (position.startsWith(POSITION_HORIZONTAL)) {
-        if (anchor.right + content.width <= window.innerWidth) {
-            return anchor.right;
-        }
-        return anchor.left - content.width;
-    }
-    const left = anchor.left + (anchor.width - content.width) / 2;
-    return left < 0 ? 0 : left;
+	if (position.endsWith(POSITION_SUFFIX_END)) {
+		const end = anchor.right - content.width;
+		return end < 0 ? 0 : end;
+	}
+	if (position.endsWith(POSITION_SUFFIX_START)) {
+		const start = anchor.left;
+		return start + content.width > window.innerWidth ? window.innerWidth - content.width : start;
+	}
+	if (position.startsWith(POSITION_END)) return anchor.right;
+	if (position.startsWith(POSITION_START)) return anchor.left - content.width;
+	if (position.startsWith(POSITION_HORIZONTAL)) {
+		if (anchor.right + content.width <= window.innerWidth) return anchor.right;
+		return anchor.left - content.width;
+	}
+	const left = anchor.left + (anchor.width - content.width) / 2;
+	return left < 0 ? 0 : left;
 }
 function getY(anchor, content, position, preferAbove) {
-    if (position.startsWith(POSITION_ABOVE)) {
-        return anchor.top - content.height;
-    }
-    if (position.startsWith(POSITION_BELOW)) {
-        return anchor.bottom;
-    }
-    if (position.endsWith(POSITION_BOTTOM)) {
-        const bottom = anchor.bottom - content.height;
-        return bottom < 0 ? 0 : bottom;
-    }
-    if (position.endsWith(POSITION_TOP)) {
-        const top = anchor.top;
-        return top + content.height > window.innerHeight
-            ? window.innerHeight - content.height
-            : top;
-    }
-    if (position.startsWith(POSITION_VERTICAL)) {
-        if (preferAbove && anchor.top - content.height >= 0) {
-            return anchor.top - content.height;
-        }
-        if (anchor.bottom + content.height <= document.body.clientHeight) {
-            return anchor.bottom;
-        }
-        return anchor.top - content.height;
-    }
-    return anchor.top + (anchor.height - content.height) / 2;
+	if (position.startsWith(POSITION_ABOVE)) return anchor.top - content.height;
+	if (position.startsWith(POSITION_BELOW)) return anchor.bottom;
+	if (position.endsWith(POSITION_BOTTOM)) {
+		const bottom = anchor.bottom - content.height;
+		return bottom < 0 ? 0 : bottom;
+	}
+	if (position.endsWith(POSITION_TOP)) {
+		const top = anchor.top;
+		return top + content.height > window.innerHeight ? window.innerHeight - content.height : top;
+	}
+	if (position.startsWith(POSITION_VERTICAL)) {
+		if (preferAbove && anchor.top - content.height >= 0) return anchor.top - content.height;
+		if (anchor.bottom + content.height <= document.body.clientHeight) return anchor.bottom;
+		return anchor.top - content.height;
+	}
+	return anchor.top + (anchor.height - content.height) / 2;
 }
 function initialize(floatable) {
-    const { anchor, content, interactive } = floatable.options;
-    if (interactive) {
-        anchor.setAttribute(ATTRIBUTE_ANCHOR, '');
-        content.setAttribute(ATTRIBUTE_CONTENT, '');
-    }
-    content.style.position = 'fixed';
-    content.style.inset = '0 auto auto 0';
-    content.style.zIndex = '10';
-    const state = getState();
-    state?.mapped.set(anchor, floatable);
-    state?.mapped.set(content, floatable);
+	const { anchor, content, interactive } = floatable.options;
+	if (interactive) {
+		anchor.setAttribute(ATTRIBUTE_ANCHOR, "");
+		content.setAttribute(ATTRIBUTE_CONTENT, "");
+	}
+	content.style.position = "fixed";
+	content.style.inset = "0 auto auto 0";
+	content.style.zIndex = "10";
+	const state = getState();
+	state?.mapped.set(anchor, floatable);
+	state?.mapped.set(content, floatable);
 }
 function isDisabled(element) {
-    return (element.disabled ||
-        element.readOnly ||
-        element.getAttribute('aria-disabled') === 'true');
+	return element.disabled || element.readOnly || element.getAttribute("aria-disabled") === "true";
 }
 function onClick(event) {
-    const related = findAncestor(event.target, SELECTOR_ALL);
-    if (!(related instanceof HTMLElement)) {
-        closeAll();
-    }
-    else if (related.hasAttribute(ATTRIBUTE_CONTENT)) {
-        closeAbove(related);
-    }
-    else if (!isDisabled(related)) {
-        toggle(related);
-    }
+	const related = findAncestor(event.target, SELECTOR_ALL);
+	if (!(related instanceof HTMLElement)) closeAll();
+	else if (related.hasAttribute(ATTRIBUTE_CONTENT)) closeAbove(related);
+	else if (!isDisabled(related)) toggle(related);
 }
 function onKeyDown(event) {
-    if (event.key !== 'Escape') {
-        return;
-    }
-    const state = getState();
-    if (state == null || state.active.size === 0) {
-        return;
-    }
-    closeNonInteractive(state);
-    const related = findAncestor(event.target, SELECTOR_CONTENT);
-    if (!(related instanceof HTMLElement)) {
-        return;
-    }
-    closeAbove(related);
-    const floatable = state.mapped.get(related);
-    if (floatable != null) {
-        void floatable.toggle(false);
-    }
+	if (event.key !== "Escape") return;
+	const state = getState();
+	if (state == null || state.active.size === 0) return;
+	closeNonInteractive(state);
+	const related = findAncestor(event.target, SELECTOR_CONTENT);
+	if (!(related instanceof HTMLElement)) return;
+	closeAbove(related);
+	const floatable = state.mapped.get(related);
+	if (floatable != null) floatable.toggle(false);
 }
 function stop(floatable) {
-    if (floatable.frame != null) {
-        cancelAnimationFrame(floatable.frame);
-    }
-    floatable.frame = undefined;
+	if (floatable.frame != null) cancelAnimationFrame(floatable.frame);
+	floatable.frame = void 0;
 }
 function toggle(anchor) {
-    const floatable = getState()?.mapped.get(anchor);
-    if (floatable == null) {
-        closeAll();
-        return;
-    }
-    const active = Boolean(floatable.active);
-    const content = findAncestor(floatable.options.anchor, SELECTOR_CONTENT);
-    if (content == null) {
-        closeAll();
-    }
-    else {
-        closeAbove(content);
-    }
-    void floatable.toggle(!active);
+	const floatable = getState()?.mapped.get(anchor);
+	if (floatable == null) {
+		closeAll();
+		return;
+	}
+	const active = Boolean(floatable.active);
+	const content = findAncestor(floatable.options.anchor, SELECTOR_CONTENT);
+	if (content == null) closeAll();
+	else closeAbove(content);
+	floatable.toggle(!active);
 }
 function updatePosition(floatable) {
-    let position = floatable.options.anchor
-        .getAttribute(floatable.options.positionAttribute)
-        ?.trim() ?? floatable.options.defaultPosition;
-    if (!POSITIONS.has(position)) {
-        position = floatable.options.defaultPosition;
-    }
-    let previousAnchor;
-    let previousContent;
-    let calculated = false;
-    let runOnAfter = false;
-    function run() {
-        const anchor = floatable.options.anchor.getBoundingClientRect();
-        const content = floatable.options.content.getBoundingClientRect();
-        if (calculated) {
-            if (previousAnchor != null && previousContent != null) {
-                if (PROPERTIES.every(property => anchor[property] === previousAnchor[property]) &&
-                    PROPERTIES.every(property => content[property] === previousContent[property])) {
-                    floatable.frame = requestAnimationFrame(run);
-                    return;
-                }
-            }
-        }
-        else {
-            calculated = true;
-        }
-        update(anchor, content);
-    }
-    function update(anchor, content) {
-        previousAnchor = anchor;
-        previousContent = content;
-        const left = getX(anchor, content, position);
-        const top = getY(anchor, content, position, floatable.options.preferAbove);
-        if (top + content.height > window.innerHeight) {
-            floatable.options.content.style.height = `${window.innerHeight - top}px`;
-        }
-        else {
-            floatable.options.content.style.height = '';
-        }
-        if (left + content.width > window.innerWidth) {
-            floatable.options.content.style.width = `${window.innerWidth - left}px`;
-        }
-        else {
-            floatable.options.content.style.width = '';
-        }
-        // floatable.options.content.style.inset = `${top}px auto auto ${left}px`;
-        floatable.options.content.style.transform = `translate3d(${left}px, ${top}px, 0)`;
-        floatable.frame = requestAnimationFrame(run);
-        if (!runOnAfter) {
-            runOnAfter = true;
-            floatable.options.onAfter?.(true);
-        }
-    }
-    floatable.frame = requestAnimationFrame(run);
+	let position = floatable.options.anchor.getAttribute(floatable.options.positionAttribute)?.trim() ?? floatable.options.defaultPosition;
+	if (!POSITIONS.has(position)) position = floatable.options.defaultPosition;
+	let previousAnchor;
+	let previousContent;
+	let calculated = false;
+	let runOnAfter = false;
+	function run() {
+		const anchor = floatable.options.anchor.getBoundingClientRect();
+		const content = floatable.options.content.getBoundingClientRect();
+		if (calculated) {
+			if (previousAnchor != null && previousContent != null) {
+				if (PROPERTIES.every((property) => anchor[property] === previousAnchor[property]) && PROPERTIES.every((property) => content[property] === previousContent[property])) {
+					floatable.frame = requestAnimationFrame(run);
+					return;
+				}
+			}
+		} else calculated = true;
+		update(anchor, content);
+	}
+	function update(anchor, content) {
+		previousAnchor = anchor;
+		previousContent = content;
+		const left = getX(anchor, content, position);
+		const top = getY(anchor, content, position, floatable.options.preferAbove);
+		if (top + content.height > window.innerHeight) floatable.options.content.style.height = `${window.innerHeight - top}px`;
+		else floatable.options.content.style.height = "";
+		if (left + content.width > window.innerWidth) floatable.options.content.style.width = `${window.innerWidth - left}px`;
+		else floatable.options.content.style.width = "";
+		floatable.options.content.style.transform = `translate3d(${left}px, ${top}px, 0)`;
+		floatable.frame = requestAnimationFrame(run);
+		if (!runOnAfter) {
+			runOnAfter = true;
+			floatable.options.onAfter?.(true);
+		}
+	}
+	floatable.frame = requestAnimationFrame(run);
 }
-//
-const ATTRIBUTE_ANCHOR = 'oui-floatable-anchor';
-const ATTRIBUTE_CONTENT = 'oui-floatable-content';
-const INSERT_AFTEREND = 'afterend';
-const POSITION_ABOVE = 'above';
-const POSITION_BELOW = 'below';
-const POSITION_BOTTOM = 'bottom';
-const POSITION_END = 'end';
-const POSITION_HORIZONTAL = 'horizontal';
-const POSITION_START = 'start';
-const POSITION_SUFFIX_END = '-end';
-const POSITION_SUFFIX_START = '-start';
-const POSITION_TOP = 'top';
-const POSITION_VERTICAL = 'vertical';
+const ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
+const ATTRIBUTE_CONTENT = "oui-floatable-content";
+const INSERT_AFTEREND = "afterend";
+const POSITION_ABOVE = "above";
+const POSITION_BELOW = "below";
+const POSITION_BOTTOM = "bottom";
+const POSITION_END = "end";
+const POSITION_HORIZONTAL = "horizontal";
+const POSITION_START = "start";
+const POSITION_SUFFIX_END = "-end";
+const POSITION_SUFFIX_START = "-start";
+const POSITION_TOP = "top";
+const POSITION_VERTICAL = "vertical";
 const POSITIONS = new Set([
-    'above',
-    'above-end',
-    'above-start',
-    'below',
-    'below-end',
-    'below-start',
-    'end',
-    'end-bottom',
-    'end-top',
-    'horizontal',
-    'horizontal-bottom',
-    'horizontal-top',
-    'start',
-    'start-bottom',
-    'start-top',
-    'vertical',
-    'vertical-end',
-    'vertical-start',
+	"above",
+	"above-end",
+	"above-start",
+	"below",
+	"below-end",
+	"below-start",
+	"end",
+	"end-bottom",
+	"end-top",
+	"horizontal",
+	"horizontal-bottom",
+	"horizontal-top",
+	"start",
+	"start-bottom",
+	"start-top",
+	"vertical",
+	"vertical-end",
+	"vertical-start"
 ]);
-const PROPERTIES = ['bottom', 'left', 'right', 'top'];
+const PROPERTIES = [
+	"bottom",
+	"left",
+	"right",
+	"top"
+];
 const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
 const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
-//
 if (window._oscarpalmer_oui_floatable == null) {
-    Object.defineProperty(window, '_oscarpalmer_oui_floatable', {
-        enumerable: false,
-        value: {
-            active: new Set(),
-            mapped: new Map(),
-            order: [],
-        },
-        writable: false,
-    });
-    on(document, 'keydown', event => {
-        onKeyDown(event);
-    });
-    on(document, 'click', event => {
-        onClick(event);
-    });
+	Object.defineProperty(window, "_oscarpalmer_oui_floatable", {
+		enumerable: false,
+		value: {
+			active: /* @__PURE__ */ new Set(),
+			mapped: /* @__PURE__ */ new Map(),
+			order: []
+		},
+		writable: false
+	});
+	on(document, "keydown", (event) => {
+		onKeyDown(event);
+	});
+	on(document, "click", (event) => {
+		onClick(event);
+	});
 }
-
 export { Floatable, deactivate };