@esri/calcite-components 5.2.0-next.6 → 5.2.0-next.60

package/dist/components/calcite-date-picker/customElement.d.ts

@@ -32,9 +32,9 @@ import type { HeadingLevel } from "../functional/Heading.js";
  */
 export abstract class DatePicker extends LitElement {
   /** Specifies the component's active date. */
-  accessor activeDate: Date;
+  accessor activeDate: Date | undefined;
   /** When `range` is `true`, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. */
-  accessor activeRange: "start" | "end";
+  accessor activeRange: "start" | "end" | undefined;
   /**
    * When `range` is `true`, specifies the number of calendars displayed.
    *
@@ -42,7 +42,7 @@ export abstract class DatePicker extends LitElement {
    */
   accessor calendars: 1 | 2;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel;
+  accessor headingLevel: HeadingLevel | undefined;
   /**
    * Defines the component's layout.
    *
@@ -53,24 +53,28 @@ export abstract class DatePicker extends LitElement {
    * When the component resides in a form,
    * specifies the latest allowed date (`"yyyy-mm-dd"`).
    */
-  accessor max: string;
+  accessor max: string | undefined;
   /** Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
-  accessor maxAsDate: Date;
-  /** Overrides individual strings used by the component. */
+  accessor maxAsDate: Date | undefined;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      nextMonth?: string;
-      prevMonth?: string;
-      monthMenu?: string;
-      yearMenu?: string;
-      year?: string;
+      nextMonth?: string | undefined;
+      prevMonth?: string | undefined;
+      monthMenu?: string | undefined;
+      yearMenu?: string | undefined;
+      year?: string | undefined;
   };
   /**
    * When the component resides in a form,
    * specifies the earliest allowed date (`"yyyy-mm-dd"`).
    */
-  accessor min: string;
+  accessor min: string | undefined;
   /** Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
-  accessor minAsDate: Date;
+  accessor minAsDate: Date | undefined;
   /**
    * Specifies the component's month style.
    *
@@ -78,7 +82,7 @@ export abstract class DatePicker extends LitElement {
    */
   accessor monthStyle: "abbreviated" | "wide";
   /** Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range.
    *
@@ -97,10 +101,10 @@ export abstract class DatePicker extends LitElement {
    * @default "m"
    */
   accessor scale: "s" | "m" | "l";
-  /** Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). */
-  accessor value: string | string[];
+  /** Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). Set to `undefined` or an empty string (`""`) to clear the selection. */
+  accessor value: string | string[] | undefined;
   /** 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")]`). */
-  accessor valueAsDate: Date | Date[];
+  accessor valueAsDate: Date | Date[] | undefined;
   /**
    * Sets focus on the component's first focusable element.
    *

package/dist/components/calcite-date-picker/customElement.js

@@ -1,5 +1,5 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { l as logger, c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { d as dateFromISO, a as dateToISO, n as nextMonth, p as prevMonth, g as getDaysDiff, b as dateFromRange, s as sameDate, c as getFirstValidDateInMonth, i as inRange } from "../../chunks/date.js";
@@ -12,7 +12,7 @@ const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
 const CSS = {
   container: "container"
 };
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:inline-block;inline-size:100%;overflow:visible;border-width:1px;border-style:solid;vertical-align:top;border-color:var(--calcite-date-picker-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-date-picker-corner-radius, 0)}:host([scale=s]){inline-size:236px;min-inline-size:216px;max-inline-size:380px}:host([scale=s][range][layout=horizontal][calendars="2"]){inline-size:480px;min-inline-size:432px;max-inline-size:772px}:host([scale=m]){inline-size:298px;min-inline-size:272px;max-inline-size:480px}:host([scale=m][layout=horizontal][range][calendars="2"]){inline-size:608px;min-inline-size:544px;max-inline-size:972px}:host([scale=l]){inline-size:334px;min-inline-size:320px;max-inline-size:600px}:host([scale=l][layout=horizontal][range][calendars="2"]){inline-size:684px;min-inline-size:640px;max-inline-size:1212px}.container{outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:inline-block;inline-size:100%;overflow:visible;border-width:1px;border-style:solid;vertical-align:top;border-color:var(--calcite-date-picker-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-date-picker-corner-radius, var(--calcite-corner-radius))}:host([scale=s]){inline-size:236px;min-inline-size:216px;max-inline-size:380px}:host([scale=s][range][layout=horizontal][calendars="2"]){inline-size:480px;min-inline-size:432px;max-inline-size:772px}:host([scale=m]){inline-size:298px;min-inline-size:272px;max-inline-size:480px}:host([scale=m][layout=horizontal][range][calendars="2"]){inline-size:608px;min-inline-size:544px;max-inline-size:972px}:host([scale=l]){inline-size:334px;min-inline-size:320px;max-inline-size:600px}:host([scale=l][layout=horizontal][range][calendars="2"]){inline-size:684px;min-inline-size:640px;max-inline-size:1212px}.container{outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`;
 class DatePicker extends LitElement {
   constructor() {
     super();
@@ -55,12 +55,12 @@ class DatePicker extends LitElement {
     const minSource = getMinMaxSource(changes, "min");
     const maxSource = getMinMaxSource(changes, "max");
     if (minSource === "min") {
-      this.minAsDate = dateFromISO(this.min);
+      this.minAsDate = this.min ? dateFromISO(this.min) : void 0;
     } else if (minSource === "minAsDate") {
       this.minAsDate = dateFromISO(dateToISO(this.minAsDate));
     }
     if (maxSource === "max") {
-      this.maxAsDate = dateFromISO(this.max);
+      this.maxAsDate = this.max ? dateFromISO(this.max) : void 0;
     } else if (maxSource === "maxAsDate") {
       this.maxAsDate = dateFromISO(dateToISO(this.maxAsDate));
     }
@@ -71,7 +71,7 @@ class DatePicker extends LitElement {
       this.activeDateWatcher(this.activeDate);
     }
     if (changes.has("messages") && this.hasUpdated) {
-      this.loadLocaleData().catch(console.error);
+      this.loadLocaleData().catch(logger.error);
     }
   }
   activeDateWatcher(newValue) {
@@ -87,19 +87,26 @@ class DatePicker extends LitElement {
   }
   valueHandler(value) {
     if (Array.isArray(value)) {
-      this.valueAsDate = getValueAsDateRange(value);
+      this.valueAsDate = value.every((rangeValue) => rangeValue === "") ? void 0 : getValueAsDateRange(value);
       if (!this.rangeValueChangedByUser) {
         this.resetActiveDates();
       }
     } else if (value) {
       this.valueAsDate = dateFromISO(value);
+    } else {
+      this.valueAsDate = void 0;
+      this.resetActiveDates();
     }
   }
   valueAsDateWatcher(newValueAsDate) {
     if (this.range && Array.isArray(newValueAsDate) && !this.rangeValueChangedByUser) {
       this.setActiveStartAndEndDates();
-    } else if (!this.range && newValueAsDate && newValueAsDate !== this.activeDate) {
-      this.activeDate = newValueAsDate;
+    } else if (!this.range) {
+      if (newValueAsDate && newValueAsDate !== this.activeDate) {
+        this.activeDate = newValueAsDate;
+      } else if (!newValueAsDate) {
+        this.resetActiveDates();
+      }
     }
   }
   keyDownHandler(event) {
@@ -142,7 +149,7 @@ class DatePicker extends LitElement {
       this.activeDate = date;
     } else {
       const month = date.getMonth();
-      const isDateOutOfCurrentRange = month !== this.activeStartDate.getMonth() && (this.calendars === 1 || month !== nextMonth(this.activeStartDate).getMonth());
+      const isDateOutOfCurrentRange = month !== this.activeStartDate?.getMonth() && (this.calendars === 1 || (this.activeStartDate ? month !== nextMonth(this.activeStartDate).getMonth() : false));
       if (this.activeRange === "end") {
         if (!this.activeEndDate || this.activeStartDate && isDateOutOfCurrentRange) {
           this.activeEndDate = date;
@@ -163,8 +170,8 @@ class DatePicker extends LitElement {
       return;
     }
     const { valueAsDate } = this;
-    const start = Array.isArray(valueAsDate) && valueAsDate[0];
-    const end = Array.isArray(valueAsDate) && valueAsDate[1];
+    const start = Array.isArray(valueAsDate) ? valueAsDate[0] : void 0;
+    const end = Array.isArray(valueAsDate) ? valueAsDate[1] : void 0;
     const date = new Date(event.detail);
     this.hoverRange = {
       focused: this.activeRange || "start",
@@ -172,10 +179,10 @@ class DatePicker extends LitElement {
       end
     };
     if (this.proximitySelectionDisabled) {
-      if (end && start || !end && date >= start) {
+      if (end && start || !end && start && date >= start) {
         this.hoverRange.focused = "end";
         this.hoverRange.end = date;
-      } else if (!end && date < start) {
+      } else if (!end && start && date < start) {
         this.hoverRange = {
           focused: "start",
           start: date,
@@ -185,7 +192,7 @@ class DatePicker extends LitElement {
         this.hoverRange = void 0;
       }
     } else {
-      if (this.activeRange) {
+      if (this.activeRange && this.hoverRange) {
         if (this.activeRange === "end") {
           this.hoverRange.end = date;
           this.hoverRange.focused = "end";
@@ -236,15 +243,30 @@ class DatePicker extends LitElement {
   }
   resetActiveDates() {
     const { valueAsDate } = this;
-    if (!Array.isArray(valueAsDate) && valueAsDate && valueAsDate !== this.activeDate) {
-      this.activeDate = new Date(valueAsDate);
+    if (!Array.isArray(valueAsDate)) {
+      if (valueAsDate && valueAsDate !== this.activeDate) {
+        this.activeDate = new Date(valueAsDate);
+      } else if (!valueAsDate) {
+        this.activeDate = void 0;
+        const activeDate = this.getActiveDate(void 0, this.minAsDate, this.maxAsDate);
+        if (this.range) {
+          this.activeStartDate = activeDate;
+          this.activeEndDate = void 0;
+        } else {
+          this.activeDate = activeDate;
+        }
+      }
     }
     if (Array.isArray(valueAsDate)) {
       if (valueAsDate[0] && valueAsDate[0] !== this.activeStartDate) {
         this.activeStartDate = new Date(valueAsDate[0]);
+      } else if (!valueAsDate[0]) {
+        this.activeStartDate = this.getActiveDate(void 0, this.minAsDate, this.maxAsDate);
       }
       if (valueAsDate[1] && valueAsDate[1] !== this.activeEndDate) {
         this.activeEndDate = new Date(valueAsDate[1]);
+      } else if (!valueAsDate[1]) {
+        this.activeEndDate = void 0;
       }
     }
     this.hoverRange = void 0;
@@ -262,7 +284,7 @@ class DatePicker extends LitElement {
     }
   }
   getStartDate() {
-    return Array.isArray(this.valueAsDate) && this.valueAsDate[0];
+    return Array.isArray(this.valueAsDate) && this.valueAsDate[0] || void 0;
   }
   setStartDate(date, emit = true) {
     const endDate = this.getEndDate();
@@ -281,8 +303,8 @@ class DatePicker extends LitElement {
     }
     if (!this.range) {
       this.value = isoDate || "";
-      this.valueAsDate = date || null;
-      this.activeDate = date || null;
+      this.valueAsDate = date || void 0;
+      this.activeDate = date || void 0;
       this.calciteDatePickerChange.emit();
       return;
     }
@@ -302,7 +324,7 @@ class DatePicker extends LitElement {
     } else {
       if (this.proximitySelectionDisabled) {
         this.setStartDate(date, false);
-        this.setEndDate(null, false);
+        this.setEndDate(void 0, false);
         this.calciteDatePickerRangeChange.emit();
       } else {
         if (this.activeRange) {
@@ -310,8 +332,8 @@ class DatePicker extends LitElement {
             this.setEndDate(date);
           } else {
             if (date > end) {
-              this.setEndDate(null, false);
-              this.activeEndDate = null;
+              this.setEndDate(void 0, false);
+              this.activeEndDate = void 0;
             }
             this.setStartDate(date);
           }
@@ -343,12 +365,12 @@ class DatePicker extends LitElement {
   setActiveStartAndEndDates() {
     if (this.range) {
       const startDate = dateFromRange(Array.isArray(this.valueAsDate) ? this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
-      const endDate = dateFromRange(Array.isArray(this.valueAsDate) ? this.valueAsDate[1] : null, this.minAsDate, this.maxAsDate);
+      const endDate = dateFromRange(Array.isArray(this.valueAsDate) ? this.valueAsDate[1] : void 0, this.minAsDate, this.maxAsDate);
       this.activeStartDate = this.getActiveDate(startDate, this.minAsDate, this.maxAsDate);
       this.activeEndDate = this.getActiveEndDate(endDate, this.minAsDate, this.maxAsDate);
       if (sameDate(this.activeStartDate, this.activeEndDate)) {
-        const previousMonthActiveDate = getFirstValidDateInMonth(prevMonth(this.activeEndDate), this.minAsDate, this.maxAsDate);
-        const nextMonthActiveDate = nextMonth(this.activeEndDate);
+        const previousMonthActiveDate = getFirstValidDateInMonth(this.activeEndDate ? prevMonth(this.activeEndDate) : void 0, this.minAsDate, this.maxAsDate);
+        const nextMonthActiveDate = this.activeEndDate ? nextMonth(this.activeEndDate) : void 0;
         if (inRange(previousMonthActiveDate, this.minAsDate, this.maxAsDate)) {
           this.activeStartDate = previousMonthActiveDate;
         } else if (inRange(nextMonthActiveDate, this.minAsDate, this.maxAsDate)) {
@@ -360,7 +382,7 @@ class DatePicker extends LitElement {
   render() {
     const date = dateFromRange(this.range && Array.isArray(this.valueAsDate) ? this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
     const activeDate = this.getActiveDate(date, this.minAsDate, this.maxAsDate);
-    const endDate = this.range && Array.isArray(this.valueAsDate) ? dateFromRange(this.valueAsDate[1], this.minAsDate, this.maxAsDate) : null;
+    const endDate = this.range && Array.isArray(this.valueAsDate) ? dateFromRange(this.valueAsDate[1], this.minAsDate, this.maxAsDate) : void 0;
     const minDate = this.range && this.activeRange ? this.activeRange === "start" ? this.minAsDate : date : this.minAsDate;
     const startCalendarActiveDate = this.range ? this.activeStartDate : activeDate;
     return html`<div aria-hidden class=${safeClassMap(CSS.container)} tabindex=-1>${this.renderMonth(startCalendarActiveDate, this.maxAsDate, minDate, date, endDate)}</div>`;

package/dist/components/calcite-date-picker-day/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 
 export abstract class DatePickerDay extends LitElement {
   /**

package/dist/components/calcite-date-picker-day/customElement.js

@@ -45,7 +45,7 @@ class DatePickerDay extends LitElement {
     return this.focusSetter(() => this.el, options);
   }
   load() {
-    this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker");
+    this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker") ?? void 0;
   }
   onClick() {
     if (this.disabled) {
@@ -78,7 +78,7 @@ class DatePickerDay extends LitElement {
       };
     }
     const formattedDay = numberStringFormatter.localize(String(this.day));
-    const dayLabel = this.dateTimeFormat.format(this.value);
+    const dayLabel = this.dateTimeFormat.format(this.value) ?? null;
     this.el.ariaLabel = dayLabel;
     this.el.ariaSelected = toAriaBoolean(this.active);
     setAttribute(this.el, "id", dayId);

package/dist/components/calcite-date-picker-month/customElement.d.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { HoverRange } from "../../utils/date.js";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 import type { HeadingLevel } from "../functional/Heading.js";
 
 export abstract class DatePickerMonth extends LitElement {
@@ -18,11 +18,11 @@ export abstract class DatePickerMonth extends LitElement {
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
   accessor headingLevel: HeadingLevel;
   /** The range of dates currently being hovered. */
-  accessor hoverRange: HoverRange;
+  accessor hoverRange: HoverRange | undefined;
   /** Specifies the latest allowed date (`"yyyy-mm-dd"`). */
-  accessor max: Date;
+  accessor max: Date | undefined;
   /** Specifies the earliest allowed date (`"yyyy-mm-dd"`). */
-  accessor min: Date;
+  accessor min: Date | undefined;
   /** Specifies the monthStyle used by the component. */
   accessor monthStyle: "abbreviated" | "wide";
   /**
@@ -34,7 +34,7 @@ export abstract class DatePickerMonth extends LitElement {
   /** Specifies the size of the component. */
   accessor scale: Scale;
   /** Already selected date. */
-  accessor selectedDate: Date;
+  accessor selectedDate: Date | undefined;
   /** Start date currently active. */
   accessor startDate: Date | undefined;
 }

package/dist/components/calcite-date-picker-month/customElement.js

@@ -24,6 +24,7 @@ const NUM_DAYS_TO_DISPLAY = 42;
 class DatePickerMonth extends LitElement {
   constructor() {
     super();
+    this.activeFocus = false;
     this.storeDayRef = (el) => {
       if (el?.active && this.activeFocus) {
         el.setFocus();
@@ -204,13 +205,13 @@ class DatePickerMonth extends LitElement {
     }
     const { start, end } = this.hoverRange;
     const isStartFocused = this.isFocusedOnStart();
-    const isEndAfterStart = this.startDate && end > this.startDate;
-    const isEndBeforeEnd = this.endDate && end < this.endDate;
-    const isStartAfterStart = this.startDate && start > this.startDate;
-    const isStartBeforeEnd = this.endDate && start < this.endDate;
+    const isEndAfterStart = this.startDate && end && end > this.startDate;
+    const isEndBeforeEnd = this.endDate && end && end < this.endDate;
+    const isStartAfterStart = this.startDate && start && start > this.startDate;
+    const isStartBeforeEnd = this.endDate && start && start < this.endDate;
     const isEndDateAfterStartAndBeforeEnd = !isStartFocused && this.startDate && isEndAfterStart && (!this.endDate || isEndBeforeEnd);
     const isStartDateBeforeEndAndAfterStart = isStartFocused && this.startDate && isStartAfterStart && isStartBeforeEnd;
-    return isEndDateAfterStartAndBeforeEnd || isStartDateBeforeEndAndAfterStart;
+    return !!(isEndDateAfterStartAndBeforeEnd || isStartDateBeforeEndAndAfterStart);
   }
   isRangeHover(date) {
     if (!this.hoverRange) {
@@ -219,16 +220,16 @@ class DatePickerMonth extends LitElement {
     const { start, end } = this.hoverRange;
     const isStartFocused = this.isFocusedOnStart();
     const insideRange = this.isHoverInRange();
-    const isDateBeforeStartDateAndAfterStart = date > start && date < this.startDate;
-    const isDateAfterEndDateAndBeforeEnd = date < end && date > this.endDate;
-    const isDateBeforeEndDateAndAfterEnd = date > end && date < this.endDate;
-    const isDateAfterStartDateAndBeforeStart = date < start && date > this.startDate;
-    const isDateAfterStartDateAndBeforeEnd = date < end && date > this.startDate;
-    const isDateBeforeEndDateAndAfterStart = date > start && date < this.endDate;
+    const isDateBeforeStartDateAndAfterStart = !!(start && date > start && this.startDate && date < this.startDate);
+    const isDateAfterEndDateAndBeforeEnd = !!(end && date < end && this.endDate && date > this.endDate);
+    const isDateBeforeEndDateAndAfterEnd = !!(end && date > end && this.endDate && date < this.endDate);
+    const isDateAfterStartDateAndBeforeStart = !!(start && date < start && this.startDate && date > this.startDate);
+    const isDateAfterStartDateAndBeforeEnd = !!(end && date < end && this.startDate && date > this.startDate);
+    const isDateBeforeEndDateAndAfterStart = !!(start && date > start && this.endDate && date < this.endDate);
     const hasBothStartAndEndDate = this.startDate && this.endDate;
     if (insideRange) {
       if (hasBothStartAndEndDate) {
-        return isStartFocused ? date < this.endDate && (isDateAfterStartDateAndBeforeStart || isDateBeforeStartDateAndAfterStart) : isDateBeforeEndDateAndAfterEnd || isDateAfterEndDateAndBeforeEnd;
+        return isStartFocused ? !!(this.endDate && date < this.endDate) && (isDateAfterStartDateAndBeforeStart || isDateBeforeStartDateAndAfterStart) : isDateBeforeEndDateAndAfterEnd || isDateAfterEndDateAndBeforeEnd;
       } else if (this.startDate && !this.endDate) {
         return isStartFocused ? isDateBeforeStartDateAndAfterStart : isDateAfterStartDateAndBeforeEnd;
       } else if (!this.startDate && this.endDate) {
@@ -239,6 +240,7 @@ class DatePickerMonth extends LitElement {
         return isStartFocused ? isDateBeforeStartDateAndAfterStart : isDateAfterEndDateAndBeforeEnd;
       }
     }
+    return false;
   }
   getDays(prevMonthDays, currMonthDays, nextMonthDays, position = "start") {
     let month = this.activeDate.getMonth();
@@ -300,7 +302,10 @@ class DatePickerMonth extends LitElement {
     const startOfWeek = this.localeData.weekStart % 7;
     const { abbreviated, short, narrow } = this.localeData.days;
     const weekDays = this.scale === "s" ? narrow || short || abbreviated : short || abbreviated || narrow;
-    const adjustedWeekDays = [...weekDays.slice(startOfWeek, 7), ...weekDays.slice(0, startOfWeek)];
+    const adjustedWeekDays = [
+      ...weekDays.slice(startOfWeek, 7),
+      ...weekDays.slice(0, startOfWeek)
+    ];
     const curMonDays = this.getCurrentMonthDays(month, year);
     const prevMonDays = this.getPreviousMonthDays(month, year, startOfWeek);
     const nextMonDays = this.getNextMonthDays(month, year, startOfWeek);
@@ -330,7 +335,7 @@ class DatePickerMonth extends LitElement {
     return html`<div class=${safeClassMap({
       [CSS.calendar]: true,
       [CSS.calendarStart]: !isEndCalendar
-    })}><calcite-date-picker-month-header .activeDate=${isEndCalendar ? nextMonth(this.activeDate) : this.activeDate} .headingLevel=${this.headingLevel} .localeData=${this.localeData} .max=${this.max} .messages=${this.messages} .min=${this.min} .monthStyle=${this.monthStyle} @calciteInternalDatePickerMonthHeaderSelectChange=${this.monthHeaderSelectChange} .position=${isEndCalendar ? "end" : this.range && this.calendars === 2 ? "start" : null} .scale=${this.scale} .selectedDate=${this.selectedDate}></calcite-date-picker-month-header>${this.renderMonthCalendar(weekDays, days, isEndCalendar)}</div>`;
+    })}><calcite-date-picker-month-header .activeDate=${isEndCalendar ? nextMonth(this.activeDate) : this.activeDate} .headingLevel=${this.headingLevel} .localeData=${this.localeData} .max=${this.max} .messages=${this.messages} .min=${this.min} .monthStyle=${this.monthStyle} @calciteInternalDatePickerMonthHeaderSelectChange=${this.monthHeaderSelectChange} .position=${isEndCalendar ? "end" : this.range && this.calendars === 2 ? "start" : void 0} .scale=${this.scale} .selectedDate=${this.selectedDate}></calcite-date-picker-month-header>${this.renderMonthCalendar(weekDays, days, isEndCalendar)}</div>`;
   }
   renderMonthCalendar(weekDays, days, isEndCalendar = false) {
     const endCalendarStartIndex = 50;

package/dist/components/calcite-date-picker-month-header/customElement.js

@@ -1,12 +1,12 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
-import { h as calciteSpacingXxs, i as calciteSpacingBase, j as calciteSpacingSm } from "../../chunks/global.js";
+import { calciteSpacingXxs, calciteSpacingBase, calciteSpacingSm } from "@esri/calcite-design-tokens/dist/es6/global.js";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { b as dateFromRange, n as nextMonth, p as prevMonth, f as formatCalendarYear, e as parseCalendarYear, j as getDateInMonth, i as inRange, h as hasSameMonthAndYear, k as getOrder } from "../../chunks/date.js";
-import { c as closestElementCrossShadowBoundary, l as getTextWidth } from "../../chunks/dom.js";
+import { c as closestElementCrossShadowBoundary, n as getTextWidth } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 const styles = css`:host{display:block}.header{display:flex;block-size:100%;align-items:center;justify-content:space-between}.chevron-container{display:flex;align-items:center}:host([scale=s]){block-size:24px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .chevron-container,:host([scale=s]) .chevron{min-inline-size:24px;block-size:24px}:host([scale=m]){block-size:32px;margin:var(--calcite-spacing-sm);margin-inline-start:var(--calcite-spacing-sm-plus)}:host([scale=m]) .chevron-container,:host([scale=m]) .chevron{min-inline-size:32px;block-size:32px;--calcite-internal-action-padding-block: var(--calcite-spacing-xxs)}:host([scale=l]){block-size:44px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=l]) .chevron-container,:host([scale=l]) .chevron{min-inline-size:44px;block-size:44px;--calcite-internal-action-padding-block: var(--calcite-spacing-sm-plus)}.chevron{box-sizing:content-box;display:flex;block-size:100%;inline-size:100%;flex-grow:0;cursor:pointer;align-items:center;justify-content:center;border-style:none;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;--calcite-internal-action-padding-block: 0;--calcite-action-background-color: var(--calcite-date-picker-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-date-picker-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-date-picker-header-action-background-color-press);--calcite-action-text-color: var(--calcite-date-picker-header-action-text-color);--calcite-action-text-color-press: var(--calcite-date-picker-header-action-text-color-press)}.chevron:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.chevron[aria-disabled=true]{pointer-events:none}.month-year-container{display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;align-items:center;justify-content:flex-start;text-align:center;line-height:1;gap:var(--calcite-spacing-xxs)}.month-year-container.range-calendar{justify-content:center}.year-container{position:relative;display:flex;block-size:100%}.suffix{display:flex;align-items:center}.year,.suffix{margin-inline:var(--calcite-spacing-xxs);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-date-picker-year-text-color, var(--calcite-color-text-1));font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-fixed-lg)}.year{position:relative;display:inline-block;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent;inline-size:44px}.year:hover{transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:outline-color;outline:2px solid var(--calcite-color-border-2);outline-offset:-2px}.year:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.month-select{--calcite-select-internal-border-width: 0;--calcite-select-internal-icon-border-inline-end-width: 0;--calcite-internal-select-spacing-inline: var(--calcite-spacing-xxs);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-md));--calcite-select-text-color: var(--calcite-date-picker-month-select-text-color, var(--calcite-color-text-1));--calcite-select-icon-color: var(--calcite-date-picker-month-select-icon-color);--calcite-select-icon-color-hover: var(--calcite-date-picker-month-select-icon-color-hover);--calcite-internal-select-spacing-block: var(--calcite-spacing-xxs);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-xxs);--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-lg);--calcite-internal-select-font-weight: var(--calcite-font-weight-medium)}:host([scale=s]) .month-year-container .month-select{--calcite-internal-select-spacing-inline: var(--calcite-spacing-base);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size));--calcite-internal-select-spacing-block: var(--calcite-spacing-base);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-base);--calcite-internal-select-block-size: 24px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-base)}:host([scale=s]) .month-year-container .year{inline-size:40px}:host([scale=s]) .month-year-container .year,:host([scale=s]) .month-year-container .suffix{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-fixed-base)}:host([scale=l]) .month-year-container .month-select{--calcite-internal-select-spacing-inline: var(--calcite-spacing-sm);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-lg));--calcite-internal-select-spacing-block: var(--calcite-spacing-sm);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);--calcite-internal-select-block-size: 44px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-xl)}:host([scale=l]) .month-year-container .year{inline-size:48px}:host([scale=l]) .month-year-container .year,:host([scale=l]) .month-year-container .suffix{font-size:var(--calcite-font-size-lg);line-height:var(--calcite-font-line-height-fixed-xl)}:host([hidden]){display:none}[hidden]{display:none}`;
@@ -46,7 +46,7 @@ class DatePickerMonthHeader extends LitElement {
     this.setNextPrevMonthDates();
   }
   load() {
-    this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker");
+    this.parentDatePickerEl = closestElementCrossShadowBoundary(this.el, "calcite-date-picker") ?? void 0;
   }
   willUpdate(changes) {
     if (this.hasUpdated && (changes.has("activeDate") || changes.has("localeData"))) {
@@ -100,7 +100,9 @@ class DatePickerMonthHeader extends LitElement {
     });
   }
   prevMonthClick(event) {
-    this.handleArrowClick(event, this.prevMonthDate);
+    if (this.prevMonthDate) {
+      this.handleArrowClick(event, this.prevMonthDate);
+    }
   }
   prevMonthKeydown(event) {
     if (isActivationKey(event.key)) {
@@ -108,7 +110,9 @@ class DatePickerMonthHeader extends LitElement {
     }
   }
   nextMonthClick(event) {
-    this.handleArrowClick(event, this.nextMonthDate);
+    if (this.nextMonthDate) {
+      this.handleArrowClick(event, this.nextMonthDate);
+    }
   }
   nextMonthKeydown(event) {
     if (isActivationKey(event.key)) {
@@ -143,6 +147,7 @@ class DatePickerMonthHeader extends LitElement {
       nextDate.setFullYear(year);
       return dateFromRange(nextDate, min, max);
     }
+    return void 0;
   }
   setYear({ localizedYear, commit = true, offset = 0 }) {
     const { yearInputRef, activeDate } = this;
@@ -150,12 +155,12 @@ class DatePickerMonthHeader extends LitElement {
     if (inRangeDate) {
       this.calciteInternalDatePickerMonthHeaderSelectChange.emit(inRangeDate);
     }
-    if (commit) {
+    if (commit && yearInputRef.value) {
       yearInputRef.value.value = this.formatCalendarYear((inRangeDate || activeDate).getFullYear());
     }
   }
   setYearSelectWidthOffset() {
-    this.yearSelectWidthOffset = ICON_WIDTH_M + 3 * parseInt(this.getYearSelectPadding());
+    this.yearSelectWidthOffset = ICON_WIDTH_M + 3 * parseInt(this.getYearSelectPadding(), 10);
     this.setYearSelectMenuWidth();
   }
   setYearSelectMenuWidth() {
@@ -177,19 +182,19 @@ class DatePickerMonthHeader extends LitElement {
     if (!this.min && !this.max || inRange(newActiveDate, this.min, this.max)) {
       return true;
     }
-    return hasSameMonthAndYear(newActiveDate, this.max) || hasSameMonthAndYear(newActiveDate, this.min);
+    return !!(this.max && hasSameMonthAndYear(newActiveDate, this.max) || this.min && hasSameMonthAndYear(newActiveDate, this.min));
   }
   async handlePenultimateValidMonth(event) {
     const target = event.target;
     const direction = target.getAttribute("data-direction");
     const isDirectionLeft = direction === "left";
-    let isTargetLastValidMonth;
+    let isTargetLastValidMonth = false;
     if (isDirectionLeft && this.min) {
       const prevMonthDate = dateFromRange(prevMonth(this.activeDate), this.min, this.max);
-      isTargetLastValidMonth = hasSameMonthAndYear(prevMonthDate, this.min);
+      isTargetLastValidMonth = prevMonthDate ? hasSameMonthAndYear(prevMonthDate, this.min) : false;
     } else if (this.max) {
       const nextMonthDate = dateFromRange(nextMonth(this.activeDate), this.min, this.max);
-      isTargetLastValidMonth = hasSameMonthAndYear(nextMonthDate, this.max);
+      isTargetLastValidMonth = nextMonthDate ? hasSameMonthAndYear(nextMonthDate, this.max) : false;
     }
     if (isTargetLastValidMonth) {
       if (!this.position) {