@schukai/monster 4.139.0 → 4.139.1

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.139.0"}
+{"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.139.1"}

package/source/components/form/select.mjs

@@ -3531,6 +3531,12 @@ function getSelectPopperPositionOptions() {
 		popperOptions.strategy = "fixed";
 	}
 
+	if (isInControlBar.call(this)) {
+		// Popper content rendered outside a 40px control-bar host must be hit-testable
+		// against the viewport instead of the host's compact shadow boundary.
+		popperOptions.strategy = "fixed";
+	}
+
 	return popperOptions;
 }
 
@@ -4873,6 +4879,15 @@ function show() {
 		});
 }
 
+/**
+ * @private
+ * @return {boolean}
+ */
+function isInControlBar() {
+	return this.closest("monster-control-bar,monster-button-bar") instanceof
+		HTMLElement;
+}
+
 /**
  * @private
  */

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],