@esri/calcite-components 1.0.0-next.596 → 1.0.0-next.597

package/dist/collection/components/scrim/scrim.e2e.js

@@ -0,0 +1,122 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
+import { CSS } from "./resources";
+describe("calcite-scrim", () => {
+    it("renders", async () => renders("<calcite-scrim></calcite-scrim>", { display: "flex" }));
+    it("honors hidden attribute", async () => hidden("calcite-scrim"));
+    it("is accessible", async () => accessible("<calcite-scrim>My content</calcite-scrim>"));
+    it("is accessible when loading", async () => accessible("<calcite-scrim loading>My content</calcite-scrim>"));
+    it("has property defaults", async () => defaults("calcite-scrim", [
+        {
+            propertyName: "loading",
+            defaultValue: false
+        }
+    ]));
+    it("shows loading component", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-scrim></calcite-scrim>");
+        let loader = await page.find("calcite-scrim >>> calcite-loader");
+        expect(loader).toBeNull();
+        const scrim = await page.find("calcite-scrim");
+        scrim.setProperty("loading", true);
+        await page.waitForChanges();
+        loader = await page.find("calcite-scrim >>> calcite-loader");
+        expect(loader).toBeDefined();
+    });
+    it("does not allow clicks in underlying nodes", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-panel>
+        <calcite-button>Test</calcite-button>
+        <calcite-scrim></calcite-scrim>
+      </calcite-panel>
+    `);
+        const button = await page.find(`calcite-button`);
+        const clickSpy = await button.spyOnEvent("click");
+        expect(clickSpy).toHaveReceivedEventTimes(0);
+    });
+    it("does allow clickss inside default node", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-scrim>
+        <calcite-button>Test</calcite-button>
+      </calcite-scrim>
+    `);
+        const button = await page.find(`calcite-button`);
+        const clickSpy = await button.spyOnEvent("click");
+        await button.click();
+        expect(clickSpy).toHaveReceivedEventTimes(1);
+    });
+    it("does not render content if the default slot if it is empty", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-scrim></calcite-scrim>`);
+        const contentNode = await page.find(`calcite-scrim >>> .${CSS.content}`);
+        expect(contentNode).toBeNull();
+    });
+    it("renders conent in the default slot has content", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-scrim>This is a test.</calcite-scrim>`);
+        const contentNode = await page.find(`calcite-scrim >>> .${CSS.content}`);
+        expect(contentNode).not.toBeNull();
+    });
+    describe("CSS properties for light/dark themes", () => {
+        const scrimSnippet = `
+    <div style="position: relative; width: 200px; height: 200px; overflow: auto;">
+      <calcite-scrim>
+        <p>I'm a panel that is not loading.</p>
+        <p>This content can have any zIndex and it will not be placed above</p>
+      </calcite-scrim>
+    </div>
+    `;
+        let page;
+        let scrim;
+        let scrimStyles;
+        let scrimBgStyle;
+        it("should have defined CSS custom properties", async () => {
+            page = await newE2EPage({ html: scrimSnippet });
+            scrimBgStyle = await page.evaluate(() => {
+                scrim = document.querySelector("calcite-scrim");
+                scrim.style.setProperty("--calcite-scrim-background", "green");
+                return window.getComputedStyle(scrim).getPropertyValue("--calcite-scrim-background");
+            });
+            expect(scrimBgStyle).toEqual("green");
+        });
+        describe("when theme attribute is not provided", () => {
+            it("should render scrim background with default value tied to light theme", async () => {
+                page = await newE2EPage({ html: scrimSnippet });
+                scrim = await page.find("calcite-scrim >>> .scrim");
+                scrimStyles = await scrim.getComputedStyle();
+                scrimBgStyle = await scrimStyles.getPropertyValue("background-color");
+                expect(scrimBgStyle).toEqual("rgba(255, 255, 255, 0.85)");
+            });
+        });
+        describe("when theme attribute is dark", () => {
+            it("should render scrim background with value tied to dark theme", async () => {
+                page = await newE2EPage({
+                    html: `<div class="calcite-theme-dark">${scrimSnippet}</div>`
+                });
+                scrim = await page.find("calcite-scrim >>> .scrim");
+                scrimStyles = await scrim.getComputedStyle();
+                scrimBgStyle = await scrimStyles.getPropertyValue("background-color");
+                expect(scrimBgStyle).toEqual("rgba(0, 0, 0, 0.85)");
+            });
+        });
+        it("should allow the CSS custom property to be overridden", async () => {
+            const overrideStyle = "rgb(128, 0, 128)";
+            page = await newE2EPage({
+                html: `
+        <style>
+          :root {
+            --calcite-scrim-background: ${overrideStyle};
+          }
+        </style>
+        ${scrimSnippet}
+        `
+            });
+            scrim = await page.find("calcite-scrim >>> .scrim");
+            scrimStyles = await scrim.getComputedStyle();
+            scrimBgStyle = await scrimStyles.getPropertyValue("background-color");
+            expect(scrimBgStyle).toEqual(overrideStyle);
+        });
+    });
+});

package/dist/collection/components/scrim/scrim.js

@@ -1,9 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.596
+ * v1.0.0-next.597
  */
-import { Component, Element, Prop, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { CSS, TEXT } from "./resources";
 /**
  * @slot - A slot for adding custom content, primarily loading information.
@@ -35,60 +35,63 @@ export class Scrim {
     const { el, loading, intlLoading } = this;
     const hasContent = el.innerHTML.trim().length > 0;
     const loaderNode = loading ? h("calcite-loader", { active: true, label: intlLoading }) : null;
-    const contentNode = hasContent ? (h("div", { class: CSS.content },
-      h("slot", null))) : null;
-    return (h("div", { class: CSS.scrim },
-      loaderNode,
-      contentNode));
+    const contentNode = hasContent ? (h("div", { class: CSS.content }, h("slot", null))) : null;
+    return (h("div", { class: CSS.scrim }, loaderNode, contentNode));
   }
   static get is() { return "calcite-scrim"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["scrim.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["scrim.css"]
-  }; }
-  static get properties() { return {
-    "intlLoading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "name": "default",
-            "text": "\"Loading\""
-          }],
-        "text": "Accessible name when the component is loading."
-      },
-      "attribute": "intl-loading",
-      "reflect": false,
-      "defaultValue": "TEXT.loading"
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, a busy indicator is displayed."
+  static get originalStyleUrls() {
+    return {
+      "$": ["scrim.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["scrim.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "intlLoading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "\"Loading\""
+            }],
+          "text": "Accessible name when the component is loading."
+        },
+        "attribute": "intl-loading",
+        "reflect": false,
+        "defaultValue": "TEXT.loading"
       },
-      "attribute": "loading",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, a busy indicator is displayed."
+        },
+        "attribute": "loading",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/select/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.596
+ * v1.0.0-next.597
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/select/select.e2e.js

@@ -0,0 +1,266 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, disabled, focusable, formAssociated, labelable, reflects, renders, hidden } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+import { CSS } from "./resources";
+describe("calcite-select", () => {
+    const simpleTestMarkup = html `
+    <calcite-select label="required-for-a11y-test">
+      <calcite-option>uno</calcite-option>
+      <calcite-option>dos</calcite-option>
+      <calcite-option>tres</calcite-option>
+    </calcite-select>
+  `;
+    it("renders", async () => renders(simpleTestMarkup, { display: "flex" }));
+    it("honors hidden attribute", async () => hidden("calcite-select"));
+    it("is accessible", async () => accessible(simpleTestMarkup));
+    it("is focusable", async () => focusable(simpleTestMarkup));
+    it("reflects", async () => reflects(simpleTestMarkup, [
+        {
+            propertyName: "disabled",
+            value: true
+        },
+        {
+            propertyName: "scale",
+            value: "m"
+        }
+    ]));
+    async function assertSelectedOption(page, selectedOption) {
+        const selectedOptionValue = await page.$eval("calcite-select", (select) => select.selectedOption.value);
+        expect(selectedOptionValue).toBe(await selectedOption.getProperty("value"));
+    }
+    it("is labelable", async () => labelable("calcite-select"));
+    it("can be disabled", () => disabled("calcite-select"));
+    describe("flat options", () => {
+        it("allows selecting items", async () => {
+            const page = await newE2EPage({
+                html: html `
+          <calcite-select>
+            <calcite-option>uno</calcite-option>
+            <calcite-option>dos</calcite-option>
+            <calcite-option>tres</calcite-option>
+          </calcite-select>
+        `
+            });
+            const select = await page.find("calcite-select");
+            const spy = await select.spyOnEvent("calciteSelectChange");
+            const internalSelect = await page.evaluateHandle(() => document.querySelector("calcite-select").shadowRoot.querySelector("select"));
+            await internalSelect.asElement().select("dos");
+            await page.waitForChanges();
+            let selected = await page.findAll("calcite-option[selected]");
+            await assertSelectedOption(page, selected[0]);
+            expect(selected.length).toBe(1);
+            expect(selected[0].innerText).toBe("dos");
+            expect(spy).toHaveReceivedEventTimes(1);
+            const lastOption = await page.find("calcite-option:last-child");
+            await lastOption.setProperty("selected", true);
+            await page.waitForChanges();
+            selected = await page.findAll("calcite-option[selected]");
+            await assertSelectedOption(page, selected[0]);
+            expect(selected.length).toBe(1);
+            expect(selected[0].innerText).toBe("tres");
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
+        it("selects the last selected option when multiple are selected", async () => {
+            const page = await newE2EPage({
+                html: html `
+          <calcite-select>
+            <calcite-option selected>uno</calcite-option>
+            <calcite-option selected>dos</calcite-option>
+            <calcite-option selected>tres</calcite-option>
+          </calcite-select>
+        `
+            });
+            const selected = await page.findAll("calcite-option[selected]");
+            await assertSelectedOption(page, selected[0]);
+            expect(selected).toHaveLength(1);
+            expect(selected[0].innerText).toBe("tres");
+        });
+        it("selects the first available option when none are selected", async () => {
+            const page = await newE2EPage({
+                html: html `
+          <calcite-select>
+            <calcite-option>uno</calcite-option>
+            <calcite-option>dos</calcite-option>
+            <calcite-option>tres</calcite-option>
+          </calcite-select>
+        `
+            });
+            const selected = await page.findAll("calcite-option[selected]");
+            await assertSelectedOption(page, selected[0]);
+            expect(selected).toHaveLength(1);
+            expect(selected[0].innerText).toBe("uno");
+        });
+        it("internally maps children to native elements", async () => {
+            const page = await newE2EPage({
+                html: html `
+          <calcite-select>
+            <calcite-option>uno</calcite-option>
+            <calcite-option>dos</calcite-option>
+            <calcite-option>tres</calcite-option>
+          </calcite-select>
+        `
+            });
+            const internalSelect = await page.find(`calcite-select >>> .${CSS.select}`);
+            expect(await internalSelect.findAll("option")).toHaveLength(3);
+            const options = await page.findAll("calcite-option");
+            for (let i = 0; i < options.length; i++) {
+                await options[i].callMethod("remove");
+            }
+            expect(await internalSelect.findAll("option")).toHaveLength(0);
+            await page.$eval("calcite-select", (select) => {
+                const number = document.createElement("calcite-option");
+                number.innerHTML = "cuatro";
+                select.append(number);
+            });
+            expect(await internalSelect.findAll("option")).toHaveLength(1);
+        });
+    });
+    describe("grouped options", () => {
+        it("allows selecting items", async () => {
+            const page = await newE2EPage({
+                html: html `
+          <calcite-select>
+            <calcite-option-group label="letters">
+              <calcite-option>a</calcite-option>
+              <calcite-option>b</calcite-option>
+              <calcite-option>c</calcite-option>
+              <calcite-option disabled>d (disabled)</calcite-option>
+            </calcite-option-group>
+            <calcite-option-group label="numbers">
+              <calcite-option label="one">1</calcite-option>
+              <calcite-option label="two" selected>2</calcite-option>
+              <calcite-option label="three">3</calcite-option>
+            </calcite-option-group>
+          </calcite-select>
+        `
+            });
+            const select = await page.find("calcite-select");
+            const spy = await select.spyOnEvent("calciteSelectChange");
+            const internalSelect = await page.evaluateHandle(() => document.querySelector("calcite-select").shadowRoot.querySelector("select"));
+            await internalSelect.asElement().select("c");
+            await page.waitForChanges();
+            let selected = await page.findAll("calcite-option[selected]");
+            await assertSelectedOption(page, selected[0]);
+            expect(selected.length).toBe(1);
+            expect(selected[0].innerText).toBe("c");
+            expect(spy).toHaveReceivedEventTimes(1);
+            const lastNumberOption = await page.find("calcite-option-group[label='numbers'] calcite-option:last-child");
+            await lastNumberOption.setProperty("selected", true);
+            await page.waitForChanges();
+            selected = await page.findAll("calcite-option[selected]");
+            await assertSelectedOption(page, selected[0]);
+            expect(selected.length).toBe(1);
+            expect(selected[0].innerText).toBe("3");
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
+        it("selects the last selected option when multiple are selected", async () => {
+            const page = await newE2EPage({
+                html: html `
+          <calcite-select>
+            <calcite-option-group label="letters">
+              <calcite-option selected>a</calcite-option>
+              <calcite-option selected>b</calcite-option>
+              <calcite-option selected>c</calcite-option>
+            </calcite-option-group>
+            <calcite-option-group label="numbers">
+              <calcite-option selected>1</calcite-option>
+              <calcite-option selected>2</calcite-option>
+              <calcite-option selected>3</calcite-option>
+            </calcite-option-group>
+          </calcite-select>
+        `
+            });
+            const selected = await page.findAll("calcite-option[selected]");
+            await assertSelectedOption(page, selected[0]);
+            expect(selected).toHaveLength(1);
+            expect(selected[0].innerText).toBe("3");
+        });
+        it("selects the first available option when none are selected", async () => {
+            const page = await newE2EPage({
+                html: html `
+          <calcite-select>
+            <calcite-option-group label="letters">
+              <calcite-option>a</calcite-option>
+              <calcite-option>b</calcite-option>
+              <calcite-option>c</calcite-option>
+            </calcite-option-group>
+            <calcite-option-group label="numbers">
+              <calcite-option>1</calcite-option>
+              <calcite-option>2</calcite-option>
+              <calcite-option>3</calcite-option>
+            </calcite-option-group>
+          </calcite-select>
+        `
+            });
+            const selected = await page.findAll("calcite-option[selected]");
+            await assertSelectedOption(page, selected[0]);
+            expect(selected).toHaveLength(1);
+            expect(selected[0].innerText).toBe("a");
+        });
+        it("internally maps children to native elements", async () => {
+            const page = await newE2EPage({
+                html: html `
+          <calcite-select>
+            <calcite-option-group label="letters">
+              <calcite-option>a</calcite-option>
+              <calcite-option>b</calcite-option>
+            </calcite-option-group>
+            <calcite-option-group label="numbers">
+              <calcite-option label="one">1</calcite-option>
+            </calcite-option-group>
+            <calcite-option-group label="empty"></calcite-option-group>
+          </calcite-select>
+        `
+            });
+            const internalSelect = await page.find(`calcite-select >>> .${CSS.select}`);
+            expect(await internalSelect.findAll("option")).toHaveLength(3);
+            expect(await internalSelect.findAll("optgroup")).toHaveLength(3);
+            const optionsAndGroups = await page.findAll("calcite-option, calcite-option-group");
+            for (let i = 0; i < optionsAndGroups.length; i++) {
+                await optionsAndGroups[i].callMethod("remove");
+            }
+            expect(await internalSelect.findAll("option, optgroup")).toHaveLength(0);
+            await page.$eval("calcite-select", (select) => {
+                const letters = document.createElement("calcite-option-group");
+                const numbers = document.createElement("calcite-option-group");
+                const letter = document.createElement("calcite-option");
+                letter.innerHTML = "c";
+                const number = document.createElement("calcite-option");
+                numbers.innerHTML = "2";
+                letters.append(letter);
+                numbers.append(number);
+                select.append(letters, numbers);
+            });
+            expect(await internalSelect.findAll("option")).toHaveLength(2);
+            expect(await internalSelect.findAll("optgroup")).toHaveLength(2);
+        });
+    });
+    it("item is selected before change event", async () => {
+        const page = await newE2EPage({
+            html: html `
+        <calcite-select>
+          <calcite-option id="1">uno</calcite-option>
+          <calcite-option id="2">dos</calcite-option>
+          <calcite-option id="3">tres</calcite-option>
+        </calcite-select>
+      `
+        });
+        await page.evaluate(() => {
+            document.querySelector("calcite-select").addEventListener("calciteSelectChange", (event) => {
+                window.selectedOptionId = event.target.querySelector("calcite-option[selected]").id;
+            });
+        });
+        const internalSelect = await page.evaluateHandle(() => document.querySelector("calcite-select").shadowRoot.querySelector("select"));
+        await internalSelect.asElement().select("dos");
+        await page.waitForChanges();
+        const selectedOptionId = await page.evaluate(() => window.selectedOptionId);
+        expect(selectedOptionId).toBe("2");
+    });
+    it("is form-associated", () => formAssociated(html `
+        <calcite-select>
+          <calcite-option id="1">uno</calcite-option>
+          <calcite-option id="2">dos</calcite-option>
+          <calcite-option id="3">tres</calcite-option>
+        </calcite-select>
+      `, { testValue: "dos" }));
+});