fixup! refactor(cdk-experimental/ui-patterns): track focus by item not index

Author: wagnermaciel

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

@@ -70,8 +70,7 @@ export class AccordionGroupPattern {
 }
 
 /** Inputs for the AccordionTriggerPattern. */
-export type AccordionTriggerInputs = ListNavigationItem &
-  ListFocusItem &
+export type AccordionTriggerInputs = Omit<ListNavigationItem & ListFocusItem, 'index'> &
   Omit<ExpansionItem, 'expansionId' | 'expandable'> & {
     /** A local unique identifier for the trigger. */
     value: SignalLike<string>;
@@ -110,6 +109,9 @@ export class AccordionTriggerPattern {
   /** Whether the trigger is disabled. Disabling an accordion group disables all the triggers. */
   disabled = computed(() => this.inputs.disabled() || this.inputs.accordionGroup().disabled());
 
+  /** The index of the trigger within its accordion group. */
+  index = computed(() => this.inputs.accordionGroup().items().indexOf(this));
+
   constructor(readonly inputs: AccordionTriggerInputs) {
     this.id = inputs.id;
     this.element = inputs.element;

src/cdk-experimental/ui-patterns/behaviors/list-focus/list-focus.ts

@@ -19,6 +19,9 @@ export interface ListFocusItem {
 
   /** Whether an item is disabled. */
   disabled: SignalLike<boolean>;
+
+  /** The index of the item in the list. */
+  index: SignalLike<number>;
 }
 
 /** Represents the required inputs for a collection that contains focusable items. */
@@ -45,14 +48,10 @@ export class ListFocus<T extends ListFocusItem> {
   prevActiveItem = signal<T | undefined>(undefined);
 
   /** The index of the last item that was active. */
-  prevActiveIndex = computed(() => {
-    return this.prevActiveItem() ? this.inputs.items().indexOf(this.prevActiveItem()!) : -1;
-  });
+  prevActiveIndex = computed(() => this.prevActiveItem()?.index() ?? -1);
 
   /** The current active index in the list. */
-  activeIndex = computed(() => {
-    return this.inputs.activeItem() ? this.inputs.items().indexOf(this.inputs.activeItem()!) : -1;
-  });
+  activeIndex = computed(() => this.inputs.activeItem()?.index() ?? -1);
 
   constructor(readonly inputs: ListFocusInputs<T>) {}
 

src/cdk-experimental/ui-patterns/listbox/option.ts

@@ -20,7 +20,7 @@ interface ListboxPattern<V> {
 }
 
 /** Represents the required inputs for an option in a listbox. */
-export interface OptionInputs<V> extends ListItem<V> {
+export interface OptionInputs<V> extends Omit<ListItem<V>, 'index'> {
   listbox: SignalLike<ListboxPattern<V> | undefined>;
 }
 
@@ -33,12 +33,7 @@ export class OptionPattern<V> {
   value: SignalLike<V>;
 
   /** The position of the option in the list. */
-  index = computed(
-    () =>
-      this.listbox()
-        ?.inputs.items()
-        .findIndex(i => i.id() === this.id()) ?? -1,
-  );
+  index = computed(() => this.listbox()?.inputs.items().indexOf(this) ?? -1);
 
   /** Whether the option is active. */
   active = computed(() => this.listbox()?.inputs.activeItem() === this);

src/cdk-experimental/ui-patterns/radio-group/radio-button.ts

@@ -20,7 +20,7 @@ interface RadioGroupLike<V> {
 }
 
 /** Represents the required inputs for a radio button in a radio group. */
-export interface RadioButtonInputs<V> extends Omit<ListItem<V>, 'searchTerm'> {
+export interface RadioButtonInputs<V> extends Omit<ListItem<V>, 'searchTerm' | 'index'> {
   /** A reference to the parent radio group. */
   group: SignalLike<RadioGroupLike<V> | undefined>;
 }
@@ -34,12 +34,7 @@ export class RadioButtonPattern<V> {
   value: SignalLike<V>;
 
   /** The position of the radio button within the group. */
-  index = computed(
-    () =>
-      this.group()
-        ?.listBehavior.inputs.items()
-        .findIndex(i => i.id() === this.id()) ?? -1,
-  );
+  index = computed(() => this.group()?.listBehavior.inputs.items().indexOf(this) ?? -1);
 
   /** Whether the radio button is currently the active one (focused). */
   active = computed(() => this.group()?.listBehavior.inputs.activeItem() === this);

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

@@ -20,7 +20,7 @@ import {List, ListInputs, ListItem} from '../behaviors/list/list';
 
 /** The required inputs to tabs. */
 export interface TabInputs
-  extends Omit<ListItem<string>, 'searchTerm'>,
+  extends Omit<ListItem<string>, 'searchTerm' | 'index'>,
     Omit<ExpansionItem, 'expansionId' | 'expandable'> {
   /** The parent tablist that controls the tab. */
   tablist: SignalLike<TabListPattern>;
@@ -37,6 +37,9 @@ export class TabPattern {
   /** A global unique identifier for the tab. */
   readonly id: SignalLike<string>;
 
+  /** The index of the tab. */
+  readonly index = computed(() => this.inputs.tablist().inputs.items().indexOf(this));
+
   /** A local unique identifier for the tab. */
   readonly value: SignalLike<string>;
 

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

@@ -13,7 +13,7 @@ import {ExpansionItem, ExpansionControl, ListExpansion} from '../behaviors/expan
 import {KeyboardEventManager, PointerEventManager, Modifier} from '../behaviors/event-manager';
 
 /** Represents the required inputs for a tree item. */
-export interface TreeItemInputs<V> extends ListItem<V> {
+export interface TreeItemInputs<V> extends Omit<ListItem<V>, 'index'> {
   /** The parent item. */
   parent: SignalLike<TreeItemPattern<V> | TreePattern<V>>;
 
@@ -32,6 +32,9 @@ export interface TreeItemPattern<V> extends TreeItemInputs<V> {}
  * Represents an item in a Tree.
  */
 export class TreeItemPattern<V> implements ExpansionItem {
+  /** The position of this item among its siblings. */
+  readonly index = computed(() => this.parent().children().indexOf(this));
+
   /** The unique identifier used by the expansion behavior. */
   readonly expansionId: SignalLike<string>;