@schukai/monster 4.129.6 → 4.129.7

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.129.6"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.129.7"}

package/source/components/form/confirm-button.mjs

@@ -98,6 +98,7 @@ class ConfirmButton extends PopperButton {
 			},
 		});
 
+		obj["popper"]["strategy"] = "fixed";
 		obj["classes"]["confirmButton"] = "monster-button-primary";
 		obj["classes"]["cancelButton"] = "monster-button-secondary";
 		obj["actions"]["cancel"] = (e) => {

package/source/components/form/util/floating-ui.mjs

@@ -55,11 +55,11 @@ function openPositionedPopper(controlElement, popperElement, options) {
 
 	stopAutoUpdate(popperElement);
 	popperElement.style.display = "block";
+	popperElement.style.position = config.strategy;
 	popperElement.style.removeProperty("transform");
 
 	// Keep the call signature stable even though only Floating UI is used now.
 	void controlElement;
-	void config;
 }
 
 function enableFloatingPositioning(controlElement, popperElement, config) {
@@ -93,6 +93,7 @@ function syncFloatingPopover(controlElement, popperElement, config) {
 		Object.assign(popperElement.style, {
 			top: "0",
 			left: "0",
+			position: config.strategy,
 			transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
 		});
 
@@ -106,6 +107,7 @@ function closePositionedPopper(popperElement) {
 	stopAutoUpdate(popperElement);
 	popperElement.style.display = "none";
 	popperElement.style.removeProperty("visibility");
+	popperElement.style.removeProperty("position");
 	popperElement.style.removeProperty("transform");
 }
 
@@ -119,6 +121,7 @@ function normalizePopperConfig(options) {
 		{
 			placement: "top",
 			engine: "floating",
+			strategy: "absolute",
 		},
 		options,
 	);

package/test/cases/components/form/confirm-button.mjs

@@ -15,10 +15,11 @@ let html1, options, html2, ConfirmButton;
 
 describe('ConfirmButton', function () {
 
-    before(function (done) {
+    before(async function () {
+
+        await initJSDOM();
+        await import("element-internals-polyfill");
 
-        import("element-internals-polyfill").catch(e => done(e));    
-        
         if(!global.ResizeObserver) {
             global.ResizeObserver = ResizeObserverMock;
         }
@@ -43,16 +44,8 @@ describe('ConfirmButton', function () {
     </div>
 `
 
-
-        initJSDOM().then(() => {
-
-            import("../../../../source/components/form/confirm-button.mjs").then((m) => {
-                ConfirmButton = m['ConfirmButton'];
-                done()
-            }).catch(e => done(e))
-
-
-        });
+        const m = await import("../../../../source/components/form/confirm-button.mjs");
+        ConfirmButton = m['ConfirmButton'];
     })
 
     describe('new ConfirmButton', function () {
@@ -120,8 +113,31 @@ describe('ConfirmButton', function () {
             }, 0)
 
 
+        });
+
+        it('should use fixed positioning by default', function (done) {
+
+            let mocks = document.getElementById('mocks');
+            const button = document.createElement('monster-confirm-button');
+            mocks.appendChild(button);
+
+            setTimeout(() => {
+                try {
+                    button.showDialog();
+
+                    const popper = button.shadowRoot.querySelector('[data-monster-role="popper"]');
+                    expect(popper).to.exist;
+                    expect(popper.style.position).to.equal('fixed');
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 0)
+
+
         });
     });
 
 
-});
+});

package/test/cases/components/form/popper-button.mjs

@@ -86,4 +86,25 @@ describe("PopperButton", function () {
 			}
 		}, 0);
 	});
+
+	it("should use absolute positioning by default", function (done) {
+		let mocks = document.getElementById("mocks");
+		const button = document.createElement("monster-popper-button");
+		mocks.appendChild(button);
+
+		setTimeout(() => {
+			try {
+				button.showDialog();
+
+				const popper = button.shadowRoot.querySelector(
+					'[data-monster-role="popper"]',
+				);
+				expect(popper).to.exist;
+				expect(popper.style.position).to.equal("absolute");
+				done();
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
 });

package/test/cases/dom/updater.mjs

@@ -289,18 +289,19 @@ describe("DOM", function () {
                   firedDisconnected: 0,
                 },
               };
+              static pendingCallbacks = [];
 
               connectedCallback() {
                 const mode = this.getAttribute("data-mode") || "replace";
                 MonsterTestRaceItem.stats[mode].connected++;
 
-                setTimeout(() => {
+                MonsterTestRaceItem.pendingCallbacks.push(() => {
                   if (this.isConnected) {
                     MonsterTestRaceItem.stats[mode].firedConnected++;
                   } else {
                     MonsterTestRaceItem.stats[mode].firedDisconnected++;
                   }
-                }, 10);
+                });
               }
 
               disconnectedCallback() {
@@ -308,6 +309,14 @@ describe("DOM", function () {
                 MonsterTestRaceItem.stats[mode].disconnected++;
               }
 
+              static flushPendingCallbacks() {
+                const pending = [...MonsterTestRaceItem.pendingCallbacks];
+                MonsterTestRaceItem.pendingCallbacks = [];
+                for (const callback of pending) {
+                  callback();
+                }
+              }
+
               static resetStats() {
                 MonsterTestRaceItem.stats = {
                   replace: {
@@ -323,6 +332,7 @@ describe("DOM", function () {
                     firedDisconnected: 0,
                   },
                 };
+                MonsterTestRaceItem.pendingCallbacks = [];
               }
             }
 
@@ -671,8 +681,9 @@ describe("DOM", function () {
 
                 setTimeout(() => {
                   try {
-                    const raceStats =
-                      customElements.get("monster-test-race-item").stats;
+                    const raceItem = customElements.get("monster-test-race-item");
+                    raceItem.flushPendingCallbacks();
+                    const raceStats = raceItem.stats;
                     expect(raceStats.patch.firedDisconnected).to.equal(0);
                     expect(raceStats.replace.firedDisconnected).to.be.greaterThan(
                       0,