@schukai/monster 4.145.1 → 4.145.2

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.145.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.145.2"}

package/source/components/form/control-bar.mjs

@@ -219,6 +219,35 @@ const EVENT_LAYOUT_CHANGED = "monster-control-bar-layout-changed";
 const LAYOUT_CHANGED_EVENT_DELAY = 20;
 const LAYOUT_SWITCH_HYSTERESIS = 16;
 
+/**
+ * @private
+ * @type {string}
+ */
+const CONTAINED_CONTROL_SELECTOR = [
+	"monster-input-group",
+	"monster-select",
+	"monster-button",
+	"monster-state-button",
+	"monster-message-state-button",
+	"monster-action-button",
+	"monster-api-button",
+	"monster-confirm-button",
+	"monster-popper-button",
+].join(",");
+
+/**
+ * @private
+ * @type {string}
+ */
+const VISUAL_BORDER_CONTROL_SELECTOR = [
+	"button",
+	"input",
+	"select",
+	"textarea",
+	CONTAINED_CONTROL_SELECTOR,
+	"[data-monster-role=control]",
+].join(",");
+
 /**
  * A control bar control.
  *
@@ -1213,24 +1242,36 @@ function isWrapperElement(element) {
  * @return {HTMLElement[]}
  */
 function getContainedControlElements(element) {
-	if (!isWrapperElement(element)) {
+	if (element.matches(CONTAINED_CONTROL_SELECTOR)) {
 		return [];
 	}
 
 	return Array.from(
-		element.querySelectorAll(
-			[
-				"monster-input-group",
-				"monster-select",
-				"monster-button",
-				"monster-state-button",
-				"monster-message-state-button",
-				"monster-action-button",
-				"monster-api-button",
-				"monster-confirm-button",
-			].join(","),
-		),
-	).filter((control) => control instanceof HTMLElement);
+		element.querySelectorAll(CONTAINED_CONTROL_SELECTOR),
+	).filter((control) => {
+		return (
+			control instanceof HTMLElement &&
+			isTopLevelContainedControl(element, control)
+		);
+	});
+}
+
+/**
+ * @private
+ * @param {HTMLElement} container
+ * @param {HTMLElement} control
+ * @return {boolean}
+ */
+function isTopLevelContainedControl(container, control) {
+	let parent = control.parentElement;
+	while (parent instanceof HTMLElement && parent !== container) {
+		if (parent.matches(CONTAINED_CONTROL_SELECTOR)) {
+			return false;
+		}
+		parent = parent.parentElement;
+	}
+
+	return true;
 }
 
 /**
@@ -1253,6 +1294,13 @@ function updateJoinedBorders(layout, shouldShowSwitch) {
 	const marginTopByElement = new Map();
 
 	collectInlineJoinedBorders.call(this, mainItems, marginLeftByElement);
+	for (const item of [...mainItems, ...layout.itemsToMoveToPopper]) {
+		collectInlineJoinedBorders.call(
+			this,
+			getContainedControlElements(item),
+			marginLeftByElement,
+		);
+	}
 	collectBlockJoinedBorders.call(
 		this,
 		layout.itemsToMoveToPopper,
@@ -1392,6 +1440,9 @@ function getJoinedBorderOffsetElements() {
 	const elements = Array.from(this.children).filter(
 		(element) => element instanceof HTMLElement,
 	);
+	for (const element of [...elements]) {
+		elements.push(...getContainedControlElements(element));
+	}
 	if (this[popperNavElementSymbol] instanceof HTMLElement) {
 		elements.push(this[popperNavElementSymbol]);
 	}
@@ -1458,22 +1509,6 @@ function getVisualBorderElement(element, side) {
 		return this[switchElementSymbol] || element;
 	}
 
-	const selector = [
-		"button",
-		"input",
-		"select",
-		"textarea",
-		"monster-input-group",
-		"monster-select",
-		"monster-button",
-		"monster-state-button",
-		"monster-message-state-button",
-		"monster-action-button",
-		"monster-api-button",
-		"monster-confirm-button",
-		"monster-popper-button",
-		"[data-monster-role=control]",
-	].join(",");
 	if (element.shadowRoot instanceof ShadowRoot) {
 		const primaryControl = element.shadowRoot.querySelector(
 			"[data-monster-role=button],button,input,select,textarea",
@@ -1482,7 +1517,9 @@ function getVisualBorderElement(element, side) {
 			return getVisualBorderElement.call(this, primaryControl, side);
 		}
 
-		const control = element.shadowRoot.querySelector(selector);
+		const control = element.shadowRoot.querySelector(
+			VISUAL_BORDER_CONTROL_SELECTOR,
+		);
 		if (control instanceof HTMLElement && control !== element) {
 			return getVisualBorderElement.call(this, control, side);
 		}
@@ -1490,9 +1527,9 @@ function getVisualBorderElement(element, side) {
 		return element;
 	}
 
-	const candidates = Array.from(element.querySelectorAll(selector)).filter(
-		(candidate) => candidate instanceof HTMLElement,
-	);
+	const candidates = Array.from(
+		element.querySelectorAll(VISUAL_BORDER_CONTROL_SELECTOR),
+	).filter((candidate) => candidate instanceof HTMLElement);
 	if (candidates.length === 0) {
 		return element;
 	}

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

@@ -140,15 +140,17 @@ describe("ButtonBar", function () {
     const bar = document.getElementById("dynamic-auto-hidden-button-bar");
     const button = document.getElementById("dynamic-auto-hidden-button");
 
-    await waitForLayout();
-
-    expect(bar.hasAttribute("hidden")).to.be.true;
+    await waitForCondition(() => {
+      return bar.hasAttribute("hidden");
+    });
 
     button.removeAttribute("hidden");
-    await waitForLayout();
-
-    expect(bar.hasAttribute("hidden")).to.be.false;
-    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+    await waitForCondition(() => {
+      return (
+        !bar.hasAttribute("hidden") &&
+        !bar.hasAttribute("data-monster-empty-hidden")
+      );
+    });
   });
 
   it("should keep an auto-hidden button bar visible when buttons overflow into the popper", async function () {

package/test/cases/components/form/control-bar.mjs

@@ -633,6 +633,123 @@ describe("ControlBar", function () {
     }
   });
 
+  it("should size and join popper buttons inside custom control wrappers", async function () {
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    const scheduledCallbacks = [];
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        scheduledCallbacks.shift()();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+
+    try {
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="custom-wrapper-border-bar-wrapper">
+          <monster-control-bar id="custom-wrapper-border-bar">
+            <nucleus-workflow-transition-control id="custom-wrapper-workflow">
+              <monster-popper-button id="custom-wrapper-release">
+                <span slot="button">Release order</span>
+              </monster-popper-button>
+              <monster-popper-button id="custom-wrapper-cancel">
+                <span slot="button">Cancel order</span>
+              </monster-popper-button>
+            </nucleus-workflow-transition-control>
+            <nucleus-follow-ups-action id="custom-wrapper-follow-up">
+              <monster-popper-button id="custom-wrapper-follow-up-button">
+                <span slot="button">Create follow-up</span>
+                <monster-message-state-button id="custom-wrapper-follow-up-submit">
+                  Create follow-up
+                </monster-message-state-button>
+              </monster-popper-button>
+            </nucleus-follow-ups-action>
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById(
+        "custom-wrapper-border-bar-wrapper",
+      );
+      const workflow = document.getElementById("custom-wrapper-workflow");
+      const followUp = document.getElementById("custom-wrapper-follow-up");
+      const release = document.getElementById("custom-wrapper-release");
+      const cancel = document.getElementById("custom-wrapper-cancel");
+      const followUpButton = document.getElementById(
+        "custom-wrapper-follow-up-button",
+      );
+      const followUpSubmit = document.getElementById(
+        "custom-wrapper-follow-up-submit",
+      );
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "500px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 500,
+      });
+
+      for (const control of [workflow, followUp]) {
+        Object.defineProperty(control, "offsetWidth", {
+          configurable: true,
+          value: 160,
+        });
+        Object.defineProperty(control, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        control.getBoundingClientRect = () => ({
+          width: 160,
+          height: 30,
+          top: 0,
+          right: 160,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      const releaseInnerButton = release.shadowRoot?.querySelector(
+        '[data-monster-role="button"]',
+      );
+      const cancelInnerButton = cancel.shadowRoot?.querySelector(
+        '[data-monster-role="button"]',
+      );
+      const followUpInnerButton = followUpButton.shadowRoot?.querySelector(
+        '[data-monster-role="button"]',
+      );
+
+      releaseInnerButton.style.borderRightWidth = "3px";
+      cancelInnerButton.style.borderLeftWidth = "3px";
+      cancelInnerButton.style.borderRightWidth = "2px";
+      followUpInnerButton.style.borderLeftWidth = "2px";
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(release.style.height).to.equal("100%");
+      expect(cancel.style.height).to.equal("100%");
+      expect(followUpButton.style.height).to.equal("100%");
+      expect(cancel.style.marginLeft).to.equal("-3px");
+      expect(followUp.style.marginLeft).to.equal("-2px");
+      expect(followUpSubmit.style.height).to.equal("");
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
   it("should join borders between message state and confirm buttons", async function () {
     const originalRequestAnimationFrame = window.requestAnimationFrame;
     const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;