@esri/calcite-components 5.2.0-next.29 → 5.2.0-next.30

package/dist/components/calcite-text-area/customElement.js

@@ -52,13 +52,14 @@ class TextArea extends LitElement {
     super(...arguments);
     this.attributeWatch = useWatchAttributes(["autofocus", "spellcheck"], this.handleGlobalAttributesChanged);
     this.footerRef = createRef();
+    this.loaderContainerRef = createRef();
     this.formSupport = useForm({
       inputType: "text"
     })(this);
     this.guid = guid();
     this.resizeObserver = createObserver("resize", async () => {
       await this.componentOnReady();
-      const { textAreaHeight, textAreaWidth, elHeight, elWidth, footerHeight, footerWidth, validationMessageHeight } = this.getHeightAndWidthOfElements();
+      const { textAreaHeight, textAreaWidth, loaderHeight, elWidth, footerHeight, footerWidth } = this.getHeightAndWidthOfElements();
       if (footerWidth > 0 && footerWidth !== textAreaWidth) {
         this.footerRef.value.style.width = `${textAreaWidth}px`;
       }
@@ -66,10 +67,10 @@ class TextArea extends LitElement {
         return;
       }
       const { width: elStyleWidth, height: elStyleHeight } = getComputedStyle(this.el);
-      if (elWidth !== textAreaWidth && elStyleWidth !== "auto") {
+      if (this.dimensionsDiffer(elWidth, textAreaWidth) && elStyleWidth !== "auto") {
         this.updateSizeToAuto("width");
       }
-      if (elHeight !== textAreaHeight + footerHeight + validationMessageHeight && elStyleHeight !== "auto") {
+      if (loaderHeight > 0 && textAreaHeight > 0 && footerHeight > 0 && this.dimensionsDiffer(loaderHeight, textAreaHeight + footerHeight) && elStyleHeight !== "auto") {
         this.updateSizeToAuto("height");
       }
     });
@@ -135,6 +136,10 @@ class TextArea extends LitElement {
     super.disconnectedCallback();
     this.resizeObserver?.disconnect();
   }
+  dimensionsDiffer(dimensionA, dimensionB) {
+    const dimensionTolerance = 1;
+    return Math.abs(dimensionA - dimensionB) > dimensionTolerance;
+  }
   updateNumberFormatter() {
     numberStringFormatter.numberFormatOptions = {
       locale: this.messages._lang,
@@ -182,24 +187,26 @@ class TextArea extends LitElement {
     this.textAreaEl = el;
   }
   setTextAreaHeight() {
-    const { textAreaHeight, elHeight, footerHeight, validationMessageHeight } = this.getHeightAndWidthOfElements();
-    if (footerHeight > 0 && textAreaHeight + footerHeight + validationMessageHeight != elHeight) {
-      this.textAreaEl.style.height = `${elHeight - footerHeight}px`;
+    const { textAreaHeight, loaderHeight, footerHeight } = this.getHeightAndWidthOfElements();
+    if (loaderHeight <= 0 || textAreaHeight <= 0 || footerHeight <= 0) {
+      return;
+    }
+    if (this.dimensionsDiffer(textAreaHeight + footerHeight, loaderHeight)) {
+      this.textAreaEl.style.height = `${loaderHeight - footerHeight}px`;
     }
   }
   getHeightAndWidthOfElements() {
     const { height: textAreaHeight, width: textAreaWidth } = this.textAreaEl ? this.textAreaEl.getBoundingClientRect() : NO_DIMENSIONS;
-    const { height: elHeight, width: elWidth } = this.el.getBoundingClientRect();
+    const { height: loaderHeight } = this.loaderContainerRef.value ? this.loaderContainerRef.value.getBoundingClientRect() : NO_DIMENSIONS;
+    const { width: elWidth } = this.el.getBoundingClientRect();
     const { height: footerHeight, width: footerWidth } = this.footerRef.value ? this.footerRef.value.getBoundingClientRect() : NO_DIMENSIONS;
-    const { height: validationMessageHeight } = this.validationMessageEl ? this.validationMessageEl.getBoundingClientRect() : NO_DIMENSIONS;
     return {
       textAreaHeight,
       textAreaWidth,
-      elHeight,
+      loaderHeight,
       elWidth,
       footerHeight,
-      footerWidth,
-      validationMessageHeight
+      footerWidth
     };
   }
   replacePlaceholdersInMessages() {
@@ -208,16 +215,10 @@ class TextArea extends LitElement {
   isCharacterLimitExceeded() {
     return this.maxLength !== void 0 && this.value?.length > this.maxLength || false;
   }
-  setValidationRef(el) {
-    if (!el) {
-      return;
-    }
-    this.validationMessageEl = el;
-  }
   render() {
     const hasFooter = this.startSlotHasElements || this.endSlotHasElements || !!this.maxLength;
     const loader = html`<div class=${safeClassMap(CSS.loader)}><calcite-progress .label=${this.messages.loading} type=indeterminate></calcite-progress></div>`;
-    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.wrapper)}>${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap(CSS.loaderContainer)}>${this.loading ? loader : null}<textarea aria-describedby=${this.guid ?? nothing} aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid" || this.isCharacterLimitExceeded()} .ariaLabel=${getLabelText(this)} .autofocus=${this.el.autofocus} class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.wrapper)}>${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap(CSS.loaderContainer)} ${ref(this.loaderContainerRef)}>${this.loading ? loader : null}<textarea aria-describedby=${this.guid ?? nothing} aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid" || this.isCharacterLimitExceeded()} .ariaLabel=${getLabelText(this)} .autofocus=${this.el.autofocus} class=${safeClassMap({
       [CSS.textArea]: true,
       [CSS.readOnly]: this.readOnly,
       [CSS.textAreaInvalid]: this.isCharacterLimitExceeded(),
@@ -230,7 +231,7 @@ class TextArea extends LitElement {
     })} ${ref(this.footerRef)}><div class=${safeClassMap({
       [CSS.container]: true,
       [CSS.footerEndSlotOnly]: !this.startSlotHasElements && this.endSlotHasElements
-    })}><slot name=${SLOTS.footerStart} @slotchange=${(event) => this.startSlotHasElements = slotChangeHasAssignedElement(event)}></slot><slot name=${SLOTS.footerEnd} @slotchange=${(event) => this.endSlotHasElements = slotChangeHasAssignedElement(event)}></slot></div>${this.renderCharacterLimit()}</footer>${this.isCharacterLimitExceeded() && html`<span aria-live=polite class=${safeClassMap(CSS.assistiveText)} id=${this.guid ?? nothing}>${this.replacePlaceholdersInMessages()}</span>` || ""}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, ref: this.setValidationRef, scale: this.scale, status: this.status }) : null}</div>` });
+    })}><slot name=${SLOTS.footerStart} @slotchange=${(event) => this.startSlotHasElements = slotChangeHasAssignedElement(event)}></slot><slot name=${SLOTS.footerEnd} @slotchange=${(event) => this.endSlotHasElements = slotChangeHasAssignedElement(event)}></slot></div>${this.renderCharacterLimit()}</footer>${this.isCharacterLimitExceeded() && html`<span aria-live=polite class=${safeClassMap(CSS.assistiveText)} id=${this.guid ?? nothing}>${this.replacePlaceholdersInMessages()}</span>` || ""}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}</div>` });
   }
   renderCharacterLimit() {
     if (this.maxLength) {