@esri/calcite-components 5.1.1-next.1 → 5.1.1-next.2

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

@@ -130,7 +130,7 @@ class Autocomplete extends LitElement {
     this.transitionRef.value?.scrollTo(options);
   }
   async selectText() {
-    return this.referenceEl.selectText();
+    return this.referenceEl?.selectText();
   }
   async setFocus(options) {
     return this.focusSetter(() => this.referenceEl, options);
@@ -163,7 +163,7 @@ class Autocomplete extends LitElement {
     }
     let itemsAndGroupsUpdated = false;
     if (changes.has("inputValue") && (this.hasUpdated || this.inputValue)) {
-      this.inputValueMatchPattern = this.inputValue && new RegExp(`(${escapeRegExp(this.inputValue)})`, "i");
+      this.inputValueMatchPattern = this.inputValue ? new RegExp(`(${escapeRegExp(this.inputValue)})`, "i") : void 0;
       this.updateItems();
       this.updateGroups();
       itemsAndGroupsUpdated = true;
@@ -260,7 +260,7 @@ class Autocomplete extends LitElement {
     });
   }
   updateItems() {
-    let activeDescendant = null;
+    let activeDescendant = "";
     this.items.forEach((item) => {
       item.scale = this.scale;
       item.inputValueMatchPattern = this.inputValueMatchPattern;
@@ -386,7 +386,7 @@ class Autocomplete extends LitElement {
     const autofocus = this.el.autofocus;
     const enterKeyHint = this.el.enterKeyHint;
     const inputMode = this.el.inputMode;
-    return this.interactiveContainer({ disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap(CSS.inputContainer)}><calcite-input .alignment=${this.alignment} aria-activedescendant=${this.activeDescendant ?? nothing} aria-controls=${listId ?? nothing} aria-label=${getLabelText(this) ?? nothing} aria-owns=${listId ?? nothing} aria-autocomplete=list .ariaExpanded=${isOpen} aria-haspopup=listbox .autocomplete=${this.autocomplete} .autofocus=${autofocus} class=${safeClassMap(CSS.input)} clearable .disabled=${disabled} enterkeyhint=${enterKeyHint ?? nothing} .form=${this.form} .icon=${this.icon ?? true} .iconFlipRtl=${this.iconFlipRtl} id=${inputId ?? nothing} inputmode=${inputMode ?? nothing} .label=${this.label} .loading=${this.loading} .maxLength=${this.maxLength} .messageOverrides=${this.messages} .minLength=${this.minLength} .name=${this.name} @click=${this.inputClickHandler} @keydown=${this.keyDownHandler} @calciteInputChange=${this.changeHandler} @calciteInputInput=${this.inputHandler} @calciteInternalInputFocus=${this.handleInputFocus} .pattern=${this.pattern} .placeholder=${this.placeholder} .prefixText=${this.prefixText} .readOnly=${this.readOnly} .required=${this.required} role=combobox .scale=${this.scale} .status=${this.status} .suffixText=${this.suffixText} type=search .value=${this.inputValue} ${ref(this.setReferenceEl)}></calcite-input>${this.renderListBox()}<div class=${safeClassMap({
+    return this.interactiveContainer({ disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap(CSS.inputContainer)}><calcite-input .alignment=${this.alignment} aria-activedescendant=${this.activeDescendant ?? nothing} aria-controls=${listId ?? nothing} aria-label=${getLabelText(this) ?? nothing} aria-owns=${listId ?? nothing} aria-autocomplete=list .ariaExpanded=${isOpen} aria-haspopup=listbox .autocomplete=${this.autocomplete} .autofocus=${autofocus} class=${safeClassMap(CSS.input)} clearable .disabled=${disabled} enterkeyhint=${enterKeyHint ?? nothing} .form=${this.form} .icon=${this.icon ?? true} .iconFlipRtl=${this.iconFlipRtl} id=${inputId ?? nothing} inputmode=${inputMode ?? nothing} .label=${this.label} .loading=${this.loading} .maxLength=${this.maxLength} .messageOverrides=${this.messages} .minLength=${this.minLength} .name=${this.name} @calciteInputChange=${this.changeHandler} @calciteInputInput=${this.inputHandler} @calciteInternalInputFocus=${this.handleInputFocus} @click=${this.inputClickHandler} @keydown=${this.keyDownHandler} .pattern=${this.pattern} .placeholder=${this.placeholder} .prefixText=${this.prefixText} .readOnly=${this.readOnly} .required=${this.required} role=combobox .scale=${this.scale} .status=${this.status} .suffixText=${this.suffixText} type=search .value=${this.inputValue} ${ref(this.setReferenceEl)}></calcite-input>${this.renderListBox()}<div class=${safeClassMap({
       [CSS.contentContainer]: true,
       [CSS.floatingUIContainer]: true,
       [CSS.floatingUIContainerActive]: isOpen

package/dist/components/calcite-autocomplete-item/customElement.d.ts

@@ -13,7 +13,7 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  */
 export abstract class AutocompleteItem extends LitElement {
   /** Specifies a description for the component. Displays below the label text. */
-  accessor description: string;
+  accessor description: string | undefined;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
    *
@@ -27,13 +27,13 @@ export abstract class AutocompleteItem extends LitElement {
    */
   accessor heading: string;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName;
+  accessor iconEnd: IconName | undefined;
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-  accessor iconFlipRtl: FlipContext;
+  accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName;
+  accessor iconStart: IconName | undefined;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * When `true`, the component is selected.
    *

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

@@ -9,9 +9,9 @@ import type { Scale } from "../interfaces.js";
  */
 export abstract class Avatar extends LitElement {
   /** Specifies the full name of the user. When `label` and `thumbnail` are not defined, specifies the accessible name for the component. */
-  accessor fullName: string;
+  accessor fullName: string | undefined;
   /** Specifies alternative text when `thumbnail` is defined, otherwise specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /**
    * Specifies the size of the component.
    *
@@ -19,9 +19,9 @@ export abstract class Avatar extends LitElement {
    */
   accessor scale: Scale;
   /** Specifies the `src` to an image. If the image is private, include an access token in the URL. */
-  accessor thumbnail: string;
+  accessor thumbnail: string | undefined;
   /** Specifies the unique id of the user. */
-  accessor userId: string;
+  accessor userId: string | undefined;
   /** Specifies the username of the user. */
-  accessor username: string;
+  accessor username: string | undefined;
 }

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

@@ -158,11 +158,11 @@ class Dialog extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-    this.setupInteractions();
+    this.setUpInteractions();
   }
   willUpdate(changes) {
     if (changes.has("open") && (this.hasUpdated || this.open !== false) || changes.has("placement") && (this.hasUpdated || this.placement !== "center") || changes.has("resizable") && (this.hasUpdated || this.resizable !== false) || changes.has("dragEnabled") && (this.hasUpdated || this.dragEnabled !== false)) {
-      this.setupInteractions();
+      this.setUpInteractions();
     }
     if (changes.has("messages") || changes.has("dragEnabled") && (this.hasUpdated || this.dragEnabled !== false) || changes.has("resizable") && (this.hasUpdated || this.resizable !== false)) {
       this.updateAssistiveText();
@@ -175,7 +175,7 @@ class Dialog extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
     this.embedded = false;
-    this.cleanupInteractions();
+    this.cleanUpInteractions();
   }
   focusTrapDisabledOverride() {
     return !this.modal && this.focusTrapDisabled;
@@ -335,7 +335,7 @@ class Dialog extends LitElement {
     const translateY = Math.round(y + top + bottom);
     this.transitionEl.style.transform = translateX || translateY ? `translate(${translateX}px, ${translateY}px)` : null;
   }
-  cleanupInteractions() {
+  cleanUpInteractions() {
     this.interaction?.unset();
     this.updateSizeInternal({
       inline: null,
@@ -345,8 +345,8 @@ class Dialog extends LitElement {
     this.resizePosition = { ...initialResizePosition };
     this.updateTransform();
   }
-  async setupInteractions() {
-    this.cleanupInteractions();
+  async setUpInteractions() {
+    this.cleanUpInteractions();
     const { el, transitionEl, resizable, dragEnabled, resizePosition, dragPosition } = this;
     if (!transitionEl || !this.open) {
       return;
@@ -447,7 +447,7 @@ class Dialog extends LitElement {
       return;
     }
     this.transitionEl = el;
-    this.setupInteractions();
+    this.setUpInteractions();
   }
   handleInternalPanelScroll(event) {
     if (event.target !== this.panelRef.value) {

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

@@ -269,6 +269,9 @@ class Dropdown extends LitElement {
     const previousReferenceEl = this.referenceEl instanceof HTMLElement ? this.referenceEl : null;
     const nextReferenceEl = el instanceof HTMLElement ? el : null;
     updateRefObserver(this.resizeObserver, previousReferenceEl, nextReferenceEl);
+    if (this.referenceElementType || !nextReferenceEl) {
+      return;
+    }
     this.referenceEl = el;
     connectFloatingUI(this);
   }

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

@@ -138,14 +138,16 @@ class Sheet extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-    this.setupInteractions();
+    if (this.hasUpdated) {
+      this.refreshResize();
+    }
   }
   willUpdate(changes) {
     if (changes.has("opened") && (this.hasUpdated || this.opened !== false) && this.transitionRef.value) {
       toggleOpenClose(this);
     }
     if (changes.has("open") && (this.hasUpdated || this.open !== false) || changes.has("position") && (this.hasUpdated || this.position !== "inline-start") || changes.has("resizable") && (this.hasUpdated || this.resizable !== false) || changes.has("direction")) {
-      this.setupInteractions();
+      this.refreshResize();
     }
     if (this.contentRef.value) {
       this.contentId = ensureId(this.contentRef.value);
@@ -155,7 +157,7 @@ class Sheet extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
     this.embedded = false;
-    this.cleanupInteractions();
+    this.cleanUpInteractions();
   }
   async setOpenState(value) {
     if (this.beforeClose && !value) {
@@ -230,31 +232,34 @@ class Sheet extends LitElement {
     }
     this.sizeOverride.resize(size);
   }
-  cleanupInteractions() {
+  cleanUpInteractions() {
     this.interaction?.unset();
   }
-  async setupInteractions() {
-    this.cleanupInteractions();
-    const { contentRef, el, resizable, position, open, resizeHandleEl } = this;
-    if (!contentRef.value || !open || !resizable || !resizeHandleEl) {
+  updateResizeValues() {
+    const { contentRef } = this;
+    if (!contentRef.value) {
       return;
     }
-    await this.el.componentOnReady();
     const computedStyle = window.getComputedStyle(contentRef.value);
-    this.resizeValues.minInlineSize = parseInt(computedStyle.minInlineSize) || 0;
-    this.resizeValues.maxInlineSize = parseInt(computedStyle.maxInlineSize) || window.innerWidth;
-    this.resizeValues.minBlockSize = parseInt(computedStyle.minBlockSize) || 0;
-    this.resizeValues.maxBlockSize = parseInt(computedStyle.maxBlockSize) || window.innerHeight;
-    const { inlineSize, minInlineSize, blockSize, minBlockSize, maxInlineSize, maxBlockSize } = computedStyle;
-    const values = {
-      inlineSize: getStylePixelValue(inlineSize),
-      blockSize: getStylePixelValue(blockSize),
-      minInlineSize: getStylePixelValue(minInlineSize),
-      minBlockSize: getStylePixelValue(minBlockSize),
-      maxInlineSize: getStylePixelValue(maxInlineSize) || window.innerWidth,
-      maxBlockSize: getStylePixelValue(maxBlockSize) || window.innerHeight
+    this.resizeValues = {
+      inlineSize: getStylePixelValue(computedStyle.inlineSize),
+      blockSize: getStylePixelValue(computedStyle.blockSize),
+      minInlineSize: getStylePixelValue(computedStyle.minInlineSize),
+      minBlockSize: getStylePixelValue(computedStyle.minBlockSize),
+      maxInlineSize: getStylePixelValue(computedStyle.maxInlineSize) || window.innerWidth,
+      maxBlockSize: getStylePixelValue(computedStyle.maxBlockSize) || window.innerHeight
     };
-    this.resizeValues = values;
+  }
+  refreshResize() {
+    this.updateResizeValues();
+    this.setUpResizeInteractions();
+  }
+  setUpResizeInteractions() {
+    this.cleanUpInteractions();
+    const { contentRef, el, resizable, position, open, resizeHandleEl } = this;
+    if (!contentRef.value || !open || !resizable || !resizeHandleEl) {
+      return;
+    }
     const rtl = this.direction === "rtl";
     this.interaction = interact(contentRef.value, { context: el.ownerDocument }).resizable({
       edges: {
@@ -266,12 +271,12 @@ class Sheet extends LitElement {
       modifiers: [
         interact.modifiers.restrictSize({
           min: {
-            width: values.minInlineSize,
-            height: values.minBlockSize
+            width: this.resizeValues.minInlineSize,
+            height: this.resizeValues.minBlockSize
           },
           max: {
-            width: values.maxInlineSize,
-            height: values.maxBlockSize
+            width: this.resizeValues.maxInlineSize,
+            height: this.resizeValues.maxBlockSize
           }
         })
       ],
@@ -304,7 +309,7 @@ class Sheet extends LitElement {
   }
   setResizeHandleEl(el) {
     this.resizeHandleEl = el;
-    this.setupInteractions();
+    this.refreshResize();
   }
   handleOutsideClose() {
     if (this.outsideCloseDisabled) {