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

package/dist/collection/components/input-date-picker/input-date-picker.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, h, Prop, Element, Host, State, Listen, Watch, Method, Event, Build } from "@stencil/core";
 import { getLocaleData, getValueAsDateRange } from "../date-picker/utils";
@@ -10,10 +10,13 @@ import { TEXT } from "../date-picker/resources";
 import { CSS } from "./resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
-import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements } from "../../utils/floating-ui";
+import { positionFloatingUI, FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, repositionDebounceTimeout } from "../../utils/floating-ui";
 import { updateHostInteraction } from "../../utils/interactive";
 import { toAriaBoolean } from "../../utils/dom";
 import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
+import { unwatchGlobalAttributes, watchGlobalAttributes } from "../../utils/globalAttributes";
+import { getLocale } from "../../utils/locale";
+import { debounce } from "lodash-es";
 export class InputDatePicker {
   constructor() {
     //--------------------------------------------------------------------------
@@ -57,8 +60,6 @@ export class InputDatePicker {
      * @default "Year"
      */
     this.intlYear = TEXT.year;
-    /** BCP 47 language tag for desired language and country format */
-    this.locale = document.documentElement.lang || "en";
     /** specify the scale of the date picker */
     this.scale = "m";
     /**
@@ -87,12 +88,14 @@ export class InputDatePicker {
     /** Layout */
     this.layout = "horizontal";
     this.focusedInput = "start";
+    this.globalAttributes = {};
     this.openTransitionProp = "opacity";
     //--------------------------------------------------------------------------
     //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.debouncedReposition = debounce(() => this.reposition(), repositionDebounceTimeout);
     this.setFilteredPlacements = () => {
       const { el, flipPlacements } = this;
       this.filteredFlipPlacements = flipPlacements
@@ -209,7 +212,7 @@ export class InputDatePicker {
   }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
-    this.reposition();
+    this.debouncedReposition();
   }
   onMinChanged(min) {
     if (min) {
@@ -230,10 +233,10 @@ export class InputDatePicker {
       this.open = false;
       return;
     }
-    this.reposition();
+    this.debouncedReposition();
   }
   overlayPositioningHandler() {
-    this.reposition();
+    this.debouncedReposition();
   }
   //--------------------------------------------------------------------------
   //
@@ -305,8 +308,9 @@ export class InputDatePicker {
     connectLabel(this);
     connectForm(this);
     connectOpenCloseComponent(this);
+    watchGlobalAttributes(this, ["lang"]);
     this.setFilteredPlacements();
-    this.reposition();
+    this.debouncedReposition();
   }
   async componentWillLoad() {
     await this.loadLocaleData();
@@ -314,13 +318,14 @@ export class InputDatePicker {
     this.onMaxChanged(this.max);
   }
   componentDidLoad() {
-    this.reposition();
+    this.debouncedReposition();
   }
   disconnectedCallback() {
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
     disconnectOpenCloseComponent(this);
+    unwatchGlobalAttributes(this);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -332,8 +337,9 @@ export class InputDatePicker {
     const endDate = this.range
       ? dateFromRange(this.endAsDate, this.minAsDate, this.maxAsDate)
       : null;
-    const formattedEndDate = endDate ? endDate.toLocaleDateString(this.locale) : "";
-    const formattedDate = date ? date.toLocaleDateString(this.locale) : "";
+    const locale = getLocale(this);
+    const formattedEndDate = endDate ? endDate.toLocaleDateString(locale) : "";
+    const formattedDate = date ? date.toLocaleDateString(locale) : "";
     return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, role: "application" },
       this.localeData && (h("div", { "aria-expanded": toAriaBoolean(this.open), class: "input-container", role: "application" },
         h("div", { class: "input-wrapper", ref: this.setStartWrapper },
@@ -348,7 +354,7 @@ export class InputDatePicker {
               [FloatingCSS.animation]: true,
               [FloatingCSS.animationActive]: this.open
             }, ref: this.setTransitionEl },
-            h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))),
+            h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, lang: locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))),
         this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" },
           h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))),
         this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" },
@@ -393,8 +399,7 @@ export class InputDatePicker {
     if (!Build.isBrowser) {
       return;
     }
-    const { locale } = this;
-    this.localeData = await getLocaleData(locale);
+    this.localeData = await getLocaleData(getLocale(this));
   }
   clearCurrentValue() {
     if (!this.range) {
@@ -470,7 +475,8 @@ export class InputDatePicker {
    * @param target
    */
   blur(target) {
-    const { locale, focusedInput, endAsDate, range, startAsDate, valueAsDate } = this;
+    const { focusedInput, endAsDate, range, startAsDate, valueAsDate } = this;
+    const locale = getLocale(this);
     const date = this.getDateFromInput(target.value);
     if (!date) {
       if (!range && valueAsDate) {
@@ -572,7 +578,7 @@ export class InputDatePicker {
         "text": "When true, still focusable but controls are gone and the value cannot be modified."
       },
       "attribute": "read-only",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "value": {
@@ -632,7 +638,7 @@ export class InputDatePicker {
         "text": "Number at which section headings should start for this component."
       },
       "attribute": "heading-level",
-      "reflect": false
+      "reflect": true
     },
     "valueAsDate": {
       "type": "unknown",
@@ -750,7 +756,7 @@ export class InputDatePicker {
         "text": "Earliest allowed date (\"yyyy-mm-dd\")"
       },
       "attribute": "min",
-      "reflect": false
+      "reflect": true
     },
     "max": {
       "type": "string",
@@ -767,7 +773,7 @@ export class InputDatePicker {
         "text": "Latest allowed date (\"yyyy-mm-dd\")"
       },
       "attribute": "max",
-      "reflect": false
+      "reflect": true
     },
     "active": {
       "type": "boolean",
@@ -823,7 +829,7 @@ export class InputDatePicker {
         "text": "The picker's name. Gets submitted with the form."
       },
       "attribute": "name",
-      "reflect": false
+      "reflect": true
     },
     "intlPrevMonth": {
       "type": "string",
@@ -899,12 +905,17 @@ export class InputDatePicker {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "set the global `lang` attribute on the element instead."
+          }, {
+            "name": "mdn",
+            "text": "[lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)"
+          }],
         "text": "BCP 47 language tag for desired language and country format"
       },
       "attribute": "locale",
-      "reflect": false,
-      "defaultValue": "document.documentElement.lang || \"en\""
+      "reflect": false
     },
     "scale": {
       "type": "string",
@@ -1007,7 +1018,7 @@ export class InputDatePicker {
         "text": "Selected start date"
       },
       "attribute": "start",
-      "reflect": false
+      "reflect": true
     },
     "end": {
       "type": "string",
@@ -1027,7 +1038,7 @@ export class InputDatePicker {
         "text": "Selected end date"
       },
       "attribute": "end",
-      "reflect": false
+      "reflect": true
     },
     "overlayPositioning": {
       "type": "string",
@@ -1049,7 +1060,7 @@ export class InputDatePicker {
         "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
       },
       "attribute": "overlay-positioning",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "\"absolute\""
     },
     "proximitySelectionDisabled": {
@@ -1067,7 +1078,7 @@ export class InputDatePicker {
         "text": "Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range."
       },
       "attribute": "proximity-selection-disabled",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "layout": {
@@ -1091,6 +1102,7 @@ export class InputDatePicker {
   }; }
   static get states() { return {
     "focusedInput": {},
+    "globalAttributes": {},
     "localeData": {}
   }; }
   static get events() { return [{
@@ -1291,6 +1303,9 @@ export class InputDatePicker {
     }, {
       "propName": "end",
       "methodName": "endWatcher"
+    }, {
+      "propName": "globalAttributes",
+      "methodName": "loadLocaleData"
     }, {
       "propName": "locale",
       "methodName": "loadLocaleData"

package/dist/collection/components/input-date-picker/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 = {
   menu: "menu-container",

package/dist/collection/components/input-message/input-message.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/input-message/input-message.e2e.js

@@ -0,0 +1,122 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, renders, hidden } from "../../tests/commonTests";
+import { StatusIconDefaults } from "./interfaces";
+describe("calcite-input-message", () => {
+    it("renders", async () => renders("calcite-input-message", { visible: false, display: "flex" }));
+    it("honors hidden attribute", async () => hidden(`<calcite-input-message active>Text</calcite-input-message>`));
+    it("is accessible", async () => accessible(`<calcite-input-message>Text</calcite-input-message>`));
+    it("is accessible with icon", async () => accessible(`<calcite-input-message icon>Text</calcite-input-message>`));
+    it("renders default props when none are provided", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <calcite-input-message></calcite-input-message>
+    `);
+        const element = await page.find("calcite-input-message");
+        expect(element).toEqualAttribute("status", "idle");
+    });
+    it("renders requested props when valid props are provided", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <calcite-input-message status="valid">Text</calcite-input-message>
+    `);
+        const element = await page.find("calcite-input-message");
+        expect(element).toEqualAttribute("status", "valid");
+    });
+    it("inherits requested props when from wrapping calcite-label when props are provided", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <calcite-label status="invalid">
+    Label text
+    <calcite-input-message>Text</calcite-input-message>
+    </calcite-label>
+    `);
+        const deprecatedLabelStatusElement = await page.find("calcite-input-message");
+        expect(deprecatedLabelStatusElement).toEqualAttribute("status", "invalid");
+    });
+    it("does not render an icon if not requested", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+    <calcite-input-message>Text</calcite-input-message>
+    `);
+        const icon = await page.find("calcite-input-message >>> .calcite-input-message-icon");
+        expect(icon).toBeNull();
+    });
+    describe("when icon prop is provided", () => {
+        let page;
+        let element;
+        let iconEl;
+        let requestedIcon;
+        beforeEach(async () => {
+            page = await newE2EPage();
+        });
+        describe("when it's a boolean type", () => {
+            describe("when value is true", () => {
+                it("should render the default status icon", async () => {
+                    await page.setContent(`
+          <calcite-input-message icon>Text</calcite-input-message>
+          `);
+                    iconEl = await page.find("calcite-input-message >>> .calcite-input-message-icon");
+                    requestedIcon = await iconEl.getAttribute("icon");
+                    expect(requestedIcon).toEqual(StatusIconDefaults.idle);
+                    expect(iconEl).not.toBeNull();
+                });
+                describe("when element status is changed", () => {
+                    it("should render icon based on new status", async () => {
+                        await page.setContent(`
+              <calcite-input-message icon status="invalid">An example with icon</calcite-input-message>
+            `);
+                        element = await page.find("calcite-input-message");
+                        iconEl = await page.find("calcite-input-message >>> .calcite-input-message-icon");
+                        requestedIcon = await iconEl.getAttribute("icon");
+                        expect(requestedIcon).toEqual(StatusIconDefaults.invalid);
+                        expect(iconEl).not.toBeNull();
+                        await element.setAttribute("status", "valid");
+                        await page.waitForChanges();
+                        iconEl = await page.find("calcite-input-message >>> .calcite-input-message-icon");
+                        requestedIcon = await iconEl.getAttribute("icon");
+                        expect(requestedIcon).toEqual(StatusIconDefaults.valid);
+                        expect(iconEl).not.toBeNull();
+                    });
+                });
+            });
+            describe("when value is false", () => {
+                it("should render no icon", async () => {
+                    const page = await newE2EPage();
+                    await page.setContent(`
+          <calcite-input-message !icon>Text</calcite-input-message>
+          `);
+                    iconEl = await page.find("calcite-input-message >>> .calcite-input-message-icon");
+                    expect(iconEl).toBeNull();
+                });
+            });
+        });
+        describe("when it's a string type", () => {
+            it("should render the requested custom icon", async () => {
+                await page.setContent("<calcite-input-message icon='banana'>Nah</calcite-input-message>");
+                element = await page.find("calcite-input-message");
+                iconEl = await page.find("calcite-input-message >>> .calcite-input-message-icon");
+                requestedIcon = await iconEl.getAttribute("icon");
+                expect(requestedIcon).toEqual("banana");
+            });
+            describe("when the icon is changed", () => {
+                it("should render the new icon", async () => {
+                    await page.setContent("<calcite-input-message icon='information'>More info</calcite-input-message>");
+                    element = await page.find("calcite-input-message");
+                    iconEl = await page.find("calcite-input-message >>> .calcite-input-message-icon");
+                    requestedIcon = await iconEl.getAttribute("icon");
+                    expect(requestedIcon).toEqual(StatusIconDefaults.idle);
+                    await element.setAttribute("icon", "banana");
+                    await page.waitForChanges();
+                    iconEl = await page.find("calcite-input-message >>> .calcite-input-message-icon");
+                    requestedIcon = await iconEl.getAttribute("icon");
+                    expect(requestedIcon).toEqual("banana");
+                    await element.setAttribute("icon", "view-hide");
+                    await page.waitForChanges();
+                    iconEl = await page.find("calcite-input-message >>> .calcite-input-message-icon");
+                    requestedIcon = await iconEl.getAttribute("icon");
+                    expect(requestedIcon).toEqual("view-hide");
+                });
+            });
+        });
+    });
+});

package/dist/collection/components/input-message/input-message.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, Host, h, Prop, Watch } from "@stencil/core";
 import { getElementProp, setRequestedIcon } from "../../utils/dom";

package/dist/collection/components/input-message/interfaces.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 var StatusIconDefaults;
 (function (StatusIconDefaults) {

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