@schukai/monster 4.148.1 → 4.148.3

package/source/dom/customelement.mjs

@@ -117,6 +117,7 @@ const updateCloneDataSymbol = Symbol("@schukai/monster/dom/@@updateCloneData");
  * @type {symbol}
  */
 const scriptHostElementSymbol = Symbol("scriptHostElement");
+const optionDefaultsSymbol = Symbol("optionDefaults");
 const managedShadowRootSymbol = Symbol("managedShadowRoot");
 const visibilityStateSymbol = Symbol("visibilityState");
 let hostVisibilityStyleSheet = null;
@@ -215,7 +216,11 @@ class CustomElement extends HTMLElement {
 
 		this[attributeObserverSymbol] = {};
 
-		const options = initOptionsFromAttributes(this, extend({}, this.defaults));
+		this[optionDefaultsSymbol] = this.defaults;
+		const options = initOptionsFromAttributes(
+			this,
+			extend({}, this[optionDefaultsSymbol]),
+		);
 		if (!isObject(options)) {
 			throw new Error(
 				`The options are not defined correctly in the ${this.getTag()} element.`,
@@ -819,6 +824,9 @@ class CustomElement extends HTMLElement {
 				this,
 				attrName,
 				this[internalSymbol].getSubject()["options"],
+				{},
+				"data-monster-option-",
+				this[optionDefaultsSymbol],
 			);
 		}
 
@@ -888,21 +896,22 @@ function callControlCallback(callBackFunctionName, ...args) {
 		return;
 	}
 
-	if (this[scriptHostElementSymbol].length === 0) {
-		const targetId = this.getAttribute(ATTRIBUTE_SCRIPT_HOST);
-		if (!targetId) {
-			return;
-		}
-
-		const list = targetId.split(",");
-		for (const id of list) {
-			const host = findElementWithIdUpwards(this, id.trim());
-			if (!(host instanceof HTMLElement)) {
-				continue;
-			}
+	const targetId = this.getAttribute(ATTRIBUTE_SCRIPT_HOST);
+	if (!targetId) {
+		return;
+	}
 
-			this[scriptHostElementSymbol].push(host);
+	// The attribute and DOM ancestry can change while the control remains alive.
+	// Resolve the small ordered host list against the current context for every call.
+	this[scriptHostElementSymbol].length = 0;
+	const list = targetId.split(",");
+	for (const id of list) {
+		const host = findElementWithIdUpwards(this, id.trim());
+		if (!(host instanceof HTMLElement)) {
+			continue;
 		}
+
+		this[scriptHostElementSymbol].push(host);
 	}
 
 	for (const host of this[scriptHostElementSymbol]) {
@@ -1091,48 +1100,105 @@ function containChildNode(node) {
  */
 function initOptionObserver() {
 	const self = this;
+	const disabledQuery =
+		"button, command, fieldset, keygen, optgroup, option, select, textarea, input, [data-monster-objectlink]";
 
 	self[internalSymbol].lastDisabledValue = undefined;
+	self[internalSymbol].parentDisabledElements = new Set();
 
-	const syncDisabledState = () => {
-		const flag = self.getOption("disabled", false);
+	const getDisabledTargets = () => {
+		const targets = new Set();
+		const shadowRoot = getManagedShadowRoot.call(self);
 
-		if (flag === self[internalSymbol].lastDisabledValue) {
-			return;
+		try {
+			for (const element of self.querySelectorAll(disabledQuery)) {
+				targets.add(element);
+			}
+			if (shadowRoot instanceof ShadowRoot) {
+				for (const element of shadowRoot.querySelectorAll(disabledQuery)) {
+					targets.add(element);
+				}
+			}
+			for (const element of getSlottedElements.call(self, disabledQuery)) {
+				targets.add(element);
+			}
+		} catch (e) {}
+
+		return targets;
+	};
+
+	const disconnectDisabledObservers = () => {
+		self[internalSymbol].disabledLightObserver?.disconnect();
+		self[internalSymbol].disabledShadowObserver?.disconnect();
+		delete self[internalSymbol].disabledLightObserver;
+		delete self[internalSymbol].disabledShadowObserver;
+	};
+
+	const observeDisabledTargets = () => {
+		const callback = () => syncDisabledState(true);
+		if (!self[internalSymbol].disabledLightObserver) {
+			self[internalSymbol].disabledLightObserver = new MutationObserver(
+				callback,
+			);
+			self[internalSymbol].disabledLightObserver.observe(self, {
+				attributes: true,
+				attributeFilter: [ATTRIBUTE_DISABLED, "slot"],
+				childList: true,
+				subtree: true,
+			});
 		}
 
 		const shadowRoot = getManagedShadowRoot.call(self);
-		if (!(shadowRoot instanceof ShadowRoot) && !self.childNodes.length) {
+		if (
+			shadowRoot instanceof ShadowRoot &&
+			!self[internalSymbol].disabledShadowObserver
+		) {
+			self[internalSymbol].disabledShadowObserver = new MutationObserver(
+				callback,
+			);
+			self[internalSymbol].disabledShadowObserver.observe(shadowRoot, {
+				attributes: true,
+				attributeFilter: [ATTRIBUTE_DISABLED, "slot"],
+				childList: true,
+				subtree: true,
+			});
+		}
+	};
+
+	const syncDisabledState = (force = false) => {
+		const flag =
+			self.getOption("disabled", false) === true ||
+			self[internalSymbol].formDisabledValue === true;
+
+		if (force !== true && flag === self[internalSymbol].lastDisabledValue) {
 			return;
 		}
 
 		self[internalSymbol].lastDisabledValue = flag;
+		const ownedElements = self[internalSymbol].parentDisabledElements;
 
-		const query =
-			"button, command, fieldset, keygen, optgroup, option, select, textarea, input, [data-monster-objectlink]";
-
-		let elements = [];
-		if (shadowRoot instanceof ShadowRoot) {
-			elements = shadowRoot.querySelectorAll(query);
+		if (flag !== true) {
+			disconnectDisabledObservers();
+			for (const element of ownedElements) {
+				element.removeAttribute(ATTRIBUTE_DISABLED);
+			}
+			ownedElements.clear();
+			return;
 		}
 
-		let nodeList;
-		try {
-			const baseElements =
-				elements.length > 0 ? elements : self.querySelectorAll(query);
-			nodeList = new Set([
-				...baseElements,
-				...getSlottedElements.call(self, query),
-			]);
-		} catch (e) {
-			nodeList = elements;
+		observeDisabledTargets();
+		const targets = getDisabledTargets();
+		for (const element of [...ownedElements]) {
+			if (!targets.has(element)) {
+				element.removeAttribute(ATTRIBUTE_DISABLED);
+				ownedElements.delete(element);
+			}
 		}
 
-		for (const element of [...nodeList]) {
-			if (flag === true) {
+		for (const element of targets) {
+			if (!element.hasAttribute(ATTRIBUTE_DISABLED)) {
 				element.setAttribute(ATTRIBUTE_DISABLED, "");
-			} else {
-				element.removeAttribute(ATTRIBUTE_DISABLED);
+				ownedElements.add(element);
 			}
 		}
 	};

package/source/dom/updater.mjs

@@ -69,7 +69,8 @@ export { Updater, addObjectWithUpdaterToElement };
  * @private
  * @type {symbol}
  */
-const timerElementEventHandlerSymbol = Symbol("timerElementEventHandler");
+const controlEventTimersSymbol = Symbol("controlEventTimers");
+const registeredEventTypesSymbol = Symbol("registeredEventTypes");
 
 /**
  * @private
@@ -87,9 +88,29 @@ const applyChangeSymbol = Symbol("applyChange");
 const updaterRootSymbol = Symbol.for("@schukai/monster/dom/@@updater-root");
 const disposedSymbol = Symbol("disposed");
 const subjectObserverSymbol = Symbol("subjectObserver");
+const subjectRevisionSymbol = Symbol("subjectRevision");
 const patchNodeKeySymbol = Symbol("patchNodeKey");
 const queuedSnapshotSymbol = Symbol("queuedSnapshot");
 
+/**
+ * Tracks every notification request, including requests that Observer deduplicates
+ * while its asynchronous callback is already running.
+ * @private
+ */
+class UpdaterSubjectObserver extends Observer {
+	#onNotification;
+
+	constructor(callback, onNotification) {
+		super(callback);
+		this.#onNotification = onNotification;
+	}
+
+	update(subject) {
+		this.#onNotification();
+		return super.update(subject);
+	}
+}
+
 /**
  * The updater class connects an object with the DOM. In this way, structures and contents in the DOM can be
  * programmatically adapted via attributes.
@@ -165,23 +186,34 @@ class Updater extends Base {
 		this[pendingDiffsSymbol] = [];
 		this[processingSymbol] = false;
 		this[disposedSymbol] = false;
+		this[subjectRevisionSymbol] = 0;
 		this[queuedSnapshotSymbol] = clone(this[internalSymbol].last);
+		this[controlEventTimersSymbol] = new Map();
+		this[registeredEventTypesSymbol] = new Set();
+
+		this[subjectObserverSymbol] = new UpdaterSubjectObserver(
+			async () => {
+				let processedRevision;
+				do {
+					processedRevision = this[subjectRevisionSymbol];
+					if (this[disposedSymbol] === true) {
+						return;
+					}
 
-		this[subjectObserverSymbol] = new Observer(() => {
-			if (this[disposedSymbol] === true) {
-				return Promise.resolve();
-			}
-
-			const real = this[internalSymbol].subject.getRealSubject();
-			const diffResult = diff(this[queuedSnapshotSymbol], real);
-			if (diffResult.length === 0) {
-				return Promise.resolve();
-			}
-			const snapshot = clone(real);
-			this[queuedSnapshotSymbol] = snapshot;
-			this[pendingDiffsSymbol].push({ diffResult, snapshot });
-			return this[processQueueSymbol]();
-		});
+					const real = this[internalSymbol].subject.getRealSubject();
+					const diffResult = diff(this[queuedSnapshotSymbol], real);
+					if (diffResult.length > 0) {
+						const snapshot = clone(real);
+						this[queuedSnapshotSymbol] = snapshot;
+						this[pendingDiffsSymbol].push({ diffResult, snapshot });
+						await this[processQueueSymbol]();
+					}
+				} while (processedRevision !== this[subjectRevisionSymbol]);
+			},
+			() => {
+				this[subjectRevisionSymbol]++;
+			},
+		);
 		this[internalSymbol].subject.attachObserver(this[subjectObserverSymbol]);
 	}
 
@@ -317,6 +349,7 @@ class Updater extends Base {
 					passive: true,
 				},
 			);
+			this[registeredEventTypesSymbol].add(type);
 		}
 
 		return this;
@@ -329,12 +362,23 @@ class Updater extends Base {
 	 * @return {Updater}
 	 */
 	disableEventProcessing() {
-		for (const type of this[internalSymbol].eventTypes) {
+		for (const type of this[registeredEventTypesSymbol]) {
 			this[internalSymbol].element.removeEventListener(
 				type,
 				getControlEventHandler.call(this),
+				{ capture: true },
 			);
 		}
+		this[registeredEventTypesSymbol].clear();
+
+		for (const timer of this[controlEventTimersSymbol].values()) {
+			try {
+				timer.defuse();
+			} catch (e) {
+				// A timer that already ran no longer has pending work to cancel.
+			}
+		}
+		this[controlEventTimersSymbol].clear();
 
 		delete this[internalSymbol].element[updaterRootSymbol];
 
@@ -354,8 +398,6 @@ class Updater extends Base {
 			this[internalSymbol].subject.detachObserver(this[subjectObserverSymbol]);
 		}
 
-		delete this[timerElementEventHandlerSymbol];
-
 		return this;
 	}
 
@@ -495,21 +537,24 @@ function getControlEventHandler() {
 			return;
 		}
 
-		if (this[timerElementEventHandlerSymbol] instanceof DeadMansSwitch) {
+		const timers = this[controlEventTimersSymbol];
+		let timer = timers.get(element);
+		if (timer instanceof DeadMansSwitch) {
 			try {
-				this[timerElementEventHandlerSymbol].touch();
+				timer.touch();
 				return;
 			} catch (e) {
-				delete this[timerElementEventHandlerSymbol];
+				timers.delete(element);
 			}
 		}
 
-		this[timerElementEventHandlerSymbol] = new DeadMansSwitch(50, () => {
+		timer = new DeadMansSwitch(50, () => {
 			if (
 				this[disposedSymbol] === true ||
 				!this[internalSymbol].element?.isConnected ||
 				!element?.isConnected
 			) {
+				timers.delete(element);
 				return;
 			}
 
@@ -517,8 +562,11 @@ function getControlEventHandler() {
 				retrieveAndSetValue.call(this, element);
 			} catch (e) {
 				addErrorAttribute(element, e);
+			} finally {
+				timers.delete(element);
 			}
 		});
+		timers.set(element, timer);
 	};
 
 	return this[symbol];
@@ -1091,6 +1139,7 @@ function runUpdateContent(container, parts, subject) {
 				value = pipe.run(subject);
 			} catch (e) {
 				element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+				continue;
 			}
 
 			if (value instanceof HTMLElement) {
@@ -1529,6 +1578,7 @@ function runUpdateAttributes(container, parts, subject) {
 			}
 
 			const attributes = element.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
+			element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
 
 			for (let [, def] of Object.entries(attributes.split(","))) {
 				def = trimSpaces(def);
@@ -1544,10 +1594,10 @@ function runUpdateAttributes(container, parts, subject) {
 
 				let value;
 				try {
-					element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
 					value = pipe.run(subject);
 				} catch (e) {
 					addErrorAttribute(element, e);
+					continue;
 				}
 
 				if (value === undefined) {
@@ -1604,6 +1654,7 @@ function runUpdateProperties(container, parts, subject) {
 			}
 
 			const properties = element.getAttribute(ATTRIBUTE_UPDATER_PROPERTIES);
+			element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
 
 			for (let [, def] of Object.entries(properties.split(","))) {
 				def = trimSpaces(def);
@@ -1619,10 +1670,10 @@ function runUpdateProperties(container, parts, subject) {
 
 				let value;
 				try {
-					element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
 					value = pipe.run(subject);
 				} catch (e) {
 					addErrorAttribute(element, e);
+					continue;
 				}
 
 				handleInputControlPropertyUpdate.call(this, element, name, value);

package/source/dom/util/extract-keys.mjs

@@ -55,7 +55,7 @@ function extractKeys(
 		currentKebabKeyPrefix,
 		currentValuePrefix,
 	) {
-		for (const key in currentObj) {
+		for (const key of Object.keys(currentObj)) {
 			const compactSegment = normalizeKeySegment(key);
 			const kebabSegment = toKebabCase(key);
 
@@ -73,6 +73,7 @@ function extractKeys(
 				const newValuePrefix = currentValuePrefix
 					? currentValuePrefix + valueSeparator + key
 					: key;
+				appendKeys(newCompactKeyPrefix, newKebabKeyPrefix, newValuePrefix);
 				helper(
 					currentObj[key],
 					newCompactKeyPrefix,

package/source/dom/util/init-options-from-attributes.mjs

@@ -84,7 +84,7 @@ function initOptionsFromAttributes(
 		if (element.hasAttribute(name)) {
 			let value = element.getAttribute(name);
 			if (
-				mapping.hasOwnProperty(optionName) &&
+				Object.prototype.hasOwnProperty.call(mapping, optionName) &&
 				isFunction(mapping[optionName])
 			) {
 				value = mapping[optionName](value);

package/source/dom/util/set-option-from-attribute.mjs

@@ -24,6 +24,7 @@ import {
 } from "../../types/is.mjs";
 import { attributeObserverSymbol } from "../customelement.mjs";
 import { extractKeys } from "./extract-keys.mjs";
+import { clone } from "../../util/clone.mjs";
 
 export { setOptionFromAttribute };
 
@@ -56,6 +57,7 @@ export { setOptionFromAttribute };
  * @param {Object} options - The options object to be initialized.
  * @param {Object} mapping - A mapping between the attribute value and the property value.
  * @param {string} prefix - The prefix of the attributes to be considered.
+ * @param {Object} defaults - The default option schema used for coercion and removal.
  * @return {Object} - The initialized options object.
  * @this HTMLElement - The context of the DOM element.
  */
@@ -65,12 +67,13 @@ function setOptionFromAttribute(
 	options,
 	mapping = {},
 	prefix = "data-monster-option-",
+	defaults = options,
 ) {
 	if (!(element instanceof HTMLElement)) return options;
-	if (!element.hasAttributes()) return options;
 
 	const keyMap = extractKeys(options);
 	const finder = new Pathfinder(options);
+	const defaultFinder = new Pathfinder(defaults);
 
 	// check if the attribute name is a valid option.
 	// the mapping between the attribute is simple. The dash is replaced by a dot.
@@ -79,15 +82,23 @@ function setOptionFromAttribute(
 	if (!finder.exists(optionName)) return;
 
 	if (!element.hasAttribute(name)) {
+		if (defaultFinder.exists(optionName)) {
+			finder.setVia(optionName, clone(defaultFinder.getVia(optionName)));
+		}
 		return options;
 	}
 
 	let value = element.getAttribute(name);
-	if (mapping.hasOwnProperty(optionName) && isFunction(mapping[optionName])) {
+	if (
+		Object.prototype.hasOwnProperty.call(mapping, optionName) &&
+		isFunction(mapping[optionName])
+	) {
 		value = mapping[optionName](value);
 	}
 
-	let optionValue = finder.getVia(optionName);
+	let optionValue = defaultFinder.exists(optionName)
+		? defaultFinder.getVia(optionName)
+		: finder.getVia(optionName);
 	if (optionValue === null || optionValue === undefined) {
 		optionValue = value;
 	}

package/source/types/proxyobserver.mjs

@@ -173,6 +173,10 @@ function getHandler() {
 				return value;
 			}
 
+			if (isNativeObjectWithInternalSlots(value)) {
+				return value;
+			}
+
 			// set value as proxy if object or array
 			if (isArray(value) || isObject(value)) {
 				if (proxy.objectMap.has(value)) {
@@ -264,3 +268,14 @@ function getHandler() {
 
 	return handler;
 }
+
+/**
+ * Native objects with internal slots cannot be used through a transparent Proxy
+ * because their prototype methods require the original receiver.
+ * @param {*} value
+ * @return {boolean}
+ * @private
+ */
+function isNativeObjectWithInternalSlots(value) {
+	return value instanceof Date || value instanceof Map || value instanceof Set;
+}

package/source/util/clone.mjs

@@ -135,13 +135,14 @@ function cloneObject(obj) {
 	validateObject(obj);
 
 	const fkt = obj?.["constructor"];
+	const sourcePrototype = Object.getPrototypeOf(obj);
 
 	/** Object has clone method */
 	if (typeOf(fkt) === "function") {
 		const prototype = fkt?.prototype;
 		if (typeof prototype === "object") {
 			if (
-				prototype.hasOwnProperty("getClone") &&
+				Object.prototype.hasOwnProperty.call(prototype, "getClone") &&
 				typeOf(obj.getClone) === "function"
 			) {
 				return obj.getClone();
@@ -149,16 +150,17 @@ function cloneObject(obj) {
 		}
 	}
 
-	let copy = {};
+	let copy = sourcePrototype === null ? Object.create(null) : {};
 	if (
-		typeof obj.constructor === "function" &&
-		typeof obj.constructor.call === "function"
+		sourcePrototype !== null &&
+		typeof fkt === "function" &&
+		typeof fkt.call === "function"
 	) {
-		copy = new obj.constructor();
+		copy = new fkt();
 	}
 
 	for (const key in obj) {
-		if (!obj.hasOwnProperty(key)) {
+		if (!Object.prototype.hasOwnProperty.call(obj, key)) {
 			continue;
 		}
 

package/test/cases/components/datatable/filter-form-value.mjs

@@ -0,0 +1,98 @@
+'use strict';
+
+import { expect } from 'chai';
+import { getDocument } from '../../../../source/dom/util.mjs';
+import { initJSDOM } from '../../../util/jsdom.mjs';
+
+const cases = [
+    { tag: 'monster-filter-date', value: '2026-07-16' },
+    { tag: 'monster-filter-date-time', value: '2026-07-16T12:30' },
+    { tag: 'monster-filter-time', value: '12:30' },
+    { tag: 'monster-filter-input', value: 'search term' },
+    { tag: 'monster-filter-text-operator', value: ':search term', userValue: 'search term' },
+    { tag: 'monster-filter-date-presets', preset: true },
+    { tag: 'monster-filter-date-range', value: '2026-07-01-2026-07-16' },
+    { tag: 'monster-filter-range', value: '10-20' },
+];
+
+describe('datatable filter form values issue #502', function () {
+    let document;
+
+    before(async function () {
+        await initJSDOM({});
+        await import('element-internals-polyfill');
+        await Promise.all([
+            import('../../../../source/components/datatable/filter/date.mjs'),
+            import('../../../../source/components/datatable/filter/date-time.mjs'),
+            import('../../../../source/components/datatable/filter/time.mjs'),
+            import('../../../../source/components/datatable/filter/input.mjs'),
+            import('../../../../source/components/datatable/filter/text-operator.mjs'),
+            import('../../../../source/components/datatable/filter/date-presets.mjs'),
+            import('../../../../source/components/datatable/filter/date-range.mjs'),
+            import('../../../../source/components/datatable/filter/range.mjs'),
+        ]);
+        document = getDocument();
+    });
+
+    afterEach(function () {
+        document.getElementById('mocks').innerHTML = '';
+    });
+
+    for (const definition of cases) {
+        it(`${definition.tag} should submit programmatic and empty values`, async function () {
+            const form = document.createElement('form');
+            const control = document.createElement(definition.tag);
+            control.setAttribute('name', 'filter');
+            form.appendChild(control);
+            document.getElementById('mocks').appendChild(form);
+
+            expect(new window.FormData(form).get('filter')).to.equal('');
+
+            const value = definition.preset
+                ? control.shadowRoot.querySelector('select').options[1].value
+                : definition.value;
+            control.value = value;
+
+            expect(new window.FormData(form).get('filter')).to.equal(control.value);
+
+            control.setAttribute('value', value);
+            control.value = '';
+            control.formResetCallback();
+            expect(new window.FormData(form).get('filter')).to.equal(control.value);
+
+            control.formStateRestoreCallback(value, 'restore');
+            expect(new window.FormData(form).get('filter')).to.equal(control.value);
+
+            control.remove();
+            form.appendChild(control);
+            expect(new window.FormData(form).get('filter')).to.equal(control.value);
+
+            control.setAttribute('disabled', '');
+            await new Promise((resolve) => setTimeout(resolve, 20));
+            if (!window.navigator.userAgent.includes('jsdom')) {
+                expect(new window.FormData(form).get('filter')).to.equal(null);
+            }
+        });
+
+        it(`${definition.tag} should submit user-driven values`, function () {
+            const form = document.createElement('form');
+            const control = document.createElement(definition.tag);
+            control.setAttribute('name', 'filter');
+            form.appendChild(control);
+            document.getElementById('mocks').appendChild(form);
+
+            const input = definition.tag === 'monster-filter-text-operator'
+                ? control.shadowRoot.querySelector('[data-monster-role=query]')
+                : definition.preset
+                    ? control.shadowRoot.querySelector('select')
+                    : control.shadowRoot.querySelector('[data-monster-role=query], [data-monster-role=input]');
+            input.value = definition.preset
+                ? input.options[1].value
+                : definition.userValue ?? definition.value;
+            input.dispatchEvent(new window.Event('input', { bubbles: true, composed: true }));
+            input.dispatchEvent(new window.Event('change', { bubbles: true, composed: true }));
+
+            expect(new window.FormData(form).get('filter')).to.equal(control.value);
+        });
+    }
+});