@schukai/monster 4.120.1 → 4.121.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.121.0] - 2026-02-13
+
+### Add Features
+
+- Enhance dismissal functionality for Popper and Select components
+
+
+
 ## [4.120.1] - 2026-02-12
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.120.1"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.121.0"}

package/source/components/form/popper-button.mjs

@@ -18,7 +18,7 @@ import {
 	assembleMethodSymbol,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { getDocument } from "../../dom/util.mjs";
+import { findElementWithSelectorUpwards, getDocument } from "../../dom/util.mjs";
 import { isFunction } from "../../types/is.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { Popper } from "../layout/popper.mjs";
@@ -77,6 +77,20 @@ const popperElementSymbol = Symbol("popperElement");
  */
 const arrowElementSymbol = Symbol("arrowElement");
 
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const hostElementSymbol = Symbol("hostElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const usesHostDismissSymbol = Symbol("usesHostDismiss");
+
 /**
  * A beautiful popper button that can make your life easier and also looks good.
  *
@@ -149,6 +163,10 @@ class PopperButton extends Popper {
 				role: null,
 				label: null,
 			},
+
+			features: {
+				closeOnOutsideClick: true,
+			},
 		});
 	}
 
@@ -187,11 +205,24 @@ class PopperButton extends Popper {
 	connectedCallback() {
 		super.connectedCallback();
 
+		this[hostElementSymbol] = findElementWithSelectorUpwards(
+			this,
+			"monster-host",
+		);
+		this[usesHostDismissSymbol] =
+			this[hostElementSymbol] &&
+			typeof this[hostElementSymbol].registerDismissable === "function";
+
 		const document = getDocument();
 
-		for (const [, type] of Object.entries(["click", "touch"])) {
-			// close on outside ui-events
-			document.addEventListener(type, this[closeEventHandler]);
+		if (
+			this.getOption("features.closeOnOutsideClick", true) === true &&
+			!this[usesHostDismissSymbol]
+		) {
+			for (const [, type] of Object.entries(["click", "touch"])) {
+				// close on outside ui-events
+				document.addEventListener(type, this[closeEventHandler]);
+			}
 		}
 
 		updatePopper.call(this);
@@ -204,9 +235,14 @@ class PopperButton extends Popper {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 
-		// close on outside ui-events
-		for (const [, type] of Object.entries(["click", "touch"])) {
-			document.removeEventListener(type, this[closeEventHandler]);
+		if (
+			this.getOption("features.closeOnOutsideClick", true) === true &&
+			!this[usesHostDismissSymbol]
+		) {
+			// close on outside ui-events
+			for (const [, type] of Object.entries(["click", "touch"])) {
+				document.removeEventListener(type, this[closeEventHandler]);
+			}
 		}
 
 		disconnectResizeObserver.call(this);

package/source/components/form/select.mjs

@@ -38,7 +38,7 @@ import {
   fireEvent,
 } from "../../dom/events.mjs";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
-import { getDocument } from "../../dom/util.mjs";
+import { findElementWithSelectorUpwards, getDocument } from "../../dom/util.mjs";
 import {
   getDocumentTranslations,
   Translations,
@@ -105,6 +105,9 @@ const isLoadingSymbol = Symbol("isLoading");
  * @type {Symbol}
  */
 const closeEventHandler = Symbol("closeEventHandler");
+const hostElementSymbol = Symbol("hostElement");
+const dismissRecordSymbol = Symbol("dismissRecord");
+const usesHostDismissSymbol = Symbol("usesHostDismiss");
 
 /**
  * local symbol
@@ -841,11 +844,20 @@ class Select extends CustomControl {
    */
   connectedCallback() {
     super.connectedCallback();
-    const document = getDocument();
-
-    for (const [, type] of Object.entries(["click", "touch"])) {
-      // close on outside ui-events
-      document.addEventListener(type, this[closeEventHandler]);
+    this[hostElementSymbol] = findElementWithSelectorUpwards(
+      this,
+      "monster-host",
+    );
+    this[usesHostDismissSymbol] =
+      this[hostElementSymbol] &&
+      typeof this[hostElementSymbol].registerDismissable === "function";
+
+    if (!this[usesHostDismissSymbol]) {
+      const document = getDocument();
+      for (const [, type] of Object.entries(["click", "touch"])) {
+        // close on outside ui-events
+        document.addEventListener(type, this[closeEventHandler]);
+      }
     }
 
     parseSlotsToOptions.call(this);
@@ -873,13 +885,16 @@ class Select extends CustomControl {
    */
   disconnectedCallback() {
     super.disconnectedCallback();
-    const document = getDocument();
-
-    // close on outside ui-events
-    for (const [, type] of Object.entries(["click", "touch"])) {
-      document.removeEventListener(type, this[closeEventHandler]);
+    if (!this[usesHostDismissSymbol]) {
+      const document = getDocument();
+      // close on outside ui-events
+      for (const [, type] of Object.entries(["click", "touch"])) {
+        document.removeEventListener(type, this[closeEventHandler]);
+      }
     }
 
+    unregisterFromHost.call(this);
+
     disconnectResizeObserver.call(this);
   }
 
@@ -3703,6 +3718,7 @@ function hide() {
   this[popperElementSymbol].style.display = "none";
   setStatusOrRemoveBadges.call(this, "closed");
   removeAttributeToken(this[controlElementSymbol], "class", "open");
+  unregisterFromHost.call(this);
 }
 
 /**
@@ -3772,6 +3788,7 @@ function show() {
   setStatusOrRemoveBadges.call(this, "open");
 
   addAttributeToken(this[controlElementSymbol], "class", "open");
+  registerWithHost.call(this);
 
   new Processing(() => {
     if (!self?.[remoteFilterFirstOpendSymbol]) {
@@ -3798,6 +3815,56 @@ function show() {
     });
 }
 
+/**
+ * @private
+ */
+function registerWithHost() {
+  if (!this[usesHostDismissSymbol]) {
+    return;
+  }
+
+  if (!(this[hostElementSymbol] instanceof HTMLElement)) {
+    return;
+  }
+
+  const record = this[hostElementSymbol].registerDismissable?.({
+    element: this,
+    owner: this,
+    close: () => {
+      hide.call(this);
+    },
+    priority: 20,
+    options: {
+      dismissOnOutside: true,
+    },
+  });
+
+  if (record) {
+    this[dismissRecordSymbol] = record;
+  }
+}
+
+/**
+ * @private
+ */
+function unregisterFromHost() {
+  if (!this[usesHostDismissSymbol]) {
+    return;
+  }
+
+  if (!(this[hostElementSymbol] instanceof HTMLElement)) {
+    return;
+  }
+
+  if (this[dismissRecordSymbol]) {
+    this[hostElementSymbol].unregisterDismissable?.(this[dismissRecordSymbol]);
+    this[dismissRecordSymbol] = null;
+    return;
+  }
+
+  this[hostElementSymbol].unregisterDismissable?.(this);
+}
+
 function initDefaultOptionsFromUrl() {
   const url = this.getOption("filter.defaultOptionsUrl");
   if (!url) {

package/source/components/host/host.mjs

@@ -68,6 +68,48 @@ const focusManagerSymbol = Symbol("focusManager");
  */
 const resourceManagerSymbol = Symbol("resourceManager");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const dismissablesSymbol = Symbol("dismissables");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dismissQueueSymbol = Symbol("dismissQueue");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dismissVersionSymbol = Symbol("dismissVersion");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dismissSequenceSymbol = Symbol("dismissSequence");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dismissScheduledSymbol = Symbol("dismissScheduled");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dismissHandlerSymbol = Symbol("dismissHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dismissListenersAttachedSymbol = Symbol("dismissListenersAttached");
+
 /**
  * The Host component is used to encapsulate the content of a web app.
  *
@@ -171,6 +213,8 @@ class Host extends CustomElement {
 			document.body.classList.remove(classNames);
 		}
 
+		attachDismissListeners.call(this);
+
 		fireCustomEvent(this, "monster-host-connected");
 	}
 
@@ -204,6 +248,8 @@ class Host extends CustomElement {
 		);
 
 		fireCustomEvent(this, "monster-host-disconnected");
+
+		detachDismissListeners.call(this);
 	}
 
 	/**
@@ -358,6 +404,24 @@ class Host extends CustomElement {
 		this[notifyElementSymbol].push(message);
 		return this;
 	}
+
+	/**
+	 * Register a dismissable overlay (popper/select/dialog) for outside click handling.
+	 * @param {Object} entry
+	 * @return {Object|null}
+	 */
+	registerDismissable(entry) {
+		return registerDismissable.call(this, entry);
+	}
+
+	/**
+	 * Unregister a dismissable overlay.
+	 * @param {Object|HTMLElement} entry
+	 * @return {boolean}
+	 */
+	unregisterDismissable(entry) {
+		return unregisterDismissable.call(this, entry);
+	}
 }
 
 /**
@@ -392,9 +456,316 @@ function initTranslations() {
  * @private
  */
 function initEventHandler() {
+	initDismissManager.call(this);
 	return this;
 }
 
+/**
+ * @private
+ */
+function initDismissManager() {
+	this[dismissablesSymbol] = new Map();
+	this[dismissQueueSymbol] = [];
+	this[dismissVersionSymbol] = 0;
+	this[dismissSequenceSymbol] = 0;
+	this[dismissScheduledSymbol] = false;
+	this[dismissListenersAttachedSymbol] = false;
+
+	this[dismissHandlerSymbol] = (event) => {
+		if (!this.isConnected) {
+			return;
+		}
+		queueDismissEvent.call(this, event);
+	};
+}
+
+/**
+ * @private
+ */
+function attachDismissListeners() {
+	if (this[dismissListenersAttachedSymbol] === true) {
+		return;
+	}
+
+	const supportsPointer = typeof globalThis.PointerEvent === "function";
+	const eventTypes = supportsPointer
+		? ["pointerdown"]
+		: ["mousedown", "touchstart"];
+
+	for (const type of eventTypes) {
+		this.addEventListener(type, this[dismissHandlerSymbol], {
+			capture: true,
+		});
+	}
+
+	this[dismissListenersAttachedSymbol] = true;
+}
+
+/**
+ * @private
+ */
+function detachDismissListeners() {
+	if (this[dismissListenersAttachedSymbol] !== true) {
+		return;
+	}
+
+	const supportsPointer = typeof globalThis.PointerEvent === "function";
+	const eventTypes = supportsPointer
+		? ["pointerdown"]
+		: ["mousedown", "touchstart"];
+
+	for (const type of eventTypes) {
+		this.removeEventListener(type, this[dismissHandlerSymbol], {
+			capture: true,
+		});
+	}
+
+	this[dismissListenersAttachedSymbol] = false;
+}
+
+/**
+ * @private
+ * @param {Event} event
+ */
+function queueDismissEvent(event) {
+	if (!event) {
+		return;
+	}
+
+	const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+	this[dismissQueueSymbol].push({
+		path,
+		target: event.target || null,
+		version: this[dismissVersionSymbol],
+	});
+
+	if (this[dismissScheduledSymbol] === true) {
+		return;
+	}
+
+	this[dismissScheduledSymbol] = true;
+	const schedule =
+		typeof queueMicrotask === "function"
+			? queueMicrotask
+			: (cb) => Promise.resolve().then(cb);
+
+	schedule(() => {
+		this[dismissScheduledSymbol] = false;
+		processDismissQueue.call(this);
+	});
+}
+
+/**
+ * @private
+ */
+function processDismissQueue() {
+	const queue = this[dismissQueueSymbol];
+	this[dismissQueueSymbol] = [];
+
+	if (!queue.length) {
+		return;
+	}
+
+	for (const entry of queue) {
+		if (entry.version !== this[dismissVersionSymbol]) {
+			continue;
+		}
+
+		const top = getTopDismissable.call(this);
+		if (!top) {
+			continue;
+		}
+
+		if (isEventInsideDismissable(entry, top)) {
+			continue;
+		}
+
+		if (top.options?.dismissOnOutside === false) {
+			continue;
+		}
+
+		if (typeof top.close === "function") {
+			top.close();
+		}
+
+		break;
+	}
+}
+
+/**
+ * @private
+ * @param {Object} entry
+ * @return {Object|null}
+ */
+function registerDismissable(entry) {
+	if (this[dismissablesSymbol] instanceof Map === false) {
+		initDismissManager.call(this);
+	}
+
+	const normalized = normalizeDismissEntry(entry);
+	if (!normalized) {
+		return null;
+	}
+
+	const existing = this[dismissablesSymbol].get(normalized.element);
+	const record = existing || { element: normalized.element };
+
+	record.owner = normalized.owner || record.owner || null;
+	record.close = normalized.close || record.close || null;
+	record.priority = Number.isFinite(normalized.priority)
+		? normalized.priority
+		: Number.isFinite(record.priority)
+			? record.priority
+			: 0;
+	record.options = Object.assign({}, record.options || {}, normalized.options || {});
+	record.sequence = ++this[dismissSequenceSymbol];
+
+	this[dismissablesSymbol].set(record.element, record);
+	this[dismissVersionSymbol] += 1;
+
+	return record;
+}
+
+/**
+ * @private
+ * @param {Object|HTMLElement} entry
+ * @return {boolean}
+ */
+function unregisterDismissable(entry) {
+	if (this[dismissablesSymbol] instanceof Map === false) {
+		return false;
+	}
+
+	const record = resolveDismissRecord.call(this, entry);
+	if (!record) {
+		return false;
+	}
+
+	this[dismissablesSymbol].delete(record.element);
+	this[dismissVersionSymbol] += 1;
+	return true;
+}
+
+/**
+ * @private
+ * @param {Object} entry
+ * @return {Object|null}
+ */
+function normalizeDismissEntry(entry) {
+	if (!entry) {
+		return null;
+	}
+
+	const element = entry.element || entry.owner || entry;
+	if (!(element instanceof HTMLElement)) {
+		return null;
+	}
+
+	return {
+		element,
+		owner: entry.owner instanceof HTMLElement ? entry.owner : null,
+		close: typeof entry.close === "function" ? entry.close : null,
+		priority: entry.priority,
+		options: entry.options || {},
+	};
+}
+
+/**
+ * @private
+ * @param {Object|HTMLElement} entry
+ * @return {Object|null}
+ */
+function resolveDismissRecord(entry) {
+	if (!entry) {
+		return null;
+	}
+
+	if (entry.element && this[dismissablesSymbol].has(entry.element)) {
+		return this[dismissablesSymbol].get(entry.element);
+	}
+
+	if (entry instanceof HTMLElement && this[dismissablesSymbol].has(entry)) {
+		return this[dismissablesSymbol].get(entry);
+	}
+
+	for (const record of this[dismissablesSymbol].values()) {
+		if (record === entry) {
+			return record;
+		}
+		if (record.owner && record.owner === entry) {
+			return record;
+		}
+	}
+
+	return null;
+}
+
+/**
+ * @private
+ * @return {Object|null}
+ */
+function getTopDismissable() {
+	if (this[dismissablesSymbol] instanceof Map === false) {
+		return null;
+	}
+
+	let top = null;
+	for (const record of this[dismissablesSymbol].values()) {
+		if (!record) {
+			continue;
+		}
+		if (!top) {
+			top = record;
+			continue;
+		}
+		if ((record.priority || 0) > (top.priority || 0)) {
+			top = record;
+			continue;
+		}
+		if (
+			(record.priority || 0) === (top.priority || 0) &&
+			(record.sequence || 0) > (top.sequence || 0)
+		) {
+			top = record;
+		}
+	}
+
+	return top;
+}
+
+/**
+ * @private
+ * @param {Object} eventEntry
+ * @param {Object} record
+ * @return {boolean}
+ */
+function isEventInsideDismissable(eventEntry, record) {
+	if (!record) {
+		return false;
+	}
+
+	const path = eventEntry.path || [];
+	const target = eventEntry.target || null;
+
+	if (path.includes(record.element)) {
+		return true;
+	}
+
+	if (record.owner && path.includes(record.owner)) {
+		return true;
+	}
+
+	if (target && record.element?.contains?.(target)) {
+		return true;
+	}
+
+	if (target && record.owner?.contains?.(target)) {
+		return true;
+	}
+
+	return false;
+}
+
 /**
  * @private
  * @return {string}

package/source/components/layout/popper.mjs

@@ -25,7 +25,7 @@ import {
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { fireCustomEvent } from "../../dom/events.mjs";
-import { getDocument } from "../../dom/util.mjs";
+import { findElementWithSelectorUpwards, getDocument } from "../../dom/util.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { STYLE_DISPLAY_MODE_BLOCK } from "../form/constants.mjs";
 import { positionPopper } from "../form/util/floating-ui.mjs";
@@ -83,6 +83,24 @@ const popperElementSymbol = Symbol("popperElement");
  */
 const arrowElementSymbol = Symbol("arrowElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const hostElementSymbol = Symbol("hostElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dismissRecordSymbol = Symbol("dismissRecord");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const usesHostDismissSymbol = Symbol("usesHostDismiss");
+
 /**
  * Popper component for displaying floating UI elements
  *
@@ -177,10 +195,19 @@ class Popper extends CustomElement {
 	connectedCallback() {
 		super.connectedCallback();
 
-		const document = getDocument();
-
-		for (const [, type] of Object.entries(["click", "touch"])) {
-			document.addEventListener(type, this[closeEventHandler]);
+		this[hostElementSymbol] = findElementWithSelectorUpwards(
+			this,
+			"monster-host",
+		);
+		this[usesHostDismissSymbol] =
+			this[hostElementSymbol] &&
+			typeof this[hostElementSymbol].registerDismissable === "function";
+
+		if (!this[usesHostDismissSymbol]) {
+			const document = getDocument();
+			for (const [, type] of Object.entries(["click", "touch"])) {
+				document.addEventListener(type, this[closeEventHandler]);
+			}
 		}
 
 		updatePopper.call(this);
@@ -194,10 +221,15 @@ class Popper extends CustomElement {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 
-		for (const [, type] of Object.entries(["click", "touch"])) {
-			document.removeEventListener(type, this[closeEventHandler]);
+		if (!this[usesHostDismissSymbol]) {
+			const document = getDocument();
+			for (const [, type] of Object.entries(["click", "touch"])) {
+				document.removeEventListener(type, this[closeEventHandler]);
+			}
 		}
 
+		unregisterFromHost.call(this);
+
 		disconnectResizeObserver.call(this);
 	}
 
@@ -399,6 +431,7 @@ function hide() {
 
 	self[popperElementSymbol].style.display = "none";
 	removeAttributeToken(self[controlElementSymbol], "class", "open");
+	unregisterFromHost.call(self);
 
 	setTimeout(() => {
 		fireCustomEvent(self, "monster-popper-hidden", {
@@ -430,6 +463,7 @@ function show() {
 	self[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
 
 	addAttributeToken(self[controlElementSymbol], "class", "open");
+	registerWithHost.call(self);
 	updatePopper.call(self);
 
 	setTimeout(() => {
@@ -460,6 +494,56 @@ function updatePopper() {
 	);
 }
 
+/**
+ * @private
+ */
+function registerWithHost() {
+	if (!this[usesHostDismissSymbol]) {
+		return;
+	}
+
+	if (!(this[hostElementSymbol] instanceof HTMLElement)) {
+		return;
+	}
+
+	const record = this[hostElementSymbol].registerDismissable?.({
+		element: this,
+		owner: this,
+		close: () => {
+			this.hideDialog();
+		},
+		priority: 10,
+		options: {
+			dismissOnOutside: true,
+		},
+	});
+
+	if (record) {
+		this[dismissRecordSymbol] = record;
+	}
+}
+
+/**
+ * @private
+ */
+function unregisterFromHost() {
+	if (!this[usesHostDismissSymbol]) {
+		return;
+	}
+
+	if (!(this[hostElementSymbol] instanceof HTMLElement)) {
+		return;
+	}
+
+	if (this[dismissRecordSymbol]) {
+		this[hostElementSymbol].unregisterDismissable?.(this[dismissRecordSymbol]);
+		this[dismissRecordSymbol] = null;
+		return;
+	}
+
+	this[hostElementSymbol].unregisterDismissable?.(this);
+}
+
 /**
  * Initializes references to DOM elements
  * @private