@schukai/monster 4.141.3 → 4.142.1

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

@@ -194,8 +194,9 @@ describe("ButtonBar", function () {
         return originalSetAttribute(name, value);
       };
 
-      resizeObserver.triggerResize([]);
-      resizeObserver.triggerResize([]);
+      const wrapperResizeEntry = { target: wrapper };
+      resizeObserver.triggerResize([wrapperResizeEntry]);
+      resizeObserver.triggerResize([wrapperResizeEntry]);
 
       expect(scheduledCallbacks.length).to.equal(1);
       await flushFrames();
@@ -210,4 +211,115 @@ describe("ButtonBar", function () {
       globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
     }
   });
+
+  it("should ignore resize feedback caused by its own layout writes", async function () {
+    const OriginalResizeObserver = window.ResizeObserver;
+    const originalGlobalResizeObserver = globalThis.ResizeObserver;
+    const originalRequestAnimationFrame = window.requestAnimationFrame;
+    const originalGlobalRequestAnimationFrame = globalThis.requestAnimationFrame;
+
+    class TrackingResizeObserver extends ResizeObserverMock {
+      static instances = [];
+
+      constructor(callback) {
+        super(callback);
+        TrackingResizeObserver.instances.push(this);
+      }
+    }
+
+    const scheduledCallbacks = [];
+    const flushOneFrame = async () => {
+      const callback = scheduledCallbacks.shift();
+      if (callback instanceof Function) {
+        callback();
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      }
+    };
+    const flushFrames = async () => {
+      while (scheduledCallbacks.length > 0) {
+        await flushOneFrame();
+      }
+    };
+
+    try {
+      window.ResizeObserver = TrackingResizeObserver;
+      globalThis.ResizeObserver = TrackingResizeObserver;
+      window.requestAnimationFrame = (callback) => {
+        scheduledCallbacks.push(callback);
+        return scheduledCallbacks.length;
+      };
+      globalThis.requestAnimationFrame = window.requestAnimationFrame;
+
+      const mocks = document.getElementById("mocks");
+      mocks.innerHTML = `
+        <div id="feedback-bar-wrapper">
+          <monster-button-bar id="feedback-bar">
+            <button type="button">One</button>
+            <button type="button">Two</button>
+            <button type="button">Three</button>
+          </monster-button-bar>
+        </div>
+      `;
+
+      const wrapper = document.getElementById("feedback-bar-wrapper");
+      const bar = document.getElementById("feedback-bar");
+
+      wrapper.style.boxSizing = "border-box";
+      wrapper.style.width = "80px";
+      Object.defineProperty(wrapper, "clientWidth", {
+        configurable: true,
+        value: 80,
+      });
+
+      const buttons = Array.from(bar.querySelectorAll("button"));
+      for (const button of buttons) {
+        Object.defineProperty(button, "offsetWidth", {
+          configurable: true,
+          value: 48,
+        });
+        button.getBoundingClientRect = () => ({
+          width: 48,
+          height: 32,
+          top: 0,
+          left: 0,
+          right: 48,
+          bottom: 32,
+          x: 0,
+          y: 0,
+        });
+      }
+
+      const switchButton = bar.shadowRoot.querySelector(
+        '[data-monster-role="switch"]',
+      );
+      Object.defineProperty(switchButton, "offsetWidth", {
+        configurable: true,
+        value: 20,
+      });
+
+      await flushOneFrame();
+
+      const resizeObserver = TrackingResizeObserver.instances.find((observer) =>
+        observer.elements.includes(wrapper),
+      );
+      expect(resizeObserver).to.exist;
+
+      const suppressedFrameCount = scheduledCallbacks.length;
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      expect(scheduledCallbacks.length).to.equal(suppressedFrameCount);
+
+      await flushFrames();
+
+      resizeObserver.triggerResize([{ target: wrapper }]);
+      expect(scheduledCallbacks.length).to.equal(1);
+
+      await flushFrames();
+      expect(scheduledCallbacks.length).to.equal(0);
+    } finally {
+      window.ResizeObserver = OriginalResizeObserver;
+      globalThis.ResizeObserver = originalGlobalResizeObserver;
+      window.requestAnimationFrame = originalRequestAnimationFrame;
+      globalThis.requestAnimationFrame = originalGlobalRequestAnimationFrame;
+    }
+  });
 });

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

@@ -93,7 +93,11 @@ let Select,
     resolveSelectPopperWidthConstraints,
     resolveSelectVisibleRect,
     resolveSelectViewportMetrics,
-    fetchReference;
+    fetchReference,
+    FLOATING_LAYOUT_REASON,
+    cancelFloatingLayout,
+    enqueueFloatingLayout,
+    flushFloatingLayoutQueueForTests;
 
 describe('Select', function () {
 
@@ -124,6 +128,12 @@ describe('Select', function () {
                 return import("../../../../source/components/form/stylesheet/select.mjs");
             }).then((m) => {
                 SelectStyleSheet = m['SelectStyleSheet'];
+                return import("../../../../source/components/form/util/floating-layout-queue.mjs");
+            }).then((m) => {
+                FLOATING_LAYOUT_REASON = m['FLOATING_LAYOUT_REASON'];
+                cancelFloatingLayout = m['cancelFloatingLayout'];
+                enqueueFloatingLayout = m['enqueueFloatingLayout'];
+                flushFloatingLayoutQueueForTests = m['flushFloatingLayoutQueueForTests'];
                 done()
             }).catch(e => done(e))
 
@@ -138,9 +148,242 @@ describe('Select', function () {
             : "";
 
         expect(cssText).to.contain("--monster-select-container-overflow");
+        expect(cssText).to.contain("--monster-select-container-align-self");
+        expect(cssText).to.contain("--monster-select-container-block-size");
         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");
+        expect(cssText.replace(/\s+/g, '')).to.contain('z-index:var(--monster-z-index-popover)');
+    });
+
+    it('should deduplicate floating layout queue jobs by popper element', async function () {
+        const popper = document.createElement('div');
+        const reasons = [];
+        let mutateCount = 0;
+
+        enqueueFloatingLayout({
+            popperElement: popper,
+            reason: FLOATING_LAYOUT_REASON.RESIZE,
+            mutate: (measurement, reason) => {
+                mutateCount += 1;
+                reasons.push(reason);
+            }
+        });
+        enqueueFloatingLayout({
+            popperElement: popper,
+            reason: FLOATING_LAYOUT_REASON.POSITION,
+            mutate: (measurement, reason) => {
+                mutateCount += 1;
+                reasons.push(reason);
+            }
+        });
+
+        await flushFloatingLayoutQueueForTests();
+
+        expect(mutateCount).to.equal(1);
+        expect(reasons[0] & FLOATING_LAYOUT_REASON.RESIZE).to.equal(FLOATING_LAYOUT_REASON.RESIZE);
+        expect(reasons[0] & FLOATING_LAYOUT_REASON.POSITION).to.equal(FLOATING_LAYOUT_REASON.POSITION);
+    });
+
+    it('should keep independent floating layout queue jobs for different poppers', async function () {
+        const firstPopper = document.createElement('div');
+        const secondPopper = document.createElement('div');
+        const flushed = [];
+
+        enqueueFloatingLayout({
+            popperElement: firstPopper,
+            reason: FLOATING_LAYOUT_REASON.RESIZE,
+            mutate: () => {
+                flushed.push('first');
+            }
+        });
+        enqueueFloatingLayout({
+            popperElement: secondPopper,
+            reason: FLOATING_LAYOUT_REASON.POSITION,
+            mutate: () => {
+                flushed.push('second');
+            }
+        });
+
+        await flushFloatingLayoutQueueForTests();
+
+        expect(flushed).to.deep.equal(['first', 'second']);
+    });
+
+    it('should merge position-only floating layout events without dropping pending mutation', async function () {
+        const popper = document.createElement('div');
+        const flushed = [];
+
+        enqueueFloatingLayout({
+            popperElement: popper,
+            reason: FLOATING_LAYOUT_REASON.CONTENT,
+            mutate: () => {
+                flushed.push('mutate');
+            }
+        });
+        enqueueFloatingLayout({
+            popperElement: popper,
+            reason: FLOATING_LAYOUT_REASON.POSITION,
+            position: () => {
+                flushed.push('position');
+            }
+        });
+
+        await flushFloatingLayoutQueueForTests();
+
+        expect(flushed).to.deep.equal(['mutate', 'position']);
+    });
+
+    it('should defer reentrant floating layout queue jobs to a later flush', async function () {
+        const popper = document.createElement('div');
+        let mutateCount = 0;
+
+        enqueueFloatingLayout({
+            popperElement: popper,
+            reason: FLOATING_LAYOUT_REASON.RESIZE,
+            mutate: () => {
+                mutateCount += 1;
+                enqueueFloatingLayout({
+                    popperElement: popper,
+                    reason: FLOATING_LAYOUT_REASON.SETTLE,
+                    mutate: () => {
+                        mutateCount += 1;
+                    }
+                });
+            }
+        });
+
+        await flushFloatingLayoutQueueForTests();
+        expect(mutateCount).to.equal(1);
+
+        await flushFloatingLayoutQueueForTests();
+        expect(mutateCount).to.equal(2);
+    });
+
+    it('should flush floating layout queue jobs when requestAnimationFrame stalls', async function () {
+        const originalRequestAnimationFrame = global.requestAnimationFrame;
+        const originalCancelAnimationFrame = global.cancelAnimationFrame;
+        const popper = document.createElement('div');
+        let mutateCount = 0;
+
+        try {
+            global.requestAnimationFrame = () => 1;
+            global.cancelAnimationFrame = () => {};
+
+            const promise = enqueueFloatingLayout({
+                popperElement: popper,
+                reason: FLOATING_LAYOUT_REASON.POSITION,
+                mutate: () => {
+                    mutateCount += 1;
+                }
+            });
+
+            await waitForCondition(() => mutateCount === 1);
+            await promise;
+
+            expect(mutateCount).to.equal(1);
+        } finally {
+            global.requestAnimationFrame = originalRequestAnimationFrame;
+            global.cancelAnimationFrame = originalCancelAnimationFrame;
+            await flushFloatingLayoutQueueForTests();
+        }
+    });
+
+    it('should cancel stalled floating layout queue jobs before the watchdog flushes', async function () {
+        const originalRequestAnimationFrame = global.requestAnimationFrame;
+        const originalCancelAnimationFrame = global.cancelAnimationFrame;
+        const popper = document.createElement('div');
+        let mutateCount = 0;
+
+        try {
+            global.requestAnimationFrame = () => 1;
+            global.cancelAnimationFrame = () => {};
+
+            const promise = enqueueFloatingLayout({
+                popperElement: popper,
+                reason: FLOATING_LAYOUT_REASON.POSITION,
+                mutate: () => {
+                    mutateCount += 1;
+                }
+            });
+
+            cancelFloatingLayout(popper);
+            await promise;
+            await new Promise((resolve) => setTimeout(resolve, 80));
+
+            expect(mutateCount).to.equal(0);
+        } finally {
+            global.requestAnimationFrame = originalRequestAnimationFrame;
+            global.cancelAnimationFrame = originalCancelAnimationFrame;
+            await flushFloatingLayoutQueueForTests();
+        }
+    });
+
+    it('should flush reentrant floating layout queue jobs through the watchdog', async function () {
+        const originalRequestAnimationFrame = global.requestAnimationFrame;
+        const originalCancelAnimationFrame = global.cancelAnimationFrame;
+        const popper = document.createElement('div');
+        let mutateCount = 0;
+
+        try {
+            global.requestAnimationFrame = () => 1;
+            global.cancelAnimationFrame = () => {};
+
+            enqueueFloatingLayout({
+                popperElement: popper,
+                reason: FLOATING_LAYOUT_REASON.RESIZE,
+                mutate: () => {
+                    mutateCount += 1;
+                    if (mutateCount === 1) {
+                        enqueueFloatingLayout({
+                            popperElement: popper,
+                            reason: FLOATING_LAYOUT_REASON.SETTLE,
+                            mutate: () => {
+                                mutateCount += 1;
+                            }
+                        });
+                    }
+                }
+            });
+
+            await waitForCondition(() => mutateCount === 2);
+
+            expect(mutateCount).to.equal(2);
+        } finally {
+            global.requestAnimationFrame = originalRequestAnimationFrame;
+            global.cancelAnimationFrame = originalCancelAnimationFrame;
+            await flushFloatingLayoutQueueForTests();
+        }
+    });
+
+    it('should flush many independent floating layout queue jobs in one stalled frame', async function () {
+        const originalRequestAnimationFrame = global.requestAnimationFrame;
+        const originalCancelAnimationFrame = global.cancelAnimationFrame;
+        const poppers = Array.from({length: 8}, () => document.createElement('div'));
+        const flushed = [];
+
+        try {
+            global.requestAnimationFrame = () => 1;
+            global.cancelAnimationFrame = () => {};
+
+            for (const [index, popper] of poppers.entries()) {
+                enqueueFloatingLayout({
+                    popperElement: popper,
+                    reason: FLOATING_LAYOUT_REASON.POSITION,
+                    mutate: () => {
+                        flushed.push(index);
+                    }
+                });
+            }
+
+            await waitForCondition(() => flushed.length === poppers.length);
+
+            expect(flushed).to.deep.equal([0, 1, 2, 3, 4, 5, 6, 7]);
+        } finally {
+            global.requestAnimationFrame = originalRequestAnimationFrame;
+            global.cancelAnimationFrame = originalCancelAnimationFrame;
+            await flushFloatingLayoutQueueForTests();
+        }
     });
 
     describe('With fetch', function () {
@@ -279,6 +522,144 @@ describe('Select', function () {
             mocks.innerHTML = "";
         });
 
+        it('should render the popper outside of the internal control clipping container', function () {
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+
+            select.setOption('options', [
+                {label: 'Alpha', value: 'alpha'},
+                {label: 'Beta', value: 'beta'}
+            ]);
+
+            mocks.appendChild(select);
+
+            const shadowRoot = select.shadowRoot;
+            const control = shadowRoot.querySelector('[data-monster-role=control]');
+            const popper = shadowRoot.querySelector('[data-monster-role=popper]');
+
+            expect(control).to.exist;
+            expect(popper).to.exist;
+            expect(control.contains(popper)).to.equal(false);
+            expect(popper.parentNode).to.equal(shadowRoot);
+        });
+
+        it('should open in a constrained filter bar without a control overflow override', function (done) {
+            const mocks = document.getElementById('mocks');
+            const filterBar = document.createElement('div');
+            const select = document.createElement('monster-select');
+
+            filterBar.style.display = 'grid';
+            filterBar.style.gridTemplateColumns = 'minmax(0, 1fr)';
+            filterBar.style.height = '44px';
+            filterBar.style.overflow = 'hidden';
+
+            select.setOption('options', [
+                {label: 'Alpha', value: 'alpha'},
+                {label: 'Beta', value: 'beta'}
+            ]);
+
+            filterBar.appendChild(select);
+            mocks.appendChild(filterBar);
+
+            const shadowRoot = select.shadowRoot;
+            const control = shadowRoot.querySelector('[data-monster-role=control]');
+            const popper = shadowRoot.querySelector('[data-monster-role=popper]');
+
+            control.style.overflow = 'hidden';
+            control.getBoundingClientRect = () => ({
+                width: 180,
+                height: 40,
+                top: 100,
+                left: 40,
+                right: 220,
+                bottom: 140,
+                x: 40,
+                y: 100
+            });
+
+            setTimeout(() => {
+                try {
+                    shadowRoot.querySelector('[data-monster-role=container]').click();
+                    setTimeout(() => {
+                        try {
+                            expect(control.style.overflow).to.equal('hidden');
+                            expect(control.contains(popper)).to.equal(false);
+                            expect(popper.style.display).to.equal('block');
+                            done();
+                        } catch (e) {
+                            done(e);
+                        }
+                    }, 80);
+                } catch (e) {
+                    done(e);
+                }
+            }, 20);
+        });
+
+        it('should preserve an immediate open intent while configured options render', async function () {
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+
+            mocks.appendChild(select);
+            select.setOption('options', [
+                {label: 'Alpha', value: 'alpha'},
+                {label: 'Beta', value: 'beta'}
+            ]);
+
+            const shadowRoot = select.shadowRoot;
+            const container = shadowRoot.querySelector('[data-monster-role=container]');
+            const popper = shadowRoot.querySelector('[data-monster-role=popper]');
+
+            container.click();
+
+            await waitForCondition(() => {
+                return shadowRoot.querySelectorAll('[data-monster-role=option]').length === 2;
+            });
+            await waitForCondition(() => {
+                return popper.style.display === 'block';
+            });
+
+            expect(popper.style.display).to.equal('block');
+        });
+
+        it('should keep an empty select without popper filter closed', async function () {
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+
+            mocks.appendChild(select);
+
+            const shadowRoot = select.shadowRoot;
+            const container = shadowRoot.querySelector('[data-monster-role=container]');
+            const popper = shadowRoot.querySelector('[data-monster-role=popper]');
+
+            container.click();
+
+            await new Promise((resolve) => setTimeout(resolve, 160));
+
+            expect(popper.style.display).to.not.equal('block');
+        });
+
+        it('should still open an empty select with a popper filter', async function () {
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+
+            select.setOption('filter.mode', 'options');
+            select.setOption('filter.position', 'popper');
+            mocks.appendChild(select);
+
+            const shadowRoot = select.shadowRoot;
+            const container = shadowRoot.querySelector('[data-monster-role=container]');
+            const popper = shadowRoot.querySelector('[data-monster-role=popper]');
+
+            container.click();
+
+            await waitForCondition(() => {
+                return popper.style.display === 'block';
+            });
+
+            expect(popper.style.display).to.equal('block');
+        });
+
         it('should allow the popper to become wider than a narrow control', function (done) {
             const mocks = document.getElementById('mocks');
             const select = document.createElement('monster-select');
@@ -370,6 +751,109 @@ describe('Select', function () {
             }, 100);
         });
 
+        it('should keep the control bar popper width stable while layout observers settle', function (done) {
+            const mocks = document.getElementById('mocks');
+            mocks.innerHTML = '<monster-control-bar id="stable-select-bar"></monster-control-bar>';
+
+            const bar = document.getElementById('stable-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 container = shadowRoot.querySelector('[data-monster-role=container]');
+            const popper = shadowRoot.querySelector('[data-monster-role=popper]');
+            let measuredWidth = 528;
+
+            const getRect = () => ({
+                width: measuredWidth,
+                height: 40,
+                top: 100,
+                left: 40,
+                right: 40 + measuredWidth,
+                bottom: 140,
+                x: 40,
+                y: 100
+            });
+
+            control.getBoundingClientRect = getRect;
+            select.getBoundingClientRect = getRect;
+
+            setTimeout(() => {
+                try {
+                    container.click();
+                    setTimeout(() => {
+                        try {
+                            expect(popper.style.display).to.equal('block');
+                            expect(popper.dataset.monsterPreferredWidth).to.equal('528');
+                            expect(popper.style.width).to.equal('528px');
+                            expect(select.style.flex).to.equal('0 0 528px');
+
+                            measuredWidth = 279;
+                            select.calcAndSetOptionsDimension();
+
+                            expect(popper.dataset.monsterPreferredWidth).to.equal('528');
+                            expect(popper.style.width).to.equal('528px');
+
+                            container.click();
+
+                            setTimeout(() => {
+                                try {
+                                    expect(popper.style.display).to.equal('none');
+                                    expect(select.style.flex).to.equal('');
+                                    expect(select.style.inlineSize).to.equal('');
+                                    expect(select.style.minInlineSize).to.equal('');
+                                    done();
+                                } catch (e) {
+                                    done(e);
+                                }
+                            }, 80);
+                        } catch (e) {
+                            done(e);
+                        }
+                    }, 80);
+                } catch (e) {
+                    done(e);
+                }
+            }, 100);
+        });
+
+        it('should use the same sibling popper structure for derived selects', function () {
+            const tagName = 'issue-460-derived-select';
+            const mocks = document.getElementById('mocks');
+
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, class Issue460DerivedSelect extends Select {
+                    static getTag() {
+                        return tagName;
+                    }
+                });
+            }
+
+            const select = document.createElement(tagName);
+            select.setOption('options', [
+                {label: 'Alpha', value: 'alpha'},
+                {label: 'Beta', value: 'beta'}
+            ]);
+
+            mocks.appendChild(select);
+
+            const shadowRoot = select.shadowRoot;
+            const control = shadowRoot.querySelector('[data-monster-role=control]');
+            const popper = shadowRoot.querySelector('[data-monster-role=popper]');
+
+            expect(control).to.exist;
+            expect(popper).to.exist;
+            expect(control.contains(popper)).to.equal(false);
+            expect(popper.parentNode).to.equal(shadowRoot);
+        });
+
         it('should keep the option list height tight for short lists', function () {
             const result = resolveSelectListDimension({
                 visibleOptionHeights: [28, 28],
@@ -1572,6 +2056,9 @@ describe('Select', function () {
 
             expect(select.getOption('total')).to.equal(0);
             expect(select.getOption('messages.total')).to.equal('');
+            await waitForCondition(() => {
+                return select.getOption('messages.emptyOptions').includes('Please consider modifying the filter');
+            });
             expect(select.getOption('messages.emptyOptions')).to.contain('Please consider modifying the filter');
         });