@schukai/monster 4.148.2 → 4.148.4

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/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/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);
+        });
+    }
+});

package/test/cases/components/form/non-value-form-association.mjs

@@ -0,0 +1,53 @@
+'use strict';
+
+import { expect } from 'chai';
+import { initJSDOM } from '../../../util/jsdom.mjs';
+
+describe('non-value component form association issue #503', function () {
+    let CustomControl;
+    let components;
+
+    before(async function () {
+        await initJSDOM({});
+        await import('element-internals-polyfill');
+        ({ CustomControl } = await import('../../../../source/dom/customcontrol.mjs'));
+        const [{ State }, { CartControl }, { BuyBox }] = await Promise.all([
+            import('../../../../source/components/state/state.mjs'),
+            import('../../../../source/components/form/cart-control.mjs'),
+            import('../../../../source/components/form/buy-box.mjs'),
+        ]);
+        components = [State, CartControl, BuyBox];
+    });
+
+    afterEach(function () {
+        document.getElementById('mocks').innerHTML = '';
+    });
+
+    it('should opt non-value components out of form association', function () {
+        for (const Component of components) {
+            expect(Component.formAssociated, Component.getTag()).to.equal(false);
+        }
+    });
+
+    it('should preserve the public CustomControl inheritance', function () {
+        for (const Component of components) {
+            const control = document.createElement(Component.getTag());
+            expect(control, Component.getTag()).to.be.instanceof(CustomControl);
+        }
+    });
+
+    it('should not contribute values or throw during form reset', function () {
+        for (const Component of components) {
+            const form = document.createElement('form');
+            const control = document.createElement(Component.getTag());
+            control.setAttribute('name', Component.getTag());
+            form.appendChild(control);
+            document.getElementById('mocks').appendChild(form);
+
+            expect(() => form.reset()).not.to.throw();
+            expect(new window.FormData(form).get(Component.getTag())).to.equal(null);
+
+            form.remove();
+        }
+    });
+});