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

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.89
  */
 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 {

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-beta.86
+ * v1.0.0-beta.89
  */
 import { Component, Element, Prop, Event, h, State, Watch, Fragment } from "@stencil/core";
 import { dateFromRange, nextMonth, prevMonth, localizeNumber, parseNumber, getOrder } from "../../utils/date";
@@ -17,17 +17,17 @@ export class DatePickerMonthHeader {
     /**
      * Increment year on UP/DOWN keys
      *
-     * @param e
+     * @param event
      */
-    this.onYearKey = (e) => {
-      const localizedYear = this.parseCalendarYear(e.target.value);
-      switch (e.key) {
+    this.onYearKey = (event) => {
+      const localizedYear = this.parseCalendarYear(event.target.value);
+      switch (event.key) {
         case "ArrowDown":
-          e.preventDefault();
+          event.preventDefault();
           this.setYear({ localizedYear, offset: -1 });
           break;
         case "ArrowUp":
-          e.preventDefault();
+          event.preventDefault();
           this.setYear({ localizedYear, offset: 1 });
           break;
       }
@@ -43,30 +43,30 @@ export class DatePickerMonthHeader {
         commit: false
       });
     };
-    this.prevMonthClick = (e) => {
-      this.handleArrowClick(e, this.prevMonthDate);
+    this.prevMonthClick = (event) => {
+      this.handleArrowClick(event, this.prevMonthDate);
     };
-    this.prevMonthKeydown = (e) => {
-      const key = e.key;
+    this.prevMonthKeydown = (event) => {
+      const key = event.key;
       if (key === " " || key === "Enter") {
-        this.prevMonthClick(e);
+        this.prevMonthClick(event);
       }
     };
-    this.nextMonthClick = (e) => {
-      this.handleArrowClick(e, this.nextMonthDate);
+    this.nextMonthClick = (event) => {
+      this.handleArrowClick(event, this.nextMonthDate);
     };
-    this.nextMonthKeydown = (e) => {
-      const key = e.key;
+    this.nextMonthKeydown = (event) => {
+      const key = event.key;
       if (key === " " || key === "Enter") {
-        this.nextMonthClick(e);
+        this.nextMonthClick(event);
       }
     };
     /*
      * Update active month on clicks of left/right arrows
      */
-    this.handleArrowClick = (e, date) => {
-      e === null || e === void 0 ? void 0 : e.preventDefault();
-      e.stopPropagation();
+    this.handleArrowClick = (event, date) => {
+      event === null || event === void 0 ? void 0 : event.preventDefault();
+      event.stopPropagation();
       this.calciteDatePickerSelect.emit(date);
     };
   }

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-beta.86
+ * v1.0.0-beta.89
  */
 export const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;

package/dist/collection/components/dropdown/dropdown.css

@@ -71,13 +71,21 @@
 * 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([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
 /**
 * CSS Custom Properties
 *
@@ -90,13 +98,6 @@
   flex: 0 1 auto;
 }
 
-:host([disabled]) {
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-          user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
-}
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */
@@ -112,29 +113,29 @@
   pointer-events: none;
 }
 
-.calcite-dropdown-wrapper .calcite-popper-anim {
+.calcite-dropdown-wrapper .calcite-floating-ui-anim {
   position: relative;
   z-index: 1;
-  transition: var(--calcite-popper-transition);
+  transition: var(--calcite-floating-ui-transition);
   visibility: hidden;
   transition-property: transform, visibility, opacity;
   opacity: 0;
   box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16);
   border-radius: 0.25rem;
 }
-.calcite-dropdown-wrapper[data-popper-placement^=bottom] .calcite-popper-anim {
+.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim {
   transform: translateY(-5px);
 }
-.calcite-dropdown-wrapper[data-popper-placement^=top] .calcite-popper-anim {
+.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim {
   transform: translateY(5px);
 }
-.calcite-dropdown-wrapper[data-popper-placement^=left] .calcite-popper-anim {
+.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim {
   transform: translateX(5px);
 }
-.calcite-dropdown-wrapper[data-popper-placement^=right] .calcite-popper-anim {
+.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim {
   transform: translateX(-5px);
 }
-.calcite-dropdown-wrapper[data-popper-placement] .calcite-popper-anim--active {
+.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active {
   opacity: 1;
   visibility: visible;
   transform: translate(0);
@@ -147,12 +148,12 @@
 }
 
 :host .calcite-dropdown-content {
-  width: auto;
+  inline-size: auto;
   overflow-y: auto;
   overflow-x: hidden;
   background-color: var(--calcite-ui-foreground-1);
-  max-height: 90vh;
-  width: var(--calcite-dropdown-width);
+  max-block-size: 90vh;
+  inline-size: var(--calcite-dropdown-width);
 }
 
 .calcite-dropdown-trigger-container {