@schukai/monster 4.148.2 → 4.148.3

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

package/test/cases/data/extend.mjs

@@ -156,7 +156,33 @@ describe('extend function', () => {
         const result = extend(target, source);
         expect(result).to.deep.equal({ a: [3, 4] });
     });
-});
 
+    it('should ignore inherited enumerable properties issue #499', () => {
+        const prototype = { inherited: 'unsafe' };
+        const source = Object.assign(Object.create(prototype), { own: 'safe' });
+
+        expect(extend({}, source)).to.deep.equal({ own: 'safe' });
+    });
+
+    [
+        '{"__proto__":{"monsterExtendPolluted":"yes"}}',
+        '{"nested":{"__proto__":{"monsterExtendPolluted":"yes"}}}',
+        '{"constructor":{"prototype":{"monsterExtendPolluted":"yes"}}}',
+    ].forEach((json) => {
+        it(`should not mutate Object.prototype for ${json} issue #499`, () => {
+            delete Object.prototype.monsterExtendPolluted;
+
+            try {
+                const result = extend({}, JSON.parse(json));
+
+                expect(Object.prototype.monsterExtendPolluted).to.equal(undefined);
+                expect(({}).monsterExtendPolluted).to.equal(undefined);
+                expect(result).to.be.an('object');
+            } finally {
+                delete Object.prototype.monsterExtendPolluted;
+            }
+        });
+    });
+});
 
 

package/test/cases/dom/customcontrol.mjs

@@ -88,14 +88,20 @@ describe('DOM', function () {
 
         })
 
-        it('should return undefined', function () {
+        it('should not reflect computed disabledness to the host attribute issue #500', function () {
             expect(element.formDisabledCallback()).to.be.undefined;
             expect(element.hasAttribute('disabled')).to.be.false;
             expect(element.formDisabledCallback(true)).to.be.undefined;
-            expect(element.hasAttribute('disabled')).to.be.true;
-            const d = element.getAttribute('disabled');
-            expect(d).to.not.be.null;
-            
+            expect(element.hasAttribute('disabled')).to.be.false;
+            expect(element.getOption('disabled')).to.be.false;
+        });
+
+        it('should preserve an author-provided form attribute issue #500', function () {
+            element.setAttribute('form', 'author-form');
+
+            element.formAssociatedCallback(null);
+
+            expect(element.getAttribute('form')).to.equal('author-form');
         });
 
     })
@@ -319,9 +325,185 @@ describe('DOM', function () {
 	                expect(d.value).to.equal('seed');
 	            });
 
+                it('formStateRestoreCallback() should restore through the value setter issue #501', function () {
+                    const htmlTAG = 'monster-customcontrol-state-restore';
+
+                    class StateRestoreComponent extends CustomControl {
+                        static getTag() {
+                            return htmlTAG;
+                        }
+
+                        get value() {
+                            return this._value ?? '';
+                        }
+
+                        set value(value) {
+                            this._value = value;
+                        }
+                    }
+
+                    registerCustomElement(StateRestoreComponent);
+                    const control = document.createElement(htmlTAG);
+                    control.value = 'changed';
+
+                    control.formStateRestoreCallback('restored', 'restore');
+
+                    expect(control.value).to.equal('restored');
+                });
+
+                it('should normalize a removed value attribute to an empty string issue #501', async function () {
+                    const htmlTAG = 'monster-customcontrol-value-removal';
+
+                    class ValueRemovalComponent extends CustomControl {
+                        static getTag() {
+                            return htmlTAG;
+                        }
+
+                        get defaults() {
+                            return Object.assign({}, super.defaults, {
+                                shadowMode: false,
+                            });
+                        }
+
+                        get value() {
+                            return this._value ?? '';
+                        }
+
+                        set value(value) {
+                            this._value = value;
+                            this.lastAssignedValue = value;
+                        }
+                    }
+
+                    registerCustomElement(ValueRemovalComponent);
+                    const control = document.createElement(htmlTAG);
+                    document.body.appendChild(control);
+                    control.setAttribute('value', 'seed');
+                    await new Promise((resolve) => setTimeout(resolve, 30));
+                    control.removeAttribute('value');
+                    await new Promise((resolve) => setTimeout(resolve, 30));
+
+                    expect(control.lastAssignedValue).to.equal('');
+                    expect(control.value).to.equal('');
+                    control.remove();
+                });
+
+                it('should replay a pre-upgrade value once after assembly issue #501', async function () {
+                    const htmlTAG = 'monster-customcontrol-pre-upgrade';
+                    const control = document.createElement(htmlTAG);
+                    control.value = 'assigned-before-definition';
+                    document.body.appendChild(control);
+
+                    class PreUpgradeComponent extends CustomControl {
+                        static getTag() {
+                            return htmlTAG;
+                        }
+
+                        get defaults() {
+                            return Object.assign({}, super.defaults, {
+                                shadowMode: false,
+                            });
+                        }
+
+                        get value() {
+                            return this._value ?? '';
+                        }
+
+                        set value(value) {
+                            this._value = value;
+                            this.setterCalls = (this.setterCalls ?? 0) + 1;
+                        }
+                    }
+
+                    registerCustomElement(PreUpgradeComponent);
+                    await customElements.whenDefined(htmlTAG);
+                    await Promise.resolve();
+
+                    expect(control).to.be.instanceof(PreUpgradeComponent);
+                    expect(Object.prototype.hasOwnProperty.call(control, 'value')).to.be.false;
+                    expect(control.value).to.equal('assigned-before-definition');
+                    expect(control.setterCalls).to.equal(1);
+
+                    control.remove();
+                    document.body.appendChild(control);
+                    await Promise.resolve();
+                    expect(control.setterCalls).to.equal(1);
+                    control.remove();
+                });
+
+                it('should preserve native fieldset and explicit form lifecycle issue #500', async function () {
+                    if (window.navigator.userAgent.includes('jsdom')) {
+                        this.skip();
+                    }
+
+                    const htmlTAG = 'monster-customcontrol-native-lifecycle';
+
+                    class NativeLifecycleComponent extends CustomControl {
+                        static getTag() {
+                            return htmlTAG;
+                        }
+
+                        get defaults() {
+                            return Object.assign({}, super.defaults, {
+                                shadowMode: false,
+                            });
+                        }
+
+                        get value() {
+                            return this._value ?? '';
+                        }
+
+                        set value(value) {
+                            this._value = value ?? '';
+                            this.setFormValue(this._value);
+                        }
+                    }
+
+                    registerCustomElement(NativeLifecycleComponent);
+
+                    const externalForm = document.createElement('form');
+                    externalForm.id = 'external-form-500';
+                    document.body.appendChild(externalForm);
+
+                    const externalControl = document.createElement(htmlTAG);
+                    externalControl.setAttribute('name', 'external');
+                    externalControl.setAttribute('form', externalForm.id);
+                    document.body.appendChild(externalControl);
+                    externalControl.value = 'submitted';
+
+                    expect(new FormData(externalForm).get('external')).to.equal('submitted');
+                    externalControl.remove();
+                    expect(externalControl.getAttribute('form')).to.equal(externalForm.id);
+                    document.body.appendChild(externalControl);
+                    expect(externalControl.form).to.equal(externalForm);
+                    expect(new FormData(externalForm).get('external')).to.equal('submitted');
+
+                    const nestedForm = document.createElement('form');
+                    const fieldset = document.createElement('fieldset');
+                    const nestedControl = document.createElement(htmlTAG);
+                    nestedControl.setAttribute('name', 'nested');
+                    fieldset.appendChild(nestedControl);
+                    nestedForm.appendChild(fieldset);
+                    document.body.appendChild(nestedForm);
+                    nestedControl.value = 'nested-value';
+
+                    fieldset.disabled = true;
+                    await Promise.resolve();
+                    expect(nestedControl.hasAttribute('disabled')).to.be.false;
+                    expect(new FormData(nestedForm).get('nested')).to.equal(null);
+
+                    fieldset.disabled = false;
+                    await Promise.resolve();
+                    expect(nestedControl.hasAttribute('disabled')).to.be.false;
+                    expect(new FormData(nestedForm).get('nested')).to.equal('nested-value');
+
+                    externalControl.remove();
+                    externalForm.remove();
+                    nestedForm.remove();
+                });
+
 
 	        });
 	    });
 
 });
-

package/test/cases/dom/customelement-initfromscripthost.mjs

@@ -154,6 +154,68 @@ describe('DOM', function () {
                 expect(control.getOption('test')).is.eql(3);
                 expect(control.hasAttribute('data-monster-error')).is.false;
             });
+
+            it('should resolve a changed script host attribute issue #506', function () {
+                const mocks = document.getElementById('mocks');
+                mocks.innerHTML = `
+                    <div id="call-back-host-a"></div>
+                    <div id="call-back-host-b"></div>
+                    <div id="container"></div>
+                `;
+                document.getElementById('call-back-host-a').resolveHost = () => 'a';
+                document.getElementById('call-back-host-b').resolveHost = () => 'b';
+
+                const control = document.createElement(randomTagNumber);
+                control.setAttribute('data-monster-script-host', 'call-back-host-a');
+                document.getElementById('container').appendChild(control);
+
+                expect(control.callCallback('resolveHost', [])).to.equal('a');
+                control.setAttribute('data-monster-script-host', 'call-back-host-b');
+                expect(control.callCallback('resolveHost', [])).to.equal('b');
+            });
+
+            it('should resolve a replacement host with the same id issue #506', function () {
+                const mocks = document.getElementById('mocks');
+                mocks.innerHTML = `
+                    <div id="replaceable-host"></div>
+                    <div id="container"></div>
+                `;
+                const original = document.getElementById('replaceable-host');
+                original.resolveHost = () => 'original';
+                const control = document.createElement(randomTagNumber);
+                control.setAttribute('data-monster-script-host', 'replaceable-host');
+                document.getElementById('container').appendChild(control);
+                expect(control.callCallback('resolveHost', [])).to.equal('original');
+
+                const replacement = document.createElement('div');
+                replacement.id = 'replaceable-host';
+                replacement.resolveHost = () => 'replacement';
+                original.replaceWith(replacement);
+
+                expect(control.callCallback('resolveHost', [])).to.equal('replacement');
+            });
+
+            it('should resolve the current ancestor after reparenting issue #506', function () {
+                const mocks = document.getElementById('mocks');
+                mocks.innerHTML = `
+                    <div id="ancestor-host"><div id="first-container"></div></div>
+                    <div><div id="second-container"></div></div>
+                `;
+                const firstHost = document.getElementById('ancestor-host');
+                firstHost.resolveHost = () => 'first';
+                const control = document.createElement(randomTagNumber);
+                control.setAttribute('data-monster-script-host', 'ancestor-host');
+                document.getElementById('first-container').appendChild(control);
+                expect(control.callCallback('resolveHost', [])).to.equal('first');
+
+                firstHost.removeAttribute('id');
+                const secondHost = document.getElementById('second-container').parentElement;
+                secondHost.id = 'ancestor-host';
+                secondHost.resolveHost = () => 'second';
+                document.getElementById('second-container').appendChild(control);
+
+                expect(control.callCallback('resolveHost', [])).to.equal('second');
+            });
         })
 
     });