Code cleanup for expansion panel and accordion components (#1941)

* refactor(expansion-panel): Expansion panel cleanups

Unify open state logic and event behavior

* refactor(accordion): Accordion component cleanups

* Abstracted keyboard behavior
* Added slot controller to handle dynamic content changes
* No more hanging promises in the internal API
* Code style

Author: rkaraivanov

src/components/accordion/accordion.ts

@@ -1,6 +1,5 @@
 import { html, LitElement } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
-
+import { property } from 'lit/decorators.js';
 import {
   addKeybindings,
   altKey,
@@ -10,6 +9,7 @@ import {
   homeKey,
   shiftKey,
 } from '../common/controllers/key-bindings.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { addSafeEventListener, first, last } from '../common/util.js';
 import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
@@ -28,135 +28,189 @@ export default class IgcAccordionComponent extends LitElement {
   public static override styles = styles;
 
   /* blazorSuppress */
-  public static register() {
+  public static register(): void {
     registerComponent(IgcAccordionComponent, IgcExpansionPanelComponent);
   }
 
-  @queryAssignedElements({
-    selector: `${IgcExpansionPanelComponent.tagName}:not([disabled])`,
-  })
-  private enabledPanels!: Array<IgcExpansionPanelComponent>;
+  //#region Internal state and properties
+
+  private _panels: IgcExpansionPanelComponent[] = [];
+
+  private readonly _slots = addSlotController(this, {
+    slots: setSlots(),
+    onChange: this._handleSlotChange,
+    initial: true,
+  });
+
+  private get _interactivePanels(): IgcExpansionPanelComponent[] {
+    return this._panels.filter((panel) => !panel.disabled);
+  }
+
+  //#endregion
+
+  //#region Public attributes and properties
 
   /**
    * Allows only one panel to be expanded at a time.
    * @attr single-expand
+   * @default false
    */
-  @property({ attribute: 'single-expand', reflect: true, type: Boolean })
+  @property({ type: Boolean, reflect: true, attribute: 'single-expand' })
   public singleExpand = false;
 
   /* blazorSuppress */
   /** Returns all of the accordions's direct igc-expansion-panel children. */
-  @queryAssignedElements({ selector: IgcExpansionPanelComponent.tagName })
-  public panels!: Array<IgcExpansionPanelComponent>;
+  public get panels(): IgcExpansionPanelComponent[] {
+    return Array.from(this._panels);
+  }
+
+  //#endregion
 
   constructor() {
     super();
 
-    addSafeEventListener(this, 'igcOpening' as any, this.handlePanelOpening);
+    addSafeEventListener(this, 'igcOpening' as any, this._handlePanelOpening);
+
+    addKeybindings(this, { skip: this._skipKeybinding })
+      .set(homeKey, this._navigateToFirst)
+      .set(endKey, this._navigateToLast)
+      .set(arrowUp, this._navigateToPrevious)
+      .set(arrowDown, this._navigateToNext)
+      .set([shiftKey, altKey, arrowDown], this._expandAll)
+      .set([shiftKey, altKey, arrowUp], this._collapseAll);
+  }
 
-    addKeybindings(this, { skip: this.skipKeybinding })
-      .set(homeKey, () =>
-        this.getPanelHeader(first(this.enabledPanels)).focus()
-      )
-      .set(endKey, () => this.getPanelHeader(last(this.enabledPanels)).focus())
-      .set(arrowUp, this.navigatePrev)
-      .set(arrowDown, this.navigateNext)
-      .set([shiftKey, altKey, arrowDown], this.expandAll)
-      .set([shiftKey, altKey, arrowUp], this.collapseAll);
+  //#region Event handlers
+
+  private _handleSlotChange(): void {
+    this._panels = this._slots.getAssignedElements('[default]', {
+      selector: IgcExpansionPanelComponent.tagName,
+    });
+  }
+
+  private async _handlePanelOpening(event: Event): Promise<void> {
+    const current = event.target as IgcExpansionPanelComponent;
+
+    if (!(this.singleExpand && this.panels.includes(current))) {
+      return;
+    }
+
+    await Promise.all(
+      this._interactivePanels
+        .filter((panel) => panel.open && panel !== current)
+        .map((panel) => this._closePanel(panel))
+    );
   }
 
-  private skipKeybinding(target: Element) {
+  //#endregion
+
+  //#region Keyboard interaction handlers
+
+  private _skipKeybinding(target: Element): boolean {
     return !(
-      target.matches(IgcExpansionPanelComponent.tagName) &&
-      this.enabledPanels.includes(target as IgcExpansionPanelComponent)
+      target instanceof IgcExpansionPanelComponent &&
+      this._interactivePanels.includes(target)
     );
   }
 
-  private navigatePrev(event: KeyboardEvent) {
+  private _navigateToFirst(): void {
+    this._getPanelHeader(first(this._interactivePanels))?.focus();
+  }
+
+  private _navigateToLast(): void {
+    this._getPanelHeader(last(this._interactivePanels))?.focus();
+  }
+
+  private _navigateToPrevious(event: KeyboardEvent): void {
     const current = event.target as IgcExpansionPanelComponent;
-    const next = this.getNextPanel(current, -1);
+    const next = this._getNextPanel(current, -1);
 
     if (next !== current) {
-      this.getPanelHeader(next).focus();
+      this._getPanelHeader(next)?.focus();
     }
   }
 
-  private navigateNext(event: KeyboardEvent) {
+  private _navigateToNext(event: KeyboardEvent): void {
     const current = event.target as IgcExpansionPanelComponent;
-    const next = this.getNextPanel(current, 1);
+    const next = this._getNextPanel(current, 1);
 
     if (next !== current) {
-      this.getPanelHeader(next).focus();
+      this._getPanelHeader(next)?.focus();
     }
   }
 
-  private collapseAll() {
-    for (const panel of this.enabledPanels) {
-      this.closePanel(panel);
-    }
+  private async _collapseAll(): Promise<void> {
+    await Promise.all(
+      this._interactivePanels.map((panel) => this._closePanel(panel))
+    );
   }
 
-  private expandAll(event: KeyboardEvent) {
+  private async _expandAll(event: KeyboardEvent): Promise<void> {
     const current = event.target as IgcExpansionPanelComponent;
 
-    for (const panel of this.enabledPanels) {
-      if (this.singleExpand) {
-        current === panel ? this.openPanel(panel) : this.closePanel(panel);
-      } else {
-        this.openPanel(panel);
-      }
+    if (this.singleExpand) {
+      const closePromises = this._interactivePanels
+        .filter((panel) => panel.open && panel !== current)
+        .map((panel) => this._closePanel(panel));
+
+      await Promise.all(closePromises);
+      await this._openPanel(current);
+    } else {
+      await Promise.all(
+        this._interactivePanels.map((panel) => this._openPanel(panel))
+      );
     }
   }
 
-  private handlePanelOpening(event: Event) {
-    const current = event.target as IgcExpansionPanelComponent;
+  //#endregion
 
-    if (!(this.singleExpand && this.panels.includes(current))) {
-      return;
-    }
+  //#region Internal API
 
-    for (const panel of this.enabledPanels) {
-      if (panel.open && panel !== current) {
-        this.closePanel(panel);
-      }
-    }
+  private _getPanelHeader(
+    panel: IgcExpansionPanelComponent
+  ): HTMLElement | undefined {
+    // biome-ignore lint/complexity/useLiteralKeys: Direct property access instead of DOM query
+    return panel['_headerRef'].value;
   }
 
-  private getNextPanel(panel: IgcExpansionPanelComponent, dir: 1 | -1 = 1) {
-    const idx = this.enabledPanels.indexOf(panel);
-    return this.enabledPanels[idx + dir] || panel;
-  }
+  private _getNextPanel(
+    panel: IgcExpansionPanelComponent,
+    dir: 1 | -1 = 1
+  ): IgcExpansionPanelComponent {
+    const panels = this._interactivePanels;
+    const idx = panels.indexOf(panel);
 
-  private getPanelHeader(panel: IgcExpansionPanelComponent) {
-    return panel.renderRoot.querySelector('div[part="header"]') as HTMLElement;
+    return panels[idx + dir] || panel;
   }
 
-  private async closePanel(panel: IgcExpansionPanelComponent) {
-    if (
-      !(
-        panel.open &&
-        panel.emitEvent('igcClosing', { cancelable: true, detail: panel })
-      )
-    ) {
+  private async _closePanel(p: IgcExpansionPanelComponent): Promise<void> {
+    const args = { detail: p };
+
+    if (!(p.open && p.emitEvent('igcClosing', { cancelable: true, ...args }))) {
       return;
     }
 
-    await panel.hide();
-    panel.emitEvent('igcClosed', { detail: panel });
+    if (await p.hide()) {
+      p.emitEvent('igcClosed', args);
+    }
   }
 
-  private async openPanel(panel: IgcExpansionPanelComponent) {
-    if (
-      panel.open ||
-      !panel.emitEvent('igcOpening', { cancelable: true, detail: panel })
-    ) {
+  private async _openPanel(p: IgcExpansionPanelComponent): Promise<void> {
+    const args = { detail: p };
+
+    if (p.open || !p.emitEvent('igcOpening', { cancelable: true, ...args })) {
       return;
     }
 
-    await panel.show();
-    panel.emitEvent('igcOpened', { detail: panel });
+    if (await p.show()) {
+      p.emitEvent('igcOpened', args);
+    }
   }
 
+  //#endregion
+
+  //#region Public API
+
   /** Hides all of the child expansion panels' contents. */
   public async hideAll(): Promise<void> {
     await Promise.all(this.panels.map((panel) => panel.hide()));
@@ -167,6 +221,8 @@ export default class IgcAccordionComponent extends LitElement {
     await Promise.all(this.panels.map((panel) => panel.show()));
   }
 
+  //#endregion
+
   protected override render() {
     return html`<slot></slot>`;
   }