@schukai/monster 4.136.6 → 4.136.8

package/test/cases/components/form/message-state-button.mjs

@@ -73,8 +73,9 @@ describe("MessageStateButton", function () {
 
 		describe("document.createElement", function () {
 			it("should instance of message-state-button", function () {
-				expect(document.createElement("monster-message-state-button")).is
-					.instanceof(MessageStateButton);
+				expect(
+					document.createElement("monster-message-state-button"),
+				).is.instanceof(MessageStateButton);
 			});
 		});
 	});
@@ -93,9 +94,7 @@ describe("MessageStateButton", function () {
 
 			setTimeout(() => {
 				try {
-					const inner = button.shadowRoot.querySelector(
-						"monster-state-button",
-					);
+					const inner = button.shadowRoot.querySelector("monster-state-button");
 					expect(inner).to.exist;
 
 					button.setAttribute("disabled", "");
@@ -231,19 +230,22 @@ describe("MessageStateButton", function () {
 
 			setTimeout(() => {
 				try {
-					button.setMessage("<div><strong>Saved</strong><p>plain html</p></div>");
+					button.setMessage(
+						"<div><strong>Saved</strong><p>plain html</p></div>",
+					);
 					button.showMessage();
 
 					setTimeout(() => {
 						try {
-							const content = button.shadowRoot.querySelector('[part="content"]');
+							const content =
+								button.shadowRoot.querySelector('[part="content"]');
 							const message = button.shadowRoot.querySelector(
 								'[data-monster-role="message"]',
 							);
 							expect(content).to.exist;
-							expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
-								"both",
-							);
+							expect(
+								content.getAttribute("data-monster-overflow-mode"),
+							).to.equal("both");
 							expect(
 								content.getAttribute("data-monster-message-layout"),
 							).to.equal("prose");
@@ -306,10 +308,7 @@ describe("MessageStateButton", function () {
 				try {
 					const wrapper = document.createElement("div");
 					const line = document.createElement("div");
-					line.setAttribute(
-						"style",
-						"white-space: nowrap; overflow-x: auto;",
-					);
+					line.setAttribute("style", "white-space: nowrap; overflow-x: auto;");
 					line.textContent =
 						"this is intentionally a single long line to trigger wide layout";
 					wrapper.appendChild(line);
@@ -319,14 +318,15 @@ describe("MessageStateButton", function () {
 
 					setTimeout(() => {
 						try {
-							const content = button.shadowRoot.querySelector('[part="content"]');
+							const content =
+								button.shadowRoot.querySelector('[part="content"]');
 							const message = button.shadowRoot.querySelector(
 								'[data-monster-role="message"]',
 							);
 							expect(content).to.exist;
-							expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
-								"both",
-							);
+							expect(
+								content.getAttribute("data-monster-overflow-mode"),
+							).to.equal("both");
 							expect(
 								content.getAttribute("data-monster-message-layout"),
 							).to.equal("wide");
@@ -351,7 +351,8 @@ describe("MessageStateButton", function () {
 
 		beforeEach(() => {
 			originalInnerWidth = window.innerWidth;
-			originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
+			originalGetBoundingClientRect =
+				HTMLElement.prototype.getBoundingClientRect;
 		});
 
 		afterEach(() => {
@@ -360,7 +361,8 @@ describe("MessageStateButton", function () {
 				writable: true,
 				value: originalInnerWidth,
 			});
-			HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+			HTMLElement.prototype.getBoundingClientRect =
+				originalGetBoundingClientRect;
 			let mocks = document.getElementById("mocks");
 			mocks.innerHTML = "";
 		});
@@ -388,14 +390,7 @@ describe("MessageStateButton", function () {
 					};
 				}
 
-				return {
-					width: 100,
-					height: 40,
-					top: 0,
-					left: 0,
-					right: 100,
-					bottom: 40,
-				};
+				return originalGetBoundingClientRect.call(this);
 			};
 
 			setTimeout(() => {
@@ -405,18 +400,12 @@ describe("MessageStateButton", function () {
 					);
 					button.showMessage();
 
-					setTimeout(() => {
-						try {
-							const popper = button.shadowRoot.querySelector(
-								'[data-monster-role="popper"]',
-							);
-							expect(popper.style.width).to.equal("512px");
-							expect(popper.style.maxWidth).to.equal("512px");
-							done();
-						} catch (e) {
-							done(e);
-						}
-					}, 0);
+					const popper = button.shadowRoot.querySelector(
+						'[data-monster-role="popper"]',
+					);
+					expect(popper.style.width).to.equal("512px");
+					expect(popper.style.maxWidth).to.equal("512px");
+					done();
 				} catch (e) {
 					done(e);
 				}
@@ -446,14 +435,7 @@ describe("MessageStateButton", function () {
 					};
 				}
 
-				return {
-					width: 100,
-					height: 40,
-					top: 0,
-					left: 0,
-					right: 100,
-					bottom: 40,
-				};
+				return originalGetBoundingClientRect.call(this);
 			};
 
 			setTimeout(() => {
@@ -465,18 +447,12 @@ describe("MessageStateButton", function () {
 					button.setMessage(wrapper);
 					button.showMessage();
 
-					setTimeout(() => {
-						try {
-							const popper = button.shadowRoot.querySelector(
-								'[data-monster-role="popper"]',
-							);
-							expect(popper.style.width).to.equal("768px");
-							expect(popper.style.maxWidth).to.equal("768px");
-							done();
-						} catch (e) {
-							done(e);
-						}
-					}, 0);
+					const popper = button.shadowRoot.querySelector(
+						'[data-monster-role="popper"]',
+					);
+					expect(popper.style.width).to.equal("768px");
+					expect(popper.style.maxWidth).to.equal("768px");
+					done();
 				} catch (e) {
 					done(e);
 				}

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

@@ -47,7 +47,35 @@ function createJsonResponse(data, status = 200) {
     });
 }
 
+function waitForCondition(check, {timeout = 4000, interval = 25} = {}) {
+    return new Promise((resolve, reject) => {
+        const start = Date.now();
+
+        const poll = () => {
+            try {
+                if (check()) {
+                    resolve();
+                    return;
+                }
+            } catch (e) {
+                reject(e);
+                return;
+            }
+
+            if (Date.now() - start >= timeout) {
+                reject(new Error('Timed out while waiting for test condition.'));
+                return;
+            }
+
+            setTimeout(poll, interval);
+        };
+
+        poll();
+    });
+}
+
 let Select,
+    SelectStyleSheet,
     getDefaultSelectPopperPositionProfile,
     resolveSelectListDimension,
     resolveSelectPopperWidthConstraints,
@@ -75,6 +103,9 @@ describe('Select', function () {
                 resolveSelectPopperWidthConstraints = m['resolveSelectPopperWidthConstraints'];
                 resolveSelectVisibleRect = m['resolveSelectVisibleRect'];
                 resolveSelectViewportMetrics = m['resolveSelectViewportMetrics'];
+                return import("../../../../source/components/form/stylesheet/select.mjs");
+            }).then((m) => {
+                SelectStyleSheet = m['SelectStyleSheet'];
                 done()
             }).catch(e => done(e))
 
@@ -276,6 +307,16 @@ describe('Select', function () {
             expect(result.overflowY).to.equal('hidden');
         });
 
+        it('should keep option list scroll layout stable while overflow toggles', function () {
+            const cssText = Array.from(SelectStyleSheet.cssRules)
+                .map((rule) => rule.cssText)
+                .join('\n')
+                .replace(/\s+/g, '');
+
+            expect(cssText).to.contain('scrollbar-gutter:stable');
+            expect(cssText).to.not.contain('transition:height');
+        });
+
         it('should refresh the content max height when the available popper height grows again', function (done) {
             const mocks = document.getElementById('mocks');
             const select = document.createElement('monster-select');
@@ -810,7 +851,7 @@ describe('Select', function () {
             }, 50);
         });
 
-        it('should reuse defaultOptionsUrl after clearing the filter and reopening', function (done) {
+        it('should reuse defaultOptionsUrl after clearing the filter and reopening', async function () {
             this.timeout(5000);
 
             let mocks = document.getElementById('mocks');
@@ -867,68 +908,33 @@ describe('Select', function () {
                 }));
             };
 
-            setTimeout(() => {
-                let container;
-                let filterInput;
-
-                try {
-                    container = select.shadowRoot.querySelector('[data-monster-role=container]');
-                    filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
-                    container.click();
-                } catch (e) {
-                    return done(e);
-                }
-
-                setTimeout(() => {
-                    try {
-                        expect(requests[0]).to.equal('https://example.com/defaults?page=1');
-
-                        filterInput.value = 'alpha';
-                        dispatchFilterKey(filterInput, 'KeyA', 'a');
-                    } catch (e) {
-                        return done(e);
-                    }
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=container]') instanceof HTMLElement;
+            });
 
-                    setTimeout(() => {
-                        try {
-                            expect(requests[1]).to.equal('https://example.com/items?filter=alpha&page=1');
+            const container = select.shadowRoot.querySelector('[data-monster-role=container]');
+            const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
 
-                            filterInput.value = '';
-                            dispatchFilterKey(filterInput, 'Backspace', 'Backspace');
-                        } catch (e) {
-                            return done(e);
-                        }
+            container.click();
+            await waitForCondition(() => requests.length >= 1);
+            expect(requests[0]).to.equal('https://example.com/defaults?page=1');
 
-                        setTimeout(() => {
-                            try {
-                                expect(requests[2]).to.equal('https://example.com/defaults?page=1');
+            filterInput.value = 'alpha';
+            dispatchFilterKey(filterInput, 'KeyA', 'a');
+            await waitForCondition(() => requests.length >= 2);
+            expect(requests[1]).to.equal('https://example.com/items?filter=alpha&page=1');
 
-                                container.click();
-                            } catch (e) {
-                                return done(e);
-                            }
+            filterInput.value = '';
+            dispatchFilterKey(filterInput, 'Backspace', 'Backspace');
+            await waitForCondition(() => requests.length >= 3);
+            expect(requests[2]).to.equal('https://example.com/defaults?page=1');
 
-                            setTimeout(() => {
-                                try {
-                                    container.click();
-                                } catch (e) {
-                                    return done(e);
-                                }
+            container.click();
+            await waitForCondition(() => select.shadowRoot.querySelector('[data-monster-role=popper]').style.display === 'none');
 
-                                setTimeout(() => {
-                                    try {
-                                        expect(requests[3]).to.equal('https://example.com/defaults?page=1');
-                                    } catch (e) {
-                                        return done(e);
-                                    }
-
-                                    done();
-                                }, 250);
-                            }, 50);
-                        }, 300);
-                    }, 300);
-                }, 250);
-            }, 50);
+            container.click();
+            await waitForCondition(() => requests.length >= 4);
+            expect(requests[3]).to.equal('https://example.com/defaults?page=1');
         });
 
         it('should keep unresolved lookup values visible and mark their badge', function (done) {
@@ -974,6 +980,52 @@ describe('Select', function () {
             }, 250);
         });
 
+        it('should keep unresolved object lookup values visible by key and mark their badge', function (done) {
+            this.timeout(3000);
+
+            let mocks = document.getElementById('mocks');
+            const requests = [];
+            global['fetch'] = function (url) {
+                requests.push(url.toString());
+                return createJsonResponse({
+                    items: [],
+                    pagination: {
+                        total: 0,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('lookup.url', 'https://example.com/items?filter={filter}');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('selection', [{value: {id: 'missing-key'}}]);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    const badge = select.shadowRoot.querySelector('[data-monster-role=badge]');
+                    const badgeLabel = select.shadowRoot.querySelector('[data-monster-role=badge-label]');
+
+                    expect(requests).to.include('https://example.com/items?filter=missing-key');
+                    expect(badge).to.be.instanceof(HTMLDivElement);
+                    expect(badgeLabel).to.be.instanceof(HTMLDivElement);
+                    expect(badgeLabel.textContent.trim()).to.equal('missing-key');
+                    expect(badge.className).to.contain('monster-badge-warning');
+                    expect(badge.className).to.not.contain('monster-badge-primary');
+                    expect(badge.getAttribute('data-monster-unresolved')).to.equal('true');
+                    expect(badgeLabel.textContent).to.not.contain(select.getOption('labels.cannot-be-loaded'));
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 250);
+        });
+
         it('should clear the unresolved badge state once a local option can resolve the value', function (done) {
             this.timeout(4000);
 

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("4.128.3")
+        monsterVersion = new Version("4.136.7")
 
         let m = getMonsterVersion();
 

package/test/web/import.js

@@ -9,14 +9,18 @@ import "../cases/components/form/buy-box.mjs";
 import "../cases/components/form/message-state-button.mjs";
 import "../cases/components/form/button-bar.mjs";
 import "../cases/components/form/reload.mjs";
+import "../cases/components/form/context-help.mjs";
 import "../cases/components/form/state-button.mjs";
 import "../cases/components/form/select.mjs";
 import "../cases/components/form/login.mjs";
 import "../cases/components/form/confirm-button.mjs";
+import "../cases/components/form/context-error.mjs";
 import "../cases/components/form/form.mjs";
 import "../cases/components/form/tree-select.mjs";
+import "../cases/components/form/popper-button.mjs";
 import "../cases/components/form/wizard.mjs";
 import "../cases/components/form/button.mjs";
+import "../cases/components/form/floating-ui.mjs";
 import "../cases/components/form/toggle-switch.mjs";
 import "../cases/components/form/template.mjs";
 import "../cases/components/notify/message.mjs";

package/test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 4.128.3</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update So 5. Apr 19:19:33 CEST 2026</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.136.7</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Wed Apr 22 21:49:31 CEST 2026</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>