@schukai/monster 4.129.0 → 4.129.2

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

@@ -216,4 +216,276 @@ describe("MessageStateButton", function () {
 			}, 0);
 		});
 	});
+
+	describe("popper content presentation", function () {
+		afterEach(() => {
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = "";
+		});
+
+		it("should resolve plain prose content to default popper clipping", function (done) {
+			let mocks = document.getElementById("mocks");
+			const button = document.createElement("monster-message-state-button");
+			button.innerHTML = "Save";
+			mocks.appendChild(button);
+
+			setTimeout(() => {
+				try {
+					button.setMessage("<div><strong>Saved</strong><p>plain html</p></div>");
+					button.showMessage();
+
+					setTimeout(() => {
+						try {
+							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-message-layout"),
+							).to.equal("prose");
+							expect(
+								message.getAttribute("data-monster-message-layout"),
+							).to.equal("prose");
+							done();
+						} catch (e) {
+							done(e);
+						}
+					}, 0);
+				} catch (e) {
+					done(e);
+				}
+			}, 0);
+		});
+
+		it("should resolve nested select message content to horizontal clipping only", function (done) {
+			let mocks = document.getElementById("mocks");
+			const button = document.createElement("monster-message-state-button");
+			button.innerHTML = "Save";
+			mocks.appendChild(button);
+
+			setTimeout(() => {
+				try {
+					const wrapper = document.createElement("div");
+					wrapper.appendChild(document.createElement("monster-select"));
+					button.setMessage(wrapper);
+					button.showMessage();
+
+					setTimeout(() => {
+						try {
+							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(
+								"horizontal",
+							);
+							expect(
+								content.getAttribute("data-monster-message-layout"),
+							).to.equal("overlay");
+							expect(
+								message.getAttribute("data-monster-message-layout"),
+							).to.equal("overlay");
+							done();
+						} catch (e) {
+							done(e);
+						}
+					}, 0);
+				} catch (e) {
+					done(e);
+				}
+			}, 0);
+		});
+
+		it("should resolve wide plain content to the wide layout", function (done) {
+			let mocks = document.getElementById("mocks");
+			const button = document.createElement("monster-message-state-button");
+			button.innerHTML = "Save";
+			mocks.appendChild(button);
+
+			setTimeout(() => {
+				try {
+					const wrapper = document.createElement("div");
+					const line = document.createElement("div");
+					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);
+
+					button.setMessage(wrapper);
+					button.showMessage();
+
+					setTimeout(() => {
+						try {
+							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-message-layout"),
+							).to.equal("wide");
+							expect(
+								message.getAttribute("data-monster-message-layout"),
+							).to.equal("wide");
+							done();
+						} catch (e) {
+							done(e);
+						}
+					}, 0);
+				} catch (e) {
+					done(e);
+				}
+			}, 0);
+		});
+	});
+
+	describe("message width behavior", function () {
+		let originalInnerWidth;
+		let originalGetBoundingClientRect;
+
+		beforeEach(() => {
+			originalInnerWidth = window.innerWidth;
+			originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
+		});
+
+		afterEach(() => {
+			Object.defineProperty(window, "innerWidth", {
+				configurable: true,
+				writable: true,
+				value: originalInnerWidth,
+			});
+			HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = "";
+		});
+
+		it("should keep prose content on a readable max width", function (done) {
+			let mocks = document.getElementById("mocks");
+			const button = document.createElement("monster-message-state-button");
+			button.innerHTML = "Save";
+			mocks.appendChild(button);
+
+			Object.defineProperty(window, "innerWidth", {
+				configurable: true,
+				writable: true,
+				value: 800,
+			});
+			HTMLElement.prototype.getBoundingClientRect = function () {
+				if (this?.getAttribute?.("data-measurement") === "true") {
+					return {
+						width: 900,
+						height: 120,
+						top: 0,
+						left: 0,
+						right: 900,
+						bottom: 120,
+					};
+				}
+
+				return {
+					width: 100,
+					height: 40,
+					top: 0,
+					left: 0,
+					right: 100,
+					bottom: 40,
+				};
+			};
+
+			setTimeout(() => {
+				try {
+					button.setMessage(
+						"<div><p>This long prose content should wrap instead of forcing the message popper to use the full viewport width.</p></div>",
+					);
+					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);
+				} catch (e) {
+					done(e);
+				}
+			}, 0);
+		});
+
+		it("should allow wide content to grow until the viewport limit", function (done) {
+			let mocks = document.getElementById("mocks");
+			const button = document.createElement("monster-message-state-button");
+			button.innerHTML = "Save";
+			mocks.appendChild(button);
+
+			Object.defineProperty(window, "innerWidth", {
+				configurable: true,
+				writable: true,
+				value: 800,
+			});
+			HTMLElement.prototype.getBoundingClientRect = function () {
+				if (this?.getAttribute?.("data-measurement") === "true") {
+					return {
+						width: 900,
+						height: 120,
+						top: 0,
+						left: 0,
+						right: 900,
+						bottom: 120,
+					};
+				}
+
+				return {
+					width: 100,
+					height: 40,
+					top: 0,
+					left: 0,
+					right: 100,
+					bottom: 40,
+				};
+			};
+
+			setTimeout(() => {
+				try {
+					const wrapper = document.createElement("div");
+					wrapper.setAttribute("data-monster-message-layout", "wide");
+					wrapper.textContent =
+						"wide content placeholder that should grow until the viewport edge";
+					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);
+				} catch (e) {
+					done(e);
+				}
+			}, 0);
+		});
+	});
 });

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

@@ -0,0 +1,89 @@
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+let PopperButton;
+
+describe("PopperButton", function () {
+	before(function (done) {
+		initJSDOM()
+			.then(() => {
+				return import("../../../../source/components/form/popper-button.mjs");
+			})
+			.then((m) => {
+				PopperButton = m["PopperButton"];
+				done();
+			})
+			.catch((e) => done(e));
+	});
+
+	afterEach(() => {
+		let mocks = document.getElementById("mocks");
+		mocks.innerHTML = "";
+	});
+
+	it("should instance of popper-button", function () {
+		expect(document.createElement("monster-popper-button")).is.instanceof(
+			PopperButton,
+		);
+	});
+
+	it("should apply content overflow mode to the rendered content wrapper", function (done) {
+		let mocks = document.getElementById("mocks");
+		const button = document.createElement("monster-popper-button");
+		mocks.appendChild(button);
+
+		setTimeout(() => {
+			try {
+				const content = button.shadowRoot.querySelector('[part="content"]');
+				expect(content).to.exist;
+				expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+					"both",
+				);
+
+				button.setOption("popper.contentOverflow", "horizontal");
+
+				setTimeout(() => {
+					try {
+						expect(
+							content.getAttribute("data-monster-overflow-mode"),
+						).to.equal("horizontal");
+						done();
+					} catch (e) {
+						done(e);
+					}
+				}, 0);
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
+
+	it("should apply content overflow mode from the HTML attribute", function (done) {
+		let mocks = document.getElementById("mocks");
+		mocks.innerHTML = `
+            <monster-popper-button
+                data-monster-option-popper-content-overflow="horizontal"
+            ></monster-popper-button>
+        `;
+
+		setTimeout(() => {
+			try {
+				const button = mocks.querySelector("monster-popper-button");
+				const content = button.shadowRoot.querySelector('[part="content"]');
+				expect(button.getOption("popper.contentOverflow")).to.equal(
+					"horizontal",
+				);
+				expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
+					"horizontal",
+				);
+				done();
+			} catch (e) {
+				done(e);
+			}
+		}, 0);
+	});
+});

package/test/cases/dom/util/extract-keys.mjs

@@ -13,16 +13,14 @@ describe('extractKeys', () => {
             },
         };
 
-        const expected = new Map([
-            ['firstname', 'firstName'],
-            ['lastname', 'lastName'],
-            ['address-street', 'address.street'],
-            ['address-city', 'address.city'],
-        ]);
-
         const result = extractKeys(obj);
 
-        expect(JSON.stringify(Array.from(result))).to.equal(JSON.stringify(Array.from(expected)));
+        expect(result.get('firstname')).to.equal('firstName');
+        expect(result.get('first-name')).to.equal('firstName');
+        expect(result.get('lastname')).to.equal('lastName');
+        expect(result.get('last-name')).to.equal('lastName');
+        expect(result.get('address-street')).to.equal('address.street');
+        expect(result.get('address-city')).to.equal('address.city');
     });
 
     it('should use custom key and value separators', () => {
@@ -31,14 +29,12 @@ describe('extractKeys', () => {
             lastName: 'Doe',
         };
 
-        const expected = new Map([
-            ['prefix+firstname', 'prefix+firstName'],
-            ['prefix+lastname', 'prefix+lastName'],
-        ]);
-
         const result = extractKeys(obj, 'prefix', '+', '+');
 
-        expect(JSON.stringify(Array.from(result))).to.equal(JSON.stringify(Array.from(expected)));
+        expect(result.get('prefix+firstname')).to.equal('prefix+firstName');
+        expect(result.get('prefix+first-name')).to.equal('prefix+firstName');
+        expect(result.get('prefix+lastname')).to.equal('prefix+lastName');
+        expect(result.get('prefix+last-name')).to.equal('prefix+lastName');
     });
 
     it('check if value is null', () => {
@@ -48,17 +44,32 @@ describe('extractKeys', () => {
             address: null,
         };
 
-        const expected = new Map([
-            ['firstname', 'firstName'],
-            ['lastname', 'lastName'],
-            ['address', 'address'],
-            
-        ]);
-
         const result = extractKeys(obj);
 
-        expect(JSON.stringify(Array.from(result))).to.equal(JSON.stringify(Array.from(expected)));
+        expect(result.get('firstname')).to.equal('firstName');
+        expect(result.get('first-name')).to.equal('firstName');
+        expect(result.get('lastname')).to.equal('lastName');
+        expect(result.get('last-name')).to.equal('lastName');
+        expect(result.get('address')).to.equal('address');
     });
 
-    // Add more test cases as needed
+    it('should expose kebab-case aliases for camelCase nested keys', () => {
+        const obj = {
+            popper: {
+                contentOverflow: 'both',
+            },
+            message: {
+                width: {
+                    viewportRatio: 0.7,
+                },
+            },
+        };
+
+        const result = extractKeys(obj);
+
+        expect(result.get('popper-contentoverflow')).to.equal('popper.contentOverflow');
+        expect(result.get('popper-content-overflow')).to.equal('popper.contentOverflow');
+        expect(result.get('message-width-viewportratio')).to.equal('message.width.viewportRatio');
+        expect(result.get('message-width-viewport-ratio')).to.equal('message.width.viewportRatio');
+    });
 });

package/test/cases/dom/util/init-options-from-attributes.mjs

@@ -164,4 +164,25 @@ describe('initOptionsFromAttributes', () => {
         expect(result.key.caseSensitive).to.equal(false);
     });
 
+    it('should support kebab-case aliases for camelCase option names', () => {
+        options = {
+            popper: {
+                contentOverflow: 'both',
+            },
+            message: {
+                width: {
+                    viewportRatio: 0.7,
+                },
+            },
+        };
+
+        element.setAttribute('data-monster-option-popper-content-overflow', 'horizontal');
+        element.setAttribute('data-monster-option-message-width-viewport-ratio', '0.9');
+
+        const result = initOptionsFromAttributes(element, options);
+
+        expect(result.popper.contentOverflow).to.equal('horizontal');
+        expect(result.message.width.viewportRatio).to.equal(0.9);
+    });
+
 });