@schukai/monster 4.128.2 → 4.128.3

package/source/dom/updater.mjs

@@ -88,6 +88,7 @@ const updaterRootSymbol = Symbol.for("@schukai/monster/dom/@@updater-root");
 const disposedSymbol = Symbol("disposed");
 const subjectObserverSymbol = Symbol("subjectObserver");
 const patchNodeKeySymbol = Symbol("patchNodeKey");
+const queuedSnapshotSymbol = Symbol("queuedSnapshot");
 
 /**
  * The updater class connects an object with the DOM. In this way, structures and contents in the DOM can be
@@ -155,6 +156,7 @@ class Updater extends Base {
 		this[pendingDiffsSymbol] = [];
 		this[processingSymbol] = false;
 		this[disposedSymbol] = false;
+		this[queuedSnapshotSymbol] = clone(this[internalSymbol].last);
 
 		this[subjectObserverSymbol] = new Observer(() => {
 			if (this[disposedSymbol] === true) {
@@ -162,12 +164,13 @@ class Updater extends Base {
 			}
 
 			const real = this[internalSymbol].subject.getRealSubject();
-			const diffResult = diff(this[internalSymbol].last, real);
-			this[internalSymbol].last = clone(real);
+			const diffResult = diff(this[queuedSnapshotSymbol], real);
 			if (diffResult.length === 0) {
 				return Promise.resolve();
 			}
-			this[pendingDiffsSymbol].push(diffResult);
+			const snapshot = clone(real);
+			this[queuedSnapshotSymbol] = snapshot;
+			this[pendingDiffsSymbol].push({ diffResult, snapshot });
 			return this[processQueueSymbol]();
 		});
 		this[internalSymbol].subject.attachObserver(this[subjectObserverSymbol]);
@@ -194,7 +197,7 @@ class Updater extends Base {
 					return Promise.resolve();
 				}
 
-				const diffResult = this[pendingDiffsSymbol].shift();
+				const { diffResult, snapshot } = this[pendingDiffsSymbol].shift();
 				if (this[internalSymbol].features.batchUpdates === true) {
 					const updatePaths = new Map();
 					for (const change of Object.values(diffResult)) {
@@ -225,6 +228,7 @@ class Updater extends Base {
 						await this[applyChangeSymbol](change);
 					}
 				}
+				this[internalSymbol].last = clone(snapshot);
 			}
 		} catch (err) {
 			addErrorAttribute(this[internalSymbol]?.element, err);
@@ -371,6 +375,7 @@ class Updater extends Base {
 		// the key __init__has no further meaning and is only
 		// used to create the diff for empty objects.
 		this[internalSymbol].last = { __init__: true };
+		this[queuedSnapshotSymbol] = clone(this[internalSymbol].last);
 		return this[internalSymbol].subject.notifyObservers();
 	}
 
@@ -597,12 +602,17 @@ function retrieveAndSetValue(element) {
 	switch (type) {
 		case "integer?":
 		case "int?":
-		case "number?":
+		case "number?": {
+			const empty =
+				value === undefined ||
+				value === null ||
+				(isString(value) && value.trim() === "");
 			value = Number(value);
-			if (isNaN(value) || 0 === value) {
+			if (empty || isNaN(value)) {
 				value = undefined;
 			}
 			break;
+		}
 
 		case "number":
 		case "int":
@@ -1055,7 +1065,7 @@ function runUpdateContent(container, parts, subject) {
 		 * @type {HTMLElement}
 		 */
 		for (const [element] of iterator.entries()) {
-			if (mem.has(element)) return;
+			if (mem.has(element)) continue;
 			mem.add(element);
 
 			const attributes = element.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
@@ -1113,7 +1123,7 @@ function runUpdatePatch(container, parts, subject) {
 		}
 
 		for (const [element] of iterator.entries()) {
-			if (mem.has(element)) return;
+			if (mem.has(element)) continue;
 			mem.add(element);
 
 			const attributes = element.getAttribute(ATTRIBUTE_UPDATER_PATCH);
@@ -1501,7 +1511,7 @@ function runUpdateAttributes(container, parts, subject) {
 		}
 
 		for (const [element] of iterator.entries()) {
-			if (mem.has(element)) return;
+			if (mem.has(element)) continue;
 			mem.add(element);
 
 			// this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
@@ -1576,7 +1586,7 @@ function runUpdateProperties(container, parts, subject) {
 		}
 
 		for (const [element] of iterator.entries()) {
-			if (mem.has(element)) return;
+			if (mem.has(element)) continue;
 			mem.add(element);
 
 			// this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
@@ -1625,14 +1635,24 @@ function handleInputControlAttributeUpdate(element, name, value) {
 	if (element instanceof HTMLSelectElement) {
 		switch (element.type) {
 			case "select-multiple":
-				for (const [index, opt] of Object.entries(element.options)) {
-					opt.selected = value.indexOf(opt.value) !== -1;
+				const selectedValues = isArray(value)
+					? value
+					: value === undefined || value === null
+						? []
+						: [`${value}`];
+				for (const [, opt] of Object.entries(element.options)) {
+					opt.selected = selectedValues.indexOf(opt.value) !== -1;
 				}
 
 				break;
 			case "select-one":
 				// Only one value may be selected
+				if (value === undefined || value === null) {
+					element.selectedIndex = -1;
+					break;
+				}
 
+				element.selectedIndex = -1;
 				for (const [index, opt] of Object.entries(element.options)) {
 					if (opt.value === value) {
 						element.selectedIndex = index;

package/source/types/is.mjs

@@ -36,6 +36,9 @@ export {
  * @returns {boolean}
  */
 function isElement(value) {
+	if (typeof Element === "undefined") {
+		return false;
+	}
 	return value instanceof Element;
 }
 

package/source/types/proxyobserver.mjs

@@ -209,22 +209,19 @@ function getHandler() {
 				return true;
 			}
 
-			let result;
-			let descriptor = Reflect.getOwnPropertyDescriptor(target, key);
-
-			if (descriptor === undefined) {
-				descriptor = {
-					writable: true,
-					enumerable: true,
-					configurable: true,
-				};
+			const result = Reflect.set(target, key, value, receiver);
+			if (result !== true) {
+				return result;
 			}
 
-			descriptor["value"] = value;
-			result = Reflect.defineProperty(target, key, descriptor);
-
 			if (typeof key !== "symbol") {
-				proxy.observers.notify(proxy);
+				let next = Reflect.get(target, key, receiver);
+				if (proxy.proxyMap.has(next)) {
+					next = proxy.proxyMap.get(next);
+				}
+				if (next !== current) {
+					proxy.observers.notify(proxy);
+				}
 			}
 
 			return result;

package/source/types/version.mjs

@@ -156,7 +156,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("4.125.0");
+	monsterVersion = new Version("4.128.2");
 
 	return monsterVersion;
 }

package/test/cases/components/content/image-editor.mjs

@@ -0,0 +1,98 @@
+'use strict';
+
+import * as chai from 'chai';
+import {getDocument} from "../../../../source/dom/util.mjs";
+import {chaiDom} from "../../../util/chai-dom.mjs";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+describe('ImageEditor', function () {
+
+    let ImageEditor, document;
+    let registerCustomElement;
+    let CustomElement;
+    let assembleMethodSymbol;
+
+    before(function (done) {
+        initJSDOM({}).then(() => {
+            import("../../../../source/dom/customelement.mjs").then((domModule) => {
+                registerCustomElement = domModule['registerCustomElement'];
+                CustomElement = domModule['CustomElement'];
+                assembleMethodSymbol = domModule['assembleMethodSymbol'];
+                return import("../../../../source/components/content/image-editor.mjs");
+            }).then((m) => {
+                try {
+                    ImageEditor = m['ImageEditor'];
+                    document = getDocument();
+                    done();
+                } catch (e) {
+                    done(e);
+                }
+            }).catch((e) => done(e));
+        });
+    });
+
+    beforeEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = '<div id="target"></div>';
+    });
+
+    afterEach(() => {
+        let mocks = document.getElementById('mocks');
+        mocks.innerHTML = '';
+    });
+
+    it('should not double-call attributeChangedCallback for readonly', function (done) {
+        const htmlTAG = 'monster-image-editor-observed-test';
+
+        class ObservedImageEditor extends ImageEditor {
+            static getTag() {
+                return htmlTAG;
+            }
+
+            get defaults() {
+                return Object.assign({}, super.defaults, {
+                    shadowMode: false,
+                    templates: {
+                        main: '<div id="image-editor-test"></div>'
+                    }
+                });
+            }
+
+            [assembleMethodSymbol]() {
+                return CustomElement.prototype[assembleMethodSymbol].call(this);
+            }
+
+            constructor() {
+                super();
+                this.attributeChangedCalls = [];
+            }
+
+            attributeChangedCallback(name, oldValue, newValue) {
+                this.attributeChangedCalls.push([name, oldValue, newValue]);
+            }
+        }
+
+        registerCustomElement(ObservedImageEditor);
+
+        let element = document.createElement(htmlTAG);
+        document.getElementById('target').appendChild(element);
+
+        element.attributeChangedCalls = [];
+        element.setAttribute('data-monster-readonly', '');
+
+        setTimeout(function () {
+            try {
+                const readonlyCalls = element.attributeChangedCalls.filter(
+                    ([name]) => name === 'data-monster-readonly',
+                );
+                expect(readonlyCalls).to.have.length(1);
+                done();
+            } catch (e) {
+                done(e);
+            }
+        }, 20);
+    });
+});

package/test/cases/components/datatable/drag-scroll.mjs

@@ -1,6 +1,7 @@
 import * as chai from "chai";
 import { chaiDom } from "../../../util/chai-dom.mjs";
 import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
 
 const expect = chai.expect;
 chai.use(chaiDom);
@@ -32,6 +33,26 @@ function dispatchPointerEvent(target, type, options = {}) {
 	return event;
 }
 
+function mockScrollableElement(element, { clientWidth, scrollWidth, scrollLeft = 0 }) {
+	let currentScrollLeft = scrollLeft;
+
+	Object.defineProperty(element, "clientWidth", {
+		configurable: true,
+		value: clientWidth,
+	});
+	Object.defineProperty(element, "scrollWidth", {
+		configurable: true,
+		value: scrollWidth,
+	});
+	Object.defineProperty(element, "scrollLeft", {
+		configurable: true,
+		get: () => currentScrollLeft,
+		set: (value) => {
+			currentScrollLeft = value;
+		},
+	});
+}
+
 describe("Datatable drag scroll", function () {
 	before(async function () {
 		await initJSDOM();
@@ -68,13 +89,9 @@ describe("Datatable drag scroll", function () {
 		expect(scroll).to.exist;
 		expect(cell).to.exist;
 
-		Object.defineProperty(scroll, "clientWidth", {
-			configurable: true,
-			value: 200,
-		});
-		Object.defineProperty(scroll, "scrollWidth", {
-			configurable: true,
-			value: 600,
+		mockScrollableElement(scroll, {
+			clientWidth: 200,
+			scrollWidth: 600,
 		});
 
 		scroll.scrollLeft = 120;
@@ -134,13 +151,9 @@ describe("Datatable drag scroll", function () {
 		expect(scroll).to.exist;
 		expect(button).to.exist;
 
-		Object.defineProperty(scroll, "clientWidth", {
-			configurable: true,
-			value: 200,
-		});
-		Object.defineProperty(scroll, "scrollWidth", {
-			configurable: true,
-			value: 600,
+		mockScrollableElement(scroll, {
+			clientWidth: 200,
+			scrollWidth: 600,
 		});
 
 		scroll.scrollLeft = 120;
@@ -255,4 +268,195 @@ describe("Datatable drag scroll", function () {
 		await new Promise((resolve) => setTimeout(resolve, 0));
 		expect(copied).deep.equal(['"Alpha";"Beta"']);
 	});
+
+	it("defers resize observer grid updates to the next animation frame", async function () {
+		const OriginalResizeObserver = window.ResizeObserver;
+		const originalGlobalResizeObserver = globalThis.ResizeObserver;
+		const originalRequestAnimationFrame = window.requestAnimationFrame;
+		const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+		class TrackingResizeObserver extends ResizeObserverMock {
+			static instances = [];
+
+			constructor(callback) {
+				super(callback);
+				TrackingResizeObserver.instances.push(this);
+			}
+		}
+
+		try {
+			window.ResizeObserver = TrackingResizeObserver;
+			globalThis.ResizeObserver = TrackingResizeObserver;
+
+			const mocks = document.getElementById("mocks");
+			const wrapper = document.createElement("div");
+			let wrapperWidth = 500;
+
+			Object.defineProperty(wrapper, "clientWidth", {
+				configurable: true,
+				get: () => wrapperWidth,
+			});
+
+			mocks.appendChild(wrapper);
+
+			const datatable = document.createElement("monster-datatable");
+			datatable.id = "resize-scheduled-table";
+			datatable.innerHTML = `
+				<template id="resize-scheduled-table-row">
+					<div data-monster-head="Name">Alpha</div>
+					<div data-monster-head="Value">Beta</div>
+				</template>
+			`;
+			datatable.setOption("responsive.breakpoint", 300);
+			datatable.setOption("data", [{}]);
+			wrapper.appendChild(datatable);
+
+			await new Promise((resolve) => setTimeout(resolve, 30));
+
+			const control = datatable.shadowRoot.querySelector(
+				"[data-monster-role=control]",
+			);
+			expect(control).to.exist;
+			expect(control.classList.contains("small")).to.equal(false);
+			expect(TrackingResizeObserver.instances).to.have.length.greaterThan(0);
+			const tableResizeObserver = TrackingResizeObserver.instances.find(
+				(observer) => observer.elements.includes(wrapper),
+			);
+			expect(tableResizeObserver).to.exist;
+
+			let scheduledCallback = null;
+			window.requestAnimationFrame = (callback) => {
+				scheduledCallback = callback;
+				return 1;
+			};
+			globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+			wrapperWidth = 200;
+			tableResizeObserver.triggerResize([]);
+
+			expect(scheduledCallback).to.be.a("function");
+			expect(control.classList.contains("small")).to.equal(false);
+
+			scheduledCallback();
+
+			expect(control.classList.contains("small")).to.equal(true);
+		} finally {
+			window.ResizeObserver = OriginalResizeObserver;
+			globalThis.ResizeObserver = originalGlobalResizeObserver;
+			window.requestAnimationFrame = originalRequestAnimationFrame;
+			globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+		}
+	});
+
+	it("defers column bar resize updates to the next animation frame", async function () {
+		const OriginalResizeObserver = window.ResizeObserver;
+		const originalGlobalResizeObserver = globalThis.ResizeObserver;
+		const originalRequestAnimationFrame = window.requestAnimationFrame;
+		const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+		class TrackingResizeObserver extends ResizeObserverMock {
+			static instances = [];
+
+			constructor(callback) {
+				super(callback);
+				TrackingResizeObserver.instances.push(this);
+			}
+		}
+
+		try {
+			window.ResizeObserver = TrackingResizeObserver;
+			globalThis.ResizeObserver = TrackingResizeObserver;
+
+			const mocks = document.getElementById("mocks");
+			const wrapper = document.createElement("div");
+			let parentWidth = 400;
+
+			Object.defineProperty(wrapper, "getBoundingClientRect", {
+				configurable: true,
+				value: () => ({ width: parentWidth }),
+			});
+
+			mocks.appendChild(wrapper);
+
+			const columnBar = document.createElement("monster-column-bar");
+			columnBar.setOption("columns", [
+				{ index: 0, name: "One", visible: true },
+				{ index: 1, name: "Two", visible: true },
+				{ index: 2, name: "Three", visible: true },
+				{ index: 3, name: "Four", visible: true },
+				{ index: 4, name: "Five", visible: true },
+				{ index: 5, name: "Six", visible: true },
+			]);
+			wrapper.appendChild(columnBar);
+
+			await new Promise((resolve) => setTimeout(resolve, 30));
+
+			const control = columnBar.shadowRoot.querySelector(
+				"[data-monster-role=control]",
+			);
+			const settingsButton = columnBar.shadowRoot.querySelector(
+				"[data-monster-role=settings-button]",
+			);
+			const dotsContainer = columnBar.shadowRoot.querySelector(
+				"[data-monster-role=dots]",
+			);
+			const dots = Array.from(dotsContainer.querySelectorAll("li"));
+
+			expect(control).to.exist;
+			expect(settingsButton).to.exist;
+			expect(dots.length).to.equal(6);
+
+			Object.defineProperty(control, "getBoundingClientRect", {
+				configurable: true,
+				value: () => ({ width: parentWidth }),
+			});
+			Object.defineProperty(settingsButton, "getBoundingClientRect", {
+				configurable: true,
+				value: () => ({ width: 20 }),
+			});
+			dots.forEach((dot) => {
+				Object.defineProperty(dot, "getBoundingClientRect", {
+					configurable: true,
+					value: () => ({ width: 20 }),
+				});
+			});
+
+			await new Promise((resolve) => setTimeout(resolve, 0));
+
+			expect(
+				dotsContainer.querySelector(".dots-overflow-indicator"),
+			).to.equal(null);
+
+			const columnBarResizeObserver = TrackingResizeObserver.instances.find(
+				(observer) => observer.elements.includes(control),
+			);
+			expect(columnBarResizeObserver).to.exist;
+
+			let scheduledCallback = null;
+			window.requestAnimationFrame = (callback) => {
+				scheduledCallback = callback;
+				return 1;
+			};
+			globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+			parentWidth = 80;
+			columnBarResizeObserver.triggerResize([]);
+
+			expect(scheduledCallback).to.be.a("function");
+			expect(
+				dotsContainer.querySelector(".dots-overflow-indicator"),
+			).to.equal(null);
+
+			scheduledCallback();
+
+			expect(
+				dotsContainer.querySelector(".dots-overflow-indicator"),
+			).to.exist;
+		} finally {
+			window.ResizeObserver = OriginalResizeObserver;
+			globalThis.ResizeObserver = originalGlobalResizeObserver;
+			window.requestAnimationFrame = originalRequestAnimationFrame;
+			globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+		}
+	});
 });

package/test/cases/components/form/select.mjs

@@ -238,7 +238,7 @@ describe('Select', function () {
         });
 
         it('should reset pagination and clear options on fetch error', function (done) {
-            this.timeout(4000);
+            this.timeout(5000);
 
             let mocks = document.getElementById('mocks');
             const select = document.createElement('monster-select');
@@ -257,47 +257,85 @@ describe('Select', function () {
             const triggerFilter = (value) => {
                 const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter]');
                 filterInput.value = value;
+                filterInput.dispatchEvent(new InputEvent('input', {
+                    bubbles: true,
+                    composed: true,
+                    data: value
+                }));
                 filterInput.dispatchEvent(new KeyboardEvent('keydown', {
                     code: 'KeyA',
-                    bubbles: true
+                    key: 'a',
+                    bubbles: true,
+                    composed: true
                 }));
             };
 
-            select.addEventListener('monster-options-set', () => {
-                setTimeout(() => {
-                    try {
-                        const options = select.getOption('options');
-                        expect(options.length).to.equal(1);
-                        expect(pagination().getOption('currentPage')).to.equal(1);
-                        expect(pagination().getOption('pages')).to.equal(2);
-                        expect(pagination().getOption('objectsPerPage')).to.equal(1);
-
-                        triggerFilter('b');
-
-                        setTimeout(() => {
-                            try {
-                                const optionsAfterError = select.getOption('options');
-                                expect(optionsAfterError.length).to.equal(0);
-                                expect(pagination().getOption('currentPage')).to.equal(null);
-                                expect(pagination().getOption('pages')).to.equal(null);
-                                expect(pagination().getOption('objectsPerPage')).to.equal(null);
-                                expect(select.getOption('total')).to.equal(null);
-                                expect(select.getOption('messages.total')).to.equal("");
-                            } catch (e) {
-                                return done(e);
-                            }
+            const startedAt = Date.now();
+            const pollLoadedState = () => {
+                try {
+                    const options = select.getOption('options');
+                    const pager = pagination();
+
+                    if (
+                        options?.length !== 1 ||
+                        !pager ||
+                        pager.getOption('currentPage') !== 1 ||
+                        pager.getOption('pages') !== 2 ||
+                        pager.getOption('objectsPerPage') !== 1
+                    ) {
+                        if (Date.now() - startedAt < 3000) {
+                            return setTimeout(pollLoadedState, 50);
+                        }
+                    }
 
-                            done();
-                        }, 500);
-                    } catch (e) {
-                        done(e);
+                    expect(options.length).to.equal(1);
+                    expect(pager.getOption('currentPage')).to.equal(1);
+                    expect(pager.getOption('pages')).to.equal(2);
+                    expect(pager.getOption('objectsPerPage')).to.equal(1);
+
+                    triggerFilter('b');
+                    setTimeout(pollErrorState, 50);
+                } catch (e) {
+                    done(e);
+                }
+            };
+
+            const pollErrorState = () => {
+                try {
+                    const optionsAfterError = select.getOption('options');
+                    const pager = pagination();
+
+                    if (
+                        optionsAfterError?.length !== 0 ||
+                        !pager ||
+                        pager.getOption('currentPage') !== null ||
+                        pager.getOption('pages') !== null ||
+                        pager.getOption('objectsPerPage') !== null ||
+                        select.getOption('total') !== null ||
+                        select.getOption('messages.total') !== ""
+                    ) {
+                        if (Date.now() - startedAt < 4500) {
+                            return setTimeout(pollErrorState, 50);
+                        }
                     }
-                }, 50);
-            }, {once: true});
+
+                    expect(optionsAfterError.length).to.equal(0);
+                    expect(pager.getOption('currentPage')).to.equal(null);
+                    expect(pager.getOption('pages')).to.equal(null);
+                    expect(pager.getOption('objectsPerPage')).to.equal(null);
+                    expect(select.getOption('total')).to.equal(null);
+                    expect(select.getOption('messages.total')).to.equal("");
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            };
 
             setTimeout(() => {
                 triggerFilter('a');
-            }, 0);
+                setTimeout(pollLoadedState, 50);
+            }, 50);
         });
     });