refactor(cdk-experimental/ui-patterns): switch tabs to use the list behavior

Author: wagnermaciel

src/cdk-experimental/ui-patterns/tabs/BUILD.bazel

@@ -12,9 +12,7 @@ ts_project(
         "//src/cdk-experimental/ui-patterns/behaviors/event-manager",
         "//src/cdk-experimental/ui-patterns/behaviors/expansion",
         "//src/cdk-experimental/ui-patterns/behaviors/label",
-        "//src/cdk-experimental/ui-patterns/behaviors/list-focus",
-        "//src/cdk-experimental/ui-patterns/behaviors/list-navigation",
-        "//src/cdk-experimental/ui-patterns/behaviors/list-selection",
+        "//src/cdk-experimental/ui-patterns/behaviors/list",
         "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
     ],
 )

src/cdk-experimental/ui-patterns/tabs/tabs.ts

@@ -8,17 +8,6 @@
 
 import {computed} from '@angular/core';
 import {KeyboardEventManager, PointerEventManager} from '../behaviors/event-manager';
-import {ListFocus, ListFocusInputs, ListFocusItem} from '../behaviors/list-focus/list-focus';
-import {
-  ListNavigation,
-  ListNavigationInputs,
-  ListNavigationItem,
-} from '../behaviors/list-navigation/list-navigation';
-import {
-  ListSelection,
-  ListSelectionInputs,
-  ListSelectionItem,
-} from '../behaviors/list-selection/list-selection';
 import {
   ExpansionItem,
   ExpansionControl,
@@ -27,12 +16,11 @@ import {
 } from '../behaviors/expansion/expansion';
 import {SignalLike} from '../behaviors/signal-like/signal-like';
 import {LabelControl, LabelControlOptionalInputs} from '../behaviors/label/label';
+import {List, ListInputs, ListItem} from '../behaviors/list/list';
 
 /** The required inputs to tabs. */
 export interface TabInputs
-  extends ListNavigationItem,
-    ListSelectionItem<string>,
-    ListFocusItem,
+  extends Omit<ListItem<string>, 'searchTerm'>,
     Omit<ExpansionItem, 'expansionId' | 'expandable'> {
   /** The parent tablist that controls the tab. */
   tablist: SignalLike<TabListPattern>;
@@ -58,6 +46,9 @@ export class TabPattern {
   /** The html element that should receive focus. */
   readonly element: SignalLike<HTMLElement>;
 
+  /** The text used by the typeahead search. */
+  readonly searchTerm = () => ''; // Unused because tabs do not support typeahead.
+
   /** Whether this tab has expandable content. */
   readonly expandable = computed(() => this.expansion.expandable());
 
@@ -68,15 +59,13 @@ export class TabPattern {
   readonly expanded = computed(() => this.expansion.isExpanded());
 
   /** Whether the tab is active. */
-  readonly active = computed(() => this.inputs.tablist().focusManager.activeItem() === this);
+  readonly active = computed(() => this.inputs.tablist().listBehavior.activeItem() === this);
 
   /** Whether the tab is selected. */
-  readonly selected = computed(
-    () => !!this.inputs.tablist().selection.inputs.value().includes(this.value()),
-  );
+  readonly selected = computed(() => !!this.inputs.tablist().inputs.value().includes(this.value()));
 
   /** The tabindex of the tab. */
-  readonly tabindex = computed(() => this.inputs.tablist().focusManager.getItemTabindex(this));
+  readonly tabindex = computed(() => this.inputs.tablist().listBehavior.getItemTabindex(this));
 
   /** The id of the tabpanel associated with the tab. */
   readonly controls = computed(() => this.inputs.tabpanel()?.id());
@@ -136,27 +125,14 @@ export class TabPanelPattern {
   }
 }
 
-/** The selection operations that the tablist can perform. */
-interface SelectOptions {
-  select?: boolean;
-}
-
 /** The required inputs for the tablist. */
-export type TabListInputs = ListNavigationInputs<TabPattern> &
-  Omit<ListSelectionInputs<TabPattern, string>, 'multi'> &
-  ListFocusInputs<TabPattern> &
+export type TabListInputs = Omit<ListInputs<TabPattern, string>, 'multi' | 'typeaheadDelay'> &
   Omit<ListExpansionInputs, 'multiExpandable' | 'expandedIds' | 'items'>;
 
 /** Controls the state of a tablist. */
 export class TabListPattern {
-  /** Controls navigation for the tablist. */
-  readonly navigation: ListNavigation<TabPattern>;
-
-  /** Controls selection for the tablist. */
-  readonly selection: ListSelection<TabPattern, string>;
-
-  /** Controls focus for the tablist. */
-  readonly focusManager: ListFocus<TabPattern>;
+  /** The list behavior for the tablist. */
+  readonly listBehavior: List<TabPattern, string>;
 
   /** Controls expansion for the tablist. */
   readonly expansionManager: ListExpansion;
@@ -168,10 +144,10 @@ export class TabListPattern {
   readonly disabled: SignalLike<boolean>;
 
   /** The tabindex of the tablist. */
-  readonly tabindex = computed(() => this.focusManager.getListTabindex());
+  readonly tabindex = computed(() => this.listBehavior.tabindex());
 
   /** The id of the current active tab. */
-  readonly activedescendant = computed(() => this.focusManager.getActiveDescendant());
+  readonly activedescendant = computed(() => this.listBehavior.activedescendant());
 
   /** Whether selection should follow focus. */
   readonly followFocus = computed(() => this.inputs.selectionMode() === 'follow');
@@ -195,30 +171,29 @@ export class TabListPattern {
   /** The keydown event manager for the tablist. */
   readonly keydown = computed(() => {
     return new KeyboardEventManager()
-      .on(this.prevKey, () => this.prev({select: this.followFocus()}))
-      .on(this.nextKey, () => this.next({select: this.followFocus()}))
-      .on('Home', () => this.first({select: this.followFocus()}))
-      .on('End', () => this.last({select: this.followFocus()}))
-      .on(' ', () => this._select({select: true}))
-      .on('Enter', () => this._select({select: true}));
+      .on(this.prevKey, () => this.listBehavior.prev({select: this.followFocus()}))
+      .on(this.nextKey, () => this.listBehavior.next({select: this.followFocus()}))
+      .on('Home', () => this.listBehavior.first({select: this.followFocus()}))
+      .on('End', () => this.listBehavior.last({select: this.followFocus()}))
+      .on(' ', () => this.listBehavior.select())
+      .on('Enter', () => this.listBehavior.select());
   });
 
   /** The pointerdown event manager for the tablist. */
   readonly pointerdown = computed(() => {
-    return new PointerEventManager().on(e => this.goto(e, {select: true}));
+    return new PointerEventManager().on(e =>
+      this.listBehavior.goto(this._getItem(e)!, {select: true}),
+    );
   });
 
   constructor(readonly inputs: TabListInputs) {
     this.disabled = inputs.disabled;
     this.orientation = inputs.orientation;
 
-    this.focusManager = new ListFocus(inputs);
-    this.navigation = new ListNavigation({...inputs, focusManager: this.focusManager});
-
-    this.selection = new ListSelection({
+    this.listBehavior = new List({
       ...inputs,
       multi: () => false,
-      focusManager: this.focusManager,
+      typeaheadDelay: () => 0, // Tabs do not support typeahead.
     });
 
     this.expansionManager = new ListExpansion({
@@ -240,7 +215,7 @@ export class TabListPattern {
     let firstItemIndex: number | undefined;
 
     for (const [index, item] of this.inputs.items().entries()) {
-      if (!this.focusManager.isFocusable(item)) continue;
+      if (!this.listBehavior.isFocusable(item)) continue;
 
       if (firstItemIndex === undefined) {
         firstItemIndex = index;
@@ -270,48 +245,7 @@ export class TabListPattern {
     }
   }
 
-  /** Navigates to the first option in the tablist. */
-  first(opts?: SelectOptions) {
-    this.navigation.first();
-    this._select(opts);
-  }
-
-  /** Navigates to the last option in the tablist. */
-  last(opts?: SelectOptions) {
-    this.navigation.last();
-    this._select(opts);
-  }
-
-  /** Navigates to the next option in the tablist. */
-  next(opts?: SelectOptions) {
-    this.navigation.next();
-    this._select(opts);
-  }
-
-  /** Navigates to the previous option in the tablist. */
-  prev(opts?: SelectOptions) {
-    this.navigation.prev();
-    this._select(opts);
-  }
-
-  /** Navigates to the given item in the tablist. */
-  goto(event: PointerEvent, opts?: SelectOptions) {
-    const item = this._getItem(event);
-
-    if (item) {
-      this.navigation.goto(item);
-      this._select(opts);
-    }
-  }
-
-  /** Handles updating selection for the tablist. */
-  private _select(opts?: SelectOptions) {
-    if (opts?.select) {
-      this.selection.selectOne();
-      this.expansionManager.open(this.focusManager.activeItem());
-    }
-  }
-
+  /** Returns the tab item associated with the given pointer event. */
   private _getItem(e: PointerEvent) {
     if (!(e.target instanceof HTMLElement)) {
       return;