@esri/calcite-components 1.0.0-beta.94 → 1.0.0-beta.96

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

@@ -1,9 +1,9 @@
 /*!
  * 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.94
+ * v1.0.0-beta.96
  */
-import { Component, Element, Prop, Host, Event, h, Listen } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";
 export class DatePickerMonth {
   constructor() {
@@ -121,10 +121,7 @@ export class DatePickerMonth {
     for (let i = 0; i < days.length; i += 7) {
       weeks.push(days.slice(i, i + 7));
     }
-    return (h(Host, { onFocusOut: this.disableActiveFocus, onKeyDown: this.keyDownHandler },
-      h("div", { class: "calender", role: "grid" },
-        h("div", { class: "week-headers", role: "row" }, adjustedWeekDays.map((weekday) => (h("span", { class: "week-header", role: "columnheader" }, weekday)))),
-        weeks.map((days) => (h("div", { class: "week-days", role: "row" }, days))))));
+    return (h(Host, { onFocusOut: this.disableActiveFocus, onKeyDown: this.keyDownHandler }, h("div", { class: "calender", role: "grid" }, h("div", { class: "week-headers", role: "row" }, adjustedWeekDays.map((weekday) => (h("span", { class: "week-header", role: "columnheader" }, weekday)))), weeks.map((days) => (h("div", { class: "week-days", role: "row" }, days))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -264,7 +261,7 @@ export class DatePickerMonth {
         "hover--outside-range": this.startDate && !isHoverInRange,
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart
-      }, currentMonth: currentMonth, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), localeData: this.localeData, onCalciteDaySelect: this.daySelect, onCalciteInternalDayHover: this.dayHover, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
+      }, currentMonth: currentMonth, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), onCalciteDaySelect: this.daySelect, onCalciteInternalDayHover: this.dayHover, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
         // when moving via keyboard, focus must be updated on active date
         if (ref && active && this.activeFocus) {
           el === null || el === void 0 ? void 0 : el.focus();
@@ -302,279 +299,289 @@ export class DatePickerMonth {
   }
   static get is() { return "calcite-date-picker-month"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["date-picker-month.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["date-picker-month.css"]
-  }; }
-  static get properties() { return {
-    "selectedDate": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+  static get originalStyleUrls() {
+    return {
+      "$": ["date-picker-month.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["date-picker-month.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "selectedDate": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Already selected date."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Already selected date."
-      }
-    },
-    "activeDate": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+      "activeDate": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Date currently active."
+        },
+        "defaultValue": "new Date()"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Date currently active."
-      },
-      "defaultValue": "new Date()"
-    },
-    "startDate": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+      "startDate": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Start date currently active."
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Start date currently active."
-      }
-    },
-    "endDate": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+      "endDate": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "End date currently active"
         }
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "End date currently active"
-      }
-    },
-    "min": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+      "min": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Minimum date of the calendar below which is disabled."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Minimum date of the calendar below which is disabled."
-      }
-    },
-    "max": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+      "max": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Maximum date of the calendar above which is disabled."
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Maximum date of the calendar above which is disabled."
-      }
-    },
-    "scale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Scale",
-        "resolved": "\"l\" | \"m\" | \"s\"",
-        "references": {
-          "Scale": {
-            "location": "import",
-            "path": "../interfaces"
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "specify the scale of the date picker"
+        },
+        "attribute": "scale",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "specify the scale of the date picker"
-      },
-      "attribute": "scale",
-      "reflect": true
-    },
-    "localeData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DateLocaleData",
-        "resolved": "DateLocaleData",
-        "references": {
-          "DateLocaleData": {
-            "location": "import",
-            "path": "../date-picker/utils"
+      "localeData": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DateLocaleData",
+          "resolved": "DateLocaleData",
+          "references": {
+            "DateLocaleData": {
+              "location": "import",
+              "path": "../date-picker/utils"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "CLDR locale data for current locale"
         }
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": "CLDR locale data for current locale"
-      }
-    },
-    "hoverRange": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "HoverRange",
-        "resolved": "HoverRange",
-        "references": {
-          "HoverRange": {
-            "location": "import",
-            "path": "../../utils/date"
+      "hoverRange": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HoverRange",
+          "resolved": "HoverRange",
+          "references": {
+            "HoverRange": {
+              "location": "import",
+              "path": "../../utils/date"
+            }
           }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The range of dates currently being hovered"
         }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The range of dates currently being hovered"
       }
-    }
-  }; }
-  static get events() { return [{
-      "method": "calciteDatePickerSelect",
-      "name": "calciteDatePickerSelect",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Event emitted when user selects the date."
-      },
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteDatePickerSelect",
+        "name": "calciteDatePickerSelect",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event emitted when user selects the date."
+        },
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
         }
-      }
-    }, {
-      "method": "calciteInternalDatePickerHover",
-      "name": "calciteInternalDatePickerHover",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": "Event emitted when user hovers the date."
-      },
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+      }, {
+        "method": "calciteInternalDatePickerHover",
+        "name": "calciteInternalDatePickerHover",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Event emitted when user hovers the date."
+        },
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
         }
-      }
-    }, {
-      "method": "calciteDatePickerActiveDateChange",
-      "name": "calciteDatePickerActiveDateChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Active date for the user keyboard access."
-      },
-      "complexType": {
-        "original": "Date",
-        "resolved": "Date",
-        "references": {
-          "Date": {
-            "location": "global"
+      }, {
+        "method": "calciteDatePickerActiveDateChange",
+        "name": "calciteDatePickerActiveDateChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Active date for the user keyboard access."
+        },
+        "complexType": {
+          "original": "Date",
+          "resolved": "Date",
+          "references": {
+            "Date": {
+              "location": "global"
+            }
           }
         }
-      }
-    }, {
-      "method": "calciteInternalDatePickerMouseOut",
-      "name": "calciteInternalDatePickerMouseOut",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
+      }, {
+        "method": "calciteInternalDatePickerMouseOut",
+        "name": "calciteInternalDatePickerMouseOut",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "mouseout",
-      "method": "mouseoutHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "pointerout",
+        "method": "mouseoutHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }];
+  }
 }

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.
 */
@@ -153,6 +158,7 @@
 
 .text {
   margin-block: auto;
+  display: flex;
   inline-size: 100%;
   flex: 1 1 auto;
   align-items: center;
@@ -161,7 +167,7 @@
   line-height: 1;
 }
 
-.text-nreverse {
+.text--reverse {
   flex-direction: row-reverse;
 }
 
@@ -180,7 +186,7 @@
 
 .year {
   position: relative;
-  inline-size: 3rem;
+  inline-size: 2.5rem;
   border-style: none;
   background-color: transparent;
   text-align: center;
@@ -200,7 +206,6 @@
 }
 
 .year--suffix {
-  inline-size: 4rem;
   text-align: start;
 }
 
@@ -209,14 +214,8 @@
 }
 
 .suffix {
-  position: absolute;
   inset-block-start: 0px;
-  inset-inline-start: 0px;
-  inline-size: 4rem;
   white-space: nowrap;
   text-align: start;
-}
-
-.suffix__invisible {
-  visibility: hidden;
+  inset-inline-start: 0;
 }