@schukai/monster 4.139.0 → 4.140.0

package/source/components/layout/utils/attach-tabs-hash-sync.mjs

@@ -25,6 +25,10 @@ export function attachTabsHashSync(
 	let lastKnownActiveTabId = null;
 	let lastKnownAllTabIds = [];
 
+	function getTabKey(tab) {
+		return tab.getAttribute("data-monster-name") || tab.getAttribute("id");
+	}
+
 	/**
 	 * Reads active and all tab IDs from the URL hash.
 	 * @returns {{activeTabId: string|null, allTabIds: string[]}}
@@ -53,7 +57,7 @@ export function attachTabsHashSync(
 		}
 
 		// Sync all tabs (add/remove tabs based on hash)
-		const currentTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
+		const currentTabs = tabsEl.getTabs().map(getTabKey);
 
 		// Add tabs that are in hash but not in DOM
 		for (const tabId of allTabIds) {
@@ -120,8 +124,9 @@ export function attachTabsHashSync(
 	// Listen for tab changes (active tab)
 	tabsEl.addEventListener("monster-tab-changed", (e) => {
 		if (e.target !== tabsEl) return; // Ignore bubbled events
-		const newActiveTabId = e.detail?.reference;
-		const currentTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
+		const newActiveTabId =
+			e.detail?.tab || e.detail?.name || e.detail?.reference;
+		const currentTabs = tabsEl.getTabs().map(getTabKey);
 		writeHash(newActiveTabId, currentTabs);
 	});
 
@@ -154,7 +159,7 @@ export function attachTabsHashSync(
 		}
 		if (tabsChanged) {
 			const currentActiveTabId = tabsEl.getActiveTab();
-			const currentTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
+			const currentTabs = tabsEl.getTabs().map(getTabKey);
 			// Only update hash if the list of tabs has actually changed
 			if (
 				currentTabs.length !== lastKnownAllTabIds.length ||
@@ -170,6 +175,6 @@ export function attachTabsHashSync(
 
 	// Initial write of all existing tabs to the hash
 	const initialActiveTab = tabsEl.getActiveTab();
-	const initialTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
+	const initialTabs = tabsEl.getTabs().map(getTabKey);
 	writeHash(initialActiveTab, initialTabs);
 }

package/source/monster.mjs

@@ -55,6 +55,7 @@ export * from "./components/form/util/floating-ui.mjs";
 export * from "./components/form/context-help.mjs";
 export * from "./components/form/api-bar.mjs";
 export * from "./components/form/tabs.mjs";
+export * from "./components/form/control-bar-spacer.mjs";
 export * from "./components/form/state-button.mjs";
 export * from "./components/form/popper.mjs";
 export * from "./components/form/cart-control.mjs";
@@ -69,6 +70,7 @@ export * from "./components/form/context-warning.mjs";
 export * from "./components/form/context-note.mjs";
 export * from "./components/form/context-error.mjs";
 export * from "./components/form/variant-select.mjs";
+export * from "./components/form/choice-cards.mjs";
 export * from "./components/form/register-wizard.mjs";
 export * from "./components/form/action-button.mjs";
 export * from "./components/form/form.mjs";
@@ -83,7 +85,6 @@ export * from "./components/form/credential-button.mjs";
 export * from "./components/form/wizard.mjs";
 export * from "./components/form/input-group.mjs";
 export * from "./components/form/checklist.mjs";
-export * from "./components/form/choice-cards.mjs";
 export * from "./components/form/shadow-reload.mjs";
 export * from "./components/form/button.mjs";
 export * from "./components/form/field-set.mjs";

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

@@ -0,0 +1,51 @@
+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 ControlBarSpacer;
+
+describe("ControlBarSpacer", function () {
+  before(function (done) {
+    initJSDOM()
+      .then(() =>
+        import("../../../../source/components/form/control-bar-spacer.mjs"),
+      )
+      .then((m) => {
+        ControlBarSpacer = m.ControlBarSpacer;
+        done();
+      })
+      .catch((e) => done(e));
+  });
+
+  it("should create a control bar spacer element", function () {
+    const spacer = document.createElement("monster-control-bar-spacer");
+
+    expect(spacer).to.be.instanceof(ControlBarSpacer);
+  });
+
+  it("should render a non-interactive separator line", function () {
+    const spacer = document.createElement("monster-control-bar-spacer");
+    document.getElementById("mocks").appendChild(spacer);
+
+    const separator = spacer.shadowRoot.querySelector(
+      '[data-monster-role="separator"]',
+    );
+
+    expect(separator).to.be.instanceof(HTMLDivElement);
+    expect(spacer.getAttribute("aria-hidden")).to.equal("true");
+  });
+
+  it("should define spacer dimensions through css variables", function () {
+    const cssText = ControlBarSpacer.getCSSStyleSheet()
+      .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+      .map((rule) => rule.cssText)
+      .join("\n");
+
+    expect(cssText).to.contain("--monster-control-bar-spacer-inline-size");
+    expect(cssText).to.contain("--monster-control-bar-spacer-block-size");
+    expect(cssText).to.contain("pointer-events: none");
+  });
+});

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

@@ -27,9 +27,12 @@ describe("ControlBar", function () {
     this.timeout(5000);
     initJSDOM()
       .then(() => {
-        import("../../../../source/components/form/control-bar.mjs")
+        Promise.all([
+          import("../../../../source/components/form/control-bar.mjs"),
+          import("../../../../source/components/form/control-bar-spacer.mjs"),
+        ])
           .then((m) => {
-            ControlBar = m.ControlBar;
+            ControlBar = m[0].ControlBar;
             done();
           })
           .catch((e) => done(e));
@@ -126,6 +129,13 @@ describe("ControlBar", function () {
     expect(cssText).to.contain("appearance: none");
     expect(cssText).to.contain("--monster-select-container-overflow: hidden");
     expect(cssText).to.contain("::slotted(monster-input-group)");
+    expect(cssText).to.contain("::slotted(monster-control-bar-spacer)");
+    expect(cssText).to.contain(
+      "--monster-control-bar-spacer-line-block-size: 60%",
+    );
+    expect(cssText).to.contain(
+      "--monster-control-bar-spacer-line-inline-size: calc(100% - 1rem)",
+    );
   });
 
   it("should join adjacent borders using the smaller computed border width", async function () {
@@ -301,6 +311,175 @@ describe("ControlBar", function () {
     }
   });
 
+  it("should size inline spacer lines from adjacent border widths", 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="spacer-border-bar-wrapper">
+          <monster-control-bar id="spacer-border-bar">
+            <button id="spacer-border-left">A</button>
+            <monster-control-bar-spacer id="spacer-border-spacer"></monster-control-bar-spacer>
+            <input id="spacer-border-right">
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("spacer-border-bar-wrapper");
+      const left = document.getElementById("spacer-border-left");
+      const spacer = document.getElementById("spacer-border-spacer");
+      const right = document.getElementById("spacer-border-right");
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "300px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 300,
+      });
+
+      for (const control of [left, spacer, right]) {
+        Object.defineProperty(control, "offsetWidth", {
+          configurable: true,
+          value: 40,
+        });
+        Object.defineProperty(control, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        control.getBoundingClientRect = () => ({
+          width: 40,
+          height: 30,
+          top: 0,
+          right: 40,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      left.style.borderRightWidth = "4px";
+      right.style.borderLeftWidth = "2px";
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(
+        spacer.style.getPropertyValue(
+          "--monster-control-bar-spacer-line-inline-size",
+        ),
+      ).to.equal("4px");
+      expect(spacer.style.marginLeft).to.equal("");
+      expect(right.style.marginLeft).to.equal("");
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
+  it("should size popper spacer lines from adjacent border widths", 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="popper-spacer-border-bar-wrapper">
+          <monster-control-bar id="popper-spacer-border-bar">
+            <button id="popper-spacer-border-top">A</button>
+            <monster-control-bar-spacer id="popper-spacer-border-spacer"></monster-control-bar-spacer>
+            <input id="popper-spacer-border-bottom">
+          </monster-control-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("popper-spacer-border-bar-wrapper");
+      const top = document.getElementById("popper-spacer-border-top");
+      const spacer = document.getElementById("popper-spacer-border-spacer");
+      const bottom = document.getElementById("popper-spacer-border-bottom");
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "1px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 1,
+      });
+
+      for (const control of [top, spacer, bottom]) {
+        Object.defineProperty(control, "offsetWidth", {
+          configurable: true,
+          value: 40,
+        });
+        Object.defineProperty(control, "offsetHeight", {
+          configurable: true,
+          value: 30,
+        });
+        control.getBoundingClientRect = () => ({
+          width: 40,
+          height: 30,
+          top: 0,
+          right: 40,
+          bottom: 30,
+          left: 0,
+          x: 0,
+          y: 0,
+          toJSON: () => {},
+        });
+      }
+
+      top.style.borderBottomWidth = "2px";
+      bottom.style.borderTopWidth = "5px";
+
+      await flushFrames();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(spacer.getAttribute("slot")).to.equal("popper");
+      expect(
+        spacer.style.getPropertyValue(
+          "--monster-control-bar-spacer-line-block-size",
+        ),
+      ).to.equal("5px");
+      expect(spacer.style.marginTop).to.equal("");
+      expect(bottom.style.marginTop).to.equal("");
+    } finally {
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
+
   it("should move overflowing mixed controls into the popper", async function () {
     const OriginalResizeObserver = window.ResizeObserver;
     const originalGlobalResizeObserver = globalThis.ResizeObserver;

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

@@ -110,6 +110,8 @@ describe('Select', function () {
 
             import("../../../../source/components/host/host.mjs").then(() => {
                 return import("../../../../source/components/form/popper-button.mjs");
+            }).then(() => {
+                return import("../../../../source/components/form/control-bar.mjs");
             }).then(() => {
                 return import("../../../../source/components/form/select.mjs");
             }).then((m) => {
@@ -322,6 +324,52 @@ describe('Select', function () {
             }, 20);
         });
 
+        it('should use fixed positioning inside a control bar', function (done) {
+            const mocks = document.getElementById('mocks');
+            mocks.innerHTML = '<monster-control-bar id="select-bar"></monster-control-bar>';
+
+            const bar = document.getElementById('select-bar');
+            const select = document.createElement('monster-select');
+
+            select.setOption('options', [
+                {label: 'Alpha', value: 'alpha'},
+                {label: 'Beta', value: 'beta'}
+            ]);
+
+            bar.appendChild(select);
+
+            const shadowRoot = select.shadowRoot;
+            const control = shadowRoot.querySelector('[data-monster-role=control]');
+            const popper = shadowRoot.querySelector('[data-monster-role=popper]');
+
+            control.getBoundingClientRect = () => ({
+                width: 120,
+                height: 40,
+                top: 100,
+                left: 40,
+                right: 160,
+                bottom: 140,
+                x: 40,
+                y: 100
+            });
+
+            setTimeout(() => {
+                try {
+                    shadowRoot.querySelector('[data-monster-role=container]').click();
+                    setTimeout(() => {
+                        try {
+                            expect(popper.style.position).to.equal('fixed');
+                            done();
+                        } catch (e) {
+                            done(e);
+                        }
+                    }, 80);
+                } catch (e) {
+                    done(e);
+                }
+            }, 100);
+        });
+
         it('should keep the option list height tight for short lists', function () {
             const result = resolveSelectListDimension({
                 visibleOptionHeights: [28, 28],