refactor: use slotchange event instead of MutationObserver when possible

packages/calcite-components/src/components.d.ts

@@ -5255,7 +5255,7 @@ export namespace Components {
     }
     interface CalciteTileGroup {
         /**
-          * Specifies the alignment of each Tile's content.
+          * Specifies the alignment of each `calcite-tile`'s content.
          */
         "alignment": Exclude<Alignment, "end">;
         /**
@@ -13155,7 +13155,7 @@ declare namespace LocalJSX {
     }
     interface CalciteTileGroup {
         /**
-          * Specifies the alignment of each Tile's content.
+          * Specifies the alignment of each `calcite-tile`'s content.
          */
         "alignment"?: Exclude<Alignment, "end">;
         /**

packages/calcite-components/src/components/accordion/accordion.tsx

@@ -10,7 +10,6 @@ import {
   Watch,
 } from "@stencil/core";
 import { Appearance, Position, Scale, SelectionMode } from "../interfaces";
-import { createObserver } from "../../utils/observers";
 import { RequestedItem } from "./interfaces";
 /**
  * @slot - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can.
@@ -58,7 +57,7 @@ export class Accordion {
   @Watch("scale")
   @Watch("selectionMode")
   handlePropsChange(): void {
-    this.updateAccordionItems();
+    this.updateItems();
   }
 
   //--------------------------------------------------------------------------
@@ -78,15 +77,6 @@ export class Accordion {
   //
   //--------------------------------------------------------------------------
 
-  connectedCallback(): void {
-    this.mutationObserver?.observe(this.el, { childList: true });
-    this.updateAccordionItems();
-  }
-
-  disconnectedCallback(): void {
-    this.mutationObserver?.disconnect();
-  }
-
   render(): VNode {
     const transparent = this.appearance === "transparent";
     return (
@@ -96,7 +86,7 @@ export class Accordion {
           accordion: !transparent,
         }}
       >
-        <slot />
+        <slot onSlotchange={this.handleSlotChange} />
       </div>
     );
   }
@@ -123,15 +113,13 @@ export class Accordion {
 
   @Element() el: HTMLCalciteAccordionElement;
 
-  mutationObserver = createObserver("mutation", () => this.updateAccordionItems());
-
   //--------------------------------------------------------------------------
   //
   //  Private Methods
   //
   //--------------------------------------------------------------------------
 
-  private updateAccordionItems(): void {
+  private updateItems(): void {
     this.el.querySelectorAll("calcite-accordion-item").forEach((item) => {
       item.iconPosition = this.iconPosition;
       item.iconType = this.iconType;
@@ -141,4 +129,6 @@ export class Accordion {
     // sync props on items across shadow DOM
     document.dispatchEvent(new CustomEvent("calciteInternalAccordionItemsSync"));
   }
+
+  private handleSlotChange = (): void => this.updateItems();
 }

packages/calcite-components/src/components/action/action.tsx

@@ -27,7 +27,6 @@ import {
   setUpLoadableComponent,
 } from "../../utils/loadable";
 import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
-import { createObserver } from "../../utils/observers";
 import { getIconScale } from "../../utils/component";
 import {
   connectMessages,
@@ -147,8 +146,6 @@ export class Action
 
   buttonEl: HTMLButtonElement;
 
-  mutationObserver = createObserver("mutation", () => forceUpdate(this));
-
   @State() effectiveLocale = "";
 
   @Watch("effectiveLocale")
@@ -174,7 +171,6 @@ export class Action
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
 
   async componentWillLoad(): Promise<void> {
@@ -192,7 +188,6 @@ export class Action
     disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
-    this.mutationObserver?.disconnect();
   }
 
   componentDidRender(): void {
@@ -272,16 +267,16 @@ export class Action
           [CSS.slotContainerHidden]: loading,
         }}
       >
-        <slot />
+        <slot onSlotchange={this.handleSlotChange} />
       </div>
     );
 
-    return hasIconToDisplay ? (
-      <div aria-hidden="true" class={CSS.iconContainer} key="icon-container">
+    return (
+      <div class={CSS.iconContainer} hidden={!hasIconToDisplay} key="icon-container">
         {iconNode}
         {slotContainerNode}
       </div>
-    ) : null;
+    );
   }
 
   render(): VNode {
@@ -354,4 +349,6 @@ export class Action
       tooltip.referenceElement = this.buttonEl;
     }
   };
+
+  private handleSlotChange = (): void => forceUpdate(this);
 }

packages/calcite-components/src/components/button/button.tsx

@@ -36,7 +36,7 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
-import { toAriaBoolean } from "../../utils/dom";
+import { slotChangeHasContent, toAriaBoolean } from "../../utils/dom";
 import { ButtonMessages } from "./assets/button/t9n";
 import { ButtonAlignment } from "./interfaces";
 import { CSS } from "./resources";
@@ -208,13 +208,11 @@ export class Button
     connectLocalized(this);
     connectMessages(this);
     this.hasLoader = this.loading;
-    this.setupTextContentObserver();
     connectLabel(this);
     this.formEl = findAssociatedForm(this);
   }
 
   disconnectedCallback(): void {
-    this.mutationObserver?.disconnect();
     disconnectInteractive(this);
     disconnectLabel(this);
     disconnectLocalized(this);
@@ -226,7 +224,6 @@ export class Button
   async componentWillLoad(): Promise<void> {
     setUpLoadableComponent(this);
     if (Build.isBrowser) {
-      this.updateHasContent();
       await setUpMessages(this);
     }
   }
@@ -274,8 +271,11 @@ export class Button
     );
 
     const contentEl = (
-      <span class={CSS.content} ref={(el) => (this.contentEl = el)}>
-        <slot />
+      <span
+        class={CSS.content}
+        ref={(el) => (this.contentEl = el)}
+      >
+        <slot onSlotchange={this.handleSlotChange} />
       </span>
     );
 
@@ -342,9 +342,6 @@ export class Button
 
   labelEl: HTMLCalciteLabelElement;
 
-  /** watches for changing text content */
-  private mutationObserver = createObserver("mutation", () => this.updateHasContent());
-
   /** the rendered child element */
   private childEl?: HTMLElement;
 
@@ -363,18 +360,6 @@ export class Button
 
   @State() defaultMessages: ButtonMessages;
 
-  private updateHasContent() {
-    const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0;
-    this.hasContent =
-      this.el.childNodes.length === 1 && this.el.childNodes[0]?.nodeName === "#text"
-        ? this.el.textContent?.trim().length > 0
-        : slottedContent;
-  }
-
-  private setupTextContentObserver() {
-    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-  }
-
   /** keeps track of the tooltipText */
   @State() tooltipText: string;
 
@@ -425,4 +410,8 @@ export class Button
       this.resizeObserver?.observe(el);
     }
   };
+
+  private handleSlotChange = (event: Event): void => {
+    this.hasContent = slotChangeHasContent(event);
+  };
 }

packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx

@@ -11,7 +11,6 @@ import {
   Watch,
 } from "@stencil/core";
 import { Scale, SelectionMode } from "../interfaces";
-import { createObserver } from "../../utils/observers";
 import { CSS } from "../dropdown-item/resources";
 import { RequestedItem } from "./interfaces";
 
@@ -76,19 +75,10 @@ export class DropdownGroup {
   //
   //--------------------------------------------------------------------------
 
-  connectedCallback(): void {
-    this.updateItems();
-    this.mutationObserver?.observe(this.el, { childList: true });
-  }
-
   componentWillLoad(): void {
     this.groupPosition = this.getGroupPosition();
   }
 
-  disconnectedCallback(): void {
-    this.mutationObserver?.disconnect();
-  }
-
   render(): VNode {
     const groupTitle = this.groupTitle ? (
       <span aria-hidden="true" class="dropdown-title">
@@ -109,7 +99,7 @@ export class DropdownGroup {
         >
           {dropdownSeparator}
           {groupTitle}
-          <slot />
+          <slot onSlotchange={this.handleSlotChange} />
         </div>
       </Host>
     );
@@ -148,24 +138,24 @@ export class DropdownGroup {
   /** the requested item */
   private requestedDropdownItem: HTMLCalciteDropdownItemElement;
 
-  private updateItems = (): void => {
-    Array.from(this.el.querySelectorAll("calcite-dropdown-item")).forEach(
-      (item) => (item.selectionMode = this.selectionMode),
-    );
-  };
-
-  mutationObserver = createObserver("mutation", () => this.updateItems());
-
   //--------------------------------------------------------------------------
   //
   //  Private Methods
   //
   //--------------------------------------------------------------------------
 
+  private updateItems = (): void => {
+    Array.from(this.el.querySelectorAll("calcite-dropdown-item")).forEach(
+      (item) => (item.selectionMode = this.selectionMode),
+    );
+  };
+
   private getGroupPosition(): number {
     return Array.prototype.indexOf.call(
       this.el.parentElement.querySelectorAll("calcite-dropdown-group"),
       this.el,
     );
   }
+
+  private handleSlotChange = (): void => this.updateItems();
 }

packages/calcite-components/src/components/flow/flow.tsx

@@ -1,5 +1,4 @@
 import { Component, Element, h, Listen, Method, Prop, State, VNode } from "@stencil/core";
-import { createObserver } from "../../utils/observers";
 import {
   componentFocusable,
   LoadableComponent,
@@ -93,19 +92,12 @@ export class Flow implements LoadableComponent {
 
   @State() items: FlowItemLikeElement[] = [];
 
-  itemMutationObserver = createObserver("mutation", () => this.updateFlowProps());
-
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
 
-  connectedCallback(): void {
-    this.itemMutationObserver?.observe(this.el, { childList: true, subtree: true });
-    this.updateFlowProps();
-  }
-
   async componentWillLoad(): Promise<void> {
     setUpLoadableComponent(this);
   }
@@ -114,10 +106,6 @@ export class Flow implements LoadableComponent {
     setComponentLoaded(this);
   }
 
-  disconnectedCallback(): void {
-    this.itemMutationObserver?.disconnect();
-  }
-
   // --------------------------------------------------------------------------
   //
   //  Private Methods
@@ -179,6 +167,8 @@ export class Flow implements LoadableComponent {
     }
   };
 
+  private handleSlotChange = (): void => this.updateFlowProps();
+
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -196,7 +186,7 @@ export class Flow implements LoadableComponent {
 
     return (
       <div class={frameDirectionClasses}>
-        <slot />
+        <slot onSlotchange={this.handleSlotChange} />
       </div>
     );
   }