@esri/calcite-components 1.0.0-next.582 → 1.0.0-next.591

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" }));
+});

package/dist/collection/components/select/select.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.582
+ * v1.0.0-next.591
  */
 import { Component, Element, Event, Fragment, h, Listen, Method, Prop, Watch } from "@stencil/core";
 import { focusElement } from "../../utils/dom";
@@ -268,7 +268,7 @@ export class Select {
         "text": "Specifies the name of the component on form submission."
       },
       "attribute": "name",
-      "reflect": false
+      "reflect": true
     },
     "required": {
       "type": "boolean",

package/dist/collection/components/shell/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.582
+ * v1.0.0-next.591
  */
 export const CSS = {
   main: "main",

package/dist/collection/components/shell/shell.css

@@ -67,6 +67,11 @@
   animation-name: in-scale;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
 /**
 * Currently only used in Checkbox.
 */

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

@@ -0,0 +1,126 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, hidden, renders, slots } from "../../tests/commonTests";
+import { CSS, SLOTS } from "./resources";
+describe("calcite-shell", () => {
+    it("renders", async () => renders("calcite-shell", { display: "flex" }));
+    it("honors hidden attribute", async () => hidden("calcite-shell"));
+    it("defaults", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-shell></calcite-shell>");
+        const footer = await page.find(`calcite-shell >>> slot[name="${SLOTS.footer}"]`);
+        const header = await page.find(`calcite-shell >>> slot[name="${SLOTS.header}"]`);
+        expect(footer).toBeNull();
+        expect(header).toBeNull();
+    });
+    it("has slots", () => slots("calcite-shell", SLOTS));
+    it("content node should always be present", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-shell></calcite-shell>`);
+        const content = await page.find(`calcite-shell >>> .${CSS.content}`);
+        expect(content).not.toBeNull();
+    });
+    it("should be accessible", async () => accessible(`
+    <calcite-shell>
+      <calcite-shell-panel slot="${SLOTS.panelStart}" position="start">
+        <p>Primary Content</p>
+      </calcite-shell-panel>
+      <calcite-shell-panel slot="${SLOTS.panelEnd}" position="end">
+        <p>Primary Content</p>
+      </calcite-shell-panel>
+    </calcite-shell>
+    `));
+    it("flex row should not be reversed", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-shell>
+    <calcite-shell-panel slot="${SLOTS.primaryPanel}" position="start">
+      <p>Primary Content</p>
+    </calcite-shell-panel>
+    <calcite-shell-panel slot="${SLOTS.contextualPanel}" position="end">
+      <p>Primary Content</p>
+    </calcite-shell-panel>
+  </calcite-shell>`);
+        await page.waitForChanges();
+        const mainReversed = await page.find(`calcite-shell >>> .${CSS.mainReversed}`);
+        expect(mainReversed).toBeNull();
+    });
+    it("flex row should be reversed", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-shell>
+    <calcite-shell-panel slot="${SLOTS.primaryPanel}" position="end">
+      <p>Primary Content</p>
+    </calcite-shell-panel>
+    <calcite-shell-panel slot="${SLOTS.contextualPanel}" position="start">
+      <p>Primary Content</p>
+    </calcite-shell-panel>
+  </calcite-shell>`);
+        await page.waitForChanges();
+        const mainReversed = await page.find(`calcite-shell >>> .${CSS.mainReversed}`);
+        expect(mainReversed).not.toBeNull();
+    });
+    it("should place content behind", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-shell content-behind>
+    <calcite-shell-panel slot="${SLOTS.panelStart}" position="end">
+      <p>Primary Content</p>
+    </calcite-shell-panel>
+    <calcite-shell-panel slot="${SLOTS.panelEnd}" position="start">
+      <p>Primary Content</p>
+    </calcite-shell-panel>
+  </calcite-shell>`);
+        await page.waitForChanges();
+        const mainReversed = await page.find(`calcite-shell >>> .${CSS.contentBehind}`);
+        expect(mainReversed).not.toBeNull();
+    });
+    it("flex row should not be reversed with start/end panels", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-shell>
+    <calcite-shell-panel slot="${SLOTS.panelStart}" position="end">
+      <p>Primary Content</p>
+    </calcite-shell-panel>
+    <calcite-shell-panel slot="${SLOTS.panelEnd}" position="start">
+      <p>Primary Content</p>
+    </calcite-shell-panel>
+  </calcite-shell>`);
+        await page.waitForChanges();
+        const mainReversed = await page.find(`calcite-shell >>> .${CSS.mainReversed}`);
+        expect(mainReversed).toBeNull();
+    });
+    it("should place the center-row inside the content node when content-behind is false", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-shell>
+    <calcite-shell-panel slot="${SLOTS.panelStart}" position="end">
+      <p>Primary Content</p>
+    </calcite-shell-panel>
+    <calcite-shell-panel slot="${SLOTS.panelEnd}" position="start">
+      <p>Primary Content</p>
+    </calcite-shell-panel>
+    <p>Main content</p>
+    <calcite-shell-center-row slot="${SLOTS.centerRow}">
+      <p>Center row content</p>
+    </calcite-shell-center-row>
+  </calcite-shell>`);
+        await page.waitForChanges();
+        const contentNode = await page.find(`calcite-shell >>> .${CSS.content}`);
+        const centerRow = await contentNode.find(`slot[name="${SLOTS.centerRow}"]`);
+        expect(centerRow).not.toBeNull();
+    });
+    it("should place the center-row outside the content node when content-behind is true", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-shell content-behind>
+    <calcite-shell-panel slot="${SLOTS.panelStart}" position="end">
+      <p>Primary Content</p>
+    </calcite-shell-panel>
+    <calcite-shell-panel slot="${SLOTS.panelEnd}" position="start">
+      <p>Primary Content</p>
+    </calcite-shell-panel>
+    <p>Main content</p>
+    <calcite-shell-center-row slot="${SLOTS.centerRow}">
+      <p>Center row content</p>
+    </calcite-shell-center-row>
+  </calcite-shell>`);
+        await page.waitForChanges();
+        const contentNode = await page.find(`calcite-shell >>> .${CSS.content}`);
+        const centerRow = await contentNode.find(`slot[name="${SLOTS.centerRow}"]`);
+        expect(centerRow).toBeNull();
+    });
+});

package/dist/collection/components/shell/shell.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.582
+ * v1.0.0-next.591
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";

package/dist/collection/components/shell-center-row/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.582
+ * v1.0.0-next.591
  */
 export const CSS = {
   actionBarContainer: "action-bar-container",

package/dist/collection/components/shell-center-row/shell-center-row.css

@@ -67,6 +67,11 @@
   animation-name: in-scale;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
 /**
 * Currently only used in Checkbox.
 */

package/dist/collection/components/shell-center-row/shell-center-row.e2e.js

@@ -0,0 +1,66 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { CSS, SLOTS } from "./resources";
+import { accessible, defaults, hidden, renders, slots } from "../../tests/commonTests";
+describe("calcite-shell-center-row", () => {
+    it("renders", async () => renders("calcite-shell-center-row", { display: "flex" }));
+    it("honors hidden attribute", async () => hidden("calcite-shell-center-row"));
+    it("defaults", async () => defaults("calcite-shell-center-row", [
+        {
+            propertyName: "detached",
+            defaultValue: false
+        },
+        {
+            propertyName: "heightScale",
+            defaultValue: "s"
+        },
+        {
+            propertyName: "position",
+            defaultValue: "end"
+        }
+    ]));
+    it("has slots", () => slots("calcite-shell-center-row", SLOTS));
+    it("should not render action bar container when there is no action-bar", async () => {
+        const page = await newE2EPage();
+        await page.setContent("<calcite-shell-center-row></calcite-shell-center-row>");
+        const actionBarContainer = await page.find(`calcite-shell-center-row >>> .${CSS.actionBarContainer}`);
+        expect(actionBarContainer).toBeNull();
+    });
+    it("should render action bar container first when action bar has start position", async () => {
+        const page = await newE2EPage();
+        const pageContent = `
+    <calcite-shell-center-row>
+      <div>Hello</div>
+      <calcite-action-bar slot=${SLOTS.actionBar} position="start">
+        <calcite-action text="hello" icon="banana"></calcite-action>
+      </calcite-action-bar>
+    </calcite-shell-center-row>
+    `;
+        await page.setContent(pageContent);
+        const element = await page.find("calcite-shell-center-row");
+        await page.waitForChanges();
+        expect(element.shadowRoot.firstElementChild).toHaveClass(CSS.actionBarContainer);
+    });
+    it("should render action bar container last when action bar has end position", async () => {
+        const page = await newE2EPage();
+        const pageContent = `
+    <calcite-shell-center-row>
+      <calcite-action-bar slot=${SLOTS.actionBar} position="end">
+        <calcite-action text="hello" icon="banana"></calcite-action>
+      </calcite-action-bar>
+      <div>Hello</div>
+    </calcite-shell-center-row>
+    `;
+        await page.setContent(pageContent);
+        const element = await page.find("calcite-shell-center-row");
+        await page.waitForChanges();
+        expect(element.shadowRoot.lastElementChild).toHaveClass(CSS.actionBarContainer);
+    });
+    it("should be accessible", async () => accessible(`
+    <calcite-shell-center-row>
+      <div>content</div>
+      <calcite-action-bar slot=${SLOTS.actionBar}>
+        <calcite-action text="hello" icon="banana"></calcite-action>
+      </calcite-action-bar>
+    </calcite-shell-center-row>
+    `));
+});

package/dist/collection/components/shell-center-row/shell-center-row.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.582
+ * v1.0.0-next.591
  */
 import { Component, Element, Prop, h, Fragment } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";

package/dist/collection/components/shell-panel/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.582
+ * v1.0.0-next.591
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/shell-panel/shell-panel.css

@@ -67,6 +67,11 @@
   animation-name: in-scale;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
 /**
 * Currently only used in Checkbox.
 */