@esri/calcite-components 5.2.0-next.3 → 5.2.0-next.5

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

@@ -103,7 +103,7 @@ class Icon extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.intersectionObserver?.disconnect();
-    this.intersectionObserver = null;
+    this.intersectionObserver = void 0;
   }
   async loadIconPathData() {
     const { icon, scale, visible } = this;
@@ -121,8 +121,8 @@ class Icon extends LitElement {
     this.intersectionObserver = createObserver("intersection", (entries) => {
       entries.forEach((entry) => {
         if (entry.isIntersecting) {
-          this.intersectionObserver.disconnect();
-          this.intersectionObserver = null;
+          this.intersectionObserver?.disconnect();
+          this.intersectionObserver = void 0;
           callback();
         }
       });
@@ -138,7 +138,7 @@ class Icon extends LitElement {
     const dir = this.direction;
     const size = scaleToPx[scale];
     const semantic = !!textLabel;
-    const paths = [].concat(pathData || "");
+    const paths = Array.isArray(pathData) ? pathData : [pathData ?? ""];
     this.el.ariaHidden = toAriaBoolean(!semantic);
     this.el.ariaLabel = semantic ? textLabel : null;
     this.el.role = semantic ? "img" : null;

package/dist/components/calcite-inline-editable/customElement.d.ts

@@ -13,7 +13,7 @@ import type { Scale } from "../interfaces.js";
  */
 export abstract class InlineEditable extends LitElement {
   /** Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically. */
-  accessor afterConfirm: () => Promise<void>;
+  accessor afterConfirm: (() => Promise<void>) | undefined;
   /**
    * When `true` and `editingEnabled` is `true`, displays save and cancel controls.
    *

package/dist/components/calcite-inline-editable/customElement.js

@@ -30,6 +30,8 @@ class InlineEditable extends LitElement {
     this.cancelEditingButtonRef = createRef();
     this._editingEnabled = false;
     this.enableEditingButtonRef = createRef();
+    this.shouldEmitCancel = false;
+    this.valuePriorToEditing = "";
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
@@ -102,7 +104,7 @@ class InlineEditable extends LitElement {
     this.setFocus();
   }
   enableEditing() {
-    this.valuePriorToEditing = this.inputEl?.value;
+    this.valuePriorToEditing = this.inputEl?.value ?? "";
     this.editingEnabled = true;
     this.inputEl?.setFocus();
     this.calciteInternalInlineEditableEnableEditingChange.emit();
@@ -131,7 +133,7 @@ class InlineEditable extends LitElement {
     if (event.key === "Tab" && this.shouldShowControls) {
       if (!event.shiftKey && event.target === this.inputEl) {
         event.preventDefault();
-        this.cancelEditingButtonRef.value.setFocus();
+        this.cancelEditingButtonRef.value?.setFocus();
       }
       if (!!event.shiftKey && event.target === this.cancelEditingButtonRef.value) {
         event.preventDefault();

package/dist/components/calcite-input/customElement.d.ts

@@ -35,7 +35,7 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
    */
-  accessor accept: string;
+  accessor accept: string | undefined;
   /**
    * Specifies the text alignment of the component's `value`.
    *
@@ -48,7 +48,7 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
    */
-  accessor autocomplete: AutoFill;
+  accessor autocomplete: AutoFill | undefined;
   /**
    * When `true` and the component has a `value`, a clear button is displayed. The clear button shows by default for `"search"`, `"time"`, and `"date"` types.
    *
@@ -68,12 +68,8 @@ export abstract class Input extends LitElement {
    * @see [MDN - files](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/files)
    */
   accessor files: FileList | undefined;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
-  accessor form: string;
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
+  accessor form: string | undefined;
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
    *
@@ -81,7 +77,7 @@ export abstract class Input extends LitElement {
    */
   accessor groupSeparator: boolean;
   /** When `true`, displays a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. */
-  accessor icon: IconName | boolean;
+  accessor icon: IconName | boolean | undefined;
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
    *
@@ -89,9 +85,9 @@ export abstract class Input extends LitElement {
    */
   accessor iconFlipRtl: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * When `true`, a busy indicator is displayed.
    *
@@ -104,17 +100,20 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - max](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max)
    */
-  accessor max: number;
+  accessor max: number | undefined;
   /**
    * When the component resides in a form,
    * specifies the maximum length of text for the component's `value`.
    *
    * @see [MDN - maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
    */
-  accessor maxLength: number;
+  accessor maxLength: number | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
+      cancelInlineEditing?: string;
       clear?: string;
+      confirmInlineEditingChanges?: string;
+      enableInlineEditing?: string;
       loading?: string;
       required?: string;
   };
@@ -124,14 +123,14 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - min](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min)
    */
-  accessor min: number;
+  accessor min: number | undefined;
   /**
    * When the component resides in a form,
    * specifies the minimum length of text for the component's `value`.
    *
    * @see [MDN - minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
    */
-  accessor minLength: number;
+  accessor minLength: number | undefined;
   /**
    * When `true` and `type` is `"email"` or `"file"`, the component can accept more than one value.
    * Read the native attribute's documentation on MDN for more info.
@@ -147,7 +146,7 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
    */
-  accessor name: string;
+  accessor name: string | undefined;
   /**
    * When `type="number"`, specifies the placement of the buttons.
    *
@@ -155,7 +154,7 @@ export abstract class Input extends LitElement {
    */
   accessor numberButtonType: InputPlacement;
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * When the component resides in a form,
    * specifies a regular expression (regex) pattern the component's `value` must match for validation.
@@ -163,15 +162,15 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
    */
-  accessor pattern: string;
+  accessor pattern: string | undefined;
   /**
    * Specifies the component's placeholder text.
    *
    * @see [MDN - placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
    */
-  accessor placeholder: string;
+  accessor placeholder: string | undefined;
   /** Specifies text to display at the start of the component. */
-  accessor prefixText: string;
+  accessor prefixText: string | undefined;
   /**
    * When `true`, the component's `value` can be read, but cannot be modified.
    *
@@ -203,9 +202,9 @@ export abstract class Input extends LitElement {
    *
    * @see [MDN - step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step)
    */
-  accessor step: number | "any";
+  accessor step: number | "any" | undefined;
   /** Specifies text to display at the end of the component. */
-  accessor suffixText: string;
+  accessor suffixText: string | undefined;
   /**
    * Specifies the component type.
    *
@@ -215,9 +214,9 @@ export abstract class Input extends LitElement {
    */
   accessor type: "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week";
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean;
+  accessor validationIcon: IconName | boolean | undefined;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * The component's current validation state.
    *

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

@@ -138,7 +138,7 @@ class Input extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.inlineEditableEl = this.el.closest("calcite-inline-editable");
+    this.inlineEditableEl = this.el.closest("calcite-inline-editable") ?? void 0;
     if (this.inlineEditableEl) {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
@@ -165,10 +165,10 @@ class Input extends LitElement {
   }
   willUpdate(changes) {
     if (changes.has("max")) {
-      this.maxString = this.max?.toString() || null;
+      this.maxString = this.max?.toString() ?? void 0;
     }
     if (changes.has("min")) {
-      this.minString = this.min?.toString() || null;
+      this.minString = this.min?.toString() ?? void 0;
     }
     if (changes.has("icon") || changes.has("type") && (this.hasUpdated || this.type !== "text")) {
       this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
@@ -279,7 +279,7 @@ class Input extends LitElement {
       return;
     }
     if (this.type === "file") {
-      this.files = this.childRef.value.files;
+      this.files = this.childRef.value.files ?? void 0;
     }
     this.setValue({
       nativeEvent,
@@ -318,7 +318,9 @@ class Input extends LitElement {
         origin: "user",
         value: parseNumberString(delocalizedValue)
       });
-      this.childNumberRef.value.value = this.displayedValue;
+      if (this.childNumberRef.value) {
+        this.childNumberRef.value.value = this.displayedValue;
+      }
     } else {
       this.setValue({
         nativeEvent,
@@ -373,26 +375,26 @@ class Input extends LitElement {
       useGrouping: this.groupSeparator
     };
     if (event.key === numberStringFormatter.decimal) {
-      if (!this.value && !this.childNumberRef.value.value) {
+      if (!this.value && !this.childNumberRef.value?.value) {
         return;
       }
-      if (this.value && this.childNumberRef.value.value.indexOf(numberStringFormatter.decimal) === -1) {
+      if (this.value && this.childNumberRef.value?.value.indexOf(numberStringFormatter.decimal) === -1) {
         return;
       }
     }
     if (/[eE]/.test(event.key)) {
-      if (!this.value && !this.childNumberRef.value.value) {
+      if (!this.value && !this.childNumberRef.value?.value) {
         return;
       }
-      if (this.value && !/[eE]/.test(this.childNumberRef.value.value)) {
+      if (this.value && this.childNumberRef.value && !/[eE]/.test(this.childNumberRef.value.value)) {
         return;
       }
     }
     if (event.key === "-") {
-      if (!this.value && !this.childNumberRef.value.value) {
+      if (!this.value && !this.childNumberRef.value?.value) {
         return;
       }
-      if (this.value && this.childNumberRef.value.value.split("-").length <= 2) {
+      if (this.value && this.childNumberRef.value && this.childNumberRef.value.value.split("-").length <= 2) {
         return;
       }
     }
@@ -516,7 +518,7 @@ class Input extends LitElement {
     const childEl = this.type !== "number" ? html`<input accept=${this.accept ?? nothing} aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${autofocus} class=${safeClassMap({
       [CSS.editingEnabled]: this.editingEnabled,
       [CSS.inlineChild]: !!this.inlineEditableEl
-    })} value=${this.defaultValue ?? nothing} .disabled=${this.disabled} enterkeyhint=${enterKeyHint ?? nothing} inputmode=${inputMode ?? nothing} max=${this.maxString ?? nothing} maxlength=${this.maxLength ?? nothing} min=${this.minString ?? nothing} minlength=${this.minLength ?? nothing} .multiple=${this.multiple} name=${this.name ?? nothing} @blur=${this.inputBlurHandler} @focus=${this.inputFocusHandler} @input=${this.inputInputHandler} @keydown=${this.inputKeyDownHandler} @keyup=${this.inputKeyUpHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} spellcheck=${this.el.spellcheck ?? nothing} step=${this.step ?? nothing} tabindex=${(this.disabled || this.inlineEditableEl && !this.editingEnabled ? -1 : null) ?? nothing} type=${this.type ?? nothing} .value=${live(this.value ?? "")} ${ref(this.childRef)}>` : null;
+    })} value=${this.defaultValue ?? nothing} .disabled=${this.disabled} enterkeyhint=${enterKeyHint ?? nothing} inputmode=${inputMode ?? nothing} max=${this.maxString ?? nothing} maxlength=${this.maxLength ?? nothing} min=${this.minString ?? nothing} minlength=${this.minLength ?? nothing} .multiple=${this.multiple} name=${this.name ?? nothing} @blur=${this.inputBlurHandler} @focus=${this.inputFocusHandler} @input=${this.inputInputHandler} @keydown=${this.inputKeyDownHandler} @keyup=${this.inputKeyUpHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} spellcheck=${this.el.spellcheck ?? nothing} step=${this.step ?? nothing} tabindex=${(this.disabled || this.inlineEditableEl && !this.editingEnabled ? -1 : void 0) ?? nothing} type=${this.type ?? nothing} .value=${live(this.value ?? "")} ${ref(this.childRef)}>` : null;
     return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap({
       [CSS.inputWrapper]: true,
       [CSS_UTILITY.rtl]: dir === "rtl",

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

@@ -58,26 +58,22 @@ export abstract class InputDatePicker extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[];
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[] | undefined;
   /**
    * When `true`, prevents focus trapping.
    *
    * @default false
    */
   accessor focusTrapDisabled: boolean;
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
-  accessor form: string;
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
+  accessor form: string | undefined;
   /** 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;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * Defines the component's layout.
    *
@@ -88,9 +84,9 @@ export abstract class InputDatePicker 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. */
-  accessor maxAsDate: Date;
+  accessor maxAsDate: Date | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
       chooseDate?: string;
@@ -104,9 +100,9 @@ export abstract class InputDatePicker 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. */
-  accessor minAsDate: Date;
+  accessor minAsDate: Date | undefined;
   /**
    * Specifies the component's month style.
    *
@@ -114,9 +110,9 @@ export abstract class InputDatePicker extends LitElement {
    */
   accessor monthStyle: "abbreviated" | "wide";
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string;
+  accessor name: string | undefined;
   /** 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`, displays the `calcite-date-picker` component.
    *
@@ -179,18 +175,16 @@ export abstract class InputDatePicker extends LitElement {
    */
   accessor status: Status;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean;
+  accessor validationIcon: IconName | boolean | undefined;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * The component's current validation state.
    *
@@ -200,7 +194,7 @@ export abstract class InputDatePicker extends LitElement {
   /** Selected date as a string in ISO format (`"yyyy-mm-dd"`). */
   accessor value: string | string[];
   /** The component's `value` as a full date object. */
-  accessor valueAsDate: Date | Date[];
+  accessor valueAsDate: Date | Date[] | undefined;
   /**
    * Updates the component's position.
    *

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

@@ -199,19 +199,19 @@ class InputDatePicker extends LitElement {
     const minSource = getMinMaxSource(changes, "min");
     const maxSource = getMinMaxSource(changes, "max");
     if (minSource === "min") {
-      this.minAsDate = dateFromISO(this.min);
+      this.minAsDate = dateFromISO(this.min) ?? void 0;
     } else if (minSource === "minAsDate") {
-      this.minAsDate = dateFromISO(dateToISO(this.minAsDate));
+      this.minAsDate = dateFromISO(dateToISO(this.minAsDate)) ?? void 0;
     }
     if (maxSource === "max") {
-      this.maxAsDate = dateFromISO(this.max);
+      this.maxAsDate = dateFromISO(this.max) ?? void 0;
     } else if (maxSource === "maxAsDate") {
-      this.maxAsDate = dateFromISO(dateToISO(this.maxAsDate));
+      this.maxAsDate = dateFromISO(dateToISO(this.maxAsDate)) ?? void 0;
     }
     if ((minSource || maxSource) && !Array.isArray(this.valueAsDate)) {
       const validValueAsDate = dateFromRange(this.valueAsDate, this.minAsDate, this.maxAsDate);
       if (validValueAsDate !== this.valueAsDate) {
-        this.valueAsDate = validValueAsDate;
+        this.valueAsDate = validValueAsDate ?? void 0;
       }
     }
     if (changes.has("open") && (this.hasUpdated || this.open !== false)) {
@@ -255,7 +255,7 @@ class InputDatePicker extends LitElement {
         if (Array.isArray(newValue)) {
           newValueAsDate = getValueAsDateRange(newValue);
         } else if (newValue) {
-          newValueAsDate = dateFromISO(newValue);
+          newValueAsDate = dateFromISO(newValue) ?? void 0;
         } else {
           newValueAsDate = void 0;
         }
@@ -333,7 +333,7 @@ class InputDatePicker extends LitElement {
     const wasToggleClicked = path.find((el) => el.classList?.contains(CSS.toggleIcon));
     if (wasToggleClicked) {
       const targetInput = position === "start" ? startInputRef : endInputRef;
-      targetInput.value.setFocus();
+      targetInput.value?.setFocus();
     }
     if (!range || !this.open || currentOpenInput === position) {
       this.open = !this.open;
@@ -341,7 +341,7 @@ class InputDatePicker extends LitElement {
   }
   setFilteredPlacements() {
     const { el, flipPlacements } = this;
-    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : null;
+    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : void 0;
   }
   onLabelClick() {
     this.setFocus();
@@ -371,7 +371,7 @@ class InputDatePicker extends LitElement {
   commitValue() {
     const { focusedInput, value } = this;
     const focusedInputRef = this.getInputRef(focusedInput);
-    const date = dateFromLocalizedString(focusedInputRef.value.value, this.localeData);
+    const date = focusedInputRef.value ? dateFromLocalizedString(focusedInputRef.value?.value, this.localeData) : void 0;
     const dateAsISO = dateToISO(date);
     const valueIsArray = Array.isArray(value);
     if (this.range) {
@@ -382,21 +382,21 @@ class InputDatePicker extends LitElement {
         }
         if (date) {
           this.setRangeValue([
-            focusedInput === "start" ? date : dateFromISO(value[0]),
-            focusedInput === "end" ? date : dateFromISO(value[1])
+            focusedInput === "start" ? date : dateFromISO(value[0]) ?? void 0,
+            focusedInput === "end" ? date : dateFromISO(value[1]) ?? void 0
           ]);
           this.localizeInputValues();
         } else {
           this.setRangeValue([
-            focusedInput === "end" && dateFromISO(value[0]),
-            focusedInput === "start" && dateFromISO(value[1])
+            focusedInput === "end" ? dateFromISO(value[0]) ?? void 0 : void 0,
+            focusedInput === "start" ? dateFromISO(value[1]) ?? void 0 : void 0
           ]);
         }
       } else {
         if (date) {
           this.setRangeValue([
-            focusedInput === "start" ? date : dateFromISO(value[0]),
-            focusedInput === "end" ? date : dateFromISO(value[1])
+            focusedInput === "start" ? date : dateFromISO(value[0]) ?? void 0,
+            focusedInput === "end" ? date : dateFromISO(value[1]) ?? void 0
           ]);
           this.localizeInputValues();
         }
@@ -520,7 +520,7 @@ class InputDatePicker extends LitElement {
   }
   restoreInputFocus(isDatePickerClosed = false) {
     if (!this.range) {
-      this.startInputRef.value.setFocus();
+      this.startInputRef.value?.setFocus();
       this.open = false;
       return;
     }
@@ -533,7 +533,7 @@ class InputDatePicker extends LitElement {
     if (this.shouldFocusRangeStart() || this.rangeStartValueChangedByUser) {
       return;
     }
-    if (this.proximitySelectionDisabled && this.valueAsDate[1] === null) {
+    if (this.proximitySelectionDisabled && this.valueAsDate && this.valueAsDate[1] === null) {
       return;
     }
     this.open = false;
@@ -542,8 +542,8 @@ class InputDatePicker extends LitElement {
   localizeInputValues() {
     const date = dateFromRange(this.range ? Array.isArray(this.valueAsDate) && this.valueAsDate[0] || void 0 : this.valueAsDate, this.minAsDate, this.maxAsDate);
     const endDate = this.range ? dateFromRange(Array.isArray(this.valueAsDate) && this.valueAsDate[1] || void 0, this.minAsDate, this.maxAsDate) : null;
-    this.setInputValue((date && this.dateTimeFormat.format(date)) ?? "", "start");
-    this.setInputValue((this.range && endDate && this.dateTimeFormat.format(endDate)) ?? "", "end");
+    this.setInputValue((date && this.dateTimeFormat?.format(date)) ?? "", "start");
+    this.setInputValue(this.range && endDate && this.dateTimeFormat?.format(endDate) || "", "end");
   }
   getInputRef(input = "start") {
     return input === "start" ? this.startInputRef : this.endInputRef;
@@ -562,12 +562,12 @@ class InputDatePicker extends LitElement {
     const { value: oldValue } = this;
     const oldValueIsArray = Array.isArray(oldValue);
     const valueIsArray = Array.isArray(valueAsDate);
-    const newStartDate = valueIsArray ? valueAsDate[0] : null;
+    const newStartDate = valueIsArray ? valueAsDate[0] : void 0;
     let newStartDateISO = valueIsArray ? dateToISO(newStartDate) : "";
     if (newStartDateISO) {
       newStartDateISO = this.getNormalizedDate(newStartDateISO);
     }
-    const newEndDate = valueIsArray ? valueAsDate[1] : null;
+    const newEndDate = valueIsArray ? valueAsDate[1] : void 0;
     let newEndDateISO = valueIsArray ? dateToISO(newEndDate) : "";
     if (newEndDateISO) {
       newEndDateISO = this.getNormalizedDate(newEndDateISO);
@@ -602,7 +602,7 @@ class InputDatePicker extends LitElement {
       return;
     }
     this.userChangedValue = true;
-    this.valueAsDate = newValue ? dateFromISO(newValue) : void 0;
+    this.valueAsDate = newValue ? dateFromISO(newValue) ?? void 0 : void 0;
     this.value = newValue || "";
     const changeEvent = this.calciteInputDatePickerChange.emit();
     if (changeEvent.defaultPrevented) {
@@ -632,7 +632,7 @@ class InputDatePicker extends LitElement {
   }
   focusInput() {
     const focusedInput = this.focusedInput === "start" ? this.startInputRef : this.endInputRef;
-    focusedInput.value.setFocus();
+    focusedInput.value?.setFocus();
   }
   render() {
     const { disabled, messages: { _lang: effectiveLocale }, messages, numberingSystem, readOnly } = this;

package/dist/components/calcite-input-message/customElement.d.ts

@@ -12,7 +12,7 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  */
 export abstract class InputMessage extends LitElement {
   /** Specifies an icon to display. */
-  accessor icon: IconName | boolean;
+  accessor icon: IconName | boolean | undefined;
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
    *