fixup! refactor(cdk-experimental/ui-patterns): iterate on expansion behavior

Author: wagnermaciel

src/cdk-experimental/ui-patterns/behaviors/expansion/expansion.spec.ts

@@ -68,6 +68,7 @@ function getExpansion(inputs: TestInputs = {}): {
     skipDisabled: focusManager.inputs.skipDisabled,
     focusMode: focusManager.inputs.focusMode,
     multiExpandable: inputs.multiExpandable ?? signal(false),
+    expandedIds: signal([]),
     focusManager,
   });
 

src/cdk-experimental/ui-patterns/behaviors/expansion/expansion.ts

@@ -22,17 +22,22 @@ export interface ExpansionItem extends ListFocusItem {
 export interface ExpansionInputs<T extends ExpansionItem> extends ListFocusInputs<T> {
   /** Whether multiple items can be expanded at once. */
   multiExpandable: SignalLike<boolean>;
+
+  /** An array of ids of the currently expanded items. */
+  expandedIds: WritableSignalLike<string[]>;
 }
 
 /** Manages the expansion state of a list of items. */
 export class Expansion<T extends ExpansionItem> {
   /** A signal holding an array of ids of the currently expanded items. */
-  expandedIds: WritableSignalLike<string[]> = signal([]);
+  expandedIds: WritableSignalLike<string[]>;
 
   /** The currently active (focused) item in the list. */
   activeItem = computed(() => this.inputs.focusManager.activeItem());
 
-  constructor(readonly inputs: ExpansionInputs<T> & {focusManager: ListFocus<T>}) {}
+  constructor(readonly inputs: ExpansionInputs<T> & {focusManager: ListFocus<T>}) {
+    this.expandedIds = inputs.expandedIds ?? signal([]);
+  }
 
   /** Opens the specified item, or the currently active item if none is specified. */
   open(item: T = this.activeItem()) {

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

@@ -78,7 +78,7 @@ export class TabPattern {
     this.value = inputs.value;
     this.disabled = inputs.disabled;
     this.element = inputs.element;
-    this.expansionId = inputs.id;
+    this.expansionId = inputs.value;
   }
 }
 
@@ -115,7 +115,7 @@ interface SelectOptions {
 export type TabListInputs = ListNavigationInputs<TabPattern> &
   Omit<ListSelectionInputs<TabPattern, string>, 'multi'> &
   ListFocusInputs<TabPattern> &
-  Omit<ExpansionInputs<TabPattern>, 'multiExpandable'> & {
+  Omit<ExpansionInputs<TabPattern>, 'multiExpandable' | 'expandedIds'> & {
     disabled: SignalLike<boolean>;
   };
 
@@ -196,6 +196,7 @@ export class TabListPattern {
     this.expansionBehavior = new Expansion({
       ...inputs,
       multiExpandable: () => false,
+      expandedIds: this.inputs.value,
       focusManager: this.focusManager,
     });
   }