@esri/calcite-components 1.0.0-next.700 → 1.0.0-next.702

package/dist/collection/components/combobox-item-group/combobox-item-group.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.700
+ * v1.0.0-next.702
  */
 import { h } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/combobox-item-group/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.700
+ * v1.0.0-next.702
  */
 export const CSS = {
   list: "list",

package/dist/collection/components/date-picker/assets/date-picker/nls/ar.json

@@ -2,7 +2,7 @@
   "default-calendar": "gregorian",
   "separator": "‏/",
   "unitOrder": "DD/MM/YYYY",
-  "weekStart": 7,
+  "weekStart": 6,
   "placeholder": "DD/MM/YYYY",
   "days": {
     "abbreviated": ["الأحد", "الاثنين", "الثلاثاء", "الأربعاء", "الخميس", "الجمعة", "السبت"],

package/dist/collection/components/date-picker/assets/date-picker/t9n/index.d.ts

@@ -1,4 +1,4 @@
-export type Messages = {
+export type DatePickerMessages = {
   nextMonth: string;
   prevMonth: string;
   year: string;

package/dist/collection/components/date-picker/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.700
+ * v1.0.0-next.702
  */
 import { h, Host, Build } from "@stencil/core";
 import { getLocaleData, getValueAsDateRange } from "./utils";
@@ -52,20 +52,23 @@ export class DatePicker {
       }
     };
     this.monthHoverChange = (event) => {
-      if (!this.startAsDate) {
+      if (!this.range) {
         this.hoverRange = undefined;
         return;
       }
+      const { valueAsDate } = this;
+      const start = Array.isArray(valueAsDate) && valueAsDate[0];
+      const end = Array.isArray(valueAsDate) && valueAsDate[1];
       const date = new Date(event.detail);
       this.hoverRange = {
         focused: this.activeRange || "start",
-        start: this.startAsDate,
-        end: this.endAsDate
+        start,
+        end
       };
       if (!this.proximitySelectionDisabled) {
-        if (this.endAsDate) {
-          const startDiff = getDaysDiff(date, this.startAsDate);
-          const endDiff = getDaysDiff(date, this.endAsDate);
+        if (end) {
+          const startDiff = getDaysDiff(date, start);
+          const endDiff = getDaysDiff(date, end);
           if (endDiff > 0) {
             this.hoverRange.end = date;
             this.hoverRange.focused = "end";
@@ -84,11 +87,11 @@ export class DatePicker {
           }
         }
         else {
-          if (date < this.startAsDate) {
+          if (date < start) {
             this.hoverRange = {
               focused: "start",
               start: date,
-              end: this.startAsDate
+              end: start
             };
           }
           else {
@@ -98,12 +101,12 @@ export class DatePicker {
         }
       }
       else {
-        if (!this.endAsDate) {
-          if (date < this.startAsDate) {
+        if (!end) {
+          if (date < start) {
             this.hoverRange = {
               focused: "start",
               start: date,
-              end: this.startAsDate
+              end: start
             };
           }
           else {
@@ -126,16 +129,23 @@ export class DatePicker {
      * Reset active date and close
      */
     this.reset = () => {
-      if (!Array.isArray(this.valueAsDate) &&
-        this.valueAsDate &&
-        this.valueAsDate?.getTime() !== this.activeDate?.getTime()) {
-        this.activeDate = new Date(this.valueAsDate);
-      }
-      if (this.startAsDate && this.startAsDate?.getTime() !== this.activeStartDate?.getTime()) {
-        this.activeStartDate = new Date(this.startAsDate);
+      const { valueAsDate } = this;
+      if (!Array.isArray(valueAsDate) &&
+        valueAsDate &&
+        valueAsDate?.getTime() !== this.activeDate?.getTime()) {
+        this.activeDate = new Date(valueAsDate);
       }
-      if (this.endAsDate && this.endAsDate?.getTime() !== this.activeEndDate?.getTime()) {
-        this.activeEndDate = new Date(this.endAsDate);
+      if (Array.isArray(valueAsDate)) {
+        if (valueAsDate[0] &&
+          valueAsDate[0]?.getTime() !==
+            (this.activeStartDate instanceof Date && this.activeStartDate?.getTime())) {
+          this.activeStartDate = new Date(valueAsDate[0]);
+        }
+        if (valueAsDate[1] &&
+          valueAsDate[1]?.getTime() !==
+            (this.activeStartDate instanceof Date && this.activeEndDate?.getTime())) {
+          this.activeEndDate = new Date(valueAsDate[1]);
+        }
       }
     };
     /**
@@ -156,9 +166,11 @@ export class DatePicker {
         this.calciteDatePickerChange.emit();
         return;
       }
-      if (!this.startAsDate || (!this.endAsDate && date < this.startAsDate)) {
-        if (this.startAsDate) {
-          this.setEndDate(new Date(this.startAsDate));
+      const start = this.getStartDate();
+      const end = this.getEndDate();
+      if (!start || (!end && date < start)) {
+        if (start) {
+          this.setEndDate(new Date(start));
         }
         if (this.activeRange == "end") {
           this.setEndDate(date);
@@ -167,7 +179,7 @@ export class DatePicker {
           this.setStartDate(date);
         }
       }
-      else if (!this.endAsDate) {
+      else if (!end) {
         this.setEndDate(date);
       }
       else {
@@ -181,8 +193,8 @@ export class DatePicker {
             }
           }
           else {
-            const startDiff = getDaysDiff(date, this.startAsDate);
-            const endDiff = getDaysDiff(date, this.endAsDate);
+            const startDiff = getDaysDiff(date, start);
+            const endDiff = getDaysDiff(date, end);
             if (endDiff === 0 || startDiff < 0) {
               this.setStartDate(date);
             }
@@ -199,7 +211,6 @@ export class DatePicker {
         }
         else {
           this.setStartDate(date);
-          this.endAsDate = this.activeEndDate = undefined;
         }
       }
       this.calciteDatePickerChange.emit();
@@ -209,8 +220,6 @@ export class DatePicker {
     this.value = undefined;
     this.headingLevel = undefined;
     this.valueAsDate = undefined;
-    this.startAsDate = undefined;
-    this.endAsDate = undefined;
     this.minAsDate = undefined;
     this.maxAsDate = undefined;
     this.min = undefined;
@@ -223,6 +232,8 @@ export class DatePicker {
     this.messages = undefined;
     this.activeStartDate = undefined;
     this.activeEndDate = undefined;
+    this.startAsDate = undefined;
+    this.endAsDate = undefined;
     this.effectiveLocale = "";
     this.defaultMessages = undefined;
     this.localeData = undefined;
@@ -233,15 +244,17 @@ export class DatePicker {
       this.activeEndDate = newActiveDate;
     }
   }
-  handleValueAsDate(date) {
-    if (!Array.isArray(date) && date && date !== this.activeDate) {
-      this.activeDate = date;
+  valueAsDateWatcher(newValueAsDate) {
+    if (this.range && Array.isArray(newValueAsDate)) {
+      const { activeStartDate, activeEndDate } = this;
+      const newActiveStartDate = newValueAsDate[0];
+      const newActiveEndDate = newValueAsDate[1];
+      this.activeStartDate = activeStartDate !== newActiveStartDate && newActiveStartDate;
+      this.activeEndDate = activeEndDate !== newActiveEndDate && newActiveEndDate;
+    }
+    else if (newValueAsDate && newValueAsDate !== this.activeDate) {
+      this.activeDate = newValueAsDate;
     }
-  }
-  handleRangeChange() {
-    const { startAsDate: startDate, endAsDate: endDate } = this;
-    this.activeEndDate = endDate;
-    this.activeStartDate = startDate;
   }
   onMinChanged(min) {
     if (min) {
@@ -351,38 +364,23 @@ export class DatePicker {
       h("calcite-date-picker-month", { activeDate: activeDate, endDate: this.range ? endDate : undefined, hoverRange: this.hoverRange, localeData: this.localeData, max: maxDate, min: minDate, onCalciteInternalDatePickerActiveDateChange: this.monthActiveDateChange, onCalciteInternalDatePickerHover: this.monthHoverChange, onCalciteInternalDatePickerMouseOut: this.monthMouseOutChange, onCalciteInternalDatePickerSelect: this.monthDateChange, scale: this.scale, selectedDate: this.activeRange === "end" ? endDate : date, startDate: this.range ? date : undefined })
     ]);
   }
-  /**
-   * Update date instance of start if valid
-   *
-   * @param startDate
-   * @param emit
-   */
-  setStartAsDate(startDate, emit) {
-    this.startAsDate = startDate;
-    this.mostRecentRangeValue = this.startAsDate;
-    if (emit) {
-      this.calciteDatePickerRangeChange.emit();
-    }
-  }
-  /**
-   * Update date instance of end if valid
-   *
-   * @param endDate
-   * @param emit
-   */
-  setEndAsDate(endDate, emit) {
-    this.endAsDate = endDate ? setEndOfDay(endDate) : endDate;
-    this.mostRecentRangeValue = this.endAsDate;
-    if (emit) {
-      this.calciteDatePickerRangeChange.emit();
-    }
+  getEndDate() {
+    return (Array.isArray(this.valueAsDate) && this.valueAsDate[1]) || undefined;
   }
   setEndDate(date) {
-    this.setEndAsDate(date, true);
+    const newEndDate = date ? setEndOfDay(date) : date;
+    this.valueAsDate = [this.getStartDate(), date];
+    this.mostRecentRangeValue = newEndDate;
+    this.calciteDatePickerRangeChange.emit();
     this.activeEndDate = date || null;
   }
+  getStartDate() {
+    return Array.isArray(this.valueAsDate) && this.valueAsDate[0];
+  }
   setStartDate(date) {
-    this.setStartAsDate(date, true);
+    this.valueAsDate = [date, this.getEndDate()];
+    this.mostRecentRangeValue = date;
+    this.calciteDatePickerRangeChange.emit();
     this.activeStartDate = date || null;
   }
   /**
@@ -508,50 +506,6 @@ export class DatePicker {
           "text": "Specifies the selected date as a full date object (`new Date(\"yyyy-mm-dd\")`), or an array containing full date objects (`[new Date(\"yyyy-mm-dd\"), new Date(\"yyyy-mm-dd\")]`)."
         }
       },
-      "startAsDate": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "Date",
-          "resolved": "Date",
-          "references": {
-            "Date": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "use `valueAsDate` instead."
-            }],
-          "text": "Specifies the selected start date as a full date object."
-        }
-      },
-      "endAsDate": {
-        "type": "unknown",
-        "mutable": true,
-        "complexType": {
-          "original": "Date",
-          "resolved": "Date",
-          "references": {
-            "Date": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "use `valueAsDate` instead."
-            }],
-          "text": "Specifies the selected end date as a full date object."
-        }
-      },
       "minAsDate": {
         "type": "unknown",
         "mutable": true,
@@ -704,13 +658,13 @@ export class DatePicker {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Partial<Messages>",
+          "original": "Partial<DatePickerMessages>",
           "resolved": "{ nextMonth?: string; prevMonth?: string; year?: string; }",
           "references": {
             "Partial": {
               "location": "global"
             },
-            "Messages": {
+            "DatePickerMessages": {
               "location": "import",
               "path": "./assets/date-picker/t9n"
             }
@@ -727,10 +681,10 @@ export class DatePicker {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Messages",
+          "original": "DatePickerMessages",
           "resolved": "{ nextMonth: string; prevMonth: string; year: string; }",
           "references": {
-            "Messages": {
+            "DatePickerMessages": {
               "location": "import",
               "path": "./assets/date-picker/t9n"
             }
@@ -752,6 +706,8 @@ export class DatePicker {
     return {
       "activeStartDate": {},
       "activeEndDate": {},
+      "startAsDate": {},
+      "endAsDate": {},
       "effectiveLocale": {},
       "defaultMessages": {},
       "localeData": {},
@@ -781,10 +737,7 @@ export class DatePicker {
         "cancelable": false,
         "composed": true,
         "docs": {
-          "tags": [{
-              "name": "see",
-              "text": "[DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/date-picker/interfaces.ts#L1)"
-            }],
+          "tags": [],
           "text": "Emits when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`."
         },
         "complexType": {
@@ -801,13 +754,7 @@ export class DatePicker {
         "methodName": "activeDateWatcher"
       }, {
         "propName": "valueAsDate",
-        "methodName": "handleValueAsDate"
-      }, {
-        "propName": "startAsDate",
-        "methodName": "handleRangeChange"
-      }, {
-        "propName": "endAsDate",
-        "methodName": "handleRangeChange"
+        "methodName": "valueAsDateWatcher"
       }, {
         "propName": "min",
         "methodName": "onMinChanged"

package/dist/collection/components/date-picker/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.700
+ * v1.0.0-next.702
  */
 export const HEADING_LEVEL = 2;

package/dist/collection/components/date-picker/utils.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.700
+ * v1.0.0-next.702
  */
 import { getAssetPath } from "@stencil/core";
 import { getSupportedLocale } from "../../utils/locale";

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.700
+ * v1.0.0-next.702
  */
 import { Host, h } from "@stencil/core";
 import { closestElementCrossShadowBoundary, getElementDir } from "../../utils/dom";

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.700
+ * v1.0.0-next.702
  */
 import { Host, h } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";

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.700
+ * v1.0.0-next.702
  */
 import { h, Fragment } from "@stencil/core";
 import { dateFromRange, nextMonth, prevMonth, getOrder } from "../../utils/date";
@@ -332,10 +332,10 @@ export class DatePickerMonthHeader {
         "type": "unknown",
         "mutable": true,
         "complexType": {
-          "original": "Messages",
+          "original": "DatePickerMessages",
           "resolved": "{ nextMonth: string; prevMonth: string; year: string; }",
           "references": {
-            "Messages": {
+            "DatePickerMessages": {
               "location": "import",
               "path": "../date-picker/assets/date-picker/t9n"
             }

package/dist/collection/components/date-picker-month-header/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.700
+ * v1.0.0-next.702
  */
 export const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;
 export const CSS = {

package/dist/collection/components/dropdown/dropdown.js

@@ -1,10 +1,10 @@
 /*!
  * 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.700
+ * v1.0.0-next.702
  */
 import { h, Host } from "@stencil/core";
-import { focusElement, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
+import { focusElement, focusElementInGroup, isPrimaryPointerButton, toAriaBoolean } from "../../utils/dom";
 import { FloatingCSS, connectFloatingUI, disconnectFloatingUI, defaultMenuPlacement, filterComputedPlacements, reposition, updateAfterClose } from "../../utils/floating-ui";
 import { SLOTS } from "./resources";
 import { createObserver } from "../../utils/observers";
@@ -277,37 +277,27 @@ export class Dropdown {
   }
   calciteInternalDropdownItemKeyEvent(event) {
     const { keyboardEvent } = event.detail;
-    // handle edge
     const target = keyboardEvent.target;
-    const itemToFocus = target.nodeName !== "A" ? target : target.parentNode;
-    const isFirstItem = this.itemIndex(itemToFocus) === 0;
-    const isLastItem = this.itemIndex(itemToFocus) === this.items.length - 1;
     switch (keyboardEvent.key) {
       case "Tab":
-        if (isLastItem && !keyboardEvent.shiftKey) {
+        if (this.items.indexOf(target) === this.items.length - 1 && !keyboardEvent.shiftKey) {
           this.closeCalciteDropdown();
         }
-        else if (isFirstItem && keyboardEvent.shiftKey) {
+        else if (this.items.indexOf(target) === 0 && keyboardEvent.shiftKey) {
           this.closeCalciteDropdown();
         }
-        else if (keyboardEvent.shiftKey) {
-          this.focusPrevItem(itemToFocus);
-        }
-        else {
-          this.focusNextItem(itemToFocus);
-        }
         break;
       case "ArrowDown":
-        this.focusNextItem(itemToFocus);
+        focusElementInGroup(this.items, target, "next");
         break;
       case "ArrowUp":
-        this.focusPrevItem(itemToFocus);
+        focusElementInGroup(this.items, target, "previous");
         break;
       case "Home":
-        this.focusFirstItem();
+        focusElementInGroup(this.items, target, "first");
         break;
       case "End":
-        this.focusLastItem();
+        focusElementInGroup(this.items, target, "last");
         break;
     }
     event.stopPropagation();
@@ -366,27 +356,6 @@ export class Dropdown {
       focusElement(this.triggers[0]);
     }
   }
-  focusFirstItem() {
-    const firstItem = this.items[0];
-    this.getFocusableElement(firstItem);
-  }
-  focusLastItem() {
-    const lastItem = this.items[this.items.length - 1];
-    this.getFocusableElement(lastItem);
-  }
-  focusNextItem(el) {
-    const index = this.itemIndex(el);
-    const nextItem = this.items[index + 1] || this.items[0];
-    this.getFocusableElement(nextItem);
-  }
-  focusPrevItem(el) {
-    const index = this.itemIndex(el);
-    const prevItem = this.items[index - 1] || this.items[this.items.length - 1];
-    this.getFocusableElement(prevItem);
-  }
-  itemIndex(el) {
-    return this.items.indexOf(el);
-  }
   getFocusableElement(item) {
     if (!item) {
       return;

package/dist/collection/components/dropdown/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.700
+ * v1.0.0-next.702
  */
 export const SLOTS = {
   dropdownTrigger: "trigger"

package/dist/collection/components/dropdown-group/dropdown-group.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.700
+ * v1.0.0-next.702
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";

package/dist/collection/components/dropdown-group/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.700
+ * v1.0.0-next.702
  */
 export const CSS = {
   containerSmall: "container--s",

package/dist/collection/components/dropdown-item/dropdown-item.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.700
+ * v1.0.0-next.702
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
@@ -58,7 +58,7 @@ export class DropdownItem {
         : this.iconEnd
           ? [contentNode, iconEndEl]
           : contentNode;
-    const contentEl = !this.href ? (slottedContent) : (h("a", { "aria-label": this.label, class: "dropdown-link", href: this.href, ref: (el) => (this.childLink = el), rel: this.rel, target: this.target }, slottedContent));
+    const contentEl = !this.href ? (slottedContent) : (h("a", { "aria-label": this.label, class: "dropdown-link", href: this.href, ref: (el) => (this.childLink = el), rel: this.rel, tabIndex: -1, target: this.target }, slottedContent));
     const itemRole = this.href
       ? null
       : this.selectionMode === "single"

package/dist/collection/components/dropdown-item/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.700
+ * v1.0.0-next.702
  */
 export const CSS = {
   containerLink: "container--link",

package/dist/collection/components/fab/fab.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.700
+ * v1.0.0-next.702
  */
 import { h } from "@stencil/core";
 import { CSS, ICONS } from "./resources";

package/dist/collection/components/fab/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.700
+ * v1.0.0-next.702
  */
 export const CSS = {
   button: "button"

package/dist/collection/components/filter/assets/filter/t9n/index.d.ts

@@ -1,4 +1,4 @@
-export type Messages = {
+export type FilterMessages = {
   label: string;
   clear: string;
 };