feat: support custom tabs that do not necessarily extend from UUITab but still follows the interface

Author: iOvergaard

packages/uui-tabs/lib/uui-tab-group.element.ts

@@ -32,50 +32,47 @@ export class UUITabGroupElement extends LitElement {
   })
   private slotNodes?: HTMLElement[];
 
-  private tabElements: UUITabElement[] = [];
+  private tabElements: HTMLElement[] = [];
 
   private setTabArray() {
-    if (this.slotNodes) {
-      this.tabElements = this.slotNodes.filter(this.elementIsTab);
-    } else {
-      this.tabElements = [];
-    }
-  }
-
-  private elementIsTab(el: unknown): el is UUITabElement {
-    return el instanceof UUITabElement;
+    this.tabElements = this.slotNodes ? this.slotNodes : [];
   }
 
   private onSlotChange() {
+    this.tabElements.forEach(el => {
+      el.removeEventListener(
+        'click',
+        this.onTabActive
+      );
+    });
+
     this.setTabArray();
-    if (this.tabElements) {
-      this.tabElements.forEach(el => {
-        el.removeEventListener(
-          'click',
-          // @ts-ignore TODO: fix typescript error
-          this.onTabActive as EventHandlerNonNull
-        );
-      });
-    }
 
     this.tabElements.forEach(el => {
-      // @ts-ignore TODO: fix typescript error
-      el.addEventListener('click', this.onTabActive as EventHandlerNonNull);
+      el.addEventListener('click', this.onTabActive);
     });
   }
 
   private onTabActive = (e: MouseEvent) => {
     //? should this contain stopPropagation?
-    const selectedElement = e.target as UUITabElement;
-    selectedElement.active = true;
+    const selectedElement = e.target as HTMLElement;
+    if (this.elementIsTabLike(selectedElement)) {
+      selectedElement.active = true;
+    }
 
     const filtered = this.tabElements.filter(el => el !== selectedElement);
 
     filtered.forEach(el => {
-      el.active = false;
+      if (this.elementIsTabLike(el)) {
+        el.active = false;
+      }
     });
   };
 
+  private elementIsTabLike(el: any): el is UUITabElement {
+    return el instanceof UUITabElement || 'active' in el;
+  }
+
   connectedCallback() {
     super.connectedCallback();
     if (!this.hasAttribute('role')) this.setAttribute('role', 'tablist');