@schukai/monster 4.147.1 → 4.148.1

package/test/cases/components/form/choice-cards.mjs

@@ -132,6 +132,86 @@ describe("ChoiceCards", function () {
     cards.shadowRoot.querySelector('[data-choice-value="api"]').click();
   });
 
+  it("toggles multiple cards when the multiple option is enabled", function () {
+    const cards = document.createElement("monster-choice-cards");
+    cards.setOption("multiple", true);
+    cards.setItems([
+      { value: "assets", label: "Project assets" },
+      { value: "api", label: "API collection" },
+      { value: "manual", label: "Manual" },
+    ]);
+
+    const changes = [];
+    cards.addEventListener("monster-change", (event) => {
+      changes.push(event.detail);
+    });
+
+    document.getElementById("test").appendChild(cards);
+
+    expect(
+      cards.shadowRoot
+        .querySelector('[data-monster-role="control"]')
+        .getAttribute("role"),
+    ).is.equal("group");
+    expect(
+      cards.shadowRoot
+        .querySelector('[data-choice-value="assets"]')
+        .getAttribute("role"),
+    ).is.equal("checkbox");
+
+    cards.shadowRoot.querySelector('[data-choice-value="assets"]').click();
+    cards.shadowRoot.querySelector('[data-choice-value="api"]').click();
+    cards.shadowRoot.querySelector('[data-choice-value="assets"]').click();
+
+    expect(cards.value).deep.equal(["api"]);
+    expect(
+      cards.shadowRoot
+        .querySelector('[data-choice-value="assets"]')
+        .getAttribute("aria-checked"),
+    ).is.equal("false");
+    expect(
+      cards.shadowRoot
+        .querySelector('[data-choice-value="api"]')
+        .getAttribute("aria-checked"),
+    ).is.equal("true");
+    expect(changes.length).is.equal(3);
+    expect(changes[0].value).deep.equal(["assets"]);
+    expect(changes[0].selected).is.equal(true);
+    expect(changes[2].value).deep.equal(["api"]);
+    expect(changes[2].selected).is.equal(false);
+  });
+
+  it("reads multiple values from the value attribute", function () {
+    document.getElementById("test").innerHTML = `
+      <monster-choice-cards
+        id="multi-attribute"
+        value="assets::api"
+        data-monster-option-multiple="true"
+        data-monster-options='{
+          "items": [
+            { "value": "assets", "label": "Assets" },
+            { "value": "api", "label": "API" },
+            { "value": "manual", "label": "Manual" }
+          ]
+        }'
+      ></monster-choice-cards>
+    `;
+
+    const cards = document.getElementById("multi-attribute");
+
+    expect(cards.value).deep.equal(["assets", "api"]);
+    expect(
+      cards.shadowRoot
+        .querySelector('[data-choice-value="assets"]')
+        .getAttribute("aria-checked"),
+    ).is.equal("true");
+    expect(
+      cards.shadowRoot
+        .querySelector('[data-choice-value="manual"]')
+        .getAttribute("aria-checked"),
+    ).is.equal("false");
+  });
+
   it("reads from and writes back to a form datasource", async function () {
     this.timeout(6000);
 
@@ -177,6 +257,80 @@ describe("ChoiceCards", function () {
     await waitForCondition(() => datasource.data?.[0]?.source === "api");
   });
 
+  it("writes multiple values back to a form datasource", async function () {
+    this.timeout(6000);
+
+    document.getElementById("test").innerHTML = `
+      <monster-datasource-dom id="multi-choice-ds">
+        <script type="application/json">
+          [
+            {
+              "sources": []
+            }
+          ]
+        </script>
+      </monster-datasource-dom>
+      <monster-form
+        id="multi-choice-form"
+        data-monster-option-datasource-selector="#multi-choice-ds"
+        data-monster-option-mapping-data=""
+        data-monster-option-mapping-index="0"
+      >
+        <monster-choice-cards
+          id="multi-choice-source"
+          data-monster-attributes="value path:data.sources"
+          data-monster-bind="path:data.sources"
+          data-monster-option-multiple="true"
+          data-monster-options='{
+            "items": [
+              { "value": "assets", "label": "Assets" },
+              { "value": "api", "label": "API" },
+              { "value": "manual", "label": "Manual" }
+            ]
+          }'
+        ></monster-choice-cards>
+      </monster-form>
+    `;
+
+    const datasource = document.getElementById("multi-choice-ds");
+    const cards = document.getElementById("multi-choice-source");
+
+    await waitForCondition(() => Array.isArray(datasource.data?.[0]?.sources));
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    cards.select("assets");
+    await waitForCondition(
+      () => JSON.stringify(datasource.data?.[0]?.sources) === '["assets"]',
+    );
+
+    cards.select("api");
+
+    await waitForCondition(
+      () => JSON.stringify(datasource.data?.[0]?.sources) === '["assets","api"]',
+    );
+  });
+
+  it("submits multiple values through form data", function () {
+    const form = document.createElement("form");
+    const cards = document.createElement("monster-choice-cards");
+    cards.setAttribute("name", "sources");
+    cards.setOption("multiple", true);
+    cards.setItems([
+      { value: "assets", label: "Project assets" },
+      { value: "api", label: "API collection" },
+      { value: "manual", label: "Manual" },
+    ]);
+
+    form.appendChild(cards);
+    document.getElementById("test").appendChild(form);
+
+    cards.select("assets");
+    cards.select("api");
+
+    const formData = new window.FormData(form);
+    expect(formData.getAll("sources")).deep.equal(["assets::api"]);
+  });
+
   it("does not select disabled items", function () {
     const cards = document.createElement("monster-choice-cards");
     cards.setItems([
@@ -189,4 +343,24 @@ describe("ChoiceCards", function () {
 
     expect(cards.value).is.equal(null);
   });
+
+  it("does not toggle disabled items in multiple mode", function () {
+    const cards = document.createElement("monster-choice-cards");
+    cards.setOption("multiple", true);
+    cards.setItems([
+      { value: "assets", label: "Project assets" },
+      { value: "api", label: "API collection", disabled: true },
+    ]);
+
+    document.getElementById("test").appendChild(cards);
+    cards.select("assets");
+    cards.select("api");
+
+    expect(cards.value).deep.equal(["assets"]);
+    expect(
+      cards.shadowRoot
+        .querySelector('[data-choice-value="api"]')
+        .getAttribute("aria-checked"),
+    ).is.equal("false");
+  });
 });

package/test/cases/components/form/floating-ui.mjs

@@ -5,6 +5,7 @@ let expect = chai.expect;
 
 let resolveClippingBoundaryElement;
 let applyAdaptiveFloatingElementSize;
+let applyFloatingReferenceVisibility;
 let createVisibilityRecoveryConfig;
 let getFloatingVisibleRatio;
 
@@ -19,6 +20,7 @@ describe("form floating-ui boundary resolution", function () {
 			.then((m) => {
 				resolveClippingBoundaryElement = m.resolveClippingBoundaryElement;
 				applyAdaptiveFloatingElementSize = m.applyAdaptiveFloatingElementSize;
+				applyFloatingReferenceVisibility = m.applyFloatingReferenceVisibility;
 				createVisibilityRecoveryConfig = m.createVisibilityRecoveryConfig;
 				getFloatingVisibleRatio = m.getFloatingVisibleRatio;
 				done();
@@ -169,7 +171,8 @@ describe("form floating-ui boundary resolution", function () {
 
 		popper.style.maxHeight = "300px";
 		content.setAttribute("part", "content");
-		content.textContent = "A long help text that still needs one readable line.";
+		content.textContent =
+			"A long help text that still needs one readable line.";
 		content.style.fontSize = "16px";
 		content.style.lineHeight = "24px";
 		popper.appendChild(content);
@@ -476,4 +479,48 @@ describe("form floating-ui boundary resolution", function () {
 			"arrow",
 		]);
 	});
+
+	it("should hide a floating element while its reference is clipped", function () {
+		const reference = document.createElement("div");
+		const popper = document.createElement("div");
+		reference.getBoundingClientRect = () => ({
+			top: -100,
+			left: 10,
+			right: 110,
+			bottom: -50,
+			width: 100,
+			height: 50,
+			x: 10,
+			y: -100,
+		});
+
+		const visible = applyFloatingReferenceVisibility(reference, popper);
+
+		expect(visible).to.equal(false);
+		expect(popper.style.visibility).to.equal("hidden");
+		expect(popper.dataset.monsterReferenceHidden).to.equal("true");
+	});
+
+	it("should restore a floating element when its reference is visible again", function () {
+		const reference = document.createElement("div");
+		const popper = document.createElement("div");
+		reference.getBoundingClientRect = () => ({
+			top: 10,
+			left: 10,
+			right: 110,
+			bottom: 60,
+			width: 100,
+			height: 50,
+			x: 10,
+			y: 10,
+		});
+		popper.dataset.monsterReferenceHidden = "true";
+		popper.style.visibility = "hidden";
+
+		const visible = applyFloatingReferenceVisibility(reference, popper);
+
+		expect(visible).to.equal(true);
+		expect(popper.style.visibility).to.equal("");
+		expect(popper.dataset.monsterReferenceHidden).to.equal(undefined);
+	});
 });

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

@@ -86,6 +86,17 @@ function waitForCondition(check, {timeout = 4000, interval = 25} = {}) {
     });
 }
 
+function configureRemotePaginatedSelect(select) {
+    select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+    select.setOption('filter.mode', 'remote');
+    select.setOption('mapping.selector', 'items.*');
+    select.setOption('mapping.labelTemplate', '${name}');
+    select.setOption('mapping.valueTemplate', '${id}');
+    select.setOption('mapping.total', 'pagination.total');
+    select.setOption('mapping.currentPage', 'pagination.page');
+    select.setOption('mapping.objectsPerPage', 'pagination.perPage');
+}
+
 let Select,
     SelectStyleSheet,
     getDefaultSelectPopperPositionProfile,
@@ -397,6 +408,46 @@ describe('Select', function () {
         }
     });
 
+    it('should keep the floating layout queue usable after cancelling a running reentrant job', async function () {
+        const cancelledPopper = document.createElement('div');
+        const nextPopper = document.createElement('div');
+        const releasePosition = createDeferred();
+        let positionStarted = false;
+        let positionFinished = false;
+        let nextMutationCount = 0;
+
+        enqueueFloatingLayout({
+            popperElement: cancelledPopper,
+            reason: FLOATING_LAYOUT_REASON.POSITION,
+            position: async () => {
+                positionStarted = true;
+                await releasePosition.promise;
+                await enqueueFloatingLayout({
+                    popperElement: cancelledPopper,
+                    reason: FLOATING_LAYOUT_REASON.SETTLE
+                });
+                positionFinished = true;
+            }
+        });
+
+        await waitForCondition(() => positionStarted === true);
+        cancelFloatingLayout(cancelledPopper);
+        releasePosition.resolve();
+        await waitForCondition(() => positionFinished === true);
+        await new Promise(resolve => setTimeout(resolve, 0));
+
+        enqueueFloatingLayout({
+            popperElement: nextPopper,
+            reason: FLOATING_LAYOUT_REASON.POSITION,
+            mutate: () => {
+                nextMutationCount += 1;
+            }
+        });
+        await flushFloatingLayoutQueueForTests();
+
+        expect(nextMutationCount).to.equal(1);
+    });
+
     it('should flush reentrant floating layout queue jobs through the watchdog', async function () {
         const originalRequestAnimationFrame = global.requestAnimationFrame;
         const originalCancelAnimationFrame = global.cancelAnimationFrame;
@@ -738,7 +789,7 @@ describe('Select', function () {
             expect(popper.style.display).to.equal('block');
         });
 
-        it('should allow the popper to become wider than a narrow control', function (done) {
+        it('should allow the popper to become wider than a narrow control', async function () {
             const mocks = document.getElementById('mocks');
             const select = document.createElement('monster-select');
 
@@ -764,23 +815,12 @@ describe('Select', function () {
                 y: 100
             });
 
-            setTimeout(() => {
-                try {
-                    shadowRoot.querySelector('[data-monster-role=container]').click();
-                    setTimeout(() => {
-                        try {
-                            expect(popper.style.minWidth).to.equal('240px');
-                            expect(popper.dataset.monsterWidthBehavior).to.equal('preferred');
-                            expect(popper.dataset.monsterPreferredWidth).to.equal('240');
-                            done();
-                        } catch (e) {
-                            done(e);
-                        }
-                    }, 80);
-                } catch (e) {
-                    done(e);
-                }
-            }, 20);
+            await new Promise(resolve => setTimeout(resolve, 20));
+            shadowRoot.querySelector('[data-monster-role=container]').click();
+            await waitForCondition(() => popper.style.minWidth === '240px');
+
+            expect(popper.dataset.monsterWidthBehavior).to.equal('preferred');
+            expect(popper.dataset.monsterPreferredWidth).to.equal('240');
         });
 
         it('should use fixed positioning inside a control bar', function (done) {
@@ -1136,12 +1176,48 @@ describe('Select', function () {
             ]);
         });
 
-        it('should prefer the larger live viewport metrics after a resize', function () {
+        it('should use the reduced visual viewport while a soft keyboard is open', function () {
+            const result = resolveSelectViewportMetrics({
+                layoutWidth: 390,
+                layoutHeight: 844,
+                visualWidth: 390,
+                visualHeight: 480,
+                offsetLeft: 0,
+                offsetTop: 0,
+                padding: 12
+            });
+
+            expect(result.width).to.equal(390);
+            expect(result.height).to.equal(480);
+            expect(result.left).to.equal(0);
+            expect(result.top).to.equal(0);
+            expect(result.padding).to.equal(12);
+        });
+
+        it('should preserve visual viewport offsets for zoomed mobile layouts', function () {
+            const result = resolveSelectViewportMetrics({
+                layoutWidth: 1200,
+                layoutHeight: 900,
+                visualWidth: 600,
+                visualHeight: 450,
+                offsetLeft: 20,
+                offsetTop: 30,
+                padding: 12
+            });
+
+            expect(result.width).to.equal(600);
+            expect(result.height).to.equal(450);
+            expect(result.left).to.equal(20);
+            expect(result.top).to.equal(30);
+            expect(result.padding).to.equal(12);
+        });
+
+        it('should fall back to layout viewport metrics without a visual viewport', function () {
             const result = resolveSelectViewportMetrics({
                 layoutWidth: 1400,
                 layoutHeight: 900,
-                visualWidth: 1024,
-                visualHeight: 700,
+                visualWidth: 0,
+                visualHeight: 0,
                 offsetLeft: 20,
                 offsetTop: 30,
                 padding: 12
@@ -1149,8 +1225,8 @@ describe('Select', function () {
 
             expect(result.width).to.equal(1400);
             expect(result.height).to.equal(900);
-            expect(result.left).to.equal(20);
-            expect(result.top).to.equal(30);
+            expect(result.left).to.equal(0);
+            expect(result.top).to.equal(0);
             expect(result.padding).to.equal(12);
         });
 
@@ -1487,6 +1563,142 @@ describe('Select', function () {
                     .catch((e) => done(e));
             }, 50);
         });
+
+        it('should ignore a remote page response that settles after reset', async function () {
+            this.timeout(5000);
+
+            const deferredResponse = createDeferred();
+            let requestStarted = false;
+            global['fetch'] = function () {
+                requestStarted = true;
+                return deferredResponse.promise;
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureRemotePaginatedSelect(select);
+            mocks.appendChild(select);
+
+            const request = select.fetch('https://example.com/items?filter=old&page=3');
+            await waitForCondition(() => requestStarted === true);
+
+            select.reset();
+            await waitForCondition(() => {
+                return select.getOption('options').length === 0 && select.getOption('total') === null;
+            });
+
+            deferredResponse.resolve(
+                await createJsonResponse({
+                    items: [{id: 'old-3', name: 'Old page 3'}],
+                    pagination: {
+                        total: 9,
+                        page: 3,
+                        perPage: 1
+                    }
+                })
+            );
+            await request;
+            await new Promise(resolve => setTimeout(resolve, 50));
+
+            const pagination = select.shadowRoot.querySelector('[data-monster-role=pagination]');
+            expect(select.getOption('options')).to.deep.equal([]);
+            expect(select.getOption('total')).to.equal(null);
+            expect(pagination.style.display).to.equal('none');
+            expect(pagination.getOption('currentPage')).to.equal(null);
+            expect(pagination.getOption('pages')).to.equal(null);
+        });
+
+        it('should ignore a remote page response after disconnect and reconnect', async function () {
+            this.timeout(5000);
+
+            const deferredResponse = createDeferred();
+            let requestStarted = false;
+            global['fetch'] = function () {
+                requestStarted = true;
+                return deferredResponse.promise;
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureRemotePaginatedSelect(select);
+            mocks.appendChild(select);
+
+            const request = select.fetch('https://example.com/items?filter=old&page=2');
+            await waitForCondition(() => requestStarted === true);
+
+            select.remove();
+            deferredResponse.resolve(
+                await createJsonResponse({
+                    items: [{id: 'old-2', name: 'Old page 2'}],
+                    pagination: {
+                        total: 4,
+                        page: 2,
+                        perPage: 1
+                    }
+                })
+            );
+            await request;
+            mocks.appendChild(select);
+            await new Promise(resolve => setTimeout(resolve, 50));
+
+            const pagination = select.shadowRoot.querySelector('[data-monster-role=pagination]');
+            expect(select.getOption('options')).to.deep.equal([]);
+            expect(select.getOption('total')).to.equal(null);
+            expect(pagination.style.display).to.equal('none');
+            expect(pagination.getOption('currentPage')).to.equal(null);
+            expect(pagination.getOption('pages')).to.equal(null);
+        });
+
+        it('should keep the newest remote page when responses settle out of order', async function () {
+            this.timeout(5000);
+
+            const page2Response = createDeferred();
+            const page3Response = createDeferred();
+            const requests = [];
+            global['fetch'] = function (url) {
+                const requestUrl = String(url);
+                requests.push(requestUrl);
+                return requestUrl.includes('page=2') ? page2Response.promise : page3Response.promise;
+            };
+
+            const mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            configureRemotePaginatedSelect(select);
+            mocks.appendChild(select);
+
+            const request2 = select.fetch('https://example.com/items?filter=all&page=2');
+            const request3 = select.fetch('https://example.com/items?filter=all&page=3');
+            await waitForCondition(() => requests.length === 2);
+
+            page3Response.resolve(
+                await createJsonResponse({
+                    items: [{id: 'page-3', name: 'Page 3'}],
+                    pagination: {
+                        total: 3,
+                        page: 3,
+                        perPage: 1
+                    }
+                })
+            );
+            await request3;
+
+            page2Response.resolve(
+                await createJsonResponse({
+                    items: [{id: 'page-2', name: 'Page 2'}],
+                    pagination: {
+                        total: 3,
+                        page: 2,
+                        perPage: 1
+                    }
+                })
+            );
+            await request2;
+
+            const pagination = select.shadowRoot.querySelector('[data-monster-role=pagination]');
+            expect(select.getOption('options').map(option => option.value)).to.deep.equal(['page-3']);
+            expect(pagination.getOption('currentPage')).to.equal(3);
+            expect(pagination.getOption('pages')).to.equal(3);
+        });
     });
 
     describe('document.createElement()', function () {
@@ -2488,6 +2700,47 @@ describe('Select', function () {
             expect(requests).to.have.length(1);
         });
 
+        it('should cancel a pending remote filter request on reset', async function () {
+            this.timeout(5000);
+
+            const mocks = document.getElementById('mocks');
+            const requests = [];
+            global['fetch'] = function (url) {
+                requests.push(String(url));
+                return createJsonResponse({
+                    items: [{id: 'alpha', name: 'Alpha'}],
+                    pagination: {
+                        total: 1,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            configureRemotePaginatedSelect(select);
+            select.setOption('filter.position', 'popper');
+            mocks.appendChild(select);
+
+            await waitForCondition(() => {
+                return select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]') instanceof HTMLInputElement;
+            });
+
+            const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter][name="popper-filter"]');
+            filterInput.value = 'alpha';
+            filterInput.dispatchEvent(new Event('input', {
+                bubbles: true,
+                composed: true
+            }));
+            select.reset();
+
+            await new Promise(resolve => setTimeout(resolve, 260));
+
+            expect(requests).to.deep.equal([]);
+            expect(select.getOption('options')).to.deep.equal([]);
+            expect(select.getOption('total')).to.equal(null);
+        });
+
         it('should keep unresolved lookup values visible and mark their badge', function (done) {
             this.timeout(3000);