fixup! refactor(cdk-experimental/ui-patterns): track list selection by value

Author: wagnermaciel

src/cdk-experimental/listbox/listbox.ts

@@ -90,7 +90,7 @@ export class CdkListbox<V> {
   disabled = input(false, {transform: booleanAttribute});
 
   /** The values of the current selected items. */
-  values = model<V[]>([]);
+  value = model<V[]>([]);
 
   /** The current index that has been navigated to. */
   activeIndex = model<number>(0);

src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.spec.ts

@@ -50,7 +50,7 @@ describe('List Selection', () => {
     return new ListSelection({
       items,
       navigation,
-      values: signal<V[]>([]),
+      value: signal<V[]>([]),
       multiselectable: signal(true),
       selectionMode: signal('explicit'),
       ...args,
@@ -64,7 +64,7 @@ describe('List Selection', () => {
       const selection = getSelection(items, nav);
 
       selection.select(); // [0]
-      expect(selection.inputs.values()).toEqual([0]);
+      expect(selection.inputs.value()).toEqual([0]);
     });
 
     it('should select multiple options', () => {
@@ -76,7 +76,7 @@ describe('List Selection', () => {
       nav.next();
       selection.select(); // [0, 1]
 
-      expect(selection.inputs.values()).toEqual([0, 1]);
+      expect(selection.inputs.value()).toEqual([0, 1]);
     });
 
     it('should not select multiple options', () => {
@@ -90,7 +90,7 @@ describe('List Selection', () => {
       nav.next();
       selection.select(); // [1]
 
-      expect(selection.inputs.values()).toEqual([1]);
+      expect(selection.inputs.value()).toEqual([1]);
     });
 
     it('should not select disabled items', () => {
@@ -100,7 +100,7 @@ describe('List Selection', () => {
       items()[0].disabled.set(true);
 
       selection.select(); // []
-      expect(selection.inputs.values()).toEqual([]);
+      expect(selection.inputs.value()).toEqual([]);
     });
 
     it('should do nothing to already selected items', () => {
@@ -111,7 +111,7 @@ describe('List Selection', () => {
       selection.select(); // [0]
       selection.select(); // [0]
 
-      expect(selection.inputs.values()).toEqual([0]);
+      expect(selection.inputs.value()).toEqual([0]);
     });
   });
 
@@ -121,7 +121,7 @@ describe('List Selection', () => {
       const nav = getNavigation(items);
       const selection = getSelection(items, nav);
       selection.deselect(); // []
-      expect(selection.inputs.values().length).toBe(0);
+      expect(selection.inputs.value().length).toBe(0);
     });
 
     it('should not deselect disabled items', () => {
@@ -133,7 +133,7 @@ describe('List Selection', () => {
       items()[0].disabled.set(true);
       selection.deselect(); // [0]
 
-      expect(selection.inputs.values()).toEqual([0]);
+      expect(selection.inputs.value()).toEqual([0]);
     });
   });
 
@@ -144,7 +144,7 @@ describe('List Selection', () => {
       const selection = getSelection(items, nav);
 
       selection.toggle(); // [0]
-      expect(selection.inputs.values()).toEqual([0]);
+      expect(selection.inputs.value()).toEqual([0]);
     });
 
     it('should deselect a selected item', () => {
@@ -153,7 +153,7 @@ describe('List Selection', () => {
       const selection = getSelection(items, nav);
       selection.select(); // [0]
       selection.toggle(); // []
-      expect(selection.inputs.values().length).toBe(0);
+      expect(selection.inputs.value().length).toBe(0);
     });
   });
 
@@ -163,15 +163,15 @@ describe('List Selection', () => {
       const nav = getNavigation(items);
       const selection = getSelection(items, nav);
       selection.selectAll();
-      expect(selection.inputs.values()).toEqual([0, 1, 2, 3, 4]);
+      expect(selection.inputs.value()).toEqual([0, 1, 2, 3, 4]);
     });
 
     it('should do nothing if a list is not multiselectable', () => {
       const items = getItems([0, 1, 2, 3, 4]);
       const nav = getNavigation(items);
       const selection = getSelection(items, nav);
       selection.selectAll();
-      expect(selection.inputs.values()).toEqual([0, 1, 2, 3, 4]);
+      expect(selection.inputs.value()).toEqual([0, 1, 2, 3, 4]);
     });
   });
 
@@ -181,7 +181,7 @@ describe('List Selection', () => {
       const nav = getNavigation(items);
       const selection = getSelection(items, nav);
       selection.deselectAll(); // []
-      expect(selection.inputs.values().length).toBe(0);
+      expect(selection.inputs.value().length).toBe(0);
     });
   });
 
@@ -196,7 +196,7 @@ describe('List Selection', () => {
       nav.next();
       selection.selectFromPrevSelectedItem(); // [0, 1, 2]
 
-      expect(selection.inputs.values()).toEqual([0, 1, 2]);
+      expect(selection.inputs.value()).toEqual([0, 1, 2]);
     });
 
     it('should select all items from an anchor at a higher index', () => {
@@ -212,7 +212,7 @@ describe('List Selection', () => {
       selection.selectFromPrevSelectedItem(); // [3, 1, 2]
 
       // TODO(wagnermaciel): Order the values when inserting them.
-      expect(selection.inputs.values()).toEqual([3, 1, 2]);
+      expect(selection.inputs.value()).toEqual([3, 1, 2]);
     });
   });
 });

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

@@ -27,8 +27,8 @@ export interface ListSelectionInputs<T extends ListSelectionItem<V>, V> {
   /** Whether multiple items in the list can be selected at once. */
   multiselectable: SignalLike<boolean>;
 
-  /** The values of the current selected items. */
-  values: WritableSignalLike<V[]>;
+  /** The current value of the list selection. */
+  value: WritableSignalLike<V[]>;
 
   /** The selection strategy used by the list. */
   selectionMode: SignalLike<'follow' | 'explicit'>;
@@ -50,7 +50,7 @@ export class ListSelection<T extends ListSelectionItem<V>, V> {
   select(item?: T) {
     item = item ?? this.inputs.items()[this.inputs.navigation.inputs.activeIndex()];
 
-    if (item.disabled() || this.inputs.values().includes(item.value())) {
+    if (item.disabled() || this.inputs.value().includes(item.value())) {
       return;
     }
 
@@ -60,28 +60,28 @@ export class ListSelection<T extends ListSelectionItem<V>, V> {
 
     // TODO: Need to discuss when to drop this.
     this._anchor();
-    this.inputs.values.update(values => values.concat(item.value()));
+    this.inputs.value.update(values => values.concat(item.value()));
   }
 
   /** Deselects the item at the current active index. */
   deselect(item?: T) {
     item = item ?? this.inputs.items()[this.inputs.navigation.inputs.activeIndex()];
 
     if (!item.disabled()) {
-      this.inputs.values.update(values => values.filter(value => value !== item.value()));
+      this.inputs.value.update(values => values.filter(value => value !== item.value()));
     }
   }
 
   /** Toggles the item at the current active index. */
   toggle() {
     const item = this.inputs.items()[this.inputs.navigation.inputs.activeIndex()];
-    this.inputs.values().includes(item.value()) ? this.deselect() : this.select();
+    this.inputs.value().includes(item.value()) ? this.deselect() : this.select();
   }
 
   /** Toggles only the item at the current active index. */
   toggleOne() {
     const item = this.inputs.items()[this.inputs.navigation.inputs.activeIndex()];
-    this.inputs.values().includes(item.value()) ? this.deselect() : this.selectOne();
+    this.inputs.value().includes(item.value()) ? this.deselect() : this.selectOne();
   }
 
   /** Selects all items in the list. */

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

@@ -49,7 +49,7 @@ export class OptionPattern<V> {
   );
 
   /** Whether the option is selected. */
-  selected = computed(() => this.listbox()?.selection.inputs.values().includes(this.value()));
+  selected = computed(() => this.listbox()?.selection.inputs.value().includes(this.value()));
 
   /** Whether the option is disabled. */
   disabled: SignalLike<boolean>;