@esri/calcite-components 5.2.0-next.7 → 5.2.0-next.8

package/dist/chunks/useTime.js

@@ -57,7 +57,7 @@ function formatTimePart(number, minLength) {
   }
 }
 function fractionalSecondPartToMilliseconds(fractionalSecondPart) {
-  return parseInt((parseFloat(`0.${fractionalSecondPart}`) / 1e-3).toFixed(3));
+  return parseInt((parseFloat(`0.${fractionalSecondPart}`) / 1e-3).toFixed(3), 10);
 }
 function getLocaleHourFormat(locale) {
   const options = { locale };
@@ -166,7 +166,7 @@ function getMeridiem(hour) {
   if (!isValidNumber(hour)) {
     return null;
   }
-  const hourAsNumber = parseInt(hour);
+  const hourAsNumber = parseInt(hour, 10);
   return hourAsNumber >= 0 && hourAsNumber <= 11 ? "AM" : "PM";
 }
 function getMeridiemOrder(locale) {
@@ -195,9 +195,9 @@ function isValidTime(value) {
   if (!hour || !minute) {
     return false;
   }
-  const hourAsNumber = parseInt(hour);
-  const minuteAsNumber = parseInt(minute);
-  const secondAsNumber = parseInt(second ?? "");
+  const hourAsNumber = parseInt(hour, 10);
+  const minuteAsNumber = parseInt(minute, 10);
+  const secondAsNumber = parseInt(second ?? "", 10);
   const hourValid = isValidNumber(hour) && hourAsNumber >= 0 && hourAsNumber < 24;
   const minuteValid = isValidNumber(minute) && minuteAsNumber >= 0 && minuteAsNumber < 60;
   const secondValid = isValidNumber(second) && secondAsNumber >= 0 && secondAsNumber < 60;
@@ -243,7 +243,7 @@ function localizeTimePart({
         numberingSystem
       };
       const localizedZero = numberStringFormatter.localize("0");
-      if (parseInt(value) === 0) {
+      if (parseInt(value, 10) === 0) {
         localizedFractionalSecond = "".padStart(value.length, localizedZero);
       } else {
         localizedFractionalSecond = numberStringFormatter.localize(`0.${value}`).replace(`${localizedZero}${localizedDecimalSeparator}`, "");
@@ -254,7 +254,7 @@ function localizeTimePart({
     }
     return localizedFractionalSecond;
   }
-  const valueAsNumber = parseInt(value);
+  const valueAsNumber = parseInt(value, 10);
   const date = new Date(
     Date.UTC(
       0,
@@ -291,9 +291,9 @@ function localizeTimeString({
       0,
       0,
       0,
-      parseInt(hour),
-      parseInt(minute),
-      includeSeconds && typeof second === "string" ? parseInt(second) : 0,
+      parseInt(hour, 10),
+      parseInt(minute, 10),
+      includeSeconds && typeof second === "string" ? parseInt(second, 10) : 0,
       includeSeconds && fractionalSecond ? fractionalSecondPartToMilliseconds(fractionalSecond) : 0
     )
   );
@@ -381,9 +381,9 @@ function toISOTimeString(value, step = 60) {
     fractionalSecond = value.fractionalSecond;
   }
   if (hour && minute) {
-    isoTimeString = `${formatTimePart(parseInt(hour))}:${formatTimePart(parseInt(minute))}`;
+    isoTimeString = `${formatTimePart(parseInt(hour, 10))}:${formatTimePart(parseInt(minute, 10))}`;
     if (step < 60) {
-      isoTimeString += `:${formatTimePart(parseInt(second || "0"))}`;
+      isoTimeString += `:${formatTimePart(parseInt(second || "0", 10))}`;
       if (step < 1) {
         isoTimeString += `.${formatFractionalSecond(fractionalSecond || "0", step)}`;
       }
@@ -399,7 +399,7 @@ class TimeController extends GenericController {
     this.handleHourKeyDownEvent = (event) => {
       const key = event.key;
       if (numberKeys.includes(key)) {
-        const keyAsNumber = parseInt(key);
+        const keyAsNumber = parseInt(key, 10);
         let newHour;
         if (isValidNumber(this.hour)) {
           switch (this.hourFormat) {
@@ -445,10 +445,10 @@ class TimeController extends GenericController {
     this.handleMinuteKeyDownEvent = (event) => {
       const key = event.key;
       if (numberKeys.includes(key)) {
-        const keyAsNumber = parseInt(key);
+        const keyAsNumber = parseInt(key, 10);
         let newMinute;
         if (typeof this.minute === "string" && isValidNumber(this.minute) && this.minute.startsWith("0")) {
-          const minuteAsNumber = parseInt(this.minute);
+          const minuteAsNumber = parseInt(this.minute, 10);
           newMinute = minuteAsNumber > maxTenthForMinuteAndSecond ? keyAsNumber : `${minuteAsNumber}${keyAsNumber}`;
         } else {
           newMinute = keyAsNumber;
@@ -479,10 +479,10 @@ class TimeController extends GenericController {
     this.handleSecondKeyDownEvent = (event) => {
       const key = event.key;
       if (numberKeys.includes(key)) {
-        const keyAsNumber = parseInt(key);
+        const keyAsNumber = parseInt(key, 10);
         let newSecond;
         if (typeof this.second === "string" && isValidNumber(this.second) && this.second.startsWith("0")) {
-          const secondAsNumber = parseInt(this.second);
+          const secondAsNumber = parseInt(this.second, 10);
           newSecond = secondAsNumber > maxTenthForMinuteAndSecond ? keyAsNumber : `${secondAsNumber}${keyAsNumber}`;
         } else {
           newSecond = keyAsNumber;
@@ -514,7 +514,7 @@ class TimeController extends GenericController {
       const { key } = event;
       if (numberKeys.includes(key)) {
         const stepPrecision = decimalPlaces(this.component.step);
-        const fractionalSecondAsInteger = parseInt(this.fractionalSecond);
+        const fractionalSecondAsInteger = parseInt(this.fractionalSecond, 10);
         const fractionalSecondAsIntegerLength = fractionalSecondAsInteger.toString().length;
         let newFractionalSecondAsIntegerString;
         if (fractionalSecondAsIntegerLength >= stepPrecision) {
@@ -579,7 +579,7 @@ class TimeController extends GenericController {
   //#endregion
   //#region Public Methods
   decrementHour() {
-    const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour) - 1;
+    const newHour = !this.hour ? 0 : this.hour === "00" ? 23 : parseInt(this.hour, 10) - 1;
     this.setValuePart("hour", newHour);
   }
   decrementMinute() {
@@ -589,7 +589,7 @@ class TimeController extends GenericController {
     this.decrementMinuteOrSecond("second");
   }
   incrementHour() {
-    const newHour = typeof this.hour === "string" && isValidNumber(this.hour) ? this.hour === "23" ? 0 : parseInt(this.hour) + 1 : 1;
+    const newHour = typeof this.hour === "string" && isValidNumber(this.hour) ? this.hour === "23" ? 0 : parseInt(this.hour, 10) + 1 : 1;
     this.setValuePart("hour", newHour);
   }
   incrementMinute() {
@@ -601,7 +601,7 @@ class TimeController extends GenericController {
   nudgeFractionalSecond(direction) {
     const stepDecimal = getDecimals(this.component.step);
     const stepPrecision = decimalPlaces(this.component.step);
-    const fractionalSecondAsInteger = parseInt(this.fractionalSecond);
+    const fractionalSecondAsInteger = parseInt(this.fractionalSecond, 10);
     const fractionalSecondAsFloat = parseFloat(`0.${this.fractionalSecond}`);
     let nudgedValue;
     let nudgedValueRounded;
@@ -674,7 +674,7 @@ class TimeController extends GenericController {
   decrementMinuteOrSecond(key) {
     let newValue;
     if (isValidNumber(this[key])) {
-      const valueAsNumber = parseInt(this[key]);
+      const valueAsNumber = parseInt(this[key], 10);
       newValue = valueAsNumber === 0 ? 59 : valueAsNumber - 1;
     } else {
       newValue = 59;
@@ -682,7 +682,7 @@ class TimeController extends GenericController {
     this.setValuePart(key, newValue);
   }
   incrementMinuteOrSecond(key) {
-    const newValue = isValidNumber(this[key]) ? this[key] === "59" ? 0 : parseInt(this[key]) + 1 : 0;
+    const newValue = isValidNumber(this[key]) ? this[key] === "59" ? 0 : parseInt(this[key], 10) + 1 : 0;
     this.setValuePart(key, newValue);
   }
   setHourFormat() {
@@ -778,7 +778,7 @@ class TimeController extends GenericController {
         value: this.meridiem
       });
       if (isValidNumber(this.hour)) {
-        const hourAsNumber = parseInt(this.hour);
+        const hourAsNumber = parseInt(this.hour, 10);
         switch (value) {
           case "AM":
             if (hourAsNumber >= 12) {

package/dist/chunks/utils.js

@@ -53,7 +53,7 @@ const OPACITY_LIMITS = {
 };
 const STATIC_DIMENSIONS = {
   s: {
-    gap: parseInt(calciteSpacingFixedSm),
+    gap: parseInt(calciteSpacingFixedSm, 10),
     slider: {
       height: 12
     },
@@ -66,7 +66,7 @@ const STATIC_DIMENSIONS = {
     minWidth: 200
   },
   m: {
-    gap: parseInt(calciteSpacingFixedMd),
+    gap: parseInt(calciteSpacingFixedMd, 10),
     slider: {
       height: 12
     },
@@ -79,7 +79,7 @@ const STATIC_DIMENSIONS = {
     minWidth: 240
   },
   l: {
-    gap: parseInt(calciteSpacingFixedXl),
+    gap: parseInt(calciteSpacingFixedXl, 10),
     slider: {
       height: 12
     },

package/dist/chunks/utils3.js

@@ -62,7 +62,7 @@ function getSource(changes, stringProp, dateProp) {
   if (datePropChanged && !stringPropChanged) {
     return dateProp;
   }
-  return null;
+  return void 0;
 }
 function getMinMaxSource(changes, type) {
   return type === "min" ? getSource(changes, "min", "minAsDate") : getSource(changes, "max", "maxAsDate");

package/dist/components/calcite-carousel/customElement.js

@@ -287,7 +287,7 @@ class Carousel extends LitElement {
   }
   handleItemSelection(event) {
     const item = event.currentTarget;
-    const requestedPosition = parseInt(item.dataset.index);
+    const requestedPosition = parseInt(item.dataset.index, 10);
     if (requestedPosition === this.selectedIndex) {
       return;
     }

package/dist/components/calcite-combobox/customElement.js

@@ -736,13 +736,13 @@ class Combobox extends LitElement {
       this.refreshingSelectionDisplay = false;
       return;
     }
-    const chipContainerElGap = parseInt(getComputedStyle(chipContainerEl).gap);
+    const chipContainerElGap = parseInt(getComputedStyle(chipContainerEl).gap, 10);
     const chipContainerElWidth = getElementWidth(chipContainerEl);
     const { fontSize, fontFamily, minInlineSize } = getComputedStyle(textInputRef.value);
     const placeholderWidthMultiplier = 0.55;
-    const inputMinWidth = parseFloat(minInlineSize) || parseInt(calciteSize48);
+    const inputMinWidth = parseFloat(minInlineSize) || parseInt(calciteSize48, 10);
     const measuredPlaceholderWidth = getTextWidth(placeholder, `${fontSize} ${fontFamily}`);
-    const placeholderWidth = measuredPlaceholderWidth > 0 ? measuredPlaceholderWidth : Math.max(inputMinWidth, Math.round((placeholder?.length || 0) * (parseFloat(fontSize) || parseInt(calciteSize48)) * placeholderWidthMultiplier));
+    const placeholderWidth = measuredPlaceholderWidth > 0 ? measuredPlaceholderWidth : Math.max(inputMinWidth, Math.round((placeholder?.length || 0) * (parseFloat(fontSize) || parseInt(calciteSize48, 10)) * placeholderWidthMultiplier));
     const fitInputWidth = Math.max(inputMinWidth, placeholderWidth);
     const inputWidth = (selectionDisplay === "fit" ? fitInputWidth : placeholderWidth) + chipContainerElGap;
     const allSelectedIndicatorChipElWidth = getElementWidth(allSelectedIndicatorChipRef.value);
@@ -1233,13 +1233,13 @@ class Combobox extends LitElement {
     const { allSelectedIndicatorChipRef, compactSelectionDisplay, scale, selectedVisibleChipsCount } = this;
     let useFitCompactLabel = false;
     if (this.selectionDisplay === "fit" && this.textInputRef.value && this.chipContainerEl) {
-      const chipContainerElGap = parseInt(getComputedStyle(this.chipContainerEl).gap);
+      const chipContainerElGap = parseInt(getComputedStyle(this.chipContainerEl).gap, 10);
       const chipContainerElWidth = getElementWidth(this.chipContainerEl);
       const { fontSize, fontFamily, minInlineSize } = getComputedStyle(this.textInputRef.value);
       const placeholderWidthMultiplier = 0.55;
-      const inputMinWidth = parseFloat(minInlineSize) || parseInt(calciteSize48);
+      const inputMinWidth = parseFloat(minInlineSize) || parseInt(calciteSize48, 10);
       const measuredPlaceholderWidth = getTextWidth(this.placeholder, `${fontSize} ${fontFamily}`);
-      const placeholderWidth = measuredPlaceholderWidth > 0 ? measuredPlaceholderWidth : Math.max(inputMinWidth, Math.round((this.placeholder?.length || 0) * (parseFloat(fontSize) || parseInt(calciteSize48)) * placeholderWidthMultiplier));
+      const placeholderWidth = measuredPlaceholderWidth > 0 ? measuredPlaceholderWidth : Math.max(inputMinWidth, Math.round((this.placeholder?.length || 0) * (parseFloat(fontSize) || parseInt(calciteSize48, 10)) * placeholderWidthMultiplier));
       const selectedIndicatorChipElWidth = getElementWidth(this.selectedIndicatorChipRef.value);
       useFitCompactLabel = this.getFitCompactDisplayState({
         chipContainerElGap,

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,9 +53,9 @@ 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;
+  accessor maxAsDate: Date | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
       nextMonth?: string;
@@ -68,9 +68,9 @@ export abstract class DatePicker extends LitElement {
    * 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 +78,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.
    *
@@ -98,9 +98,9 @@ export abstract class DatePicker extends LitElement {
    */
   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[];
+  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

@@ -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));
     }
@@ -142,7 +142,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 +163,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 +172,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 +185,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";
@@ -262,7 +262,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 +281,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 +302,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 +310,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 +343,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 +360,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.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

@@ -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

@@ -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) {