feat(tabs): implement tabs controller

core/pfe-core/controllers/overflow-controller.ts

@@ -3,20 +3,38 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit';
 import { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';
 
 export interface Options {
+  /**
+   * Force hide the scroll buttons regardless of overflow
+   */
   hideOverflowButtons?: boolean;
+  /**
+   * Delay in ms to wait before checking for overflow
+   */
+  scrollTimeoutDelay?: number;
 }
 
 export class OverflowController implements ReactiveController {
+  static #instances = new Set<OverflowController>();
+
+  static {
+    // on resize check for overflows to add or remove scroll buttons
+    window.addEventListener('resize', () => {
+      for (const instance of this.#instances) {
+        instance.onScroll();
+      }
+    }, { capture: false });
+  }
+
   /** Overflow container */
   #container?: HTMLElement;
   /** Children that can overflow */
   #items: HTMLElement[] = [];
 
-  #scrollTimeoutDelay = 0;
+  #scrollTimeoutDelay: number;
   #scrollTimeout?: ReturnType<typeof setTimeout>;
 
   /** Default state */
-  #hideOverflowButtons = false;
+  #hideOverflowButtons: boolean;
   showScrollButtons = false;
   overflowLeft = false;
   overflowRight = false;
@@ -31,15 +49,20 @@ export class OverflowController implements ReactiveController {
 
   constructor(public host: ReactiveControllerHost & Element, private options?: Options) {
     this.host.addController(this);
-    if (options?.hideOverflowButtons) {
-      this.#hideOverflowButtons = options?.hideOverflowButtons;
+    this.#hideOverflowButtons = options?.hideOverflowButtons ?? false;
+    this.#scrollTimeoutDelay = options?.scrollTimeoutDelay ?? 0;
+    if (host.isConnected) {
+      OverflowController.#instances.add(this);
     }
   }
 
   #setOverflowState(): void {
     if (!this.firstItem || !this.lastItem || !this.#container) {
       return;
     }
+    const prevLeft = this.overflowLeft;
+    const prevRight = this.overflowRight;
+
     this.overflowLeft = !this.#hideOverflowButtons && !isElementInView(this.#container, this.firstItem);
     this.overflowRight = !this.#hideOverflowButtons && !isElementInView(this.#container, this.lastItem);
     let scrollButtonsWidth = 0;
@@ -48,7 +71,11 @@ export class OverflowController implements ReactiveController {
     }
     this.showScrollButtons = !this.#hideOverflowButtons &&
     this.#container.scrollWidth > (this.#container.clientWidth + scrollButtonsWidth);
-    this.host.requestUpdate();
+
+    // only request update if there has been a change
+    if ((prevLeft !== this.overflowLeft) || (prevRight !== this.overflowRight)) {
+      this.host.requestUpdate();
+    }
   }
 
   init(container: HTMLElement, items: HTMLElement[]) {

core/pfe-core/controllers/roving-tabindex-controller.ts

@@ -198,13 +198,15 @@ export class RovingTabindexController<
   /**
    * from array of HTML items, and sets active items
    */
-  initItems(items: ItemType[], itemsContainer: HTMLElement = this.host) {
+  initItems(items: ItemType[], itemsContainer: HTMLElement = this.host, setActiveItem = true) {
     this.#items = items ?? [];
     const focusableItems = this.#focusableItems;
     const [focusableItem] = focusableItems;
-    this.#activeItem = focusableItem;
-    for (const item of focusableItems) {
-      item.tabIndex = this.#activeItem === item ? 0 : -1;
+    if (setActiveItem) {
+      this.#activeItem = focusableItem;
+      for (const item of focusableItems) {
+        item.tabIndex = this.#activeItem === item ? 0 : -1;
+      }
     }
     /**
      * removes listener on previous contained and applies it to new container