@schukai/monster 4.138.0 → 4.139.1

package/test/cases/components/form/input-group.mjs

@@ -0,0 +1,37 @@
+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 InputGroup;
+
+describe("InputGroup", function () {
+  before(function (done) {
+    initJSDOM()
+      .then(() => import("../../../../source/components/form/input-group.mjs"))
+      .then((m) => {
+        InputGroup = m.InputGroup;
+        done();
+      })
+      .catch((e) => done(e));
+  });
+
+  it("should create an input group element", function () {
+    const inputGroup = document.createElement("monster-input-group");
+
+    expect(inputGroup).to.be.instanceof(InputGroup);
+  });
+
+  it("should allow the input group to stretch within constrained controls", function () {
+    const cssText = InputGroup.getCSSStyleSheet()
+      .flatMap((styleSheet) => Array.from(styleSheet.cssRules))
+      .map((rule) => rule.cssText)
+      .join("\n");
+
+    expect(cssText).to.contain("display: flex");
+    expect(cssText).to.contain("box-sizing: border-box");
+    expect(cssText).to.contain("height: 100%");
+  });
+});

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) => {
@@ -129,6 +131,18 @@ describe('Select', function () {
         });
     })
 
+    it('should expose compact layout variables for constrained control contexts', function () {
+        const cssText = SelectStyleSheet
+            .cssRules
+            ? Array.from(SelectStyleSheet.cssRules).map((rule) => rule.cssText).join("\n")
+            : "";
+
+        expect(cssText).to.contain("--monster-select-container-overflow");
+        expect(cssText).to.contain("--monster-select-control-padding");
+        expect(cssText).to.contain("--monster-select-selection-margin");
+        expect(cssText).to.contain("--monster-select-selection-flex-wrap");
+    });
+
     describe('With fetch', function () {
 
         beforeEach((done) => {
@@ -310,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],