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

package/dist/collection/components/date-picker/utils.spec.js

@@ -0,0 +1,55 @@
+import { getLocaleData, requestCache } from "./utils";
+function fetchFakeData(data) {
+    return () => new Promise((resolve) => {
+        resolve({
+            json: () => Promise.resolve({ data })
+        });
+    });
+}
+describe("utils", () => {
+    describe("getLocaleData", () => {
+        beforeEach(() => {
+            const fakeData = { fake: "fake data not meant to be checked" };
+            global.fetch = jest.fn().mockImplementation(fetchFakeData(fakeData));
+        });
+        afterEach(() => {
+            jest.fn().mockClear();
+            Object.keys(requestCache).forEach((key) => delete requestCache[key]);
+        });
+        it("defaults to en locale if lang code is invalid", async () => {
+            const locale = "invalid-locale";
+            await getLocaleData(locale);
+            expect(requestCache).toHaveProperty("en");
+        });
+        it("falls to lang code locale if regional code is not found", async () => {
+            const locale = "pt-UnsupportedRegion";
+            await getLocaleData(locale);
+            expect(requestCache).toHaveProperty("pt");
+        });
+        it("fetches locale with conventional-cased lang code", async () => {
+            const locale = "es";
+            await getLocaleData(locale);
+            expect(requestCache).toHaveProperty("es");
+        });
+        it("fetches locale with uppercased lang code", async () => {
+            const locale = "AR";
+            await getLocaleData(locale);
+            expect(requestCache).toHaveProperty("ar");
+        });
+        it("fetches locale with lowercased region code", async () => {
+            const locale = "zh-cn";
+            await getLocaleData(locale);
+            expect(requestCache).toHaveProperty("zh-CN");
+        });
+        it("fetches locale with uppercased region code", async () => {
+            const locale = "ES-MX";
+            await getLocaleData(locale);
+            expect(requestCache).toHaveProperty("es-MX");
+        });
+        it("fetches locale with conventional-cased lang and region code", async () => {
+            const locale = "pt-PT";
+            await getLocaleData(locale);
+            expect(requestCache).toHaveProperty("pt-PT");
+        });
+    });
+});

package/dist/collection/components/date-picker-day/date-picker-day.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/date-picker-day/date-picker-day.e2e.js

@@ -0,0 +1,16 @@
+import { disabled } from "../../tests/commonTests";
+import { newProgrammaticE2EPage } from "../../tests/utils";
+describe("calcite-date-picker-day", () => {
+    it("can be disabled", async () => {
+        const page = await newProgrammaticE2EPage();
+        await page.evaluate(() => {
+            const dateEl = document.createElement("calcite-date-picker-day");
+            dateEl.active = true;
+            dateEl.day = 3;
+            dateEl.localeData = { numerals: "0123456789" };
+            document.body.append(dateEl);
+        });
+        await page.waitForChanges();
+        return disabled({ tag: "calcite-date-picker-day", page });
+    });
+});

package/dist/collection/components/date-picker-day/date-picker-day.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, Host, Event, Listen, h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";

package/dist/collection/components/date-picker-month/date-picker-month.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/date-picker-month/date-picker-month.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, Host, Event, h, Listen } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";

package/dist/collection/components/date-picker-month-header/date-picker-month-header.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/date-picker-month-header/date-picker-month-header.e2e.js

@@ -0,0 +1,72 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { renders } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+describe("calcite-date-picker-month-header", () => {
+    it("renders", async () => renders("calcite-date-picker-month-header", { display: "block" }));
+    const localeDataFixture = {
+        "default-calendar": "gregorian",
+        separator: "/",
+        unitOrder: "DD/MM/YYYY",
+        weekStart: 7,
+        placeholder: "DD/MM/YYYY",
+        days: {
+            narrow: ["D", "L", "M", "M", "J", "V", "S"]
+        },
+        numerals: "0123456789",
+        months: {
+            abbreviated: ["ene.", "feb.", "mar.", "abr.", "may.", "jun.", "jul.", "ago.", "sept.", "oct.", "nov.", "dic."],
+            narrow: ["E", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
+            wide: [
+                "enero",
+                "febrero",
+                "marzo",
+                "abril",
+                "mayo",
+                "junio",
+                "julio",
+                "agosto",
+                "septiembre",
+                "octubre",
+                "noviembre",
+                "diciembre"
+            ]
+        }
+    };
+    it("displays next/previous options", async () => {
+        const page = await newE2EPage({
+            // intentionally using calcite-date-picker to wire up supporting components to be used in `evaluate` fn below
+            html: "<calcite-date-picker></calcite-date-picker>"
+        });
+        await page.waitForChanges();
+        await page.evaluate((localeData) => {
+            const dateMonthHeader = document.createElement("calcite-date-picker-month-header");
+            const now = new Date();
+            dateMonthHeader.activeDate = now;
+            dateMonthHeader.selectedDate = now;
+            dateMonthHeader.localeData = localeData;
+            document.body.innerHTML = "";
+            document.body.append(dateMonthHeader);
+        }, localeDataFixture);
+        await page.waitForChanges();
+        const [prev, next] = await page.findAll("calcite-date-picker-month-header >>> .chevron");
+        expect(await prev.isVisible()).toBe(true);
+        expect(await next.isVisible()).toBe(true);
+    });
+    it("passes down the default intlYear prop to nested .year input to set it as aria-label", async () => {
+        const page = await newE2EPage();
+        await page.setContent(html `<calcite-date-picker></calcite-date-picker>`);
+        await page.evaluate((localeData) => {
+            const dateMonthHeader = document.createElement("calcite-date-picker-month-header");
+            const now = new Date();
+            dateMonthHeader.activeDate = now;
+            dateMonthHeader.selectedDate = now;
+            dateMonthHeader.localeData = localeData;
+            dateMonthHeader.intlYear = "Year";
+            document.body.innerHTML = "";
+            document.body.append(dateMonthHeader);
+        }, localeDataFixture);
+        await page.waitForChanges();
+        const date = await page.find(`calcite-date-picker-month-header >>> input`);
+        expect(await date.getAttribute("aria-label")).toBe("Year");
+    });
+});

package/dist/collection/components/date-picker-month-header/date-picker-month-header.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, Event, h, State, Watch, Fragment } from "@stencil/core";
 import { dateFromRange, nextMonth, prevMonth, localizeNumber, parseNumber, getOrder } from "../../utils/date";
@@ -10,6 +10,12 @@ import { BUDDHIST_CALENDAR_YEAR_OFFSET } from "./resources";
 import { isActivationKey } from "../../utils/key";
 export class DatePickerMonthHeader {
   constructor() {
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    this.globalAttributes = {};
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -267,23 +273,6 @@ export class DatePickerMonthHeader {
         "text": "Maximum date of the calendar above which is disabled."
       }
     },
-    "locale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "User's language and region as BCP 47 formatted string."
-      },
-      "attribute": "locale",
-      "reflect": false
-    },
     "intlPrevMonth": {
       "type": "string",
       "mutable": false,
@@ -379,6 +368,7 @@ export class DatePickerMonthHeader {
     }
   }; }
   static get states() { return {
+    "globalAttributes": {},
     "nextMonthDate": {},
     "prevMonthDate": {}
   }; }

package/dist/collection/components/date-picker-month-header/resources.js

@@ -1,6 +1,6 @@
 /*!
  * 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 BUDDHIST_CALENDAR_YEAR_OFFSET = 543;

package/dist/collection/components/dropdown/dropdown.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.
 */