@esri/calcite-components 1.0.0-beta.86 → 1.0.0-beta.87

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-beta.86
+ * v1.0.0-beta.87
  */
 import { Component, h, Prop, Event, Element, Host, State, Watch, Build } from "@stencil/core";
 import { getLocaleData } from "./utils";
@@ -40,13 +40,13 @@ export class DatePicker {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.keyUpHandler = (e) => {
-      if (e.key === "Escape") {
+    this.keyDownHandler = (event) => {
+      if (event.key === "Escape") {
         this.reset();
       }
     };
-    this.monthHeaderSelectChange = (e) => {
-      const date = new Date(e.detail);
+    this.monthHeaderSelectChange = (event) => {
+      const date = new Date(event.detail);
       if (!this.range) {
         this.activeDate = date;
       }
@@ -60,8 +60,8 @@ export class DatePicker {
         this.mostRecentRangeValue = date;
       }
     };
-    this.monthActiveDateChange = (e) => {
-      const date = new Date(e.detail);
+    this.monthActiveDateChange = (event) => {
+      const date = new Date(event.detail);
       if (!this.range) {
         this.activeDate = date;
       }
@@ -75,12 +75,12 @@ export class DatePicker {
         this.mostRecentRangeValue = date;
       }
     };
-    this.monthHoverChange = (e) => {
+    this.monthHoverChange = (event) => {
       if (!this.startAsDate) {
         this.hoverRange = undefined;
         return;
       }
-      const date = new Date(e.detail);
+      const date = new Date(event.detail);
       this.hoverRange = {
         focused: this.activeRange || "start",
         start: this.startAsDate,
@@ -139,7 +139,7 @@ export class DatePicker {
           this.hoverRange = undefined;
         }
       }
-      e.stopPropagation();
+      event.stopPropagation();
     };
     this.monthMouseOutChange = () => {
       if (this.hoverRange) {
@@ -166,10 +166,10 @@ export class DatePicker {
     /**
      * Event handler for when the selected date changes
      *
-     * @param e
+     * @param event
      */
-    this.monthDateChange = (e) => {
-      const date = new Date(e.detail);
+    this.monthDateChange = (event) => {
+      const date = new Date(event.detail);
       if (!this.range) {
         this.value = date ? dateToISO(date) : "";
         this.valueAsDate = date || null;
@@ -307,7 +307,7 @@ export class DatePicker {
         ? endDate || this.maxAsDate
         : this.maxAsDate
       : this.maxAsDate;
-    return (h(Host, { onBlur: this.reset, onKeyUp: this.keyUpHandler, role: "application" }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
+    return (h(Host, { onBlur: this.reset, onKeyDown: this.keyDownHandler, role: "application" }, this.renderCalendar(activeDate, maxDate, minDate, date, endDate)));
   }
   valueHandler(value) {
     if (Array.isArray(value)) {

package/dist/collection/components/date-picker/interfaces.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-beta.86
+ * v1.0.0-beta.87
  */
 export {};

package/dist/collection/components/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-beta.86
+ * v1.0.0-beta.87
  */
 export const HEADING_LEVEL = 2;
 export const TEXT = {

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-beta.86
+ * v1.0.0-beta.87
  */
 import { getAssetPath } from "@stencil/core";
 import { locales } from "../../utils/locale";

package/dist/collection/components/date-picker-day/date-picker-day.css

@@ -71,22 +71,13 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
-:host {
-  display: flex;
-  min-width: 0px;
-  cursor: pointer;
-  justify-content: center;
-  color: var(--calcite-ui-text-3);
-  width: 14.2857142857%;
-}
-
 :host([disabled]) {
   pointer-events: none;
   cursor: default;
@@ -94,6 +85,16 @@
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
+
+:host {
+  display: flex;
+  min-inline-size: 0px;
+  cursor: pointer;
+  justify-content: center;
+  color: var(--calcite-ui-text-3);
+  inline-size: 14.2857142857%;
+}
+
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */
@@ -127,49 +128,43 @@
 }
 
 .text {
-  margin-top: 1px;
-  margin-bottom: 0px;
+  margin-block: 1px 0px;
   margin-inline-start: 0px;
 }
 
 :host([scale=s]) .day-v-wrapper {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
+  padding-block: 0.125rem;
 }
 :host([scale=s]) .day-wrapper {
   padding: 0px;
 }
 :host([scale=s]) .day {
-  height: 27px;
-  width: 27px;
+  block-size: 27px;
+  inline-size: 27px;
   font-size: var(--calcite-font-size--2);
 }
 
 :host([scale=m]) .day-v-wrapper {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-block: 0.25rem;
 }
 :host([scale=m]) .day-wrapper {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-inline: 0.25rem;
 }
 :host([scale=m]) .day {
-  height: 33px;
-  width: 33px;
+  block-size: 33px;
+  inline-size: 33px;
   font-size: var(--calcite-font-size--1);
 }
 
 :host([scale=l]) .day-v-wrapper {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-block: 0.25rem;
 }
 :host([scale=l]) .day-wrapper {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-inline: 0.25rem;
 }
 :host([scale=l]) .day {
-  height: 43px;
-  width: 43px;
+  block-size: 43px;
+  inline-size: 43px;
   font-size: var(--calcite-font-size-0);
 }
 

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-beta.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
@@ -35,17 +35,15 @@ export class DatePickerDay {
     this.onClick = () => {
       !this.disabled && this.calciteDaySelect.emit();
     };
-    this.keyDownHandler = (e) => {
-      const key = e.key;
+    this.keyDownHandler = (event) => {
+      const key = event.key;
       if (key === " " || key === "Enter") {
         !this.disabled && this.calciteDaySelect.emit();
       }
     };
   }
   mouseoverHandler() {
-    this.calciteInternalDayHover.emit({
-      disabled: this.disabled
-    });
+    this.calciteInternalDayHover.emit();
   }
   //--------------------------------------------------------------------------
   //
@@ -331,8 +329,8 @@ export class DatePickerDay {
         "text": "Emitted when user selects day"
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -349,8 +347,8 @@ export class DatePickerDay {
         "text": "Emitted when user hovers over a day"
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/date-picker-month/date-picker-month.css

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -79,51 +79,43 @@
 }
 
 .calender {
-  margin-bottom: 0.25rem;
+  margin-block-end: 0.25rem;
 }
 
 .week-headers {
   display: flex;
   border-width: 0px;
-  border-top-width: 1px;
+  border-block-start-width: 1px;
   border-style: solid;
   border-color: var(--calcite-ui-border-3);
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-block: 0px;
+  padding-inline: 0.25rem;
 }
 
 .week-header {
   text-align: center;
   font-weight: var(--calcite-font-weight-bold);
   color: var(--calcite-ui-text-3);
-  width: 14.2857142857%;
+  inline-size: 14.2857142857%;
 }
 
 :host([scale=s]) .week-header {
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.75rem;
+  padding-inline: 0px;
+  padding-block: 0.5rem 0.75rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
 :host([scale=m]) .week-header {
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 0.75rem;
-  padding-bottom: 1rem;
+  padding-inline: 0px;
+  padding-block: 0.75rem 1rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
 :host([scale=l]) .week-header {
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 1rem;
-  padding-bottom: 1.25rem;
+  padding-inline: 0px;
+  padding-block: 1rem 1.25rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
@@ -131,10 +123,8 @@
 .week-days {
   display: flex;
   flex-direction: row;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-left: 6px;
-  padding-right: 6px;
+  padding-block: 0px;
+  padding-inline: 6px;
 }
 .week-days:focus {
   outline: 2px solid transparent;

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-beta.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Prop, Host, Event, h, Listen } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";
@@ -14,46 +14,46 @@ export class DatePickerMonth {
     //  Event Listeners
     //
     //--------------------------------------------------------------------------
-    this.keyDownHandler = (e) => {
+    this.keyDownHandler = (event) => {
       const isRTL = this.el.dir === "rtl";
-      switch (e.key) {
+      switch (event.key) {
         case "ArrowUp":
-          e.preventDefault();
+          event.preventDefault();
           this.addDays(-7);
           break;
         case "ArrowRight":
-          e.preventDefault();
+          event.preventDefault();
           this.addDays(isRTL ? -1 : 1);
           break;
         case "ArrowDown":
-          e.preventDefault();
+          event.preventDefault();
           this.addDays(7);
           break;
         case "ArrowLeft":
-          e.preventDefault();
+          event.preventDefault();
           this.addDays(isRTL ? 1 : -1);
           break;
         case "PageUp":
-          e.preventDefault();
+          event.preventDefault();
           this.addMonths(-1);
           break;
         case "PageDown":
-          e.preventDefault();
+          event.preventDefault();
           this.addMonths(1);
           break;
         case "Home":
-          e.preventDefault();
+          event.preventDefault();
           this.activeDate.setDate(1);
           this.addDays();
           break;
         case "End":
-          e.preventDefault();
+          event.preventDefault();
           this.activeDate.setDate(new Date(this.activeDate.getFullYear(), this.activeDate.getMonth() + 1, 0).getDate());
           this.addDays();
           break;
         case "Enter":
         case " ":
-          e.preventDefault();
+          event.preventDefault();
           break;
         case "Tab":
           this.activeFocus = false;
@@ -66,18 +66,18 @@ export class DatePickerMonth {
     this.disableActiveFocus = () => {
       this.activeFocus = false;
     };
-    this.dayHover = (e) => {
-      const target = e.target;
-      if (e.detail.disabled) {
+    this.dayHover = (event) => {
+      const target = event.target;
+      if (target.disabled) {
         this.calciteInternalDatePickerMouseOut.emit();
       }
       else {
         this.calciteInternalDatePickerHover.emit(target.value);
       }
-      e.stopPropagation();
+      event.stopPropagation();
     };
-    this.daySelect = (e) => {
-      const target = e.target;
+    this.daySelect = (event) => {
+      const target = event.target;
       this.calciteDatePickerSelect.emit(target.value);
     };
   }
@@ -498,9 +498,13 @@ export class DatePickerMonth {
         "text": "Event emitted when user selects the date."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "Date",
+        "resolved": "Date",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
       }
     }, {
       "method": "calciteInternalDatePickerHover",
@@ -516,9 +520,13 @@ export class DatePickerMonth {
         "text": "Event emitted when user hovers the date."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "Date",
+        "resolved": "Date",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
       }
     }, {
       "method": "calciteDatePickerActiveDateChange",
@@ -531,9 +539,13 @@ export class DatePickerMonth {
         "text": "Active date for the user keyboard access."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "Date",
+        "resolved": "Date",
+        "references": {
+          "Date": {
+            "location": "global"
+          }
+        }
       }
     }, {
       "method": "calciteInternalDatePickerMouseOut",
@@ -549,8 +561,8 @@ export class DatePickerMonth {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/date-picker-month-header/date-picker-month-header.css

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -85,45 +85,39 @@
 .header {
   display: flex;
   justify-content: space-between;
-  padding-top: 0px;
-  padding-bottom: 0px;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-block: 0px;
+  padding-inline: 0.25rem;
 }
 
 :host([scale=s]) .text {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+  margin-block: 0.5rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 :host([scale=s]) .chevron {
-  height: 2.25rem;
+  block-size: 2.25rem;
 }
 
 :host([scale=m]) .text {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
+  margin-block: 0.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
 :host([scale=m]) .chevron {
-  height: 3rem;
+  block-size: 3rem;
 }
 
 :host([scale=l]) .text {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  margin-block: 1rem;
   font-size: var(--calcite-font-size-1);
   line-height: 1.5rem;
 }
 :host([scale=l]) .chevron {
-  height: 3.5rem;
+  block-size: 3.5rem;
 }
 
 .chevron {
-  margin-left: -0.25rem;
-  margin-right: -0.25rem;
+  margin-inline: -0.25rem;
   box-sizing: content-box;
   display: flex;
   flex-grow: 0;
@@ -132,14 +126,13 @@
   justify-content: center;
   border-style: none;
   background-color: var(--calcite-ui-foreground-1);
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+  padding-inline: 0.25rem;
   color: var(--calcite-ui-text-3);
   outline: 2px solid transparent;
   outline-offset: 2px;
   outline-color: transparent;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  width: 14.2857142857%;
+  inline-size: 14.2857142857%;
 }
 .chevron:focus {
   outline: 2px solid var(--calcite-ui-brand);
@@ -159,9 +152,8 @@
 }
 
 .text {
-  margin-top: auto;
-  margin-bottom: auto;
-  width: 100%;
+  margin-block: auto;
+  inline-size: 100%;
   flex: 1 1 auto;
   align-items: center;
   justify-content: center;
@@ -176,10 +168,8 @@
 .month, 
 .year, 
 .suffix {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-  margin-top: auto;
-  margin-bottom: auto;
+  margin-inline: 0.25rem;
+  margin-block: auto;
   display: inline-block;
   background-color: var(--calcite-ui-foreground-1);
   font-weight: var(--calcite-font-weight-medium);
@@ -190,7 +180,7 @@
 
 .year {
   position: relative;
-  width: 3rem;
+  inline-size: 3rem;
   border-style: none;
   background-color: transparent;
   text-align: center;
@@ -211,8 +201,8 @@
 }
 
 .year--suffix {
-  width: 4rem;
-  text-align: left;
+  inline-size: 4rem;
+  text-align: start;
 }
 
 .year-wrap {
@@ -221,11 +211,11 @@
 
 .suffix {
   position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 4rem;
+  inset-block-start: 0px;
+  inset-inline-start: 0px;
+  inline-size: 4rem;
   white-space: nowrap;
-  text-align: left;
+  text-align: start;
 }
 
 .suffix__invisible {