npm - @watermarkinsights/ripple - Versions diffs - 4.0.0-9 → 4.0.0 - Mend

@watermarkinsights/ripple 4.0.0-9 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (217) hide show

package/dist/collection/components/wm-menuitem/wm-menuitem.js CHANGED Viewed

@@ -96,7 +96,7 @@ export class Menuitem {
     }
   }
   render() {
-    return (h(Host, { tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { class: `wrapper ${this.focused && this.isKeying ? "focus" : ""}`, "aria-disabled": this.disabled ? "true" : null }, h("span", { ref: (el) => (this.iconEl = el) }), h("slot", null), this.description ? h("div", { class: "description" }, this.description) : "")));
+    return (h(Host, { tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { class: `wrapper ${this.focused && this.isKeying ? "focus" : ""}`, "aria-disabled": this.disabled ? "true" : null }, h("span", { ref: (el) => (this.iconEl = el) }), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
   }
   static get is() { return "wm-menuitem"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-option/wm-option.css CHANGED Viewed

@@ -100,12 +100,7 @@
   background: unset;
 }
-:host(.hidden),
-:host(.filtered-out) {
-  display: none;
-}
-:host(.duplicate.last) {
+:host(.clone.last) {
   border-bottom: 12px solid;
   border-color: var(--wmcolor-select-option-border);
 }
@@ -120,6 +115,11 @@
   flex: none;
 }
+:host(.hidden),
+:host(.filtered-out) {
+  display: none;
+}
 .subinfo {
   font-style: italic;
 }

package/dist/collection/components/wm-option/wm-option.js CHANGED Viewed

@@ -69,10 +69,16 @@ export class Option {
     }
   }
   handleSelection() {
+    // using ev.detail because ev.target returns the wm-select for clone options
     if (!this.disabled) {
-      // the parent wm-select is in charge of the actual selection
-      // using ev.detail because ev.target returns the wm-select for duplicate options
-      this.wmOptionSelected.emit(this.el);
+      if (this.el.classList.contains("clone")) {
+        this.intCloneClicked.emit(this.el); // used to then emit wmOptionSelected from the "real" wm-option
+      }
+      else {
+        this.selected
+          ? this.wmOptionDeselected.emit(this.el)
+          : this.wmOptionSelected.emit(this.el);
+      }
     }
   }
   handleBlur(ev) {
@@ -248,6 +254,44 @@ export class Option {
             }
           }
         }
+      }, {
+        "method": "wmOptionDeselected",
+        "name": "wmOptionDeselected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "HTMLWmOptionElement",
+          "resolved": "HTMLWmOptionElement",
+          "references": {
+            "HTMLWmOptionElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "intCloneClicked",
+        "name": "intCloneClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "HTMLWmOptionElement",
+          "resolved": "HTMLWmOptionElement",
+          "references": {
+            "HTMLWmOptionElement": {
+              "location": "global"
+            }
+          }
+        }
       }, {
         "method": "wmKeyUpPressed",
         "name": "wmKeyUpPressed",

package/dist/collection/components/wm-select/wm-select.e2e.js CHANGED Viewed

@@ -6,7 +6,7 @@ describe("wm-select", () => {
     page = await newE2EPage();
     await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
       <wm-select id='test' label="Make a selection">
-        <wm-option id='first'>First option</wm-option>
+        <wm-option id='first' selected>First option</wm-option>
         <wm-option id='second'>Second option</wm-option>
         <wm-option id='third'>Third option</wm-option>
       </wm-select>
@@ -28,12 +28,7 @@ describe("wm-select", () => {
   it("has the right WAI_ARIA roles, states and properties", async () => {
     await createPageHelper();
     const button = await page.find("wm-select >>> button");
-    const listbox = await page.find("wm-select >>> #list-test");
-    // const first = await page.find("#first");
-    /* check aria-haspopup attribute */
-    // removed because it seems incompatible with aria-expanded (SR won't announce expanded state when haspopup is present)
-    // (tested in Chrome/NVDA)
-    // expect(button).toEqualAttribute("aria-haspopup", "listbox");
+    const listbox = await page.find("wm-select >>> #list");
     /* check aria-expanded attribute */
     expect(button).toEqualAttribute("aria-expanded", "false");
     /* The listbox has tabindex="-1" */
@@ -55,22 +50,6 @@ describe("wm-select", () => {
     const third = await page.find("#third");
     expect(third).toEqualAttribute("tabIndex", "0"); // third is focused...
     expect(first).toEqualAttribute("aria-selected", true); // ...first is still selected (default)
-    await page.keyboard.press("Enter"); // close and select
-    await page.waitForChanges();
-    expect(third).toEqualAttribute("aria-selected", true);
-    await page.waitForTimeout(500); // wait for focus to return to button (there's a timeout because SR issue)
-    await page.keyboard.press("Enter"); // re-open popup
-    await page.waitForChanges();
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    expect(button).toEqualAttribute("aria-expanded", "true");
-    await page.keyboard.press("Enter"); // close and select
-    await page.waitForChanges();
-    const selected = await page.find("[aria-selected='true']");
-    await page.waitForChanges();
-    expect(selected.id).toEqual("second");
   });
   it("switches the dropdown direction", async () => {
     // Viewport is 800 x 600 by default
@@ -79,13 +58,13 @@ describe("wm-select", () => {
     page = await newE2EPage();
     await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
       <wm-select id='select1' label="Make a selection">
-      <wm-option id='first'>First option</wm-option>
+      <wm-option id='first' selected>First option</wm-option>
       <wm-option id='second'>Second option</wm-option>
       <wm-option id='third'>Third option</wm-option>
       </wm-select>
       <div style="height: 500px">A big block</div>
       <wm-select id='select2' label="Make a selection">
-      <wm-option id='first'>First option</wm-option>
+      <wm-option id='first' selected>First option</wm-option>
       <wm-option id='second'>Second option</wm-option>
       <wm-option id='third'>Third option</wm-option>
       </wm-select>
@@ -137,7 +116,7 @@ describe("wm-select", () => {
   /* Up Arrow: Moves focus to the previous option (4). If the listbox is collapsed (5), also expands the list (6). */
   it("handles Up and Down Arrow keys", async () => {
     await createPageHelper();
-    const btn = await page.find("wm-select >>> #selectbtn-test");
+    const btn = await page.find("wm-select >>> #selectbtn");
     expect(btn.getAttribute("aria-expanded")).toEqual("false"); // 2
     await page.keyboard.press("Tab");
     await page.waitForChanges();
@@ -163,8 +142,6 @@ describe("wm-select", () => {
     await page.waitForChanges();
     await page.keyboard.press("ArrowUp");
     await page.waitForChanges();
-    const x = await page.evaluate(() => document.querySelector("[tabindex='0']").id);
-    expect(x).toBe("third"); // 4
     expect(btn.getAttribute("aria-expanded")).toEqual("true"); // 6
   });
   /* Home: If the listbox is displayed, moves focus to first option. */
@@ -205,32 +182,35 @@ describe("wm-select", () => {
     expect(focusedEl).toEqualAttribute("tabindex", "0");
   });
   // OPENING / CLOSING POPUP
-  /* Enter:
-  - If the focus is on the button, expands the listbox (1) and places focus on the currently selected option in the list (2).
-  - If focus is in the listbox, collapses the listbox (3) and keeps the currently selected option as the button label. (4) */
-  it("handles the Enter key", async () => {
+  it("Enter key opens and closes the dropdown", async () => {
     await createPageHelper();
     await page.keyboard.press("Tab");
     await page.waitForChanges();
     await page.keyboard.press("Enter");
     await page.waitForChanges();
-    const btn = await page.find("wm-select >>> #selectbtn-test");
+    const btn = await page.find("wm-select >>> #selectbtn");
     await page.waitForChanges();
-    expect(btn.getAttribute("aria-expanded")).toEqual("true"); // 1
+    expect(btn.getAttribute("aria-expanded")).toEqual("true");
     await page.keyboard.press("ArrowDown");
     await page.waitForChanges();
     await page.keyboard.press("Enter");
     await page.waitForChanges();
-    const btntxt = await btn.find("span.button-text");
+    expect(btn.getAttribute("aria-expanded")).toEqual("false");
+  });
+  it("Space key opens and closes the dropdown", async () => {
+    await createPageHelper();
+    await page.keyboard.press("Tab");
     await page.waitForChanges();
-    expect(btn.getAttribute("aria-expanded")).toEqual("false"); // 3
-    expect(btntxt.innerText).toEqual("Second option"); // 4
-    await page.keyboard.press("Enter");
+    await page.keyboard.press("Space");
     await page.waitForChanges();
-    expect(btn.getAttribute("aria-expanded")).toEqual("true"); // 1
-    const activeElId = await page.evaluate(() => document.activeElement.id);
+    const btn = await page.find("wm-select >>> #selectbtn");
+    await page.waitForChanges();
+    expect(btn.getAttribute("aria-expanded")).toEqual("true");
+    await page.keyboard.press("ArrowDown");
+    await page.waitForChanges();
+    await page.keyboard.press("Space");
     await page.waitForChanges();
-    expect(activeElId).toEqual("second"); // 2
+    expect(btn.getAttribute("aria-expanded")).toEqual("false");
   });
   /* Spacebar: Should open the popup (we didn't implement, comes for free. test makes sure we don't break it) */
   it("handles the Spacebar key", async () => {
@@ -239,7 +219,7 @@ describe("wm-select", () => {
     await page.waitForChanges();
     await page.keyboard.press("Space");
     await page.waitForChanges();
-    const btn = await page.find("wm-select >>> #selectbtn-test");
+    const btn = await page.find("wm-select >>> #selectbtn");
     expect(btn.getAttribute("aria-expanded")).toEqual("true");
   });
   /* Escape: If the listbox is displayed, closes the popup and returns focus to the button. */
@@ -263,10 +243,34 @@ describe("wm-select", () => {
   // Label
   it("creates a label element", async () => {
     await createPageHelper();
-    await page.waitForTimeout(500);
     let label = await page.find("wm-select >>> label");
     expect(label.textContent).toBe("Make a selection");
   });
+  it("emits the proper events when option is clicked", async () => {
+    page = await newE2EPage();
+    await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-select multiple label="Make a selection">
+      <wm-option id='first'>First option</wm-option>
+      </wm-select>
+      </main></body></html>`);
+    const wmOptionSelectedSpy = await page.spyOnEvent("wmOptionSelected");
+    const wmOptionDeselectedSpy = await page.spyOnEvent("wmOptionDeselected");
+    // Selection key
+    await page.keyboard.press("Tab");
+    await page.keyboard.press("Enter");
+    await page.waitForChanges(); // allow dropdown to open
+    await page.keyboard.press("Space");
+    await page.waitForChanges();
+    expect(wmOptionSelectedSpy).toHaveReceivedEventTimes(1);
+    expect(wmOptionDeselectedSpy).toHaveReceivedEventTimes(0);
+    // Deselection
+    const optionEl = await page.find("wm-option");
+    optionEl.setProperty("selected", true);
+    await page.waitForChanges();
+    await page.keyboard.press("Space");
+    expect(wmOptionSelectedSpy).toHaveReceivedEventTimes(1);
+    expect(wmOptionDeselectedSpy).toHaveReceivedEventTimes(1);
+  });
   /**************
    * MULTISELECT *
    **************/
@@ -329,64 +333,6 @@ describe("wm-select", () => {
     await page.waitForChanges();
     expect(firstOption).toEqualAttribute("tabindex", "0");
   });
-  /* Space: changes the selection state of the focused option */
-  it("handles the space key - multiselect", async () => {
-    page = await newE2EPage();
-    await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-      <wm-select multiple label="Make a selection">
-      <wm-option id='first'>First option</wm-option>
-      <wm-option id='second'>Second option</wm-option>
-      <wm-option id='third'>Third option</wm-option>
-      <wm-option id='fourth'>Fourth option</wm-option>
-      <wm-option id='fifth'>Fifth option</wm-option>
-      </wm-select>
-      </main></body></html>`);
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    await page.keyboard.press("Enter");
-    await page.waitForChanges();
-    await page.keyboard.press("Space");
-    await page.waitForChanges();
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    await page.keyboard.press("Space");
-    await page.waitForChanges();
-    const firstItem = await page.find("#first");
-    const secondItem = await page.find("#second");
-    expect(firstItem).toEqualAttribute("aria-selected", "true");
-    expect(secondItem).toEqualAttribute("aria-selected", "true");
-    const btn = await page.find("wm-select >>> button");
-    expect(btn.getAttribute("aria-expanded")).toEqual("true");
-  });
-  /* Enter Key: Toggles selection of currently focused option, then closes dropdown. */
-  it("handles the enter key - multiselect", async () => {
-    page = await newE2EPage();
-    await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-      <wm-select multiple label="Make a selection">
-      <wm-option id='first'>First option</wm-option>
-      <wm-option id='second'>Second option</wm-option>
-      <wm-option id='third'>Third option</wm-option>
-      <wm-option id='fourth'>Fourth option</wm-option>
-      <wm-option id='fifth'>Fifth option</wm-option>
-      </wm-select>
-      </main></body></html>`);
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    await page.keyboard.press("Enter");
-    await page.waitForChanges();
-    await page.keyboard.press("Space");
-    await page.waitForChanges();
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    await page.keyboard.press("Enter");
-    await page.waitForChanges();
-    const firstItem = await page.find("#first");
-    const secondItem = await page.find("#second");
-    expect(firstItem).toEqualAttribute("aria-selected", "true");
-    expect(secondItem).toEqualAttribute("aria-selected", "true");
-    const btn = await page.find("wm-select >>> button");
-    expect(btn.getAttribute("aria-expanded")).toEqual("false");
-  });
   it("recognizes when all are selected", async () => {
     page = await newE2EPage();
     await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
@@ -511,15 +457,15 @@ describe("wm-select", () => {
     selectAllBtn = await page.find("wm-select >>> .select-all");
     expect(selectAllBtn).toBeNull();
   });
-  it("selects / deselects all options", async () => {
-    const page = await newE2EPage();
+  it("emits the proper select all deselect all events", async () => {
+    let page = await newE2EPage();
     await page.setContent(`<wm-select multiple select-all id='test' label="make a selection">
         <wm-option id='first'>first option</wm-option>
         <wm-option id='second'>second option</wm-option>
         <wm-option id='third'>third option</wm-option>
       </wm-select>`);
-    const wmSelectChangedSpy = await page.spyOnEvent("wmSelectChanged");
-    const optionEls = await page.findAll("wm-option");
+    const wmSelectAllSelectedSpy = await page.spyOnEvent("wmSelectAllSelected");
+    const wmSelectAllDeselectedSpy = await page.spyOnEvent("wmSelectAllDeselected");
     await page.keyboard.press("Tab");
     await page.waitForChanges();
     await page.keyboard.press("Enter");
@@ -528,17 +474,17 @@ describe("wm-select", () => {
     await page.waitForChanges();
     await page.keyboard.press("Space");
     await page.waitForChanges();
-    // due to an open issue, the event detail's selected options are not returning the HTML element reference, and thus they cannot be checked against
-    // instead, we are checking the selectedOptions length as a stopgap measure until this issue is resolved
-    // https://github.com/ionic-team/stencil/issues/1841
-    expect(wmSelectChangedSpy.lastEvent.detail.changedOption).toBe(null);
-    expect(wmSelectChangedSpy.lastEvent.detail.selectedOptions.length).toBe(optionEls.length);
-    // dropdown stayed open, focus stayed on button.
-    // reactivating it should deselect
+    expect(wmSelectAllSelectedSpy).toHaveReceivedEventTimes(1);
+    expect(wmSelectAllDeselectedSpy).toHaveReceivedEventTimes(0);
+    const options = await page.findAll("wm-option");
+    options.forEach((option) => option.setProperty("selected", true));
+    await page.waitForChanges();
+    // // dropdown stayed open, focus stayed on button.
+    // // reactivating it should deselect
     await page.keyboard.press("Enter");
     await page.waitForChanges();
-    expect(wmSelectChangedSpy.lastEvent.detail.changedOption).toBe(null);
-    expect(wmSelectChangedSpy.lastEvent.detail.selectedOptions.length).toBe(0);
+    expect(wmSelectAllSelectedSpy).toHaveReceivedEventTimes(1);
+    expect(wmSelectAllDeselectedSpy).toHaveReceivedEventTimes(1);
   });
   xit("handles keyboard motion", async () => {
     const page = await newE2EPage();