@esri/calcite-components 5.2.0-next.2 → 5.2.0-next.21

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,19 +100,22 @@ 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: {
-      clear?: string;
-      loading?: string;
-      required?: string;
+      cancelInlineEditing?: string | undefined;
+      clear?: string | undefined;
+      confirmInlineEditingChanges?: string | undefined;
+      enableInlineEditing?: string | undefined;
+      loading?: string | undefined;
+      required?: string | undefined;
   };
   /**
    * When the component resides in a form,
@@ -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,25 +84,26 @@ 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;
-      date?: string;
-      dateFormat?: string;
-      endDate?: string;
-      required?: string;
-      startDate?: string;
+      chooseDate?: string | undefined;
+      clear?: string | undefined;
+      date?: string | undefined;
+      dateFormat?: string | undefined;
+      endDate?: string | undefined;
+      required?: string | undefined;
+      startDate?: string | undefined;
   } & DatePicker["messageOverrides"];
   /**
    * 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 +111,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.
    *
@@ -133,6 +130,12 @@ export abstract class InputDatePicker extends LitElement {
    * @default "absolute"
    */
   accessor overlayPositioning: OverlayPositioning;
+  /**
+   * Specifies placeholder text for the component.
+   *
+   * @see [MDN - placeholder](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder)
+   */
+  accessor placeholder: string | undefined;
   /**
    * Determines the `calcite-date-picker`'s placement relative to the input.
    *
@@ -179,18 +182,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 +201,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

@@ -135,7 +135,7 @@ class InputDatePicker extends LitElement {
     this.handleDateTimeFormatChange();
   }
   static {
-    this.properties = { datePickerActiveDate: [16, {}, { state: true }], focusedInput: [16, {}, { state: true }], localeData: [16, {}, { state: true }], calendars: [11, {}, { type: Number, reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], headingLevel: [11, {}, { type: Number, reflect: true }], label: 1, labelText: 1, layout: [3, {}, { reflect: true }], max: [3, {}, { reflect: true }], maxAsDate: [0, {}, { attribute: false }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], minAsDate: [0, {}, { attribute: false }], monthStyle: 1, name: [3, {}, { reflect: true }], numberingSystem: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], proximitySelectionDisabled: [5, {}, { type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1, valueAsDate: [0, {}, { attribute: false }] };
+    this.properties = { datePickerActiveDate: [16, {}, { state: true }], focusedInput: [16, {}, { state: true }], localeData: [16, {}, { state: true }], calendars: [11, {}, { type: Number, reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], headingLevel: [11, {}, { type: Number, reflect: true }], label: 1, labelText: 1, layout: [3, {}, { reflect: true }], max: [3, {}, { reflect: true }], maxAsDate: [0, {}, { attribute: false }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], minAsDate: [0, {}, { attribute: false }], monthStyle: 1, name: [3, {}, { reflect: true }], numberingSystem: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placeholder: 1, placement: [3, {}, { reflect: true }], proximitySelectionDisabled: [5, {}, { type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1, valueAsDate: [0, {}, { attribute: false }] };
   }
   static {
     this.formAssociated = true;
@@ -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) {
@@ -388,8 +388,8 @@ class InputDatePicker extends LitElement {
           this.localizeInputValues();
         } else {
           this.setRangeValue([
-            focusedInput === "end" && dateFromISO(value[0]),
-            focusedInput === "start" && dateFromISO(value[1])
+            focusedInput === "end" ? dateFromISO(value[0]) : void 0,
+            focusedInput === "start" ? dateFromISO(value[1]) : void 0
           ]);
         }
       } else {
@@ -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,17 +533,17 @@ class InputDatePicker extends LitElement {
     if (this.shouldFocusRangeStart() || this.rangeStartValueChangedByUser) {
       return;
     }
-    if (this.proximitySelectionDisabled && this.valueAsDate[1] === null) {
+    if (this.proximitySelectionDisabled && Array.isArray(this.valueAsDate) && this.valueAsDate[1] === void 0) {
       return;
     }
     this.open = false;
     this.focusInput();
   }
   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");
+    const date = dateFromRange(this.range ? Array.isArray(this.valueAsDate) && this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
+    const endDate = this.range ? dateFromRange(Array.isArray(this.valueAsDate) && this.valueAsDate[1], this.minAsDate, this.maxAsDate) : void 0;
+    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);
@@ -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;
@@ -644,14 +644,14 @@ class InputDatePicker extends LitElement {
     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.container)}><div aria-label=${getLabelText(this) ?? nothing} .ariaRequired=${this.required} class=${safeClassMap(CSS.inputContainer)} role=group><div class=${safeClassMap(CSS.inputWrapper)} data-position=${POSITION.start} @click=${this.onInputWrapperClick} @pointerdown=${this.onInputWrapperPointerDown} ${ref(this.setStartWrapper)}><calcite-input-text aria-controls=${this.dialogId ?? nothing} aria-describedby=${this.placeholderTextId ?? nothing} aria-errormessage=${IDS.validationMessage} aria-autocomplete=none .ariaExpanded=${this.open} aria-haspopup=dialog .ariaInvalid=${this.status === "invalid"} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.startInput]: true
-    })} .disabled=${disabled} .icon=${ICONS.calendar} .label=${this.range ? this.messages.startDate : this.messages.date} @calciteInputTextInput=${this.calciteInternalInputInputHandler} @calciteInternalInputTextBlur=${this.calciteInternalInputBlurHandler} @calciteInternalInputTextFocus=${this.startInputFocus} .placeholder=${this.localeData?.placeholder} .readOnly=${readOnly} role=combobox .scale=${this.scale} .status=${this.status} ${ref(this.startInputRef)}></calcite-input-text>${!this.readOnly && !this.range && this.renderToggleIcon(this.open && this.focusedInput === "start") || ""}<span aria-hidden=true class=${safeClassMap(CSS.assistiveText)} id=${this.placeholderTextId ?? nothing}>${messages.dateFormat.replace("{format}", this.localeData?.placeholder)}</span></div><div .ariaHidden=${!this.open} .ariaLabel=${messages.chooseDate} aria-live=polite class=${safeClassMap(CSS.menu)} id=${this.dialogId ?? nothing} popover=manual role=dialog ${ref(this.setFloatingEl)}><div class=${safeClassMap({
+    })} .disabled=${disabled} .icon=${ICONS.calendar} .label=${this.range ? this.messages.startDate : this.messages.date} @calciteInputTextInput=${this.calciteInternalInputInputHandler} @calciteInternalInputTextBlur=${this.calciteInternalInputBlurHandler} @calciteInternalInputTextFocus=${this.startInputFocus} .placeholder=${this.placeholder || this.localeData?.placeholder} .readOnly=${readOnly} role=combobox .scale=${this.scale} .status=${this.status} ${ref(this.startInputRef)}></calcite-input-text>${!this.readOnly && !this.range && this.renderToggleIcon(this.open && this.focusedInput === "start") || ""}<span aria-hidden=true class=${safeClassMap(CSS.assistiveText)} id=${this.placeholderTextId ?? nothing}>${this.placeholder || messages.dateFormat.replace("{format}", this.localeData?.placeholder)}</span></div><div .ariaHidden=${!this.open} .ariaLabel=${messages.chooseDate} aria-live=polite class=${safeClassMap(CSS.menu)} id=${this.dialogId ?? nothing} popover=manual role=dialog ${ref(this.setFloatingEl)}><div class=${safeClassMap({
       [CSS.calendarWrapper]: true,
       [FloatingCSS.animation]: true,
       [FloatingCSS.animationActive]: this.open
     })} ${ref(this.transitionRef)}><calcite-date-picker .activeDate=${this.datePickerActiveDate} .activeRange=${this.focusedInput} .calendars=${this.calendars} .headingLevel=${this.headingLevel} .layout=${this.layout} .max=${this.max} .maxAsDate=${this.maxAsDate} .messageOverrides=${this.messageOverrides} .min=${this.min} .minAsDate=${this.minAsDate} .monthStyle=${this.monthStyle} .numberingSystem=${numberingSystem} @calciteDatePickerChange=${this.handleDateChange} @calciteDatePickerRangeChange=${this.handleDateRangeChange} .proximitySelectionDisabled=${this.proximitySelectionDisabled} .range=${this.range} .scale=${this.scale} tabindex=${(this.open ? void 0 : -1) ?? nothing} .valueAsDate=${this.valueAsDate} ${ref(this.setDatePickerRef)}></calcite-date-picker></div></div>${this.range && html`<div class=${safeClassMap(CSS.dividerContainer)}><div class=${safeClassMap(CSS.divider)}></div></div>` || ""}${this.range && html`<div class=${safeClassMap(CSS.inputWrapper)} data-position=${POSITION.end} @click=${this.onInputWrapperClick} @pointerdown=${this.onInputWrapperPointerDown} ${ref(this.setEndWrapper)}><calcite-input-text aria-controls=${this.dialogId ?? nothing} aria-autocomplete=none .ariaExpanded=${this.open} aria-haspopup=dialog class=${safeClassMap({
       [CSS.input]: true,
       [CSS.endInput]: true
-    })} .disabled=${disabled} .icon=${ICONS.calendar} .label=${this.messages.endDate} @calciteInputTextInput=${this.calciteInternalInputInputHandler} @calciteInternalInputTextBlur=${this.calciteInternalInputBlurHandler} @calciteInternalInputTextFocus=${this.endInputFocus} .placeholder=${this.localeData?.placeholder} .readOnly=${readOnly} role=combobox .scale=${this.scale} .status=${this.status} ${ref(this.endInputRef)}></calcite-input-text>${!this.readOnly && this.layout === "horizontal" && this.renderToggleIcon(this.open) || ""}</div>` || ""}</div>${this.range && this.layout === "vertical" && html`<div class=${safeClassMap(CSS.verticalChevronContainer)}><calcite-icon .icon=${this.open ? ICONS.chevronUp : ICONS.chevronDown} .scale=${getIconScale(this.scale)}></calcite-icon></div>` || ""}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} .disabled=${disabled} .icon=${ICONS.calendar} .label=${this.messages.endDate} @calciteInputTextInput=${this.calciteInternalInputInputHandler} @calciteInternalInputTextBlur=${this.calciteInternalInputBlurHandler} @calciteInternalInputTextFocus=${this.endInputFocus} .placeholder=${this.placeholder || this.localeData?.placeholder} .readOnly=${readOnly} role=combobox .scale=${this.scale} .status=${this.status} ${ref(this.endInputRef)}></calcite-input-text>${!this.readOnly && this.layout === "horizontal" && this.renderToggleIcon(this.open) || ""}</div>` || ""}</div>${this.range && this.layout === "vertical" && html`<div class=${safeClassMap(CSS.verticalChevronContainer)}><calcite-icon .icon=${this.open ? ICONS.chevronUp : ICONS.chevronDown} .scale=${getIconScale(this.scale)}></calcite-icon></div>` || ""}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
   renderToggleIcon(open) {
     return html`<span class=${safeClassMap(CSS.toggleIcon)} tabindex=-1><calcite-icon class=${safeClassMap(CSS.chevronIcon)} .icon=${open ? ICONS.chevronUp : ICONS.chevronDown} .scale=${getIconScale(this.scale)}></calcite-icon></span>`;

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`.
    *

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

@@ -40,9 +40,7 @@ class InputMessage extends LitElement {
     return html`${this.renderIcon(this.requestedIcon)}<slot></slot>`;
   }
   renderIcon(iconName) {
-    if (iconName) {
-      return html`<calcite-icon class=${safeClassMap(CSS.inputMessageIcon)} .flipRtl=${this.iconFlipRtl} .icon=${iconName} scale=s></calcite-icon>`;
-    }
+    return iconName ? html`<calcite-icon class=${safeClassMap(CSS.inputMessageIcon)} .flipRtl=${this.iconFlipRtl} .icon=${iconName} scale=s></calcite-icon>` : iconName;
   }
 }
 customElement("calcite-input-message", InputMessage);