diff --git a/goldens/aria/listbox/index.api.md b/goldens/aria/listbox/index.api.md index e81629c4008c..d6eee68c15e1 100644 --- a/goldens/aria/listbox/index.api.md +++ b/goldens/aria/listbox/index.api.md @@ -28,10 +28,10 @@ export class Listbox { softDisabled: _angular_core.InputSignalWithTransform; protected textDirection: _angular_core.Signal<_angular_cdk_bidi.Direction>; typeaheadDelay: _angular_core.InputSignal; - values: _angular_core.ModelSignal; + value: _angular_core.ModelSignal; wrap: _angular_core.InputSignalWithTransform; // (undocumented) - static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngListbox]", ["ngListbox"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; }, ["_options"], never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>; + static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngListbox]", ["ngListbox"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["_options"], never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>; // (undocumented) static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; } diff --git a/goldens/aria/menu/index.api.md b/goldens/aria/menu/index.api.md index 8c3ca02bb41f..922ffd4376d6 100644 --- a/goldens/aria/menu/index.api.md +++ b/goldens/aria/menu/index.api.md @@ -47,10 +47,10 @@ export class MenuBar { readonly softDisabled: _angular_core.InputSignalWithTransform; readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>; readonly typeaheadDelay: _angular_core.InputSignal; - readonly values: _angular_core.ModelSignal; + readonly value: _angular_core.ModelSignal; readonly wrap: _angular_core.InputSignalWithTransform; // (undocumented) - static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngMenuBar]", ["ngMenuBar"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; "itemSelected": "itemSelected"; }, ["_allItems"], never, true, never>; + static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngMenuBar]", ["ngMenuBar"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "itemSelected": "itemSelected"; }, ["_allItems"], never, true, never>; // (undocumented) static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; } diff --git a/goldens/aria/private/index.api.md b/goldens/aria/private/index.api.md index 669af92cc7ef..c8d4f271175d 100644 --- a/goldens/aria/private/index.api.md +++ b/goldens/aria/private/index.api.md @@ -512,7 +512,7 @@ export class MenuBarPattern { } // @public -export interface MenuInputs extends Omit, V>, 'values'> { +export interface MenuInputs extends Omit, V>, 'value'> { expansionDelay: SignalLike; id: SignalLike; items: SignalLike[]>; @@ -902,7 +902,7 @@ export class TreePattern implements TreeInputs { readonly typeaheadDelay: SignalLike; readonly typeaheadRegexp: RegExp; validate(): string[]; - readonly values: WritableSignalLike; + readonly value: WritableSignalLike; readonly visible: () => boolean; readonly wrap: SignalLike; } diff --git a/goldens/aria/toolbar/index.api.md b/goldens/aria/toolbar/index.api.md index c43cad405838..edfd147c44f6 100644 --- a/goldens/aria/toolbar/index.api.md +++ b/goldens/aria/toolbar/index.api.md @@ -25,10 +25,10 @@ export class Toolbar { readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>; // (undocumented) _unregister(widget: ToolbarWidget): void; - readonly values: _angular_core.ModelSignal; + readonly value: _angular_core.ModelSignal; readonly wrap: _angular_core.InputSignalWithTransform; // (undocumented) - static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngToolbar]", ["ngToolbar"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; }, never, never, true, never>; + static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngToolbar]", ["ngToolbar"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>; // (undocumented) static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; } diff --git a/goldens/aria/tree/index.api.md b/goldens/aria/tree/index.api.md index e796fe0102d4..3f947abafb06 100644 --- a/goldens/aria/tree/index.api.md +++ b/goldens/aria/tree/index.api.md @@ -34,10 +34,10 @@ export class Tree { readonly typeaheadDelay: _angular_core.InputSignal; // (undocumented) _unregister(child: TreeItem): void; - readonly values: _angular_core.ModelSignal; + readonly value: _angular_core.ModelSignal; readonly wrap: _angular_core.InputSignalWithTransform; // (undocumented) - static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngTree]", ["ngTree"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "nav": { "alias": "nav"; "required": false; "isSignal": true; }; "currentType": { "alias": "currentType"; "required": false; "isSignal": true; }; }, { "values": "valuesChange"; }, never, never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>; + static ɵdir: _angular_core.ɵɵDirectiveDeclaration, "[ngTree]", ["ngTree"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "typeaheadDelay": { "alias": "typeaheadDelay"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "nav": { "alias": "nav"; "required": false; "isSignal": true; }; "currentType": { "alias": "currentType"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, [{ directive: typeof ComboboxPopup; inputs: {}; outputs: {}; }]>; // (undocumented) static ɵfac: _angular_core.ɵɵFactoryDeclaration, never>; } diff --git a/src/aria/combobox/combobox.spec.ts b/src/aria/combobox/combobox.spec.ts index 83238b97a3b7..86c851486538 100644 --- a/src/aria/combobox/combobox.spec.ts +++ b/src/aria/combobox/combobox.spec.ts @@ -280,7 +280,7 @@ describe('Combobox', () => { click(options[0]); fixture.detectChanges(); - expect(fixture.componentInstance.values()).toEqual(['Alabama']); + expect(fixture.componentInstance.value()).toEqual(['Alabama']); expect(inputElement.value).toBe('Alabama'); }); @@ -289,7 +289,7 @@ describe('Combobox', () => { down(); enter(); - expect(fixture.componentInstance.values()).toEqual(['Alabama']); + expect(fixture.componentInstance.value()).toEqual(['Alabama']); expect(inputElement.value).toBe('Alabama'); }); @@ -297,7 +297,7 @@ describe('Combobox', () => { down(); down(); - expect(fixture.componentInstance.values()).toEqual([]); + expect(fixture.componentInstance.value()).toEqual([]); }); it('should select on focusout if the input text exactly matches an item', () => { @@ -305,7 +305,7 @@ describe('Combobox', () => { input('Alabama'); blur(); - expect(fixture.componentInstance.values()).toEqual(['Alabama']); + expect(fixture.componentInstance.value()).toEqual(['Alabama']); }); it('should not select on focusout if the input text does not match an item', () => { @@ -313,7 +313,7 @@ describe('Combobox', () => { input('Appl'); blur(); - expect(fixture.componentInstance.values()).toEqual([]); + expect(fixture.componentInstance.value()).toEqual([]); expect(inputElement.value).toBe('Appl'); }); }); @@ -327,7 +327,7 @@ describe('Combobox', () => { click(options[1]); fixture.detectChanges(); - expect(fixture.componentInstance.values()).toEqual(['Alaska']); + expect(fixture.componentInstance.value()).toEqual(['Alaska']); expect(inputElement.value).toBe('Alaska'); }); @@ -336,26 +336,26 @@ describe('Combobox', () => { down(); enter(); - expect(fixture.componentInstance.values()).toEqual(['Alaska']); + expect(fixture.componentInstance.value()).toEqual(['Alaska']); expect(inputElement.value).toBe('Alaska'); }); it('should select on navigation', () => { down(); - expect(fixture.componentInstance.values()).toEqual(['Alabama']); + expect(fixture.componentInstance.value()).toEqual(['Alabama']); down(); - expect(fixture.componentInstance.values()).toEqual(['Alaska']); + expect(fixture.componentInstance.value()).toEqual(['Alaska']); down(); - expect(fixture.componentInstance.values()).toEqual(['Arizona']); + expect(fixture.componentInstance.value()).toEqual(['Arizona']); }); it('should select the first option on input', () => { focus(); input('W'); - expect(fixture.componentInstance.values()).toEqual(['Washington']); + expect(fixture.componentInstance.value()).toEqual(['Washington']); }); it('should commit the selected option on focusout', () => { @@ -364,7 +364,7 @@ describe('Combobox', () => { blur(); expect(inputElement.value).toBe('Georgia'); - expect(fixture.componentInstance.values()).toEqual(['Georgia']); + expect(fixture.componentInstance.value()).toEqual(['Georgia']); }); }); @@ -377,7 +377,7 @@ describe('Combobox', () => { click(options[2]); fixture.detectChanges(); - expect(fixture.componentInstance.values()).toEqual(['Arizona']); + expect(fixture.componentInstance.value()).toEqual(['Arizona']); expect(inputElement.value).toBe('Arizona'); }); @@ -387,16 +387,16 @@ describe('Combobox', () => { down(); enter(); - expect(fixture.componentInstance.values()).toEqual(['Arizona']); + expect(fixture.componentInstance.value()).toEqual(['Arizona']); expect(inputElement.value).toBe('Arizona'); }); it('should select on navigation', () => { down(); - expect(fixture.componentInstance.values()).toEqual(['Alabama']); + expect(fixture.componentInstance.value()).toEqual(['Alabama']); down(); - expect(fixture.componentInstance.values()).toEqual(['Alaska']); + expect(fixture.componentInstance.value()).toEqual(['Alaska']); }); it('should update input value on navigation', () => { @@ -411,7 +411,7 @@ describe('Combobox', () => { focus(); input('Cali'); - expect(fixture.componentInstance.values()).toEqual(['California']); + expect(fixture.componentInstance.value()).toEqual(['California']); }); it('should insert a highlighted completion string on input', () => { @@ -448,7 +448,7 @@ describe('Combobox', () => { blur(); expect(inputElement.value).toBe('California'); - expect(fixture.componentInstance.values()).toEqual(['California']); + expect(fixture.componentInstance.value()).toEqual(['California']); }); }); }); @@ -548,7 +548,7 @@ describe('Combobox', () => { // focus(); // fixture.componentInstance.value.set(['Banana']); // fixture.detectChanges(); - // expect(fixture.componentInstance.values()).toEqual(['Banana']); + // expect(fixture.componentInstance.value()).toEqual(['Banana']); // const bananaOption = getOption('Banana')!; // expect(bananaOption.getAttribute('aria-selected')).toBe('true'); // }); @@ -791,7 +791,7 @@ describe('Combobox', () => { click(item); fixture.detectChanges(); - expect(fixture.componentInstance.values()).toEqual(['April']); + expect(fixture.componentInstance.value()).toEqual(['April']); expect(inputElement.value).toBe('April'); }); @@ -799,7 +799,7 @@ describe('Combobox', () => { down(); enter(); - expect(fixture.componentInstance.values()).toEqual(['Winter']); + expect(fixture.componentInstance.value()).toEqual(['Winter']); expect(inputElement.value).toBe('Winter'); }); @@ -808,14 +808,14 @@ describe('Combobox', () => { input('November'); blur(); - expect(fixture.componentInstance.values()).toEqual(['November']); + expect(fixture.componentInstance.value()).toEqual(['November']); }); it('should not select on navigation', () => { down(); down(); - expect(fixture.componentInstance.values()).toEqual([]); + expect(fixture.componentInstance.value()).toEqual([]); }); it('should not select on focusout if the input text does not match an item', () => { @@ -823,7 +823,7 @@ describe('Combobox', () => { input('Appl'); blur(); - expect(fixture.componentInstance.values()).toEqual([]); + expect(fixture.componentInstance.value()).toEqual([]); expect(inputElement.value).toBe('Appl'); }); }); @@ -839,7 +839,7 @@ describe('Combobox', () => { click(item); fixture.detectChanges(); - expect(fixture.componentInstance.values()).toEqual(['February']); + expect(fixture.componentInstance.value()).toEqual(['February']); expect(inputElement.value).toBe('February'); }); @@ -848,22 +848,22 @@ describe('Combobox', () => { down(); enter(); - expect(fixture.componentInstance.values()).toEqual(['Spring']); + expect(fixture.componentInstance.value()).toEqual(['Spring']); expect(inputElement.value).toBe('Spring'); }); it('should select on navigation', () => { down(); - expect(fixture.componentInstance.values()).toEqual(['Winter']); + expect(fixture.componentInstance.value()).toEqual(['Winter']); down(); - expect(fixture.componentInstance.values()).toEqual(['Spring']); + expect(fixture.componentInstance.value()).toEqual(['Spring']); }); it('should select the first option on input', () => { focus(); input('Dec'); - expect(fixture.componentInstance.values()).toEqual(['December']); + expect(fixture.componentInstance.value()).toEqual(['December']); }); it('should commit the selected option on focusout', () => { @@ -872,7 +872,7 @@ describe('Combobox', () => { blur(); expect(inputElement.value).toBe('June'); - expect(fixture.componentInstance.values()).toEqual(['June']); + expect(fixture.componentInstance.value()).toEqual(['June']); }); }); @@ -887,7 +887,7 @@ describe('Combobox', () => { click(item); fixture.detectChanges(); - expect(fixture.componentInstance.values()).toEqual(['February']); + expect(fixture.componentInstance.value()).toEqual(['February']); expect(inputElement.value).toBe('February'); }); @@ -896,16 +896,16 @@ describe('Combobox', () => { down(); enter(); - expect(fixture.componentInstance.values()).toEqual(['Spring']); + expect(fixture.componentInstance.value()).toEqual(['Spring']); expect(inputElement.value).toBe('Spring'); }); it('should select on navigation', () => { down(); - expect(fixture.componentInstance.values()).toEqual(['Winter']); + expect(fixture.componentInstance.value()).toEqual(['Winter']); down(); - expect(fixture.componentInstance.values()).toEqual(['Spring']); + expect(fixture.componentInstance.value()).toEqual(['Spring']); }); it('should update input value on navigation', () => { @@ -920,7 +920,7 @@ describe('Combobox', () => { focus(); input('Sept'); - expect(fixture.componentInstance.values()).toEqual(['September']); + expect(fixture.componentInstance.value()).toEqual(['September']); }); it('should insert a highlighted completion string on input', () => { @@ -938,7 +938,7 @@ describe('Combobox', () => { blur(); expect(inputElement.value).toBe('January'); - expect(fixture.componentInstance.values()).toEqual(['January']); + expect(fixture.componentInstance.value()).toEqual(['January']); }); }); }); @@ -1065,9 +1065,9 @@ describe('Combobox', () => { it('should update the selected item when the value is set programmatically', () => { setupCombobox(); focus(); - fixture.componentInstance.values.set(['August']); + fixture.componentInstance.value.set(['August']); fixture.detectChanges(); - expect(fixture.componentInstance.values()).toEqual(['August']); + expect(fixture.componentInstance.value()).toEqual(['August']); expect(getTreeItem('August')!.getAttribute('aria-selected')).toBe('true'); }); }); @@ -1111,7 +1111,7 @@ describe('Combobox', () => { /> -
+
@for (option of options(); track option) {
{ class ComboboxListboxExample { readonly = signal(false); searchString = signal(''); - values = signal([]); + value = signal([]); filterMode = signal<'manual' | 'auto-select' | 'highlight'>('manual'); options = computed(() => @@ -1155,7 +1155,7 @@ class ComboboxListboxExample { /> -
    +
      ([]); + value = signal([]); nodes = computed(() => this.filterTreeNodes(TREE_NODES)); filterMode = signal<'manual' | 'auto-select' | 'highlight'>('manual'); diff --git a/src/aria/listbox/listbox.spec.ts b/src/aria/listbox/listbox.spec.ts index b60dd96ee6cd..93bd45ad6619 100644 --- a/src/aria/listbox/listbox.spec.ts +++ b/src/aria/listbox/listbox.spec.ts @@ -53,7 +53,7 @@ describe('Listbox', () => { orientation?: 'horizontal' | 'vertical'; disabled?: boolean; readonly?: boolean; - values?: number[]; + value?: number[]; softDisabled?: boolean; focusMode?: 'roving' | 'activedescendant'; multi?: boolean; @@ -74,7 +74,7 @@ describe('Listbox', () => { if (opts?.orientation !== undefined) testComponent.orientation = opts.orientation; if (opts?.disabled !== undefined) testComponent.disabled = opts.disabled; if (opts?.readonly !== undefined) testComponent.readonly = opts.readonly; - if (opts?.values !== undefined) testComponent.values = opts.values; + if (opts?.value !== undefined) testComponent.value = opts.value; if (opts?.softDisabled !== undefined) testComponent.softDisabled = opts.softDisabled; if (opts?.focusMode !== undefined) testComponent.focusMode = opts.focusMode; if (opts?.multi !== undefined) testComponent.multi = opts.multi; @@ -174,7 +174,7 @@ describe('Listbox', () => { }); it('should set aria-selected to "true" for selected options', () => { - setupListbox({multi: true, values: [1, 3]}); + setupListbox({multi: true, value: [1, 3]}); expect(optionElements[0].getAttribute('aria-selected')).toBe('false'); expect(optionElements[1].getAttribute('aria-selected')).toBe('true'); expect(optionElements[2].getAttribute('aria-selected')).toBe('false'); @@ -211,7 +211,7 @@ describe('Listbox', () => { }); it('should set initial focus (tabindex="0") on the first selected option', () => { - setupListbox({focusMode: 'roving', values: [2]}); + setupListbox({focusMode: 'roving', value: [2]}); expect(optionElements[0].getAttribute('tabindex')).toBe('-1'); expect(optionElements[1].getAttribute('tabindex')).toBe('-1'); expect(optionElements[2].getAttribute('tabindex')).toBe('0'); @@ -222,7 +222,7 @@ describe('Listbox', () => { it('should set initial focus (tabindex="0") on the first non-disabled option if selected option is disabled when softDisabled is false', () => { setupListbox({ focusMode: 'roving', - values: [1], + value: [1], disabledOptions: [0], softDisabled: false, }); @@ -233,7 +233,7 @@ describe('Listbox', () => { it('should set initial focus (tabindex="0") on the first option if selected option is disabled', () => { setupListbox({ focusMode: 'roving', - values: [0], + value: [0], disabledOptions: [0], }); expect(optionElements[0].getAttribute('tabindex')).toBe('0'); @@ -258,19 +258,19 @@ describe('Listbox', () => { }); it('should set aria-activedescendant to the ID of the first selected option', () => { - setupListbox({focusMode: 'activedescendant', values: [2]}); + setupListbox({focusMode: 'activedescendant', value: [2]}); expect(listboxElement.getAttribute('aria-activedescendant')).toBe(optionElements[2].id); }); it('should set aria-activedescendant to the ID of the first non-disabled option if selected option is disabled', () => { - setupListbox({focusMode: 'activedescendant', values: [0], disabledOptions: [0]}); + setupListbox({focusMode: 'activedescendant', value: [0], disabledOptions: [0]}); expect(listboxElement.getAttribute('aria-activedescendant')).toBe(optionElements[0].id); }); it('should set aria-activedescendant to the ID of the first non-disabled option if selected option is disabled when softDisabled is false', () => { setupListbox({ focusMode: 'activedescendant', - values: [1], + value: [1], disabledOptions: [0], softDisabled: false, }); @@ -290,28 +290,28 @@ describe('Listbox', () => { describe('value and selection', () => { it('should select the options corresponding to the value input', () => { - setupListbox({multi: true, values: [1, 3]}); + setupListbox({multi: true, value: [1, 3]}); expect(optionElements[1].getAttribute('aria-selected')).toBe('true'); expect(optionElements[3].getAttribute('aria-selected')).toBe('true'); - expect(listboxInstance.values()).toEqual([1, 3]); + expect(listboxInstance.value()).toEqual([1, 3]); }); it('should update the value model when an option is selected via UI (single select)', () => { setupListbox({multi: false}); click(1); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); click(2); - expect(listboxInstance.values()).toEqual([2]); + expect(listboxInstance.value()).toEqual([2]); }); it('should update the value model when options are selected via UI (multi select)', () => { setupListbox({multi: true}); click(1); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); click(3); - expect(listboxInstance.values()).toEqual([1, 3]); + expect(listboxInstance.value()).toEqual([1, 3]); click(1); - expect(listboxInstance.values()).toEqual([3]); + expect(listboxInstance.value()).toEqual([3]); }); describe('pointer interactions', () => { @@ -319,14 +319,14 @@ describe('Listbox', () => { it('should select an option on click', () => { setupListbox({multi: false}); click(1); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); expect(optionElements[1].getAttribute('aria-selected')).toBe('true'); }); it('should select a new option and deselect the old one on click', () => { - setupListbox({multi: false, values: [0]}); + setupListbox({multi: false, value: [0]}); click(1); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); expect(optionElements[0].getAttribute('aria-selected')).toBe('false'); expect(optionElements[1].getAttribute('aria-selected')).toBe('true'); }); @@ -335,30 +335,30 @@ describe('Listbox', () => { describe('multi select', () => { describe('selection follows focus', () => { it('should select only the clicked option with a simple click', () => { - setupListbox({multi: true, selectionMode: 'follow', values: [0]}); + setupListbox({multi: true, selectionMode: 'follow', value: [0]}); click(1); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); expect(optionElements[0].getAttribute('aria-selected')).toBe('false'); expect(optionElements[1].getAttribute('aria-selected')).toBe('true'); }); it('should toggle the selected state of an option with ctrl + click', () => { - setupListbox({multi: true, selectionMode: 'follow', values: [0]}); + setupListbox({multi: true, selectionMode: 'follow', value: [0]}); click(1, {ctrlKey: true}); - expect(listboxInstance.values().sort()).toEqual([0, 1]); + expect(listboxInstance.value().sort()).toEqual([0, 1]); expect(optionElements[0].getAttribute('aria-selected')).toBe('true'); expect(optionElements[1].getAttribute('aria-selected')).toBe('true'); click(0, {ctrlKey: true}); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); expect(optionElements[0].getAttribute('aria-selected')).toBe('false'); expect(optionElements[1].getAttribute('aria-selected')).toBe('true'); }); it('should select a range starting from the first option on shift + click', () => { - setupListbox({multi: true, selectionMode: 'follow', values: [0]}); + setupListbox({multi: true, selectionMode: 'follow', value: [0]}); click(2, {shiftKey: true}); - expect(listboxInstance.values().sort()).toEqual([0, 1, 2]); + expect(listboxInstance.value().sort()).toEqual([0, 1, 2]); expect(optionElements[0].getAttribute('aria-selected')).toBe('true'); expect(optionElements[1].getAttribute('aria-selected')).toBe('true'); expect(optionElements[2].getAttribute('aria-selected')).toBe('true'); @@ -368,46 +368,46 @@ describe('Listbox', () => { setupListbox({multi: true, selectionMode: 'follow'}); click(1); click(3, {shiftKey: true}); - expect(listboxInstance.values().sort()).toEqual([1, 2, 3]); + expect(listboxInstance.value().sort()).toEqual([1, 2, 3]); }); it('should not select disabled options on shift + click', () => { setupListbox({multi: true, selectionMode: 'follow', disabledOptions: [1]}); click(2, {shiftKey: true}); - expect(listboxInstance.values()).toEqual([0, 2]); + expect(listboxInstance.value()).toEqual([0, 2]); }); }); describe('explicit selection', () => { it('should toggle selection of the clicked option with a simple click', () => { - setupListbox({multi: true, selectionMode: 'explicit', values: [0]}); + setupListbox({multi: true, selectionMode: 'explicit', value: [0]}); click(1); - expect(listboxInstance.values().sort()).toEqual([0, 1]); + expect(listboxInstance.value().sort()).toEqual([0, 1]); expect(optionElements[0].getAttribute('aria-selected')).toBe('true'); expect(optionElements[1].getAttribute('aria-selected')).toBe('true'); click(0); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); expect(optionElements[0].getAttribute('aria-selected')).toBe('false'); }); it('should select a range starting from the first option on shift + click', () => { - setupListbox({multi: true, selectionMode: 'explicit', values: [0]}); + setupListbox({multi: true, selectionMode: 'explicit', value: [0]}); click(2, {shiftKey: true}); - expect(listboxInstance.values().sort()).toEqual([0, 1, 2]); + expect(listboxInstance.value().sort()).toEqual([0, 1, 2]); }); it('should select a range starting from the current active option on shift + click', () => { setupListbox({multi: true, selectionMode: 'explicit'}); click(1); click(3, {shiftKey: true}); - expect(listboxInstance.values().sort()).toEqual([1, 2, 3]); + expect(listboxInstance.value().sort()).toEqual([1, 2, 3]); }); it('should not select disabled options on shift + click', () => { setupListbox({multi: true, selectionMode: 'follow', disabledOptions: [1]}); click(2, {shiftKey: true}); - expect(listboxInstance.values()).toEqual([0, 2]); + expect(listboxInstance.value()).toEqual([0, 2]); }); }); }); @@ -419,30 +419,30 @@ describe('Listbox', () => { it('should select the next option on ArrowDown', () => { setupListbox({multi: false, selectionMode: 'follow'}); down(); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); expect(optionElements[1].getAttribute('aria-selected')).toBe('true'); down(); - expect(listboxInstance.values()).toEqual([2]); + expect(listboxInstance.value()).toEqual([2]); expect(optionElements[2].getAttribute('aria-selected')).toBe('true'); }); it('should select the previous option on ArrowUp', () => { - setupListbox({multi: false, selectionMode: 'follow', values: [2]}); + setupListbox({multi: false, selectionMode: 'follow', value: [2]}); up(); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); expect(optionElements[1].getAttribute('aria-selected')).toBe('true'); }); it('should select the first option on Home', () => { - setupListbox({multi: false, selectionMode: 'follow', values: [2]}); + setupListbox({multi: false, selectionMode: 'follow', value: [2]}); home(); - expect(listboxInstance.values()).toEqual([0]); + expect(listboxInstance.value()).toEqual([0]); }); it('should select the last option on End', () => { - setupListbox({multi: false, selectionMode: 'follow', values: [2]}); + setupListbox({multi: false, selectionMode: 'follow', value: [2]}); end(); - expect(listboxInstance.values()).toEqual([4]); + expect(listboxInstance.value()).toEqual([4]); }); }); @@ -453,7 +453,7 @@ describe('Listbox', () => { up(); home(); end(); - expect(listboxInstance.values()).toEqual([]); + expect(listboxInstance.value()).toEqual([]); expect(optionElements[1].getAttribute('aria-selected')).toBe('false'); }); @@ -461,12 +461,12 @@ describe('Listbox', () => { setupListbox({multi: false, selectionMode: 'explicit'}); down(); space(); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); expect(optionElements[1].getAttribute('aria-selected')).toBe('true'); down(); down(); space(); - expect(listboxInstance.values()).toEqual([3]); + expect(listboxInstance.value()).toEqual([3]); expect(optionElements[1].getAttribute('aria-selected')).toBe('false'); expect(optionElements[3].getAttribute('aria-selected')).toBe('true'); }); @@ -475,7 +475,7 @@ describe('Listbox', () => { setupListbox({multi: false, selectionMode: 'explicit'}); down(); enter(); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); expect(optionElements[1].getAttribute('aria-selected')).toBe('true'); }); }); @@ -484,46 +484,46 @@ describe('Listbox', () => { describe('multi select', () => { describe('selection follows focus', () => { it('should select only the focused option on ArrowDown (no modifier)', () => { - setupListbox({multi: true, selectionMode: 'follow', values: [0]}); + setupListbox({multi: true, selectionMode: 'follow', value: [0]}); down(); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); expect(optionElements[0].getAttribute('aria-selected')).toBe('false'); expect(optionElements[1].getAttribute('aria-selected')).toBe('true'); }); it('should move focus but not change selection on ctrl + ArrowDown, then toggle with ctrl + Space', () => { - setupListbox({multi: true, selectionMode: 'follow', values: [0]}); + setupListbox({multi: true, selectionMode: 'follow', value: [0]}); down({ctrlKey: true}); - expect(listboxInstance.values()).toEqual([0]); + expect(listboxInstance.value()).toEqual([0]); space({ctrlKey: true}); - expect(listboxInstance.values().sort()).toEqual([0, 1]); + expect(listboxInstance.value().sort()).toEqual([0, 1]); }); it('should toggle selection of the focused item on ctrl + Space', () => { - setupListbox({multi: true, selectionMode: 'follow', values: [0]}); + setupListbox({multi: true, selectionMode: 'follow', value: [0]}); space({ctrlKey: true}); - expect(listboxInstance.values()).toEqual([]); + expect(listboxInstance.value()).toEqual([]); down(); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); space({ctrlKey: true}); - expect(listboxInstance.values()).toEqual([]); + expect(listboxInstance.value()).toEqual([]); }); it('should extend selection on shift + ArrowDown', () => { - setupListbox({multi: true, selectionMode: 'follow', values: [0]}); + setupListbox({multi: true, selectionMode: 'follow', value: [0]}); down({shiftKey: true}); - expect(listboxInstance.values().sort()).toEqual([0, 1]); + expect(listboxInstance.value().sort()).toEqual([0, 1]); down({shiftKey: true}); - expect(listboxInstance.values().sort()).toEqual([0, 1, 2]); + expect(listboxInstance.value().sort()).toEqual([0, 1, 2]); }); it('should select all on Ctrl+A, then select active on second Ctrl+A', () => { - setupListbox({multi: true, selectionMode: 'follow', values: [0]}); + setupListbox({multi: true, selectionMode: 'follow', value: [0]}); keydown('A', {ctrlKey: true}); - expect(listboxInstance.values().sort()).toEqual([0, 1, 2, 3, 4]); + expect(listboxInstance.value().sort()).toEqual([0, 1, 2, 3, 4]); keydown('A', {ctrlKey: true}); - expect(listboxInstance.values()).toEqual([0]); + expect(listboxInstance.value()).toEqual([0]); }); }); @@ -531,43 +531,43 @@ describe('Listbox', () => { it('should move focus but not select on ArrowDown', () => { setupListbox({multi: true, selectionMode: 'explicit'}); down(); - expect(listboxInstance.values()).toEqual([]); + expect(listboxInstance.value()).toEqual([]); }); it('should toggle selection of the focused item on Space', () => { setupListbox({multi: true, selectionMode: 'explicit'}); down(); space(); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); down(); space(); - expect(listboxInstance.values().sort()).toEqual([1, 2]); + expect(listboxInstance.value().sort()).toEqual([1, 2]); space(); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); }); it('should toggle selection of the focused item on Enter', () => { setupListbox({multi: true, selectionMode: 'explicit'}); down(); enter(); - expect(listboxInstance.values()).toEqual([1]); + expect(listboxInstance.value()).toEqual([1]); }); it('should extend selection on Shift+ArrowDown', () => { setupListbox({multi: true, selectionMode: 'explicit'}); down({shiftKey: true}); - expect(listboxInstance.values().sort()).toEqual([0, 1]); + expect(listboxInstance.value().sort()).toEqual([0, 1]); down({shiftKey: true}); - expect(listboxInstance.values().sort()).toEqual([0, 1, 2]); + expect(listboxInstance.value().sort()).toEqual([0, 1, 2]); }); it('should toggle selection of all options on Ctrl+A', () => { - setupListbox({multi: true, selectionMode: 'explicit', values: [0]}); + setupListbox({multi: true, selectionMode: 'explicit', value: [0]}); keydown('A', {ctrlKey: true}); - expect(listboxInstance.values().sort()).toEqual([0, 1, 2, 3, 4]); + expect(listboxInstance.value().sort()).toEqual([0, 1, 2, 3, 4]); keydown('A', {ctrlKey: true}); - expect(listboxInstance.values()).toEqual([]); + expect(listboxInstance.value()).toEqual([]); }); }); }); @@ -712,7 +712,7 @@ describe('Listbox', () => { setupListbox({options: getOptions(), focusMode, selectionMode: 'follow'}); type('O'); expect(isFocused(4)).toBe(true); - expect(listboxInstance.values()).toEqual([4]); + expect(listboxInstance.value()).toEqual([4]); expect(optionElements[4].getAttribute('aria-selected')).toBe('true'); }); @@ -720,7 +720,7 @@ describe('Listbox', () => { setupListbox({options: getOptions(), focusMode, selectionMode: 'explicit'}); type('O'); expect(isFocused(4)).toBe(true); - expect(listboxInstance.values()).toEqual([]); + expect(listboxInstance.value()).toEqual([]); expect(optionElements[4].getAttribute('aria-selected')).toBe('false'); }); @@ -767,7 +767,7 @@ describe('Listbox', () => { expect(optionElements.length).toBe(0); expect(() => down()).not.toThrow(); expect(() => space()).not.toThrow(); - expect(listboxInstance.values()).toEqual([]); + expect(listboxInstance.value()).toEqual([]); }); }); }); @@ -783,7 +783,7 @@ interface TestOption {
        { readonly = input(false, {transform: booleanAttribute}); /** The values of the currently selected items. */ - values = model([]); + value = model([]); /** The Listbox UIPattern. */ readonly _pattern: ListboxPattern; @@ -187,13 +187,13 @@ export class Listbox { } }); - // Ensure that the values are always in sync with the available options. + // Ensure that the value is always in sync with the available options. afterRenderEffect(() => { const items = inputs.items(); - const values = untracked(() => this.values()); + const value = untracked(() => this.value()); - if (items && values.some(v => !items.some(i => i.value() === v))) { - this.values.set(values.filter(v => items.some(i => i.value() === v))); + if (items && value.some(v => !items.some(i => i.value() === v))) { + this.value.set(value.filter(v => items.some(i => i.value() === v))); } }); } diff --git a/src/aria/menu/menu-bar.ts b/src/aria/menu/menu-bar.ts index 89e187181cd1..022212a14c47 100644 --- a/src/aria/menu/menu-bar.ts +++ b/src/aria/menu/menu-bar.ts @@ -92,7 +92,7 @@ export class MenuBar { readonly textDirection = inject(Directionality).valueSignal; /** The values of the currently selected menu items. */ - readonly values = model([]); + readonly value = model([]); /** Whether the menu should wrap its items. */ readonly wrap = input(true, {transform: booleanAttribute}); diff --git a/src/aria/private/behaviors/list-selection/list-selection.spec.ts b/src/aria/private/behaviors/list-selection/list-selection.spec.ts index c2a472b6e9ab..8093639896ea 100644 --- a/src/aria/private/behaviors/list-selection/list-selection.spec.ts +++ b/src/aria/private/behaviors/list-selection/list-selection.spec.ts @@ -27,7 +27,7 @@ function getSelection(inputs: TestInputs = {}): ListSelection { it('should select an item', () => { const selection = getSelection(); selection.select(); // [0] - expect(selection.inputs.values()).toEqual([0]); + expect(selection.inputs.value()).toEqual([0]); }); it('should select multiple options', () => { @@ -65,7 +65,7 @@ describe('List Selection', () => { selection.inputs.focusManager.focus(items[1]); selection.select(); // [0, 1] - expect(selection.inputs.values()).toEqual([0, 1]); + expect(selection.inputs.value()).toEqual([0, 1]); }); it('should not select multiple options', () => { @@ -74,7 +74,7 @@ describe('List Selection', () => { selection.select(); // [0] selection.inputs.focusManager.focus(items[1]); selection.select(); // [1] - expect(selection.inputs.values()).toEqual([1]); + expect(selection.inputs.value()).toEqual([1]); }); it('should not select disabled items (#select)', () => { @@ -82,7 +82,7 @@ describe('List Selection', () => { const items = selection.inputs.items() as TestItem[]; items[0].disabled.set(true); selection.select(); // [] - expect(selection.inputs.values()).toEqual([]); + expect(selection.inputs.value()).toEqual([]); }); it('should not select non-selectable items (#select)', () => { @@ -90,14 +90,14 @@ describe('List Selection', () => { const items = selection.inputs.items() as TestItem[]; items[0].selectable.set(false); selection.select(); // [] - expect(selection.inputs.values()).toEqual([]); + expect(selection.inputs.value()).toEqual([]); }); it('should do nothing to already selected items (#select)', () => { const selection = getSelection(); selection.select(); // [0] selection.select(); // [0] - expect(selection.inputs.values()).toEqual([0]); + expect(selection.inputs.value()).toEqual([0]); }); }); @@ -105,7 +105,7 @@ describe('List Selection', () => { it('should deselect an item', () => { const selection = getSelection(); selection.deselect(); // [] - expect(selection.inputs.values().length).toBe(0); + expect(selection.inputs.value().length).toBe(0); }); it('should not deselect disabled items', () => { @@ -114,7 +114,7 @@ describe('List Selection', () => { selection.select(); // [0] items[0].disabled.set(true); selection.deselect(); // [0] - expect(selection.inputs.values()).toEqual([0]); + expect(selection.inputs.value()).toEqual([0]); }); it('should not deselect non-selectable items (#deselect)', () => { @@ -123,7 +123,7 @@ describe('List Selection', () => { selection.select(); // [0] items[0].selectable.set(false); selection.deselect(); // [0] - expect(selection.inputs.values()).toEqual([0]); + expect(selection.inputs.value()).toEqual([0]); }); }); @@ -131,14 +131,14 @@ describe('List Selection', () => { it('should select an unselected item (#toggle)', () => { const selection = getSelection(); selection.toggle(); // [0] - expect(selection.inputs.values()).toEqual([0]); + expect(selection.inputs.value()).toEqual([0]); }); it('should deselect a selected item (#toggle)', () => { const selection = getSelection(); selection.select(); // [0] selection.toggle(); // [] - expect(selection.inputs.values().length).toBe(0); + expect(selection.inputs.value().length).toBe(0); }); it('should not toggle non-selectable items (#toggle)', () => { @@ -146,7 +146,7 @@ describe('List Selection', () => { const items = selection.inputs.items() as TestItem[]; items[0].selectable.set(false); selection.toggle(); // [] - expect(selection.inputs.values()).toEqual([]); + expect(selection.inputs.value()).toEqual([]); }); }); @@ -154,14 +154,14 @@ describe('List Selection', () => { it('should select an unselected item (#toggleOne)', () => { const selection = getSelection({multi: signal(true)}); selection.toggleOne(); // [0] - expect(selection.inputs.values()).toEqual([0]); + expect(selection.inputs.value()).toEqual([0]); }); it('should deselect a selected item (#toggleOne)', () => { const selection = getSelection({multi: signal(true)}); selection.select(); // [0] selection.toggleOne(); // [] - expect(selection.inputs.values().length).toBe(0); + expect(selection.inputs.value().length).toBe(0); }); it('should only leave one item selected', () => { @@ -170,7 +170,7 @@ describe('List Selection', () => { selection.select(); // [0] selection.inputs.focusManager.focus(items[1]); selection.toggleOne(); // [1] - expect(selection.inputs.values()).toEqual([1]); + expect(selection.inputs.value()).toEqual([1]); }); it('should not toggle non-selectable items (#toggleOne)', () => { @@ -178,7 +178,7 @@ describe('List Selection', () => { const items = selection.inputs.items() as TestItem[]; items[0].selectable.set(false); selection.toggleOne(); // [] - expect(selection.inputs.values()).toEqual([]); + expect(selection.inputs.value()).toEqual([]); }); }); @@ -186,13 +186,13 @@ describe('List Selection', () => { it('should select all items (#selectAll)', () => { const selection = getSelection({multi: signal(true)}); 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 selection = getSelection({multi: signal(false)}); selection.selectAll(); - expect(selection.inputs.values()).toEqual([]); + expect(selection.inputs.value()).toEqual([]); }); it('should not select non-selectable items (#selectAll)', () => { @@ -200,7 +200,7 @@ describe('List Selection', () => { const items = selection.inputs.items() as TestItem[]; items[1].selectable.set(false); selection.selectAll(); - expect(selection.inputs.values()).toEqual([0, 2, 3, 4]); + expect(selection.inputs.value()).toEqual([0, 2, 3, 4]); }); }); @@ -209,14 +209,14 @@ describe('List Selection', () => { const selection = getSelection({multi: signal(true)}); selection.selectAll(); // [0, 1, 2, 3, 4] selection.deselectAll(); // [] - expect(selection.inputs.values().length).toBe(0); + expect(selection.inputs.value().length).toBe(0); }); it('should deselect items that are not in the list', () => { const selection = getSelection({multi: signal(true)}); - selection.inputs.values.update(() => [5]); + selection.inputs.value.update(() => [5]); selection.deselectAll(); - expect(selection.inputs.values().length).toBe(0); + expect(selection.inputs.value().length).toBe(0); }); it('should not deselect non-selectable items (#deselectAll)', () => { @@ -225,7 +225,7 @@ describe('List Selection', () => { selection.selectAll(); // [0, 1, 2, 3, 4] items[1].selectable.set(false); selection.deselectAll(); // [1] - expect(selection.inputs.values()).toEqual([1]); + expect(selection.inputs.value()).toEqual([1]); }); }); @@ -233,14 +233,14 @@ describe('List Selection', () => { it('should select all items (#toggleAll)', () => { const selection = getSelection({multi: signal(true)}); selection.toggleAll(); - expect(selection.inputs.values()).toEqual([0, 1, 2, 3, 4]); + expect(selection.inputs.value()).toEqual([0, 1, 2, 3, 4]); }); it('should deselect all if all items are selected', () => { const selection = getSelection({multi: signal(true)}); selection.selectAll(); selection.toggleAll(); - expect(selection.inputs.values()).toEqual([]); + expect(selection.inputs.value()).toEqual([]); }); it('should ignore disabled items when determining if all items are selected', () => { @@ -248,9 +248,9 @@ describe('List Selection', () => { const items = selection.inputs.items() as TestItem[]; items[0].disabled.set(true); selection.toggleAll(); - expect(selection.inputs.values()).toEqual([1, 2, 3, 4]); + expect(selection.inputs.value()).toEqual([1, 2, 3, 4]); selection.toggleAll(); - expect(selection.inputs.values()).toEqual([]); + expect(selection.inputs.value()).toEqual([]); }); it('should ignore non-selectable items when determining if all items are selected', () => { @@ -258,9 +258,9 @@ describe('List Selection', () => { const items = selection.inputs.items() as TestItem[]; items[0].selectable.set(false); selection.toggleAll(); - expect(selection.inputs.values()).toEqual([1, 2, 3, 4]); + expect(selection.inputs.value()).toEqual([1, 2, 3, 4]); selection.toggleAll(); - expect(selection.inputs.values()).toEqual([]); + expect(selection.inputs.value()).toEqual([]); }); }); @@ -271,7 +271,7 @@ describe('List Selection', () => { selection.selectOne(); // [0] selection.inputs.focusManager.focus(items[1]); selection.selectOne(); // [1] - expect(selection.inputs.values()).toEqual([1]); + expect(selection.inputs.value()).toEqual([1]); }); it('should not select disabled items (#selectOne)', () => { @@ -280,7 +280,7 @@ describe('List Selection', () => { items[0].disabled.set(true); selection.select(); // [] - expect(selection.inputs.values()).toEqual([]); + expect(selection.inputs.value()).toEqual([]); }); it('should not select non-selectable items (#selectOne)', () => { @@ -288,14 +288,14 @@ describe('List Selection', () => { const items = selection.inputs.items() as TestItem[]; items[0].selectable.set(false); selection.selectOne(); // [] - expect(selection.inputs.values()).toEqual([]); + expect(selection.inputs.value()).toEqual([]); }); it('should do nothing to already selected items (#selectOne)', () => { const selection = getSelection({multi: signal(true)}); selection.selectOne(); // [0] selection.selectOne(); // [0] - expect(selection.inputs.values()).toEqual([0]); + expect(selection.inputs.value()).toEqual([0]); }); it('should do nothing if the current active item is disabled', () => { @@ -304,12 +304,12 @@ describe('List Selection', () => { selection.inputs.focusManager.focus(items[1]); selection.select(); - expect(selection.inputs.values()).toEqual([1]); + expect(selection.inputs.value()).toEqual([1]); selection.inputs.focusManager.focus(items[0]); items[0].disabled.set(true); selection.selectOne(); - expect(selection.inputs.values()).toEqual([1]); + expect(selection.inputs.value()).toEqual([1]); }); it('should not select an item if the list is not multiselectable and not all items are deselected', () => { @@ -318,12 +318,12 @@ describe('List Selection', () => { selection.inputs.focusManager.focus(items[1]); selection.select(); - expect(selection.inputs.values()).toEqual([1]); + expect(selection.inputs.value()).toEqual([1]); items[1].disabled.set(true); selection.inputs.focusManager.focus(items[2]); selection.selectOne(); - expect(selection.inputs.values()).toEqual([1]); + expect(selection.inputs.value()).toEqual([1]); }); }); @@ -334,7 +334,7 @@ describe('List Selection', () => { selection.select(); // [0] selection.inputs.focusManager.focus(items[2]); selection.selectRange(); // [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', () => { @@ -346,7 +346,7 @@ describe('List Selection', () => { selection.inputs.focusManager.focus(items[1]); selection.selectRange(); // [3, 2, 1] - expect(selection.inputs.values()).toEqual([3, 2, 1]); + expect(selection.inputs.value()).toEqual([3, 2, 1]); }); it('should deselect items within the range when the range is changed', () => { @@ -355,15 +355,15 @@ describe('List Selection', () => { selection.inputs.activeItem.set(items[2]); selection.select(); // [2] - expect(selection.inputs.values()).toEqual([2]); + expect(selection.inputs.value()).toEqual([2]); selection.inputs.focusManager.focus(items[4]); selection.selectRange(); // [2, 3, 4] - expect(selection.inputs.values()).toEqual([2, 3, 4]); + expect(selection.inputs.value()).toEqual([2, 3, 4]); selection.inputs.focusManager.focus(items[0]); selection.selectRange(); // [2, 1, 0] - expect(selection.inputs.values()).toEqual([2, 1, 0]); + expect(selection.inputs.value()).toEqual([2, 1, 0]); }); it('should not select a disabled item', () => { @@ -372,15 +372,15 @@ describe('List Selection', () => { items[1].disabled.set(true); selection.select(); // [0] - expect(selection.inputs.values()).toEqual([0]); + expect(selection.inputs.value()).toEqual([0]); selection.inputs.focusManager.focus(items[1]); selection.selectRange(); // [0] - expect(selection.inputs.values()).toEqual([0]); + expect(selection.inputs.value()).toEqual([0]); selection.inputs.focusManager.focus(items[2]); selection.selectRange(); // [0, 2] - expect(selection.inputs.values()).toEqual([0, 2]); + expect(selection.inputs.value()).toEqual([0, 2]); }); it('should not select a non-selectable item', () => { @@ -390,7 +390,7 @@ describe('List Selection', () => { selection.select(); // [0] selection.inputs.focusManager.focus(items[2]); selection.selectRange(); // [0, 2] - expect(selection.inputs.values()).toEqual([0, 2]); + expect(selection.inputs.value()).toEqual([0, 2]); }); it('should not deselect a disabled item', () => { @@ -401,15 +401,15 @@ describe('List Selection', () => { items[1].disabled.set(true); selection.select(); // [0, 1] - expect(selection.inputs.values()).toEqual([1, 0]); + expect(selection.inputs.value()).toEqual([1, 0]); selection.inputs.focusManager.focus(items[2]); selection.selectRange(); // [0, 1, 2] - expect(selection.inputs.values()).toEqual([1, 0, 2]); + expect(selection.inputs.value()).toEqual([1, 0, 2]); selection.inputs.focusManager.focus(items[0]); selection.selectRange(); // [0, 1] - expect(selection.inputs.values()).toEqual([1, 0]); + expect(selection.inputs.value()).toEqual([1, 0]); }); it('should not deselect a non-selectable item', () => { @@ -418,13 +418,13 @@ describe('List Selection', () => { selection.select(items[1]); // [1] items[1].selectable.set(false); selection.select(); // [0, 1] - expect(selection.inputs.values()).toEqual([1, 0]); + expect(selection.inputs.value()).toEqual([1, 0]); selection.inputs.focusManager.focus(items[2]); selection.selectRange(); // [0, 1, 2] - expect(selection.inputs.values()).toEqual([1, 0, 2]); + expect(selection.inputs.value()).toEqual([1, 0, 2]); selection.inputs.focusManager.focus(items[0]); selection.selectRange(); // [0, 1] - expect(selection.inputs.values()).toEqual([1, 0]); + expect(selection.inputs.value()).toEqual([1, 0]); }); }); @@ -434,10 +434,10 @@ describe('List Selection', () => { const items = selection.inputs.items() as TestItem[]; selection.inputs.focusManager.focus(items[2]); selection.beginRangeSelection(); - expect(selection.inputs.values()).toEqual([]); + expect(selection.inputs.value()).toEqual([]); selection.inputs.focusManager.focus(items[4]); selection.selectRange(); // [2, 3, 4] - expect(selection.inputs.values()).toEqual([2, 3, 4]); + expect(selection.inputs.value()).toEqual([2, 3, 4]); }); it('should be able to select a range starting on a disabled item', () => { @@ -447,7 +447,7 @@ describe('List Selection', () => { selection.beginRangeSelection(0); selection.inputs.focusManager.focus(items[2]); selection.selectRange(); - expect(selection.inputs.values()).toEqual([1, 2]); + expect(selection.inputs.value()).toEqual([1, 2]); }); }); }); diff --git a/src/aria/private/behaviors/list-selection/list-selection.ts b/src/aria/private/behaviors/list-selection/list-selection.ts index c5b08f17a15b..61601f7f5fde 100644 --- a/src/aria/private/behaviors/list-selection/list-selection.ts +++ b/src/aria/private/behaviors/list-selection/list-selection.ts @@ -24,7 +24,7 @@ export interface ListSelectionInputs, V> extends multi: SignalLike; /** The current value of the list selection. */ - values: WritableSignalLike; + value: WritableSignalLike; /** The selection strategy used by the list. */ selectionMode: SignalLike<'follow' | 'explicit'>; @@ -40,7 +40,7 @@ export class ListSelection, V> { /** The currently selected items. */ selectedItems = computed(() => - this.inputs.items().filter(item => this.inputs.values().includes(item.value())), + this.inputs.items().filter(item => this.inputs.value().includes(item.value())), ); constructor(readonly inputs: ListSelectionInputs & {focusManager: ListFocus}) {} @@ -54,7 +54,7 @@ export class ListSelection, V> { item.disabled() || !item.selectable() || !this.inputs.focusManager.isFocusable(item as T) || - this.inputs.values().includes(item.value()) + this.inputs.value().includes(item.value()) ) { return; } @@ -67,7 +67,7 @@ export class ListSelection, V> { if (opts.anchor) { this.beginRangeSelection(index); } - 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. */ @@ -75,7 +75,7 @@ export class ListSelection, V> { item = item ?? this.inputs.focusManager.inputs.activeItem(); if (item && !item.disabled() && item.selectable()) { - this.inputs.values.update(values => values.filter(value => value !== item.value())); + this.inputs.value.update(values => values.filter(value => value !== item.value())); } } @@ -83,7 +83,7 @@ export class ListSelection, V> { toggle(item?: ListSelectionItem) { item = item ?? this.inputs.focusManager.inputs.activeItem(); if (item) { - this.inputs.values().includes(item.value()) ? this.deselect(item) : this.select(item); + this.inputs.value().includes(item.value()) ? this.deselect(item) : this.select(item); } } @@ -91,7 +91,7 @@ export class ListSelection, V> { toggleOne() { const item = this.inputs.focusManager.inputs.activeItem(); if (item) { - this.inputs.values().includes(item.value()) ? this.deselect() : this.selectOne(); + this.inputs.value().includes(item.value()) ? this.deselect() : this.selectOne(); } } @@ -123,12 +123,12 @@ export class ListSelection, V> { // inverse (and more common) effect of keeping enabled items selected when they aren't in the // list. - for (const value of this.inputs.values()) { + for (const value of this.inputs.value()) { const item = this.inputs.items().find(i => i.value() === value); item ? this.deselect(item) - : this.inputs.values.update(values => values.filter(v => v !== value)); + : this.inputs.value.update(values => values.filter(v => v !== value)); } } @@ -142,7 +142,7 @@ export class ListSelection, V> { .filter(i => !i.disabled() && i.selectable() && this.inputs.focusManager.isFocusable(i)) .map(i => i.value()); - selectableValues.every(i => this.inputs.values().includes(i)) + selectableValues.every(i => this.inputs.value().includes(i)) ? this.deselectAll() : this.selectAll(); } @@ -156,7 +156,7 @@ export class ListSelection, V> { this.deselectAll(); - if (this.inputs.values().length > 0 && !this.inputs.multi()) { + if (this.inputs.value().length > 0 && !this.inputs.multi()) { return; } diff --git a/src/aria/private/behaviors/list/list.spec.ts b/src/aria/private/behaviors/list/list.spec.ts index a9cbbec683fe..ab1375318432 100644 --- a/src/aria/private/behaviors/list/list.spec.ts +++ b/src/aria/private/behaviors/list/list.spec.ts @@ -22,7 +22,7 @@ type TestList = List, V>; describe('List Behavior', () => { function getList(inputs: Partial> & Pick, 'items'>): TestList { return new List({ - values: inputs.values ?? signal([]), + value: inputs.value ?? signal([]), activeItem: signal(undefined), typeaheadDelay: inputs.typeaheadDelay ?? signal(500), wrap: inputs.wrap ?? signal(true), @@ -38,22 +38,22 @@ describe('List Behavior', () => { }); } - function getItems(values: V[]): TestItem[] { - return values.map((value, index) => ({ - value: signal(value), + function getItems(value: V[]): TestItem[] { + return value.map((val, index) => ({ + value: signal(val), id: signal(`item-${index}`), element: signal(document.createElement('div')), disabled: signal(false), selectable: signal(true), - searchTerm: signal(String(value)), + searchTerm: signal(String(val)), index: signal(index), })); } - function getListAndItems(values: V[], inputs: Partial> = {}) { + function getListAndItems(value: V[], inputs: Partial> = {}) { const items = signal[]>([]); const list = getList({...inputs, items}); - items.set(getItems(values)); + items.set(getItems(value)); list.inputs.activeItem.set(list.inputs.items()[0]); return {list, items: items()}; } @@ -137,7 +137,7 @@ describe('List Behavior', () => { it('should not select items (softDisabled: false)', () => { list.next({selectOne: true}); - expect(list.inputs.values()).toEqual([]); + expect(list.inputs.value()).toEqual([]); }); it('should have a tab index of 0 (softDisabled: false)', () => { @@ -167,7 +167,7 @@ describe('List Behavior', () => { it('should not select items (softDisabled: true)', () => { list.next({selectOne: true}); - expect(list.inputs.values()).toEqual([]); + expect(list.inputs.value()).toEqual([]); }); it('should have a tab index of 0 (softDisabled: true)', () => { @@ -287,7 +287,7 @@ describe('List Behavior', () => { beforeEach(() => { const patterns = getDefaultPatterns({ - values: signal([]), + value: signal([]), multi: signal(false), }); list = patterns.list; @@ -296,39 +296,39 @@ describe('List Behavior', () => { it('should not select when navigating (single select)', () => { list.next(); - expect(list.inputs.values()).toEqual([]); + expect(list.inputs.value()).toEqual([]); }); it('should select an item when navigating with selectOne:true', () => { list.next({selectOne: true}); - expect(list.inputs.values()).toEqual(['Apricot']); + expect(list.inputs.value()).toEqual(['Apricot']); }); it('should not select a non-selectable item when navigating with selectOne:true', () => { items[1].selectable.set(false); list.next({selectOne: true}); - expect(list.inputs.values()).toEqual([]); + expect(list.inputs.value()).toEqual([]); }); it('should toggle an item when navigating with toggle:true', () => { list.goto(items[1], {selectOne: true}); - expect(list.inputs.values()).toEqual(['Apricot']); + expect(list.inputs.value()).toEqual(['Apricot']); list.goto(items[1], {toggle: true}); - expect(list.inputs.values()).toEqual([]); + expect(list.inputs.value()).toEqual([]); }); it('should not toggle a non-selectable item when navigating with toggle:true', () => { items[1].selectable.set(false); list.goto(items[1], {toggle: true}); - expect(list.inputs.values()).toEqual([]); + expect(list.inputs.value()).toEqual([]); }); it('should only allow one selected item', () => { list.next({selectOne: true}); - expect(list.inputs.values()).toEqual(['Apricot']); + expect(list.inputs.value()).toEqual(['Apricot']); list.next({selectOne: true}); - expect(list.inputs.values()).toEqual(['Banana']); + expect(list.inputs.value()).toEqual(['Banana']); }); }); @@ -338,7 +338,7 @@ describe('List Behavior', () => { beforeEach(() => { const patterns = getDefaultPatterns({ - values: signal([]), + value: signal([]), multi: signal(true), }); list = patterns.list; @@ -347,57 +347,57 @@ describe('List Behavior', () => { it('should not select when navigating (multi select)', () => { list.next(); - expect(list.inputs.values()).toEqual([]); + expect(list.inputs.value()).toEqual([]); }); it('should select an item with toggle:true', () => { list.next({toggle: true}); - expect(list.inputs.values()).toEqual(['Apricot']); + expect(list.inputs.value()).toEqual(['Apricot']); }); it('should not select a non-selectable item with toggle:true', () => { items[1].selectable.set(false); list.next({toggle: true}); - expect(list.inputs.values()).toEqual([]); + expect(list.inputs.value()).toEqual([]); }); it('should allow multiple selected items', () => { list.next({toggle: true}); list.next({toggle: true}); - expect(list.inputs.values()).toEqual(['Apricot', 'Banana']); + expect(list.inputs.value()).toEqual(['Apricot', 'Banana']); }); it('should select a range of items with selectRange:true', () => { list.anchor(0); list.next({selectRange: true}); - expect(list.inputs.values()).toEqual(['Apple', 'Apricot']); + expect(list.inputs.value()).toEqual(['Apple', 'Apricot']); list.next({selectRange: true}); - expect(list.inputs.values()).toEqual(['Apple', 'Apricot', 'Banana']); + expect(list.inputs.value()).toEqual(['Apple', 'Apricot', 'Banana']); list.prev({selectRange: true}); - expect(list.inputs.values()).toEqual(['Apple', 'Apricot']); + expect(list.inputs.value()).toEqual(['Apple', 'Apricot']); list.prev({selectRange: true}); - expect(list.inputs.values()).toEqual(['Apple']); + expect(list.inputs.value()).toEqual(['Apple']); }); it('should not wrap when range selecting', () => { list.anchor(0); list.prev({selectRange: true}); expect(list.inputs.activeItem()).toBe(list.inputs.items()[0]); - expect(list.inputs.values()).toEqual([]); + expect(list.inputs.value()).toEqual([]); }); it('should not select disabled items in a range', () => { items[1].disabled.set(true); list.anchor(0); list.goto(items[3], {selectRange: true}); - expect(list.inputs.values()).toEqual(['Apple', 'Banana', 'Blackberry']); + expect(list.inputs.value()).toEqual(['Apple', 'Banana', 'Blackberry']); }); it('should not select non-selectable items in a range', () => { items[1].selectable.set(false); list.anchor(0); list.goto(items[3], {selectRange: true}); - expect(list.inputs.values()).toEqual(['Apple', 'Banana', 'Blackberry']); + expect(list.inputs.value()).toEqual(['Apple', 'Banana', 'Blackberry']); }); }); }); @@ -437,14 +437,14 @@ describe('List Behavior', () => { it('should select an item via typeahead', () => { const {list} = getDefaultPatterns({multi: signal(false)}); list.search('b', {selectOne: true}); - expect(list.inputs.values()).toEqual(['Banana']); + expect(list.inputs.value()).toEqual(['Banana']); }); it('should not select a non-selectable item via typeahead', () => { const {list, items} = getDefaultPatterns({multi: signal(false)}); items[2].selectable.set(false); // 'Banana' list.search('b', {selectOne: true}); - expect(list.inputs.values()).toEqual([]); + expect(list.inputs.value()).toEqual([]); }); }); }); diff --git a/src/aria/private/behaviors/tree/tree.spec.ts b/src/aria/private/behaviors/tree/tree.spec.ts index d31ff3a728ab..721d4cca4750 100644 --- a/src/aria/private/behaviors/tree/tree.spec.ts +++ b/src/aria/private/behaviors/tree/tree.spec.ts @@ -43,7 +43,7 @@ describe('Tree Behavior', () => { return new Tree, V>({ ...focusInputs, - values: signal([]), + value: signal([]), multi: signal(false), multiExpandable: signal(true), selectionMode: signal('follow'), @@ -157,7 +157,7 @@ describe('Tree Behavior', () => { it('should not select items (softDisabled: false)', () => { const {tree} = getDefaultPatterns({disabled: signal(true), softDisabled: signal(false)}); tree.next({selectOne: true}); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should have a tab index of 0 (softDisabled: false)', () => { @@ -184,7 +184,7 @@ describe('Tree Behavior', () => { it('should not select items (softDisabled: true)', () => { const {tree} = getDefaultPatterns({disabled: signal(true)}); tree.next({selectOne: true}); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should have a tab index of 0 (softDisabled: true)', () => { @@ -379,112 +379,112 @@ describe('Tree Behavior', () => { describe('Selection', () => { describe('single select', () => { it('should not select when navigating (single select)', () => { - const {tree} = getDefaultPatterns({values: signal([]), multi: signal(false)}); + const {tree} = getDefaultPatterns({value: signal([]), multi: signal(false)}); tree.next(); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should select an item when navigating with selectOne:true', () => { - const {tree} = getTreeAndItems([0, 1], {values: signal([]), multi: signal(false)}); + const {tree} = getTreeAndItems([0, 1], {value: signal([]), multi: signal(false)}); tree.next({selectOne: true}); - expect(tree.inputs.values()).toEqual([1]); + expect(tree.inputs.value()).toEqual([1]); }); it('should not select a non-selectable item when navigating with selectOne:true', () => { - const {tree, items} = getDefaultPatterns({values: signal([]), multi: signal(false)}); + const {tree, items} = getDefaultPatterns({value: signal([]), multi: signal(false)}); items[1].selectable.set(false); tree.next({selectOne: true}); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should toggle an item when navigating with toggle:true', () => { - const {tree, items} = getDefaultPatterns({values: signal([]), multi: signal(false)}); + const {tree, items} = getDefaultPatterns({value: signal([]), multi: signal(false)}); tree.goto(items[1], {selectOne: true}); - expect(tree.inputs.values()).toEqual([1]); + expect(tree.inputs.value()).toEqual([1]); tree.goto(items[1], {toggle: true}); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should not toggle a non-selectable item when navigating with toggle:true', () => { - const {tree, items} = getDefaultPatterns({values: signal([]), multi: signal(false)}); + const {tree, items} = getDefaultPatterns({value: signal([]), multi: signal(false)}); items[1].selectable.set(false); tree.goto(items[1], {toggle: true}); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should only allow one selected item', () => { - const {tree} = getDefaultPatterns({values: signal([]), multi: signal(false)}); + const {tree} = getDefaultPatterns({value: signal([]), multi: signal(false)}); tree.next({selectOne: true}); - expect(tree.inputs.values()).toEqual([1]); + expect(tree.inputs.value()).toEqual([1]); tree.next({selectOne: true}); - expect(tree.inputs.values()).toEqual([2]); + expect(tree.inputs.value()).toEqual([2]); }); }); describe('multi select', () => { it('should not select when navigating (multi select)', () => { - const {tree} = getDefaultPatterns({values: signal([]), multi: signal(true)}); + const {tree} = getDefaultPatterns({value: signal([]), multi: signal(true)}); tree.next(); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should select an item with toggle:true', () => { - const {tree} = getDefaultPatterns({values: signal([]), multi: signal(true)}); + const {tree} = getDefaultPatterns({value: signal([]), multi: signal(true)}); tree.next({toggle: true}); - expect(tree.inputs.values()).toEqual([1]); + expect(tree.inputs.value()).toEqual([1]); }); it('should not select a non-selectable item with toggle:true', () => { - const {tree, items} = getDefaultPatterns({values: signal([]), multi: signal(true)}); + const {tree, items} = getDefaultPatterns({value: signal([]), multi: signal(true)}); items[1].selectable.set(false); tree.next({toggle: true}); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should allow multiple selected items', () => { - const {tree} = getDefaultPatterns({values: signal([]), multi: signal(true)}); + const {tree} = getDefaultPatterns({value: signal([]), multi: signal(true)}); tree.next({toggle: true}); tree.next({toggle: true}); - expect(tree.inputs.values()).toEqual([1, 2]); + expect(tree.inputs.value()).toEqual([1, 2]); }); it('should select a range of items with selectRange:true', () => { - const {tree} = getDefaultPatterns({values: signal([]), multi: signal(true)}); + const {tree} = getDefaultPatterns({value: signal([]), multi: signal(true)}); tree.anchor(0); tree.next({selectRange: true}); - expect(tree.inputs.values()).toEqual([0, 1]); // Apple (0), Apricot (1) + expect(tree.inputs.value()).toEqual([0, 1]); // Apple (0), Apricot (1) tree.next({selectRange: true}); - expect(tree.inputs.values()).toEqual([0, 1, 2]); + expect(tree.inputs.value()).toEqual([0, 1, 2]); tree.prev({selectRange: true}); - expect(tree.inputs.values()).toEqual([0, 1]); + expect(tree.inputs.value()).toEqual([0, 1]); tree.prev({selectRange: true}); - expect(tree.inputs.values()).toEqual([0]); + expect(tree.inputs.value()).toEqual([0]); }); it('should not wrap when range selecting', () => { - const {tree} = getDefaultPatterns({values: signal([]), multi: signal(true)}); + const {tree} = getDefaultPatterns({value: signal([]), multi: signal(true)}); tree.anchor(0); tree.prev({selectRange: true}); expect(tree.inputs.activeItem()).toBe(tree.inputs.items()[0]); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should not select disabled items in a range', () => { - const {tree, items} = getDefaultPatterns({values: signal([]), multi: signal(true)}); + const {tree, items} = getDefaultPatterns({value: signal([]), multi: signal(true)}); items[1].disabled.set(true); tree.anchor(0); tree.goto(items[3], {selectRange: true}); - expect(tree.inputs.values()).toEqual([0, 2, 3]); // Skips 1 + expect(tree.inputs.value()).toEqual([0, 2, 3]); // Skips 1 }); it('should not select non-selectable items in a range', () => { - const {tree, items} = getDefaultPatterns({values: signal([]), multi: signal(true)}); + const {tree, items} = getDefaultPatterns({value: signal([]), multi: signal(true)}); items[1].selectable.set(false); tree.anchor(0); tree.goto(items[3], {selectRange: true}); - expect(tree.inputs.values()).toEqual([0, 2, 3]); // Skips 1 + expect(tree.inputs.value()).toEqual([0, 2, 3]); // Skips 1 }); }); }); @@ -534,14 +534,14 @@ describe('Tree Behavior', () => { it('should select an item via typeahead', () => { const {tree} = getTreeAndItems(['Apple', 'Banana'], {multi: signal(false)}); tree.search('b', {selectOne: true}); - expect(tree.inputs.values()).toEqual(['Banana']); + expect(tree.inputs.value()).toEqual(['Banana']); }); it('should not select a non-selectable item via typeahead', () => { const {tree, items} = getTreeAndItems(['Apple', 'Banana'], {multi: signal(false)}); items[1].selectable.set(false); tree.search('b', {selectOne: true}); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); }); }); diff --git a/src/aria/private/combobox/combobox.spec.ts b/src/aria/private/combobox/combobox.spec.ts index 1492d1306c5d..92f802f82475 100644 --- a/src/aria/private/combobox/combobox.spec.ts +++ b/src/aria/private/combobox/combobox.spec.ts @@ -123,7 +123,7 @@ function getComboboxPattern( function getListboxPattern( combobox: ComboboxPattern, - values: string[], + value: string[], initialValue?: string, ) { const options = signal([]); @@ -131,7 +131,7 @@ function getListboxPattern( const listbox = new ComboboxListboxPattern({ id: signal('listbox-1'), items: options, - values: signal(initialValue ? [initialValue] : []), + value: signal(initialValue ? [initialValue] : []), combobox: signal(combobox) as any, activeItem: signal(undefined), typeaheadDelay: signal(500), @@ -148,7 +148,7 @@ function getListboxPattern( }); options.set( - values.map((v, index) => { + value.map((v, index) => { const element = document.createElement('div'); element.role = 'option'; return new OptionPattern({ @@ -175,7 +175,7 @@ function getTreePattern( const tree = new ComboboxTreePattern({ id: signal('tree-1'), items, - values: signal(initialValue ? [initialValue] : []), + value: signal(initialValue ? [initialValue] : []), combobox: signal(combobox) as any, activeItem: signal(undefined), typeaheadDelay: signal(500), @@ -398,7 +398,7 @@ describe('Combobox with Listbox Pattern', () => { it('should select and commit on click in manual mode', () => { combobox.onClick(clickOption(listbox.inputs.items(), 0)); expect(listbox.getSelectedItems()[0]).toBe(listbox.inputs.items()[0]); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); expect(inputEl.value).toBe('Apple'); }); @@ -406,7 +406,7 @@ describe('Combobox with Listbox Pattern', () => { combobox.onKeydown(down()); combobox.onKeydown(enter()); expect(listbox.getSelectedItems()[0]).toBe(listbox.inputs.items()[0]); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); expect(inputEl.value).toBe('Apple'); }); @@ -414,37 +414,37 @@ describe('Combobox with Listbox Pattern', () => { type('Apple'); combobox.onFocusOut(new FocusEvent('focusout')); expect(listbox.getSelectedItems()[0]).toBe(listbox.inputs.items()[0]); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); it('should deselect on close if the input text does not match any options in manual mode', () => { combobox.onKeydown(down()); combobox.onKeydown(enter()); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); type('Appl', {backspace: true}); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); combobox.onKeydown(escape()); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); }); it('should not select on navigation in manual mode', () => { combobox.onKeydown(down()); expect(listbox.getSelectedItems().length).toBe(0); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); }); it('should not select on input in manual mode', () => { type('A'); expect(listbox.getSelectedItems().length).toBe(0); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); }); it('should not select on focusout if the input text does not match an item in manual mode', () => { type('Appl'); combobox.onFocusOut(new FocusEvent('focusout')); expect(listbox.getSelectedItems().length).toBe(0); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); expect(inputEl.value).toBe('Appl'); }); }); @@ -459,7 +459,7 @@ describe('Combobox with Listbox Pattern', () => { it('should select and commit on click in auto-select mode', () => { combobox.onClick(clickOption(listbox.inputs.items(), 3)); expect(listbox.getSelectedItems()[0]).toBe(listbox.inputs.items()[3]); - expect(listbox.inputs.values()).toEqual(['Blackberry']); + expect(listbox.inputs.value()).toEqual(['Blackberry']); expect(inputEl.value).toBe('Blackberry'); }); @@ -469,14 +469,14 @@ describe('Combobox with Listbox Pattern', () => { combobox.onKeydown(down()); combobox.onKeydown(enter()); expect(listbox.getSelectedItems()[0]).toBe(listbox.inputs.items()[2]); - expect(listbox.inputs.values()).toEqual(['Banana']); + expect(listbox.inputs.value()).toEqual(['Banana']); expect(inputEl.value).toBe('Banana'); }); it('should select the first item on arrow down when collapsed in auto-select mode', () => { combobox.onKeydown(down()); expect(listbox.getSelectedItems()[0]).toBe(listbox.inputs.items()[0]); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); it('should select the last item on arrow up when collapsed in auto-select mode', () => { @@ -484,22 +484,22 @@ describe('Combobox with Listbox Pattern', () => { expect(listbox.getSelectedItems()[0]).toBe( listbox.inputs.items()[listbox.inputs.items().length - 1], ); - expect(listbox.inputs.values()).toEqual(['Cranberry']); + expect(listbox.inputs.value()).toEqual(['Cranberry']); }); it('should select on navigation in auto-select mode', () => { combobox.onKeydown(down()); combobox.onKeydown(down()); expect(listbox.getSelectedItems()[0]).toBe(listbox.inputs.items()[1]); - expect(listbox.inputs.values()).toEqual(['Apricot']); + expect(listbox.inputs.value()).toEqual(['Apricot']); }); it('should select the first option on input in auto-select mode', () => { type('A'); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); type('Apr'); - expect(listbox.inputs.values()).toEqual(['Apricot']); + expect(listbox.inputs.value()).toEqual(['Apricot']); }); it('should commit the selected option on focusout in auto-select mode', () => { @@ -527,7 +527,7 @@ describe('Combobox with Listbox Pattern', () => { it('should select and commit on click in highlight mode', () => { combobox.onClick(clickOption(listbox.inputs.items(), 3)); expect(listbox.getSelectedItems()[0]).toBe(listbox.inputs.items()[3]); - expect(listbox.inputs.values()).toEqual(['Blackberry']); + expect(listbox.inputs.value()).toEqual(['Blackberry']); expect(inputEl.value).toBe('Blackberry'); }); @@ -537,14 +537,14 @@ describe('Combobox with Listbox Pattern', () => { combobox.onKeydown(down()); combobox.onKeydown(enter()); expect(listbox.getSelectedItems()[0]).toBe(listbox.inputs.items()[2]); - expect(listbox.inputs.values()).toEqual(['Banana']); + expect(listbox.inputs.value()).toEqual(['Banana']); expect(inputEl.value).toBe('Banana'); }); it('should select the first item on arrow down when collapsed in highlight mode', () => { combobox.onKeydown(down()); expect(listbox.getSelectedItems()[0]).toBe(listbox.inputs.items()[0]); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); it('should select the last item on arrow up when collapsed in highlight mode', () => { @@ -552,22 +552,22 @@ describe('Combobox with Listbox Pattern', () => { expect(listbox.getSelectedItems()[0]).toBe( listbox.inputs.items()[listbox.inputs.items().length - 1], ); - expect(listbox.inputs.values()).toEqual(['Cranberry']); + expect(listbox.inputs.value()).toEqual(['Cranberry']); }); it('should select on navigation in highlight mode', () => { combobox.onKeydown(down()); combobox.onKeydown(down()); expect(listbox.getSelectedItems()[0]).toBe(listbox.inputs.items()[1]); - expect(listbox.inputs.values()).toEqual(['Apricot']); + expect(listbox.inputs.value()).toEqual(['Apricot']); }); it('should select the first option on input in highlight mode', () => { type('A'); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); type('Apr'); - expect(listbox.inputs.values()).toEqual(['Apricot']); + expect(listbox.inputs.value()).toEqual(['Apricot']); }); it('should commit the selected option on navigation in highlight mode', () => { @@ -614,7 +614,7 @@ describe('Combobox with Listbox Pattern', () => { const {combobox, listbox, inputEl} = getPatterns({readonly: true}); combobox.onClick(clickOption(listbox.inputs.items(), 2)); expect(listbox.getSelectedItems()[0]).toBe(listbox.inputs.items()[2]); - expect(listbox.inputs.values()).toEqual(['Banana']); + expect(listbox.inputs.value()).toEqual(['Banana']); expect(inputEl.value).toBe('Banana'); expect(combobox.expanded()).toBe(false); }); @@ -636,7 +636,7 @@ describe('Combobox with Listbox Pattern', () => { combobox.onClick(clickOption(listbox.inputs.items(), 1)); combobox.onClick(clickOption(listbox.inputs.items(), 2)); - expect(listbox.inputs.values()).toEqual(['Apricot', 'Banana']); + expect(listbox.inputs.value()).toEqual(['Apricot', 'Banana']); expect(inputEl.value).toBe('Apricot, Banana'); }); }); @@ -778,7 +778,7 @@ describe('Combobox with Tree Pattern', () => { it('should select and commit on click in manual mode for tree', () => { combobox.onClick(clickTreeItem(tree.inputs.items(), 0)); - expect(tree.inputs.values()).toEqual(['Fruit']); + expect(tree.inputs.value()).toEqual(['Fruit']); expect(inputEl.value).toBe('Fruit'); }); @@ -786,7 +786,7 @@ describe('Combobox with Tree Pattern', () => { combobox.onKeydown(down()); combobox.onKeydown(enter()); expect(tree.getSelectedItems()[0]).toBe(tree.inputs.items()[0]); - expect(tree.inputs.values()).toEqual(['Fruit']); + expect(tree.inputs.value()).toEqual(['Fruit']); expect(inputEl.value).toBe('Fruit'); }); @@ -794,37 +794,37 @@ describe('Combobox with Tree Pattern', () => { combobox.onClick(clickInput(inputEl)); type('Apple'); combobox.onFocusOut(new FocusEvent('focusout')); - expect(tree.inputs.values()).toEqual(['Apple']); + expect(tree.inputs.value()).toEqual(['Apple']); }); it('should deselect on close if the input text does not match any options in manual mode for tree', () => { combobox.onKeydown(down()); combobox.onKeydown(enter()); - expect(tree.inputs.values()).toEqual(['Fruit']); + expect(tree.inputs.value()).toEqual(['Fruit']); type('Frui', {backspace: true}); - expect(tree.inputs.values()).toEqual(['Fruit']); + expect(tree.inputs.value()).toEqual(['Fruit']); combobox.onKeydown(escape()); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should not select on navigation in manual mode for tree', () => { combobox.onKeydown(down()); expect(tree.getSelectedItems().length).toBe(0); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should not select on input in manual mode for tree', () => { type('A'); expect(tree.getSelectedItems().length).toBe(0); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should not select on focusout if the input text does not match an item in manual mode for tree', () => { type('Appl'); combobox.onFocusOut(new FocusEvent('focusout')); expect(tree.getSelectedItems().length).toBe(0); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); expect(inputEl.value).toBe('Appl'); }); }); @@ -842,7 +842,7 @@ describe('Combobox with Tree Pattern', () => { combobox.onKeydown(right()); combobox.onClick(clickTreeItem(tree.inputs.items(), 2)); expect(tree.getSelectedItems()[0]).toBe(tree.inputs.items()[2]); - expect(tree.inputs.values()).toEqual(['Banana']); + expect(tree.inputs.value()).toEqual(['Banana']); expect(inputEl.value).toBe('Banana'); }); @@ -851,34 +851,34 @@ describe('Combobox with Tree Pattern', () => { combobox.onKeydown(down()); combobox.onKeydown(down()); combobox.onKeydown(enter()); - expect(tree.inputs.values()).toEqual(['Grains']); + expect(tree.inputs.value()).toEqual(['Grains']); expect(inputEl.value).toBe('Grains'); }); it('should select the first item on arrow down when collapsed in auto-select mode for tree', () => { combobox.onKeydown(down()); expect(tree.getSelectedItems()[0]).toBe(tree.inputs.items()[0]); - expect(tree.inputs.values()).toEqual(['Fruit']); + expect(tree.inputs.value()).toEqual(['Fruit']); }); it('should select the last focusable item on arrow up when collapsed in auto-select mode for tree', () => { combobox.onKeydown(up()); - expect(tree.inputs.values()).toEqual(['Grains']); + expect(tree.inputs.value()).toEqual(['Grains']); }); it('should select on navigation in auto-select mode for tree', () => { combobox.onKeydown(down()); combobox.onKeydown(right()); combobox.onKeydown(right()); - expect(tree.inputs.values()).toEqual(['Apple']); + expect(tree.inputs.value()).toEqual(['Apple']); }); it('should select the first option on input in auto-select mode for tree', () => { type('B'); - expect(tree.inputs.values()).toEqual(['Banana']); + expect(tree.inputs.value()).toEqual(['Banana']); type('Bro'); - expect(tree.inputs.values()).toEqual(['Broccoli']); + expect(tree.inputs.value()).toEqual(['Broccoli']); }); it('should commit the selected option on focusout in auto-select mode for tree', () => { @@ -901,7 +901,7 @@ describe('Combobox with Tree Pattern', () => { combobox.onKeydown(right()); combobox.onClick(clickTreeItem(tree.inputs.items(), 2)); expect(tree.getSelectedItems()[0]).toBe(tree.inputs.items()[2]); - expect(tree.inputs.values()).toEqual(['Banana']); + expect(tree.inputs.value()).toEqual(['Banana']); expect(inputEl.value).toBe('Banana'); }); @@ -910,34 +910,34 @@ describe('Combobox with Tree Pattern', () => { combobox.onKeydown(down()); combobox.onKeydown(down()); combobox.onKeydown(enter()); - expect(tree.inputs.values()).toEqual(['Grains']); + expect(tree.inputs.value()).toEqual(['Grains']); expect(inputEl.value).toBe('Grains'); }); it('should select the first item on arrow down when collapsed in highlight mode for tree', () => { combobox.onKeydown(down()); expect(tree.getSelectedItems()[0]).toBe(tree.inputs.items()[0]); - expect(tree.inputs.values()).toEqual(['Fruit']); + expect(tree.inputs.value()).toEqual(['Fruit']); }); it('should select the last focusable item on arrow up when collapsed in highlight mode for tree', () => { combobox.onKeydown(up()); - expect(tree.inputs.values()).toEqual(['Grains']); + expect(tree.inputs.value()).toEqual(['Grains']); }); it('should select on navigation in highlight mode for tree', () => { combobox.onKeydown(down()); combobox.onKeydown(right()); combobox.onKeydown(right()); - expect(tree.inputs.values()).toEqual(['Apple']); + expect(tree.inputs.value()).toEqual(['Apple']); }); it('should select the first option on input in highlight mode for tree', () => { type('B'); - expect(tree.inputs.values()).toEqual(['Banana']); + expect(tree.inputs.value()).toEqual(['Banana']); type('Bro'); - expect(tree.inputs.values()).toEqual(['Broccoli']); + expect(tree.inputs.value()).toEqual(['Broccoli']); }); it('should commit the selected option on navigation in highlight mode for tree', () => { @@ -947,7 +947,7 @@ describe('Combobox with Tree Pattern', () => { combobox.onKeydown(right()); expect(inputEl.value).toBe('Apple'); combobox.onKeydown(down()); - expect(tree.inputs.values()).toEqual(['Banana']); + expect(tree.inputs.value()).toEqual(['Banana']); }); it('should commit the selected option on focusout in highlight mode for tree', () => { @@ -971,7 +971,7 @@ describe('Combobox with Tree Pattern', () => { combobox.onClick(clickInput(inputEl)); expect(combobox.expanded()).toBe(true); combobox.onClick(clickTreeItem(tree.inputs.items(), 0)); - expect(tree.inputs.values()).toEqual(['Fruit']); + expect(tree.inputs.value()).toEqual(['Fruit']); expect(inputEl.value).toBe('Fruit'); expect(combobox.expanded()).toBe(false); }); diff --git a/src/aria/private/listbox/combobox-listbox.ts b/src/aria/private/listbox/combobox-listbox.ts index 938cd3bd5a83..a23203408bce 100644 --- a/src/aria/private/listbox/combobox-listbox.ts +++ b/src/aria/private/listbox/combobox-listbox.ts @@ -97,7 +97,7 @@ export class ComboboxListboxPattern getSelectedItems = () => { // NOTE: We need to do this funky for loop to preserve the order of the selected values. const items = []; - for (const value of this.inputs.values()) { + for (const value of this.inputs.value()) { const item = this.items().find(i => i.value() === value); if (item) { items.push(item); @@ -107,5 +107,5 @@ export class ComboboxListboxPattern }; /** Sets the value of the combobox listbox. */ - setValue = (value: V | undefined) => this.inputs.values.set(value ? [value] : []); + setValue = (value: V | undefined) => this.inputs.value.set(value ? [value] : []); } diff --git a/src/aria/private/listbox/listbox.spec.ts b/src/aria/private/listbox/listbox.spec.ts index 6aaaab04155d..d367648cffea 100644 --- a/src/aria/private/listbox/listbox.spec.ts +++ b/src/aria/private/listbox/listbox.spec.ts @@ -34,7 +34,7 @@ describe('Listbox Pattern', () => { return new ListboxPattern({ id: signal('listbox-1'), items: inputs.items, - values: inputs.values ?? signal([]), + value: inputs.value ?? signal([]), activeItem: signal(undefined), typeaheadDelay: inputs.typeaheadDelay ?? signal(500), wrap: inputs.wrap ?? signal(true), @@ -51,14 +51,14 @@ describe('Listbox Pattern', () => { } function getOptions(listbox: TestListbox, values: string[]): TestOption[] { - return values.map((value, index) => { + return values.map((val, index) => { const element = document.createElement('div'); element.role = 'option'; return new OptionPattern({ - value: signal(value), + value: signal(val), id: signal(`option-${index}`), disabled: signal(false), - searchTerm: signal(value), + searchTerm: signal(val), listbox: signal(listbox), element: signal(element), }); @@ -174,45 +174,45 @@ describe('Listbox Pattern', () => { describe('follows focus & single select', () => { it('should select an option on navigation (follows focus & single select)', () => { const {listbox} = getDefaultPatterns({ - values: signal(['Apple']), + value: signal(['Apple']), multi: signal(false), selectionMode: signal('follow'), }); expect(listbox.inputs.activeItem()).toBe(listbox.inputs.items()[0]); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(down()); expect(listbox.inputs.activeItem()).toBe(listbox.inputs.items()[1]); - expect(listbox.inputs.values()).toEqual(['Apricot']); + expect(listbox.inputs.value()).toEqual(['Apricot']); listbox.onKeydown(up()); expect(listbox.inputs.activeItem()).toBe(listbox.inputs.items()[0]); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(end()); expect(listbox.inputs.activeItem()).toBe(listbox.inputs.items()[8]); - expect(listbox.inputs.values()).toEqual(['Cranberry']); + expect(listbox.inputs.value()).toEqual(['Cranberry']); listbox.onKeydown(home()); expect(listbox.inputs.activeItem()).toBe(listbox.inputs.items()[0]); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); it('should not be able to change selection when in readonly mode (follows focus & single select)', () => { const {listbox} = getDefaultPatterns({ - values: signal(['Apple']), + value: signal(['Apple']), readonly: signal(true), multi: signal(false), selectionMode: signal('follow'), }); expect(listbox.inputs.activeItem()).toBe(listbox.inputs.items()[0]); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(down()); expect(listbox.inputs.activeItem()).toBe(listbox.inputs.items()[1]); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); }); @@ -221,7 +221,7 @@ describe('Listbox Pattern', () => { beforeEach(() => { listbox = getDefaultPatterns({ - values: signal([]), + value: signal([]), selectionMode: signal('explicit'), multi: signal(false), }).listbox; @@ -229,30 +229,30 @@ describe('Listbox Pattern', () => { it('should select an option on Space (explicit focus & single select)', () => { listbox.onKeydown(space()); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); it('should select an option on Enter (explicit focus & single select)', () => { listbox.onKeydown(enter()); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); it('should only allow one selected option', () => { listbox.onKeydown(enter()); listbox.onKeydown(down()); listbox.onKeydown(enter()); - expect(listbox.inputs.values()).toEqual(['Apricot']); + expect(listbox.inputs.value()).toEqual(['Apricot']); }); it('should not be able to change selection when in readonly mode (explicit focus & single select)', () => { const readonly = listbox.inputs.readonly as WritableSignalLike; readonly.set(true); listbox.onKeydown(space()); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); listbox.onKeydown(down()); listbox.onKeydown(enter()); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); }); }); @@ -262,7 +262,7 @@ describe('Listbox Pattern', () => { beforeEach(() => { const patterns = getDefaultPatterns({ - values: signal([]), + value: signal([]), selectionMode: signal('explicit'), multi: signal(true), }); @@ -272,37 +272,37 @@ describe('Listbox Pattern', () => { it('should select an option on Space (explicit focus & multi select)', () => { listbox.onKeydown(space()); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); it('should select an option on Enter (explicit focus & multi select)', () => { listbox.onKeydown(enter()); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); it('should allow multiple selected options', () => { listbox.onKeydown(enter()); listbox.onKeydown(down()); listbox.onKeydown(enter()); - expect(listbox.inputs.values()).toEqual(['Apple', 'Apricot']); + expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']); }); it('should select a range of options on Shift + ArrowDown/ArrowUp (explicit focus & multi select)', () => { listbox.onKeydown(shift()); listbox.onKeydown(down({shift: true})); - expect(listbox.inputs.values()).toEqual(['Apple', 'Apricot']); + expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']); listbox.onKeydown(down({shift: true})); - expect(listbox.inputs.values()).toEqual(['Apple', 'Apricot', 'Banana']); + expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot', 'Banana']); listbox.onKeydown(up({shift: true})); - expect(listbox.inputs.values()).toEqual(['Apple', 'Apricot']); + expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']); listbox.onKeydown(up({shift: true})); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); it('should not allow wrapping while Shift is held down (explicit focus & multi select)', () => { listbox.onKeydown(shift()); listbox.onKeydown(up({shift: true})); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); }); it('should select a range of options on Shift + Space (or Enter) (explicit focus & multi select)', () => { @@ -312,20 +312,20 @@ describe('Listbox Pattern', () => { listbox.onKeydown(down()); listbox.onKeydown(shift()); listbox.onKeydown(space({shift: true})); - expect(listbox.inputs.values()).toEqual(['Apricot', 'Banana', 'Blackberry']); + expect(listbox.inputs.value()).toEqual(['Apricot', 'Banana', 'Blackberry']); }); it('should deselect options outside the range on subsequent on Shift + Space (or Enter) (explicit focus & multi select)', () => { listbox.onKeydown(down()); listbox.onKeydown(down()); listbox.onKeydown(space()); - expect(listbox.inputs.values()).toEqual(['Banana']); + expect(listbox.inputs.value()).toEqual(['Banana']); listbox.onKeydown(down()); listbox.onKeydown(down()); listbox.onKeydown(shift()); listbox.onKeydown(space({shift: true})); - expect(listbox.inputs.values()).toEqual(['Banana', 'Blackberry', 'Blueberry']); + expect(listbox.inputs.value()).toEqual(['Banana', 'Blackberry', 'Blueberry']); listbox.onKeydown(up()); listbox.onKeydown(up()); @@ -333,7 +333,7 @@ describe('Listbox Pattern', () => { listbox.onKeydown(up()); listbox.onKeydown(shift()); listbox.onKeydown(space({shift: true})); - expect(listbox.inputs.values()).toEqual(['Banana', 'Apricot', 'Apple']); + expect(listbox.inputs.value()).toEqual(['Banana', 'Apricot', 'Apple']); }); it('should select the focused option and all options up to the first option on Ctrl + Shift + Home (explicit focus & multi select)', () => { @@ -342,7 +342,7 @@ describe('Listbox Pattern', () => { listbox.onKeydown(down()); listbox.onKeydown(shift()); listbox.onKeydown(home({control: true, shift: true})); - expect(listbox.inputs.values()).toEqual(['Blackberry', 'Banana', 'Apricot', 'Apple']); + expect(listbox.inputs.value()).toEqual(['Blackberry', 'Banana', 'Apricot', 'Apple']); }); it('should select the focused option and all options down to the last option on Ctrl + Shift + End (explicit focus & multi select)', () => { @@ -353,36 +353,31 @@ describe('Listbox Pattern', () => { listbox.onKeydown(down()); listbox.onKeydown(shift()); listbox.onKeydown(end({control: true, shift: true})); - expect(listbox.inputs.values()).toEqual([ - 'Cantaloupe', - 'Cherry', - 'Clementine', - 'Cranberry', - ]); + expect(listbox.inputs.value()).toEqual(['Cantaloupe', 'Cherry', 'Clementine', 'Cranberry']); }); it('should not be able to change selection when in readonly mode (explicit focus & multi select)', () => { const readonly = listbox.inputs.readonly as WritableSignalLike; readonly.set(true); listbox.onKeydown(space()); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); listbox.onKeydown(down()); listbox.onKeydown(enter()); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); listbox.onKeydown(shift()); listbox.onKeydown(up({shift: true})); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); listbox.onKeydown(down({shift: true})); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); listbox.onKeydown(end({control: true, shift: true})); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); listbox.onKeydown(home({control: true, shift: true})); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); }); it('should not change the selected state of disabled options on Shift + ArrowUp / ArrowDown', () => { @@ -390,19 +385,19 @@ describe('Listbox Pattern', () => { options[1].disabled.set(true); listbox.onKeydown(shift()); listbox.onKeydown(down({shift: true})); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(down({shift: true})); - expect(listbox.inputs.values()).toEqual(['Apple', 'Banana']); + expect(listbox.inputs.value()).toEqual(['Apple', 'Banana']); listbox.onKeydown(up({shift: true})); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(up({shift: true})); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); it('should select all options on Ctrl + A', () => { - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); listbox.onKeydown(a({control: true})); - expect(listbox.inputs.values()).toEqual([ + expect(listbox.inputs.value()).toEqual([ 'Apple', 'Apricot', 'Banana', @@ -416,10 +411,10 @@ describe('Listbox Pattern', () => { }); it('should deselect all options on Ctrl + A if all options are selected', () => { - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); listbox.onKeydown(a({control: true})); listbox.onKeydown(a({control: true})); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); }); }); @@ -429,7 +424,7 @@ describe('Listbox Pattern', () => { beforeEach(() => { const patterns = getDefaultPatterns({ - values: signal(['Apple']), + value: signal(['Apple']), multi: signal(true), selectionMode: signal('follow'), }); @@ -438,25 +433,25 @@ describe('Listbox Pattern', () => { }); it('should select an option on navigation (follows focus & multi select)', () => { - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(down()); - expect(listbox.inputs.values()).toEqual(['Apricot']); + expect(listbox.inputs.value()).toEqual(['Apricot']); listbox.onKeydown(up()); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(end()); - expect(listbox.inputs.values()).toEqual(['Cranberry']); + expect(listbox.inputs.value()).toEqual(['Cranberry']); listbox.onKeydown(home()); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); it('should navigate without selecting an option if the Ctrl key is pressed', () => { - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(down({control: true})); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(up({control: true})); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(end({control: true})); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(home({control: true})); }); @@ -464,26 +459,26 @@ describe('Listbox Pattern', () => { listbox.onKeydown(down({control: true})); listbox.onKeydown(down({control: true})); listbox.onKeydown(space({control: true})); - expect(listbox.inputs.values()).toEqual(['Apple', 'Banana']); + expect(listbox.inputs.value()).toEqual(['Apple', 'Banana']); }); it('should select a range of options on Shift + ArrowDown/ArrowUp (follows focus & multi select)', () => { listbox.onKeydown(shift()); listbox.onKeydown(down({shift: true})); - expect(listbox.inputs.values()).toEqual(['Apple', 'Apricot']); + expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']); listbox.onKeydown(down({shift: true})); - expect(listbox.inputs.values()).toEqual(['Apple', 'Apricot', 'Banana']); + expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot', 'Banana']); listbox.onKeydown(up({shift: true})); - expect(listbox.inputs.values()).toEqual(['Apple', 'Apricot']); + expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']); listbox.onKeydown(up({shift: true})); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); it('should not allow wrapping while Shift is held down (follows focus & multi select)', () => { listbox.listBehavior.deselectAll(); listbox.onKeydown(shift()); listbox.onKeydown(up({shift: true})); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); }); it('should select a range of options on Shift + Space (or Enter) (follows focus & multi select)', () => { @@ -492,19 +487,19 @@ describe('Listbox Pattern', () => { listbox.onKeydown(down({control: true})); listbox.onKeydown(shift()); listbox.onKeydown(space({shift: true})); - expect(listbox.inputs.values()).toEqual(['Apricot', 'Banana', 'Blackberry']); + expect(listbox.inputs.value()).toEqual(['Apricot', 'Banana', 'Blackberry']); }); it('should deselect options outside the range on subsequent on Shift + Space (or Enter) (follows focus & multi select)', () => { listbox.onKeydown(down()); listbox.onKeydown(down()); - expect(listbox.inputs.values()).toEqual(['Banana']); + expect(listbox.inputs.value()).toEqual(['Banana']); listbox.onKeydown(down({control: true})); listbox.onKeydown(down({control: true})); listbox.onKeydown(shift()); listbox.onKeydown(space({shift: true})); - expect(listbox.inputs.values()).toEqual(['Banana', 'Blackberry', 'Blueberry']); + expect(listbox.inputs.value()).toEqual(['Banana', 'Blackberry', 'Blueberry']); listbox.onKeydown(up({control: true})); listbox.onKeydown(up({control: true})); @@ -512,7 +507,7 @@ describe('Listbox Pattern', () => { listbox.onKeydown(up({control: true})); listbox.onKeydown(shift()); listbox.onKeydown(space({shift: true})); - expect(listbox.inputs.values()).toEqual(['Banana', 'Apricot', 'Apple']); + expect(listbox.inputs.value()).toEqual(['Banana', 'Apricot', 'Apple']); }); it('should select the focused option and all options up to the first option on Ctrl + Shift + Home (follows focus & multi select)', () => { @@ -521,7 +516,7 @@ describe('Listbox Pattern', () => { listbox.onKeydown(down()); listbox.onKeydown(shift()); listbox.onKeydown(home({control: true, shift: true})); - expect(listbox.inputs.values()).toEqual(['Blackberry', 'Banana', 'Apricot', 'Apple']); + expect(listbox.inputs.value()).toEqual(['Blackberry', 'Banana', 'Apricot', 'Apple']); }); it('should select the focused option and all options down to the last option on Ctrl + Shift + End (follows focus & multi select)', () => { @@ -532,43 +527,38 @@ describe('Listbox Pattern', () => { listbox.onKeydown(down()); listbox.onKeydown(shift()); listbox.onKeydown(end({control: true, shift: true})); - expect(listbox.inputs.values()).toEqual([ - 'Cantaloupe', - 'Cherry', - 'Clementine', - 'Cranberry', - ]); + expect(listbox.inputs.value()).toEqual(['Cantaloupe', 'Cherry', 'Clementine', 'Cranberry']); }); it('should not be able to change selection when in readonly mode (follows focus & multi select)', () => { const readonly = listbox.inputs.readonly as WritableSignalLike; readonly.set(true); listbox.onKeydown(down()); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(up()); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(space({control: true})); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); it('should not select disabled options', () => { options[2].disabled.set(true); (listbox.inputs.softDisabled as WritableSignalLike).set(true); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(down()); - expect(listbox.inputs.values()).toEqual(['Apricot']); + expect(listbox.inputs.value()).toEqual(['Apricot']); listbox.onKeydown(down()); - expect(listbox.inputs.values()).toEqual(['Apricot']); + expect(listbox.inputs.value()).toEqual(['Apricot']); listbox.onKeydown(down()); - expect(listbox.inputs.values()).toEqual(['Blackberry']); + expect(listbox.inputs.value()).toEqual(['Blackberry']); }); it('should deselect all except one option on Ctrl + A if all options are selected', () => { listbox.onKeydown(a({control: true})); listbox.onKeydown(a({control: true})); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); }); }); @@ -589,7 +579,7 @@ describe('Listbox Pattern', () => { selectionMode: signal('follow'), }); listbox.onPointerdown(click(options, 0)); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); }); @@ -600,17 +590,17 @@ describe('Listbox Pattern', () => { selectionMode: signal('explicit'), }); listbox.onPointerdown(click(options, 0)); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); it('should deselect a selected option on click (explicit focus & single select)', () => { const {listbox, options} = getDefaultPatterns({ multi: signal(false), - values: signal(['Apple']), + value: signal(['Apple']), selectionMode: signal('explicit'), }); listbox.onPointerdown(click(options, 0)); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); }); }); @@ -621,17 +611,17 @@ describe('Listbox Pattern', () => { selectionMode: signal('explicit'), }); listbox.onPointerdown(click(options, 0)); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); it('should deselect a selected option on click (explicit focus & multi select)', () => { const {listbox, options} = getDefaultPatterns({ multi: signal(true), - values: signal(['Apple']), + value: signal(['Apple']), selectionMode: signal('explicit'), }); listbox.onPointerdown(click(options, 0)); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); }); it('should select options from anchor on shift + click', () => { @@ -642,12 +632,7 @@ describe('Listbox Pattern', () => { listbox.onPointerdown(click(options, 2)); listbox.onKeydown(shift()); listbox.onPointerdown(click(options, 5, {shift: true})); - expect(listbox.inputs.values()).toEqual([ - 'Banana', - 'Blackberry', - 'Blueberry', - 'Cantaloupe', - ]); + expect(listbox.inputs.value()).toEqual(['Banana', 'Blackberry', 'Blueberry', 'Cantaloupe']); }); it('should deselect options outside the range on subsequent shift + clicks (explicit focus & multi select)', () => { @@ -658,14 +643,9 @@ describe('Listbox Pattern', () => { listbox.onPointerdown(click(options, 2)); listbox.onKeydown(shift()); listbox.onPointerdown(click(options, 5, {shift: true})); - expect(listbox.inputs.values()).toEqual([ - 'Banana', - 'Blackberry', - 'Blueberry', - 'Cantaloupe', - ]); + expect(listbox.inputs.value()).toEqual(['Banana', 'Blackberry', 'Blueberry', 'Cantaloupe']); listbox.onPointerdown(click(options, 0, {shift: true})); - expect(listbox.inputs.values()).toEqual(['Banana', 'Apricot', 'Apple']); + expect(listbox.inputs.value()).toEqual(['Banana', 'Apricot', 'Apple']); }); }); @@ -676,11 +656,11 @@ describe('Listbox Pattern', () => { selectionMode: signal('follow'), }); listbox.onPointerdown(click(options, 0)); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onPointerdown(click(options, 1)); - expect(listbox.inputs.values()).toEqual(['Apricot']); + expect(listbox.inputs.value()).toEqual(['Apricot']); listbox.onPointerdown(click(options, 2)); - expect(listbox.inputs.values()).toEqual(['Banana']); + expect(listbox.inputs.value()).toEqual(['Banana']); }); it('should select an unselected option on ctrl + click', () => { @@ -689,11 +669,11 @@ describe('Listbox Pattern', () => { selectionMode: signal('follow'), }); listbox.onPointerdown(click(options, 0)); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onPointerdown(click(options, 1, {control: true})); - expect(listbox.inputs.values()).toEqual(['Apple', 'Apricot']); + expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']); listbox.onPointerdown(click(options, 2, {control: true})); - expect(listbox.inputs.values()).toEqual(['Apple', 'Apricot', 'Banana']); + expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot', 'Banana']); }); it('should deselect a selected option on ctrl + click', () => { @@ -702,9 +682,9 @@ describe('Listbox Pattern', () => { selectionMode: signal('follow'), }); listbox.onPointerdown(click(options, 0)); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onPointerdown(click(options, 0, {control: true})); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); }); it('should select a range of options on shift + click', () => { @@ -715,12 +695,7 @@ describe('Listbox Pattern', () => { listbox.onPointerdown(click(options, 2)); listbox.onKeydown(shift()); listbox.onPointerdown(click(options, 5, {shift: true})); - expect(listbox.inputs.values()).toEqual([ - 'Banana', - 'Blackberry', - 'Blueberry', - 'Cantaloupe', - ]); + expect(listbox.inputs.value()).toEqual(['Banana', 'Blackberry', 'Blueberry', 'Cantaloupe']); }); it('should deselect options outside the range on subsequent shift + clicks (follows focus & multi select)', () => { @@ -731,14 +706,9 @@ describe('Listbox Pattern', () => { listbox.onPointerdown(click(options, 2)); listbox.onKeydown(shift()); listbox.onPointerdown(click(options, 5, {shift: true})); - expect(listbox.inputs.values()).toEqual([ - 'Banana', - 'Blackberry', - 'Blueberry', - 'Cantaloupe', - ]); + expect(listbox.inputs.value()).toEqual(['Banana', 'Blackberry', 'Blueberry', 'Cantaloupe']); listbox.onPointerdown(click(options, 0, {shift: true})); - expect(listbox.inputs.values()).toEqual(['Banana', 'Apricot', 'Apple']); + expect(listbox.inputs.value()).toEqual(['Banana', 'Apricot', 'Apple']); }); it('should select a range up to but not including a disabled option on shift + click', () => { @@ -749,11 +719,11 @@ describe('Listbox Pattern', () => { }); options[2].disabled.set(true); listbox.onPointerdown(click(options, 0)); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(shift()); listbox.onPointerdown(click(options, 2, {shift: true})); - expect(listbox.inputs.values()).toEqual(['Apple', 'Apricot']); + expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']); expect(listbox.inputs.activeItem()).toEqual(options[2]); }); @@ -765,11 +735,11 @@ describe('Listbox Pattern', () => { }); options[2].disabled.set(true); listbox.onPointerdown(click(options, 0)); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(down({control: true})); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onPointerdown(click(options, 2)); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); }); }); @@ -779,11 +749,11 @@ describe('Listbox Pattern', () => { selectionMode: signal('follow'), }); listbox.onPointerdown(click(options, 0)); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); listbox.onPointerdown(click(options, 1)); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); listbox.onPointerdown(click(options, 2)); - expect(listbox.inputs.values()).toEqual([]); + expect(listbox.inputs.value()).toEqual([]); }); it('should maintain the range selection between pointer and keyboard', () => { @@ -797,9 +767,9 @@ describe('Listbox Pattern', () => { listbox.onKeydown(shift()); listbox.onKeydown(space({shift: true})); - expect(listbox.inputs.values()).toEqual(['Banana', 'Blackberry', 'Blueberry']); + expect(listbox.inputs.value()).toEqual(['Banana', 'Blackberry', 'Blueberry']); listbox.onPointerdown(click(options, 0, {shift: true})); - expect(listbox.inputs.values()).toEqual(['Banana', 'Apricot', 'Apple']); + expect(listbox.inputs.value()).toEqual(['Banana', 'Apricot', 'Apple']); }); it('should select a range from the currently focused option', () => { @@ -808,12 +778,12 @@ describe('Listbox Pattern', () => { selectionMode: signal('follow'), }); listbox.onPointerdown(click(options, 0)); - expect(listbox.inputs.values()).toEqual(['Apple']); + expect(listbox.inputs.value()).toEqual(['Apple']); listbox.onKeydown(down({control: true})); listbox.onKeydown(down({control: true})); listbox.onKeydown(shift()); listbox.onPointerdown(click(options, 4, {shift: true})); - expect(listbox.inputs.values()).toEqual(['Apple', 'Banana', 'Blackberry', 'Blueberry']); + expect(listbox.inputs.value()).toEqual(['Apple', 'Banana', 'Blackberry', 'Blueberry']); }); }); @@ -835,7 +805,7 @@ describe('Listbox Pattern', () => { it('should set the active index to the first selected option', () => { const {listbox} = getDefaultPatterns({ - values: signal(['Banana']), + value: signal(['Banana']), softDisabled: signal(false), }); listbox.setDefaultState(); @@ -844,7 +814,7 @@ describe('Listbox Pattern', () => { it('should set the active index to the first focusable selected option', () => { const {listbox, options} = getDefaultPatterns({ - values: signal(['Banana', 'Blackberry']), + value: signal(['Banana', 'Blackberry']), softDisabled: signal(false), }); options[2].disabled.set(true); @@ -854,7 +824,7 @@ describe('Listbox Pattern', () => { it('should set the active index to the first option if no selected option is focusable', () => { const {listbox, options} = getDefaultPatterns({ - values: signal(['Banana']), + value: signal(['Banana']), softDisabled: signal(false), }); options[2].disabled.set(true); diff --git a/src/aria/private/listbox/listbox.ts b/src/aria/private/listbox/listbox.ts index 0c927989f2c1..9e8ebf6a7edf 100644 --- a/src/aria/private/listbox/listbox.ts +++ b/src/aria/private/listbox/listbox.ts @@ -206,9 +206,9 @@ export class ListboxPattern { validate(): string[] { const violations: string[] = []; - if (!this.inputs.multi() && this.inputs.values().length > 1) { + if (!this.inputs.multi() && this.inputs.value().length > 1) { violations.push( - `A single-select listbox should not have multiple selected options. Selected options: ${this.inputs.values().join(', ')}`, + `A single-select listbox should not have multiple selected options. Selected options: ${this.inputs.value().join(', ')}`, ); } diff --git a/src/aria/private/listbox/option.ts b/src/aria/private/listbox/option.ts index 69930a3ec06b..c7daacf1bf45 100644 --- a/src/aria/private/listbox/option.ts +++ b/src/aria/private/listbox/option.ts @@ -38,7 +38,7 @@ export class OptionPattern { active = computed(() => this.listbox()?.inputs.activeItem() === this); /** Whether the option is selected. */ - selected = computed(() => this.listbox()?.inputs.values().includes(this.value())); + selected = computed(() => this.listbox()?.inputs.value().includes(this.value())); /** Whether the option is selectable. */ selectable = () => true; diff --git a/src/aria/private/menu/menu.spec.ts b/src/aria/private/menu/menu.spec.ts index f46d4d1f688a..4834519e9eda 100644 --- a/src/aria/private/menu/menu.spec.ts +++ b/src/aria/private/menu/menu.spec.ts @@ -59,7 +59,7 @@ function getMenuBarPattern(values: string[], opts?: {textDirection: 'ltr' | 'rtl textDirection: signal(opts?.textDirection || 'ltr'), multi: signal(false), selectionMode: signal('explicit'), - values: signal([]), + value: signal([]), wrap: signal(true), typeaheadDelay: signal(500), softDisabled: signal(true), diff --git a/src/aria/private/menu/menu.ts b/src/aria/private/menu/menu.ts index 04f3449d7025..48b623472e36 100644 --- a/src/aria/private/menu/menu.ts +++ b/src/aria/private/menu/menu.ts @@ -23,7 +23,7 @@ export interface MenuBarInputs extends ListInputs, V> { } /** The inputs for the MenuPattern class. */ -export interface MenuInputs extends Omit, V>, 'values'> { +export interface MenuInputs extends Omit, V>, 'value'> { /** The unique ID of the menu. */ id: SignalLike; @@ -174,7 +174,7 @@ export class MenuPattern { this.id = inputs.id; this.listBehavior = new List, V>({ ...inputs, - values: signal([]), + value: signal([]), }); } diff --git a/src/aria/private/toolbar/toolbar-widget.ts b/src/aria/private/toolbar/toolbar-widget.ts index 28cfbc9edfd4..4239de8b2727 100644 --- a/src/aria/private/toolbar/toolbar-widget.ts +++ b/src/aria/private/toolbar/toolbar-widget.ts @@ -56,7 +56,7 @@ export class ToolbarWidgetPattern implements ListItem { /** Whether the widget is selected (only relevant in a selection group). */ readonly selected = computed(() => - this.toolbar().listBehavior.inputs.values().includes(this.value()), + this.toolbar().listBehavior.inputs.value().includes(this.value()), ); /** Whether the widget is currently the active one (focused). */ diff --git a/src/aria/private/toolbar/toolbar.spec.ts b/src/aria/private/toolbar/toolbar.spec.ts index 08a26a3031b5..0a5e7c4cf74c 100644 --- a/src/aria/private/toolbar/toolbar.spec.ts +++ b/src/aria/private/toolbar/toolbar.spec.ts @@ -79,7 +79,7 @@ function getToolbarPattern( element, items, activeItem, - values: signal([]), + value: signal([]), wrap: signal(inputs.wrap ?? true), disabled: signal(inputs.disabled ?? false), softDisabled: signal(inputs.softDisabled ?? true), diff --git a/src/aria/private/tree/combobox-tree.ts b/src/aria/private/tree/combobox-tree.ts index fccec240ea6e..fc806021684e 100644 --- a/src/aria/private/tree/combobox-tree.ts +++ b/src/aria/private/tree/combobox-tree.ts @@ -94,7 +94,7 @@ export class ComboboxTreePattern getSelectedItems = () => this.inputs.items().filter(item => item.selected()); /** Sets the value of the combobox tree. */ - setValue = (value: V | undefined) => this.inputs.values.set(value ? [value] : []); + setValue = (value: V | undefined) => this.inputs.value.set(value ? [value] : []); /** Expands the currently focused item if it is expandable, or navigates to the first child. */ expandItem = () => this._expandOrFirstChild(); diff --git a/src/aria/private/tree/tree.spec.ts b/src/aria/private/tree/tree.spec.ts index a8d2564d0bd4..57e658346a6d 100644 --- a/src/aria/private/tree/tree.spec.ts +++ b/src/aria/private/tree/tree.spec.ts @@ -153,7 +153,7 @@ describe('Tree Pattern', () => { softDisabled: signal(true), textDirection: signal('ltr'), typeaheadDelay: signal(0), - values: signal([]), + value: signal([]), wrap: signal(false), nav: signal(false), currentType: signal('page'), @@ -207,7 +207,7 @@ describe('Tree Pattern', () => { softDisabled: signal(true), textDirection: signal('ltr'), typeaheadDelay: signal(0), - values: signal([]), + value: signal([]), wrap: signal(false), nav: signal(true), currentType: signal('page'), @@ -218,7 +218,7 @@ describe('Tree Pattern', () => { it('should have undefined selected state', () => { const {items} = createTree(treeExample, treeInputs); const item0 = getItemByValue(items(), 'Item 0'); - treeInputs.values.set(['Item 0']); + treeInputs.value.set(['Item 0']); expect(item0.selected()).toBeUndefined(); }); @@ -227,11 +227,11 @@ describe('Tree Pattern', () => { const item0 = getItemByValue(items(), 'Item 0'); const item1 = getItemByValue(items(), 'Item 1'); - treeInputs.values.set(['Item 0']); + treeInputs.value.set(['Item 0']); expect(item0.current()).toBe('page'); expect(item1.current()).toBeUndefined(); - treeInputs.values.set(['Item 1']); + treeInputs.value.set(['Item 1']); treeInputs.currentType.set('step'); expect(item0.current()).toBeUndefined(); expect(item1.current()).toBe('step'); @@ -240,7 +240,7 @@ describe('Tree Pattern', () => { it('should have undefined current state when non-selectable', () => { const {items, itemPatternInputsMap} = createTree(treeExample, treeInputs); const item0 = getItemByValue(items(), 'Item 0'); - treeInputs.values.set(['Item 0']); + treeInputs.value.set(['Item 0']); expect(item0.current()).toBe('page'); itemPatternInputsMap.get(item0.id())!.selectable.set(false); expect(item0.current()).toBeUndefined(); @@ -263,7 +263,7 @@ describe('Tree Pattern', () => { softDisabled: signal(true), textDirection: signal('ltr'), typeaheadDelay: signal(0), - values: signal([]), + value: signal([]), wrap: signal(false), nav: signal(false), currentType: signal('page'), @@ -449,7 +449,7 @@ describe('Tree Pattern', () => { softDisabled: signal(true), textDirection: signal('ltr'), typeaheadDelay: signal(0), - values: signal([]), + value: signal([]), wrap: signal(false), nav: signal(false), currentType: signal('page'), @@ -462,11 +462,11 @@ describe('Tree Pattern', () => { const item0 = getItemByValue(items(), 'Item 0'); const item1 = getItemByValue(items(), 'Item 1'); - treeInputs.values.set(['Item 0']); + treeInputs.value.set(['Item 0']); expect(item0.selected()).toBe(true); expect(item1.selected()).toBe(false); - treeInputs.values.set(['Item 1']); + treeInputs.value.set(['Item 1']); expect(item0.selected()).toBe(false); expect(item1.selected()).toBe(true); }); @@ -474,7 +474,7 @@ describe('Tree Pattern', () => { it('should have undefined selected state when non-selectable', () => { const {items, itemPatternInputsMap} = createTree(treeExample, treeInputs); const item0 = getItemByValue(items(), 'Item 0'); - treeInputs.values.set(['Item 0']); + treeInputs.value.set(['Item 0']); itemPatternInputsMap.get(item0.id())!.selectable.set(false); expect(item0.selected()).toBeUndefined(); }); @@ -486,11 +486,11 @@ describe('Tree Pattern', () => { tree.onKeydown(down()); expect(tree.activeItem()).toBe(item1); - expect(tree.inputs.values()).toEqual(['Item 1']); + expect(tree.inputs.value()).toEqual(['Item 1']); tree.onKeydown(up()); expect(tree.activeItem()).toBe(item0); - expect(tree.inputs.values()).toEqual(['Item 0']); + expect(tree.inputs.value()).toEqual(['Item 0']); }); it('should not change selection when the tree is disabled in follows focus & single select mode', () => { @@ -498,7 +498,7 @@ describe('Tree Pattern', () => { const {tree} = createTree(treeExample, treeInputs); tree.onKeydown(down()); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); }); @@ -517,7 +517,7 @@ describe('Tree Pattern', () => { softDisabled: signal(true), textDirection: signal('ltr'), typeaheadDelay: signal(0), - values: signal([]), + value: signal([]), wrap: signal(false), nav: signal(false), currentType: signal('page'), @@ -529,45 +529,45 @@ describe('Tree Pattern', () => { const {tree} = createTree(treeExample, treeInputs); tree.onKeydown(space()); - expect(tree.inputs.values()).toEqual(['Item 0']); + expect(tree.inputs.value()).toEqual(['Item 0']); }); it('should not deselect an item on Space', () => { const {tree} = createTree(treeExample, treeInputs); tree.onKeydown(space()); - expect(tree.inputs.values()).toEqual(['Item 0']); + expect(tree.inputs.value()).toEqual(['Item 0']); tree.onKeydown(space()); - expect(tree.inputs.values()).toEqual(['Item 0']); + expect(tree.inputs.value()).toEqual(['Item 0']); }); it('should select an item on Enter in explicit focus & single select mode', () => { const {tree} = createTree(treeExample, treeInputs); tree.onKeydown(enter()); - expect(tree.inputs.values()).toEqual(['Item 0']); + expect(tree.inputs.value()).toEqual(['Item 0']); }); it('should not deselect an item on Enter', () => { const {tree} = createTree(treeExample, treeInputs); tree.onKeydown(enter()); - expect(tree.inputs.values()).toEqual(['Item 0']); + expect(tree.inputs.value()).toEqual(['Item 0']); tree.onKeydown(enter()); - expect(tree.inputs.values()).toEqual(['Item 0']); + expect(tree.inputs.value()).toEqual(['Item 0']); }); it('should only allow one selected item', () => { const {tree} = createTree(treeExample, treeInputs); tree.onKeydown(enter()); - expect(tree.inputs.values()).toEqual(['Item 0']); + expect(tree.inputs.value()).toEqual(['Item 0']); tree.onKeydown(down()); tree.onKeydown(enter()); - expect(tree.inputs.values()).toEqual(['Item 1']); + expect(tree.inputs.value()).toEqual(['Item 1']); }); it('should not change selection when the tree is disabled in explicit focus & single select mode', () => { @@ -575,10 +575,10 @@ describe('Tree Pattern', () => { const {tree} = createTree(treeExample, treeInputs); tree.onKeydown(space()); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); tree.onKeydown(enter()); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); }); @@ -597,7 +597,7 @@ describe('Tree Pattern', () => { softDisabled: signal(true), textDirection: signal('ltr'), typeaheadDelay: signal(0), - values: signal([]), + value: signal([]), wrap: signal(false), nav: signal(false), currentType: signal('page'), @@ -609,14 +609,14 @@ describe('Tree Pattern', () => { const {tree} = createTree(treeExample, treeInputs); tree.onKeydown(space()); - expect(tree.inputs.values()).toEqual(['Item 0']); + expect(tree.inputs.value()).toEqual(['Item 0']); }); it('should select an item on Enter in explicit focus & multi select mode', () => { const {tree} = createTree(treeExample, treeInputs); tree.onKeydown(enter()); - expect(tree.inputs.values()).toEqual(['Item 0']); + expect(tree.inputs.value()).toEqual(['Item 0']); }); it('should allow multiple selected items', () => { @@ -625,7 +625,7 @@ describe('Tree Pattern', () => { tree.onKeydown(enter()); tree.onKeydown(down()); tree.onKeydown(enter()); - expect(tree.inputs.values()).toEqual(['Item 0', 'Item 1']); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 1']); }); it('should select a range of visible items on Shift + ArrowDown/ArrowUp in explicit focus & multi select mode', () => { @@ -635,13 +635,13 @@ describe('Tree Pattern', () => { tree.onKeydown(shift()); tree.onKeydown(down({shift: true})); - expect(tree.inputs.values()).toEqual(['Item 0', 'Item 0-0']); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0']); tree.onKeydown(down({shift: true})); - expect(tree.inputs.values()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1']); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1']); tree.onKeydown(up({shift: true})); - expect(tree.inputs.values()).toEqual(['Item 0', 'Item 0-0']); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0']); }); it('should not allow wrapping while Shift is held down in explicit focus & multi select mode', () => { @@ -651,7 +651,7 @@ describe('Tree Pattern', () => { tree.onKeydown(shift()); tree.onKeydown(up({shift: true})); expect(tree.activeItem()).toBe(item0); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should select a range of visible items on Shift + Space (or Enter) in explicit focus & multi select mode', () => { @@ -661,13 +661,13 @@ describe('Tree Pattern', () => { tree.onKeydown(down()); tree.onKeydown(space()); - expect(tree.inputs.values()).toEqual(['Item 0-0']); + expect(tree.inputs.value()).toEqual(['Item 0-0']); tree.onKeydown(down()); tree.onKeydown(down()); tree.onKeydown(shift()); tree.onKeydown(space({shift: true})); - expect(tree.inputs.values()).toEqual(['Item 0-0', 'Item 0-1', 'Item 1']); + expect(tree.inputs.value()).toEqual(['Item 0-0', 'Item 0-1', 'Item 1']); }); it('should select the focused item and all visible items up to the first on Ctrl + Shift + Home in explicit focus & multi select mode', () => { @@ -679,7 +679,7 @@ describe('Tree Pattern', () => { tree.onKeydown(shift()); tree.onKeydown(home({control: true, shift: true})); - expect(tree.inputs.values()).toEqual(['Item 1', 'Item 0-1', 'Item 0-0', 'Item 0']); + expect(tree.inputs.value()).toEqual(['Item 1', 'Item 0-1', 'Item 0-0', 'Item 0']); }); it('should select the focused item and all visible items down to the last on Ctrl + Shift + End in explicit focus & multi select mode', () => { @@ -691,7 +691,7 @@ describe('Tree Pattern', () => { tree.onKeydown(shift()); tree.onKeydown(end({control: true, shift: true})); - expect(tree.inputs.values()).toEqual(['Item 0-0', 'Item 0-1', 'Item 1', 'Item 2']); + expect(tree.inputs.value()).toEqual(['Item 0-0', 'Item 0-1', 'Item 1', 'Item 2']); }); it('should not change selection when the tree is disabled in explicit focus & multi select mode', () => { @@ -699,10 +699,10 @@ describe('Tree Pattern', () => { const {tree} = createTree(treeExample, treeInputs); tree.onKeydown(space()); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); tree.onKeydown(a({control: true})); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should not select disabled items on Shift + ArrowUp / ArrowDown', () => { @@ -719,7 +719,7 @@ describe('Tree Pattern', () => { tree.onKeydown(shift()); tree.onKeydown(down({shift: true})); tree.onKeydown(down({shift: true})); - expect(tree.inputs.values()).toEqual(['A', 'C']); + expect(tree.inputs.value()).toEqual(['A', 'C']); }); it('should not select non-selectable items on Shift + ArrowUp / ArrowDown', () => { @@ -735,7 +735,7 @@ describe('Tree Pattern', () => { tree.onKeydown(shift()); tree.onKeydown(down({shift: true})); tree.onKeydown(down({shift: true})); - expect(tree.inputs.values()).toEqual(['A', 'C']); + expect(tree.inputs.value()).toEqual(['A', 'C']); }); it('should select all visible items on Ctrl + A', () => { @@ -744,13 +744,7 @@ describe('Tree Pattern', () => { item0.expanded.set(true); tree.onKeydown(a({control: true})); - expect(tree.inputs.values()).toEqual([ - 'Item 0', - 'Item 0-0', - 'Item 0-1', - 'Item 1', - 'Item 2', - ]); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1', 'Item 1', 'Item 2']); }); it('should deselect all visible items on Ctrl + A if all are selected', () => { @@ -760,7 +754,7 @@ describe('Tree Pattern', () => { tree.onKeydown(a({control: true})); tree.onKeydown(a({control: true})); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); }); @@ -779,7 +773,7 @@ describe('Tree Pattern', () => { softDisabled: signal(true), textDirection: signal('ltr'), typeaheadDelay: signal(0), - values: signal([]), + value: signal([]), wrap: signal(false), nav: signal(false), currentType: signal('page'), @@ -791,42 +785,42 @@ describe('Tree Pattern', () => { const {tree} = createTree(treeExample, treeInputs); tree.onKeydown(down()); - expect(tree.inputs.values()).toEqual(['Item 1']); + expect(tree.inputs.value()).toEqual(['Item 1']); }); it('should navigate without selecting if the Ctrl key is pressed', () => { - treeInputs.values.set(['Item 0']); + treeInputs.value.set(['Item 0']); const {tree, items} = createTree(treeExample, treeInputs); const item1 = getItemByValue(items(), 'Item 1'); tree.onKeydown(down({control: true})); - expect(tree.inputs.values()).toEqual(['Item 0']); + expect(tree.inputs.value()).toEqual(['Item 0']); expect(tree.activeItem()).toBe(item1); }); it('should toggle an item selection state on Ctrl + Space', () => { - treeInputs.values.set(['Item 0']); + treeInputs.value.set(['Item 0']); const {tree} = createTree(treeExample, treeInputs); tree.onKeydown(down({control: true})); tree.onKeydown(space({control: true})); - expect(tree.inputs.values()).toEqual(['Item 0', 'Item 1']); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 1']); tree.onKeydown(space({control: true})); - expect(tree.inputs.values()).toEqual(['Item 0']); + expect(tree.inputs.value()).toEqual(['Item 0']); }); it('should select a range of visible items on Shift + ArrowDown/ArrowUp in follows focus & multi select mode', () => { - treeInputs.values.set(['Item 0']); + treeInputs.value.set(['Item 0']); const {tree, items} = createTree(treeExample, treeInputs); const item0 = getItemByValue(items(), 'Item 0'); item0.expanded.set(true); tree.onKeydown(shift()); tree.onKeydown(down({shift: true})); - expect(tree.inputs.values()).toEqual(['Item 0', 'Item 0-0']); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0']); tree.onKeydown(down({shift: true})); - expect(tree.inputs.values()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1']); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1']); }); it('should not allow wrapping while Shift is held down in follows focus & multi select mode', () => { @@ -837,7 +831,7 @@ describe('Tree Pattern', () => { tree.onKeydown(shift()); tree.onKeydown(up({shift: true})); expect(tree.activeItem()).toBe(item0); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should select a range of visible items on Shift + Space (or Enter) in follows focus & multi select mode', () => { @@ -850,7 +844,7 @@ describe('Tree Pattern', () => { tree.onKeydown(down({control: true})); tree.onKeydown(shift()); tree.onKeydown(space({shift: true})); - expect(tree.inputs.values()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1']); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1']); }); it('should select the focused item and all visible items up to the first on Ctrl + Shift + Home in follows focus & multi select mode', () => { @@ -862,7 +856,7 @@ describe('Tree Pattern', () => { tree.onKeydown(shift()); tree.onKeydown(home({control: true, shift: true})); - expect(tree.inputs.values()).toEqual(['Item 1', 'Item 0-1', 'Item 0-0', 'Item 0']); + expect(tree.inputs.value()).toEqual(['Item 1', 'Item 0-1', 'Item 0-0', 'Item 0']); }); it('should select the focused item and all visible items down to the last on Ctrl + Shift + End in follows focus & multi select mode', () => { @@ -874,7 +868,7 @@ describe('Tree Pattern', () => { tree.onKeydown(shift()); tree.onKeydown(end({control: true, shift: true})); - expect(tree.inputs.values()).toEqual(['Item 0-0', 'Item 0-1', 'Item 1', 'Item 2']); + expect(tree.inputs.value()).toEqual(['Item 0-0', 'Item 0-1', 'Item 1', 'Item 2']); }); it('should not change selection when the tree is disabled in follows focus & multi select mode', () => { @@ -882,7 +876,7 @@ describe('Tree Pattern', () => { const {tree} = createTree(treeExample, treeInputs); tree.onKeydown(down()); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); it('should not select disabled items on navigation', () => { @@ -893,11 +887,11 @@ describe('Tree Pattern', () => { ]; treeInputs.softDisabled.set(false); const {tree, items} = createTree(localTreeData, treeInputs); - treeInputs.values.set(['A']); + treeInputs.value.set(['A']); tree.treeBehavior.goto(getItemByValue(items(), 'A')); tree.onKeydown(down()); - expect(tree.inputs.values()).toEqual(['C']); + expect(tree.inputs.value()).toEqual(['C']); }); it('should not select non-selectable items on navigation', () => { @@ -907,12 +901,12 @@ describe('Tree Pattern', () => { {value: 'C', disabled: false, selectable: true, expanded: false}, ]; const {tree, items} = createTree(localTreeData, treeInputs); - treeInputs.values.set(['A']); + treeInputs.value.set(['A']); tree.treeBehavior.goto(getItemByValue(items(), 'A')); tree.onKeydown(down()); tree.onKeydown(down()); - expect(tree.inputs.values()).toEqual(['C']); + expect(tree.inputs.value()).toEqual(['C']); }); it('should deselect all except the focused item on Ctrl + A if all are selected', () => { @@ -923,15 +917,9 @@ describe('Tree Pattern', () => { tree.treeBehavior.goto(item0_0); tree.onKeydown(a({control: true})); - expect(tree.inputs.values()).toEqual([ - 'Item 0', - 'Item 0-0', - 'Item 0-1', - 'Item 1', - 'Item 2', - ]); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1', 'Item 1', 'Item 2']); tree.onKeydown(a({control: true})); - expect(tree.inputs.values()).toEqual(['Item 0-0']); + expect(tree.inputs.value()).toEqual(['Item 0-0']); }); }); }); @@ -952,7 +940,7 @@ describe('Tree Pattern', () => { softDisabled: signal(true), textDirection: signal('ltr'), typeaheadDelay: signal(0), - values: signal([]), + value: signal([]), wrap: signal(false), nav: signal(false), currentType: signal('page'), @@ -966,7 +954,7 @@ describe('Tree Pattern', () => { tree.onPointerdown(createClickEvent(item1.element()!)); expect(tree.activeItem()).toBe(item1); - expect(tree.inputs.values()).toEqual(['Item 1']); + expect(tree.inputs.value()).toEqual(['Item 1']); }); it('should not change selection when the tree is disabled in follows focus & single select mode (mouse)', () => { @@ -975,7 +963,7 @@ describe('Tree Pattern', () => { const item1 = getItemByValue(items(), 'Item 1'); tree.onPointerdown(createClickEvent(item1.element()!)); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); }); @@ -994,7 +982,7 @@ describe('Tree Pattern', () => { softDisabled: signal(true), textDirection: signal('ltr'), typeaheadDelay: signal(0), - values: signal([]), + value: signal([]), wrap: signal(false), nav: signal(false), currentType: signal('page'), @@ -1008,7 +996,7 @@ describe('Tree Pattern', () => { tree.onPointerdown(createClickEvent(item1.element()!)); expect(tree.activeItem()).toBe(item1); - expect(tree.inputs.values()).toEqual(['Item 1']); + expect(tree.inputs.value()).toEqual(['Item 1']); }); it('should not deselect item on click', () => { @@ -1017,11 +1005,11 @@ describe('Tree Pattern', () => { tree.onPointerdown(createClickEvent(item1.element()!)); expect(tree.activeItem()).toBe(item1); - expect(tree.inputs.values()).toEqual(['Item 1']); + expect(tree.inputs.value()).toEqual(['Item 1']); tree.onPointerdown(createClickEvent(item1.element()!)); expect(tree.activeItem()).toBe(item1); - expect(tree.inputs.values()).toEqual(['Item 1']); + expect(tree.inputs.value()).toEqual(['Item 1']); }); it('should not change selection when the tree is disabled in explicit focus & single select mode (mouse)', () => { @@ -1030,7 +1018,7 @@ describe('Tree Pattern', () => { const item1 = getItemByValue(items(), 'Item 1'); tree.onPointerdown(createClickEvent(item1.element()!)); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); }); @@ -1049,7 +1037,7 @@ describe('Tree Pattern', () => { softDisabled: signal(true), textDirection: signal('ltr'), typeaheadDelay: signal(0), - values: signal([]), + value: signal([]), wrap: signal(false), nav: signal(false), currentType: signal('page'), @@ -1063,13 +1051,13 @@ describe('Tree Pattern', () => { const item1 = getItemByValue(items(), 'Item 1'); tree.onPointerdown(createClickEvent(item0.element()!)); - expect(tree.inputs.values()).toEqual(['Item 0']); + expect(tree.inputs.value()).toEqual(['Item 0']); tree.onPointerdown(createClickEvent(item1.element()!)); - expect(tree.inputs.values()).toEqual(['Item 0', 'Item 1']); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 1']); tree.onPointerdown(createClickEvent(item0.element()!)); - expect(tree.inputs.values()).toEqual(['Item 1']); + expect(tree.inputs.value()).toEqual(['Item 1']); }); it('should navigate and select range from anchor on shift + click in explicit focus & multi select mode', () => { @@ -1080,7 +1068,7 @@ describe('Tree Pattern', () => { tree.onKeydown(shift()); tree.onPointerdown(createClickEvent(item1.element()!, {shift: true})); - expect(tree.inputs.values()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1', 'Item 1']); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1', 'Item 1']); }); }); @@ -1099,7 +1087,7 @@ describe('Tree Pattern', () => { softDisabled: signal(true), textDirection: signal('ltr'), typeaheadDelay: signal(0), - values: signal([]), + value: signal([]), wrap: signal(false), nav: signal(false), currentType: signal('page'), @@ -1113,9 +1101,9 @@ describe('Tree Pattern', () => { const item1 = getItemByValue(items(), 'Item 1'); tree.onPointerdown(createClickEvent(item0.element()!)); - expect(tree.inputs.values()).toEqual(['Item 0']); + expect(tree.inputs.value()).toEqual(['Item 0']); tree.onPointerdown(createClickEvent(item1.element()!)); - expect(tree.inputs.values()).toEqual(['Item 1']); + expect(tree.inputs.value()).toEqual(['Item 1']); }); it('should navigate and toggle selection on ctrl + click', () => { @@ -1125,9 +1113,9 @@ describe('Tree Pattern', () => { tree.onPointerdown(createClickEvent(item0.element()!)); // Select and expand Item 0 tree.onPointerdown(createClickEvent(item1.element()!, {control: true})); - expect(tree.inputs.values()).toEqual(['Item 0', 'Item 1']); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 1']); tree.onPointerdown(createClickEvent(item0.element()!, {control: true})); - expect(tree.inputs.values()).toEqual(['Item 1']); + expect(tree.inputs.value()).toEqual(['Item 1']); }); it('should navigate and select range from anchor on shift + click in follows focus & multi select mode', () => { @@ -1138,13 +1126,7 @@ describe('Tree Pattern', () => { tree.onPointerdown(createClickEvent(item0.element()!)); // Select and expand Item 0 tree.onKeydown(shift()); tree.onPointerdown(createClickEvent(item2.element()!, {shift: true})); - expect(tree.inputs.values()).toEqual([ - 'Item 0', - 'Item 0-0', - 'Item 0-1', - 'Item 1', - 'Item 2', - ]); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1', 'Item 1', 'Item 2']); }); it('should select a new range on subsequent shift + clicks, deselecting previous range', () => { @@ -1156,10 +1138,10 @@ describe('Tree Pattern', () => { tree.onKeydown(shift()); tree.onPointerdown(createClickEvent(item1.element()!, {shift: true})); - expect(tree.inputs.values()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1', 'Item 1']); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0', 'Item 0-1', 'Item 1']); tree.onPointerdown(createClickEvent(item0_0.element()!, {shift: true})); - expect(tree.inputs.values()).toEqual(['Item 0', 'Item 0-0']); + expect(tree.inputs.value()).toEqual(['Item 0', 'Item 0-0']); }); it('should not select disabled items on click', () => { @@ -1170,7 +1152,7 @@ describe('Tree Pattern', () => { const itemA = getItemByValue(items(), 'A'); tree.onPointerdown(createClickEvent(itemA.element()!)); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); expect(tree.activeItem()).toBe(itemA); }); @@ -1181,7 +1163,7 @@ describe('Tree Pattern', () => { const {tree, items} = createTree(localTreeData, treeInputs); const itemA = getItemByValue(items(), 'A'); tree.onPointerdown(createClickEvent(itemA.element()!)); - expect(tree.inputs.values()).toEqual([]); + expect(tree.inputs.value()).toEqual([]); }); }); }); @@ -1201,7 +1183,7 @@ describe('Tree Pattern', () => { softDisabled: signal(true), textDirection: signal('ltr'), typeaheadDelay: signal(0), - values: signal([]), + value: signal([]), wrap: signal(false), nav: signal(false), currentType: signal('page'), @@ -1399,7 +1381,7 @@ describe('Tree Pattern', () => { tree.onKeydown(right()); expect(tree.activeItem()).toBe(item0_0); - expect(tree.inputs.values()).toEqual(['Item 0-0']); + expect(tree.inputs.value()).toEqual(['Item 0-0']); }); it('should navigate and select the parent on collapseKey if collapsed (vertical)', () => { @@ -1412,7 +1394,7 @@ describe('Tree Pattern', () => { tree.onKeydown(left()); expect(tree.activeItem()).toBe(item0); - expect(tree.inputs.values()).toEqual(['Item 0']); + expect(tree.inputs.value()).toEqual(['Item 0']); }); }); @@ -1429,11 +1411,11 @@ describe('Tree Pattern', () => { const item0_0 = getItemByValue(items(), 'Item 0-0'); tree.treeBehavior.goto(item0); item0.expanded.set(true); - tree.inputs.values.set(['Item 1']); // pre-select something else + tree.inputs.value.set(['Item 1']); // pre-select something else tree.onKeydown(right({control: true})); expect(tree.activeItem()).toBe(item0_0); - expect(tree.inputs.values()).toEqual(['Item 1']); + expect(tree.inputs.value()).toEqual(['Item 1']); }); it('should navigate without select the parent on Ctrl + collapseKey if collapsed (vertical)', () => { @@ -1443,11 +1425,11 @@ describe('Tree Pattern', () => { const item0_0 = getItemByValue(items(), 'Item 0-0'); item0.expanded.set(true); tree.treeBehavior.goto(item0_0); - tree.inputs.values.set(['Item 1']); // pre-select something else + tree.inputs.value.set(['Item 1']); // pre-select something else tree.onKeydown(left({control: true})); expect(tree.activeItem()).toBe(item0); - expect(tree.inputs.values()).toEqual(['Item 1']); + expect(tree.inputs.value()).toEqual(['Item 1']); }); }); }); @@ -1467,7 +1449,7 @@ describe('Tree Pattern', () => { softDisabled: signal(true), textDirection: signal('ltr'), typeaheadDelay: signal(0), - values: signal([]), + value: signal([]), wrap: signal(false), nav: signal(false), currentType: signal('page'), @@ -1504,7 +1486,7 @@ describe('Tree Pattern', () => { {value: 'B', disabled: false, selectable: true, expanded: false}, {value: 'C', disabled: false, selectable: true, expanded: false}, ]; - treeInputs.values.set(['B']); + treeInputs.value.set(['B']); const {tree, items} = createTree(localTreeData, treeInputs); tree.setDefaultState(); @@ -1517,7 +1499,7 @@ describe('Tree Pattern', () => { {value: 'B', disabled: false, selectable: true, expanded: false}, {value: 'C', disabled: false, selectable: true, expanded: false}, ]; - treeInputs.values.set(['C', 'A']); + treeInputs.value.set(['C', 'A']); const {tree, items} = createTree(localTreeData, treeInputs); tree.setDefaultState(); @@ -1530,7 +1512,7 @@ describe('Tree Pattern', () => { {value: 'B', disabled: true, selectable: true, expanded: false}, {value: 'C', disabled: false, selectable: true, expanded: false}, ]; - treeInputs.values.set(['B']); + treeInputs.value.set(['B']); treeInputs.softDisabled.set(false); const {tree, items} = createTree(localTreeData, treeInputs); @@ -1544,7 +1526,7 @@ describe('Tree Pattern', () => { {value: 'B', disabled: true, selectable: true, expanded: false}, {value: 'C', disabled: false, selectable: true, expanded: false}, ]; - treeInputs.values.set(['B']); + treeInputs.value.set(['B']); treeInputs.softDisabled.set(true); const {tree, items} = createTree(localTreeData, treeInputs); @@ -1555,7 +1537,7 @@ describe('Tree Pattern', () => { it('should set activeIndex to first visible focusable item if selected item is not visible', () => { const {tree, items} = createTree(treeExample, treeInputs); const item0 = getItemByValue(items(), 'Item 0'); - treeInputs.values.set(['Item 0-0']); + treeInputs.value.set(['Item 0-0']); expect(item0.expanded()).toBe(false); expect(getItemByValue(items(), 'Item 0-0').visible()).toBe(false); diff --git a/src/aria/private/tree/tree.ts b/src/aria/private/tree/tree.ts index afc004047d78..88e43beb68d3 100644 --- a/src/aria/private/tree/tree.ts +++ b/src/aria/private/tree/tree.ts @@ -96,7 +96,7 @@ export class TreeItemPattern implements TreeItem> { if (!this.selectable()) { return undefined; } - return this.tree().values().includes(this.value()); + return this.tree().value().includes(this.value()); }); /** The current type of this item. */ @@ -107,7 +107,7 @@ export class TreeItemPattern implements TreeItem> { if (!this.selectable()) { return undefined; } - return this.tree().values().includes(this.value()) ? this.tree().currentType() : undefined; + return this.tree().value().includes(this.value()) ? this.tree().currentType() : undefined; }); constructor(readonly inputs: TreeItemInputs) { @@ -352,11 +352,11 @@ export class TreePattern implements TreeInputs { readonly typeaheadDelay: SignalLike = () => this.inputs.typeaheadDelay(); /** The current selected items of the tree. */ - readonly values: WritableSignalLike; + readonly value: WritableSignalLike; constructor(readonly inputs: TreeInputs) { this.activeItem = inputs.activeItem; - this.values = inputs.values; + this.value = inputs.value; this.treeBehavior = new Tree, V>({ ...inputs, @@ -369,9 +369,9 @@ export class TreePattern implements TreeInputs { validate(): string[] { const violations: string[] = []; - if (!this.inputs.multi() && this.inputs.values().length > 1) { + if (!this.inputs.multi() && this.inputs.value().length > 1) { violations.push( - `A single-select tree should not have multiple selected options. Selected options: ${this.inputs.values().join(', ')}`, + `A single-select tree should not have multiple selected options. Selected options: ${this.inputs.value().join(', ')}`, ); } diff --git a/src/aria/toolbar/toolbar.ts b/src/aria/toolbar/toolbar.ts index f99ce45da71a..f17c995a5720 100644 --- a/src/aria/toolbar/toolbar.ts +++ b/src/aria/toolbar/toolbar.ts @@ -92,7 +92,7 @@ export class Toolbar { readonly wrap = input(true, {transform: booleanAttribute}); /** The values of the selected widgets within the toolbar. */ - readonly values = model([]); + readonly value = model([]); /** The toolbar UIPattern. */ readonly _pattern: ToolbarPattern = new ToolbarPattern({ @@ -102,7 +102,7 @@ export class Toolbar { textDirection: this.textDirection, element: () => this._elementRef.nativeElement, getItem: e => this._getItem(e), - values: this.values, + value: this.value, }); /** Whether the toolbar has received focus yet. */ diff --git a/src/aria/tree/tree.spec.ts b/src/aria/tree/tree.spec.ts index ce5183bffe53..fb8564182bd4 100644 --- a/src/aria/tree/tree.spec.ts +++ b/src/aria/tree/tree.spec.ts @@ -77,7 +77,7 @@ describe('Tree', () => { function updateTree( config: { nodes?: TestTreeNode[]; - values?: string[]; + value?: string[]; disabled?: boolean; orientation?: 'horizontal' | 'vertical'; multi?: boolean; @@ -90,7 +90,7 @@ describe('Tree', () => { } = {}, ) { if (config.nodes !== undefined) testComponent.nodes.set(config.nodes); - if (config.values !== undefined) treeInstance.values.set(config.values); + if (config.value !== undefined) treeInstance.value.set(config.value); if (config.disabled !== undefined) testComponent.disabled.set(config.disabled); if (config.orientation !== undefined) testComponent.orientation.set(config.orientation); if (config.multi !== undefined) testComponent.multi.set(config.multi); @@ -151,7 +151,7 @@ describe('Tree', () => { click(berriesEl); const vegetablesEl = getTreeItemElementByValue('vegetables')!; click(vegetablesEl); - updateTree({values: []}); + updateTree({value: []}); } afterEach(async () => { @@ -284,7 +284,7 @@ describe('Tree', () => { it('should set aria-selected to "true" for selected items', () => { expandAll(); - updateTree({values: ['apple']}); + updateTree({value: ['apple']}); const appleItem = getTreeItemElementByValue('apple')!; expect(appleItem.getAttribute('aria-selected')).toBe('true'); @@ -301,7 +301,7 @@ describe('Tree', () => { it('should set aria-current to specific current type when nav="true"', () => { expandAll(); - updateTree({nav: true, values: ['apple']}); + updateTree({nav: true, value: ['apple']}); const appleItem = getTreeItemElementByValue('apple')!; const bananaItem = getTreeItemElementByValue('banana')!; @@ -314,7 +314,7 @@ describe('Tree', () => { it('should not set aria-current when not selectable', () => { expandAll(); - updateTree({nav: true, values: ['apple']}); + updateTree({nav: true, value: ['apple']}); const appleItem = getTreeItemElementByValue('apple')!; expect(appleItem.getAttribute('aria-current')).toBe('page'); @@ -325,7 +325,7 @@ describe('Tree', () => { it('should not set aria-selected when nav="true"', () => { expandAll(); - updateTree({values: ['apple'], nav: true}); + updateTree({value: ['apple'], nav: true}); const appleItem = getTreeItemElementByValue('apple')!; expect(appleItem.hasAttribute('aria-selected')).toBe(false); @@ -335,7 +335,7 @@ describe('Tree', () => { it('should not set aria-selected when not selectable', () => { expandAll(); - updateTree({values: ['apple']}); + updateTree({value: ['apple']}); const appleItem = getTreeItemElementByValue('apple')!; expect(appleItem.getAttribute('aria-selected')).toBe('true'); @@ -379,7 +379,7 @@ describe('Tree', () => { }); it('should set initial focus (tabindex="0") on the first selected item', () => { - updateTree({values: ['vegetables', 'dairy'], focusMode: 'roving'}); + updateTree({value: ['vegetables', 'dairy'], focusMode: 'roving'}); const fruitsItem = getTreeItemElementByValue('fruits')!; const vegetablesItem = getTreeItemElementByValue('vegetables')!; @@ -413,7 +413,7 @@ describe('Tree', () => { }); it('should set aria-activedescendant to the ID of the first selected item', () => { - updateTree({values: ['vegetables', 'dairy'], focusMode: 'activedescendant'}); + updateTree({value: ['vegetables', 'dairy'], focusMode: 'activedescendant'}); const vegetablesItem = getTreeItemElementByValue('vegetables')!; expect(treeElement.getAttribute('aria-activedescendant')).toBe(vegetablesItem.id); @@ -441,7 +441,7 @@ describe('Tree', () => { it('should select items based on the initial value input', () => { setupTestTree(); expandAll(); - updateTree({values: ['apple', 'strawberry', 'carrot']}); + updateTree({value: ['apple', 'strawberry', 'carrot']}); expect(getTreeItemElementByValue('apple')!.getAttribute('aria-selected')).toBe('true'); expect(getTreeItemElementByValue('strawberry')!.getAttribute('aria-selected')).toBe('true'); @@ -462,12 +462,12 @@ describe('Tree', () => { const bananaEl = getTreeItemElementByValue('banana')!; click(appleEl); - expect(treeInstance.values()).toEqual(['apple']); + expect(treeInstance.value()).toEqual(['apple']); expect(appleEl.getAttribute('aria-selected')).toBe('true'); expect(bananaEl.getAttribute('aria-selected')).toBe('false'); click(bananaEl); - expect(treeInstance.values()).toEqual(['banana']); + expect(treeInstance.value()).toEqual(['banana']); expect(appleEl.getAttribute('aria-selected')).toBe('false'); expect(bananaEl.getAttribute('aria-selected')).toBe('true'); }); @@ -495,11 +495,11 @@ describe('Tree', () => { const carrotEl = getTreeItemElementByValue('carrot')!; click(appleEl); - expect(treeInstance.values()).toEqual(['apple']); + expect(treeInstance.value()).toEqual(['apple']); expect(appleEl.getAttribute('aria-selected')).toBe('true'); shiftClick(carrotEl); - expect(treeInstance.values()).toEqual([ + expect(treeInstance.value()).toEqual([ 'apple', 'banana', 'berries', @@ -513,24 +513,24 @@ describe('Tree', () => { const bananaEl = getTreeItemElementByValue('banana')!; click(appleEl); - expect(treeInstance.values()).toEqual(['apple']); + expect(treeInstance.value()).toEqual(['apple']); click(bananaEl); - expect(treeInstance.values()).toEqual(['apple', 'banana']); + expect(treeInstance.value()).toEqual(['apple', 'banana']); click(appleEl); - expect(treeInstance.values()).toEqual(['banana']); + expect(treeInstance.value()).toEqual(['banana']); }); describe('selectable=false', () => { it('should not select an item on click', () => { - updateTree({values: ['banana']}); + updateTree({value: ['banana']}); updateTreeItemByValue('apple', {selectable: false}); const appleEl = getTreeItemElementByValue('apple')!; click(appleEl); - expect(treeInstance.values()).not.toContain('apple'); - expect(treeInstance.values()).toContain('banana'); + expect(treeInstance.value()).not.toContain('apple'); + expect(treeInstance.value()).toContain('banana'); }); }); }); @@ -547,13 +547,13 @@ describe('Tree', () => { ctrlClick(appleEl); ctrlClick(bananaEl); - expect(treeInstance.values()).toEqual(['apple', 'banana']); + expect(treeInstance.value()).toEqual(['apple', 'banana']); click(carrotEl); - expect(treeInstance.values()).toEqual(['carrot']); + expect(treeInstance.value()).toEqual(['carrot']); click(appleEl); - expect(treeInstance.values()).toEqual(['apple']); + expect(treeInstance.value()).toEqual(['apple']); }); it('should add to selection with ctrl+click and toggle individual items', () => { @@ -561,13 +561,13 @@ describe('Tree', () => { const berriesEl = getTreeItemElementByValue('berries')!; click(appleEl); - expect(treeInstance.values()).toEqual(['apple']); + expect(treeInstance.value()).toEqual(['apple']); ctrlClick(berriesEl); - expect(treeInstance.values()).toEqual(['apple', 'berries']); + expect(treeInstance.value()).toEqual(['apple', 'berries']); ctrlClick(appleEl); - expect(treeInstance.values()).toEqual(['berries']); + expect(treeInstance.value()).toEqual(['berries']); }); it('should select a range with shift+click, anchoring from last selected/focused', () => { @@ -577,10 +577,10 @@ describe('Tree', () => { const broccoliEl = getTreeItemElementByValue('broccoli')!; click(appleEl); - expect(treeInstance.values()).toEqual(['apple']); + expect(treeInstance.value()).toEqual(['apple']); shiftClick(carrotEl); - expect(treeInstance.values()).toEqual([ + expect(treeInstance.value()).toEqual([ 'apple', 'banana', 'berries', @@ -589,10 +589,10 @@ describe('Tree', () => { ]); click(berriesEl); - expect(treeInstance.values()).toEqual(['berries']); + expect(treeInstance.value()).toEqual(['berries']); shiftClick(broccoliEl); - expect(treeInstance.values()).toEqual([ + expect(treeInstance.value()).toEqual([ 'berries', 'strawberry', 'blueberry', @@ -611,9 +611,9 @@ describe('Tree', () => { click(appleEl); shiftClick(berriesEl); - expect(treeInstance.values()).not.toContain('banana'); - expect(treeInstance.values()).toContain('apple'); - expect(treeInstance.values()).toContain('berries'); + expect(treeInstance.value()).not.toContain('banana'); + expect(treeInstance.value()).toContain('apple'); + expect(treeInstance.value()).toContain('berries'); }); it('should not toggle selection of an item on simple click', () => { @@ -621,17 +621,17 @@ describe('Tree', () => { const appleEl = getTreeItemElementByValue('apple')!; click(appleEl); - expect(treeInstance.values()).not.toContain('apple'); + expect(treeInstance.value()).not.toContain('apple'); }); it('should not add to selection with ctrl+click', () => { - updateTree({values: ['banana']}); + updateTree({value: ['banana']}); updateTreeItemByValue('apple', {selectable: false}); const appleEl = getTreeItemElementByValue('apple')!; ctrlClick(appleEl); - expect(treeInstance.values()).not.toContain('apple'); - expect(treeInstance.values()).toContain('banana'); + expect(treeInstance.value()).not.toContain('apple'); + expect(treeInstance.value()).toContain('banana'); }); }); }); @@ -652,47 +652,47 @@ describe('Tree', () => { it('should select the focused item with Enter and deselect others', () => { enter(); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); down(); enter(); - expect(treeInstance.values()).toEqual(['vegetables']); + expect(treeInstance.value()).toEqual(['vegetables']); }); it('should select the focused item with Space and deselect others', () => { space(); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); down(); space(); - expect(treeInstance.values()).toEqual(['vegetables']); + expect(treeInstance.value()).toEqual(['vegetables']); }); it('should move focus with arrows without changing selection until Enter/Space', () => { enter(); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); down(); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); down(); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); enter(); - expect(treeInstance.values()).toEqual(['grains']); + expect(treeInstance.value()).toEqual(['grains']); }); describe('selectable=false', () => { it('should not select the focused item with Enter', () => { updateTreeItemByValue('fruits', {selectable: false}); enter(); - expect(treeInstance.values()).toEqual([]); + expect(treeInstance.value()).toEqual([]); }); it('should not select the focused item with Space', () => { updateTreeItemByValue('fruits', {selectable: false}); space(); - expect(treeInstance.values()).toEqual([]); + expect(treeInstance.value()).toEqual([]); }); }); }); @@ -703,45 +703,45 @@ describe('Tree', () => { }); it('should select an item when it becomes focused with ArrowDown and deselect others', () => { - updateTree({values: ['fruits']}); - expect(treeInstance.values()).toEqual(['fruits']); + updateTree({value: ['fruits']}); + expect(treeInstance.value()).toEqual(['fruits']); down(); - expect(treeInstance.values()).toEqual(['vegetables']); + expect(treeInstance.value()).toEqual(['vegetables']); down(); - expect(treeInstance.values()).toEqual(['grains']); + expect(treeInstance.value()).toEqual(['grains']); }); it('should select an item when it becomes focused with ArrowUp and deselect others', () => { - updateTree({values: ['grains']}); + updateTree({value: ['grains']}); up(); - expect(treeInstance.values()).toEqual(['vegetables']); + expect(treeInstance.value()).toEqual(['vegetables']); }); it('should select the first item with Home and deselect others', () => { - updateTree({values: ['grains']}); - expect(treeInstance.values()).toEqual(['grains']); + updateTree({value: ['grains']}); + expect(treeInstance.value()).toEqual(['grains']); home(); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); }); it('should select the last visible item with End and deselect others', () => { - updateTree({values: ['fruits']}); - expect(treeInstance.values()).toEqual(['fruits']); + updateTree({value: ['fruits']}); + expect(treeInstance.value()).toEqual(['fruits']); end(); - expect(treeInstance.values()).toEqual(['dairy']); + expect(treeInstance.value()).toEqual(['dairy']); }); it('should select an item via typeahead and deselect others', () => { - updateTree({values: ['fruits']}); - expect(treeInstance.values()).toEqual(['fruits']); + updateTree({value: ['fruits']}); + expect(treeInstance.value()).toEqual(['fruits']); type('V'); - expect(treeInstance.values()).toEqual(['vegetables']); + expect(treeInstance.value()).toEqual(['vegetables']); }); }); }); @@ -759,35 +759,35 @@ describe('Tree', () => { it('should toggle selection of the focused item with Space, leaving other selections intact', () => { space(); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); down(); space(); - expect(treeInstance.values().sort()).toEqual(['fruits', 'vegetables']); + expect(treeInstance.value().sort()).toEqual(['fruits', 'vegetables']); }); it('should move focus with arrows without changing selection', () => { space(); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); down(); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); }); it('should extend selection downwards with Shift+ArrowDown', () => { shift(); down({shiftKey: true}); - expect(treeInstance.values().sort()).toEqual(['fruits', 'vegetables']); + expect(treeInstance.value().sort()).toEqual(['fruits', 'vegetables']); down({shiftKey: true}); - expect(treeInstance.values().sort()).toEqual(['fruits', 'grains', 'vegetables']); + expect(treeInstance.value().sort()).toEqual(['fruits', 'grains', 'vegetables']); }); it('should extend selection upwards with Shift+ArrowUp', () => { end(); shift(); up({shiftKey: true}); - expect(treeInstance.values().sort()).toEqual(['dairy', 'grains']); + expect(treeInstance.value().sort()).toEqual(['dairy', 'grains']); }); it('Ctrl+A should select all enabled visible items, then deselect all', () => { @@ -801,7 +801,7 @@ describe('Tree', () => { updateTreeItemByValue('broccoli', {disabled: true}); keydown('A', {ctrlKey: true}); - expect(treeInstance.values().sort()).toEqual([ + expect(treeInstance.value().sort()).toEqual([ 'apple', 'banana', 'berries', @@ -812,25 +812,25 @@ describe('Tree', () => { ]); keydown('A', {ctrlKey: true}); - expect(treeInstance.values()).toEqual([]); + expect(treeInstance.value()).toEqual([]); }); it('Ctrl+ArrowKey should move focus without changing selection', () => { space(); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); down({ctrlKey: true}); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); up({ctrlKey: true}); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); }); describe('selectable=false', () => { it('should not toggle selection of the focused item with Space', () => { updateTreeItemByValue('fruits', {selectable: false}); space(); - expect(treeInstance.values()).toEqual([]); + expect(treeInstance.value()).toEqual([]); }); it('should not extend selection with Shift+ArrowDown', () => { @@ -838,8 +838,8 @@ describe('Tree', () => { shift(); down({shiftKey: true}); down({shiftKey: true}); - expect(treeInstance.values()).not.toContain('vegetables'); - expect(treeInstance.values().sort()).toEqual(['fruits', 'grains']); + expect(treeInstance.value()).not.toContain('vegetables'); + expect(treeInstance.value().sort()).toEqual(['fruits', 'grains']); }); it('Ctrl+A should not select non-selectable items', () => { @@ -847,7 +847,7 @@ describe('Tree', () => { updateTreeItemByValue('apple', {selectable: false}); updateTreeItemByValue('carrot', {selectable: false}); keydown('A', {ctrlKey: true}); - const value = treeInstance.values(); + const value = treeInstance.value(); expect(value).not.toContain('apple'); expect(value).not.toContain('carrot'); expect(value).toContain('banana'); @@ -862,98 +862,98 @@ describe('Tree', () => { }); it('should select the focused item and deselect others on ArrowDown', () => { - updateTree({values: ['fruits']}); - expect(treeInstance.values()).toEqual(['fruits']); + updateTree({value: ['fruits']}); + expect(treeInstance.value()).toEqual(['fruits']); down(); - expect(treeInstance.values()).toEqual(['vegetables']); + expect(treeInstance.value()).toEqual(['vegetables']); }); it('should select the focused item and deselect others on ArrowUp', () => { - updateTree({values: ['vegetables']}); - expect(treeInstance.values()).toEqual(['vegetables']); + updateTree({value: ['vegetables']}); + expect(treeInstance.value()).toEqual(['vegetables']); up(); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); }); it('should move focus without changing selection on Ctrl+ArrowDown', () => { - updateTree({values: ['fruits']}); + updateTree({value: ['fruits']}); expect(getFocusedTreeItemValue()).toBe('fruits'); down({ctrlKey: true}); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); expect(getFocusedTreeItemValue()).toBe('vegetables'); }); it('should move focus without changing selection on Ctrl+ArrowUp', () => { - updateTree({values: ['fruits']}); + updateTree({value: ['fruits']}); down({ctrlKey: true}); expect(getFocusedTreeItemValue()).toBe('vegetables'); up({ctrlKey: true}); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); expect(getFocusedTreeItemValue()).toBe('fruits'); }); it('should toggle selection of the focused item on Ctrl+Space, adding to existing selection', () => { - updateTree({values: ['fruits']}); + updateTree({value: ['fruits']}); down({ctrlKey: true}); expect(getFocusedTreeItemValue()).toBe('vegetables'); space({ctrlKey: true}); - expect(treeInstance.values().sort()).toEqual(['fruits', 'vegetables']); + expect(treeInstance.value().sort()).toEqual(['fruits', 'vegetables']); space({ctrlKey: true}); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); }); it('should toggle selection of the focused item on Ctrl+Enter, adding to existing selection', () => { - updateTree({values: ['fruits']}); + updateTree({value: ['fruits']}); down({ctrlKey: true}); expect(getFocusedTreeItemValue()).toBe('vegetables'); enter({ctrlKey: true}); - expect(treeInstance.values().sort()).toEqual(['fruits', 'vegetables']); + expect(treeInstance.value().sort()).toEqual(['fruits', 'vegetables']); enter({ctrlKey: true}); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); }); it('should extend selection downwards with Shift+ArrowDown', () => { right(); // Expands fruits - updateTree({values: ['fruits']}); + updateTree({value: ['fruits']}); shift(); down({shiftKey: true}); - expect(treeInstance.values().sort()).toEqual(['apple', 'fruits']); + expect(treeInstance.value().sort()).toEqual(['apple', 'fruits']); down({shiftKey: true}); - expect(treeInstance.values().sort()).toEqual(['apple', 'banana', 'fruits']); + expect(treeInstance.value().sort()).toEqual(['apple', 'banana', 'fruits']); }); it('should extend selection upwards with Shift+ArrowUp', () => { - updateTree({values: ['grains']}); + updateTree({value: ['grains']}); shift(); up({shiftKey: true}); - expect(treeInstance.values().sort()).toEqual(['grains', 'vegetables']); + expect(treeInstance.value().sort()).toEqual(['grains', 'vegetables']); up({shiftKey: true}); - expect(treeInstance.values().sort()).toEqual(['fruits', 'grains', 'vegetables']); + expect(treeInstance.value().sort()).toEqual(['fruits', 'grains', 'vegetables']); }); it('should select a range with Shift+Space, anchoring from last selected/focused item', () => { right(); // Expands fruits - updateTree({values: ['fruits']}); + updateTree({value: ['fruits']}); down({ctrlKey: true}); down({ctrlKey: true}); expect(getFocusedTreeItemValue()).toBe('banana'); space({shiftKey: true}); - expect(treeInstance.values().sort()).toEqual(['apple', 'banana', 'fruits']); + expect(treeInstance.value().sort()).toEqual(['apple', 'banana', 'fruits']); }); it('Ctrl+A: select all enabled visible items; second Ctrl+A deselects all except focused', () => { @@ -961,7 +961,7 @@ describe('Tree', () => { updateTreeItemByValue('vegetables', {disabled: true}); keydown('A', {ctrlKey: true}); - expect(treeInstance.values().sort()).toEqual([ + expect(treeInstance.value().sort()).toEqual([ 'apple', 'banana', 'berries', @@ -971,13 +971,13 @@ describe('Tree', () => { ]); keydown('A', {ctrlKey: true}); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); }); it('typeahead should select the focused item and deselect others', () => { - updateTree({values: ['fruits']}); + updateTree({value: ['fruits']}); type('V'); - expect(treeInstance.values()).toEqual(['vegetables']); + expect(treeInstance.value()).toEqual(['vegetables']); expect(getFocusedTreeItemValue()).toBe('vegetables'); }); @@ -985,14 +985,14 @@ describe('Tree', () => { it('should not select an item on ArrowDown', () => { updateTreeItemByValue('vegetables', {selectable: false}); down(); - expect(treeInstance.values()).not.toContain('vegetables'); - expect(treeInstance.values()).toEqual([]); + expect(treeInstance.value()).not.toContain('vegetables'); + expect(treeInstance.value()).toEqual([]); }); it('should not toggle selection of the focused item on Ctrl+Space', () => { updateTreeItemByValue('fruits', {selectable: false}); space({ctrlKey: true}); - expect(treeInstance.values()).toEqual([]); + expect(treeInstance.value()).toEqual([]); }); it('should not extend selection with Shift+ArrowDown', () => { @@ -1000,38 +1000,38 @@ describe('Tree', () => { shift(); down({shiftKey: true}); down({shiftKey: true}); - expect(treeInstance.values()).not.toContain('vegetables'); - expect(treeInstance.values().sort()).toEqual(['fruits', 'grains']); + expect(treeInstance.value()).not.toContain('vegetables'); + expect(treeInstance.value().sort()).toEqual(['fruits', 'grains']); }); it('typeahead should not select the focused item', () => { updateTreeItemByValue('vegetables', {selectable: false}); type('v'); expect(getFocusedTreeItemValue()).toBe('vegetables'); - expect(treeInstance.values()).not.toContain('vegetables'); + expect(treeInstance.value()).not.toContain('vegetables'); }); }); it('should not select disabled items during Shift+ArrowKey navigation even if softDisabled is true', () => { right(); // Expands fruits updateTreeItemByValue('banana', {disabled: true}); - updateTree({values: ['apple'], softDisabled: true}); + updateTree({value: ['apple'], softDisabled: true}); expect(getFocusedTreeItemValue()).toBe('apple'); keydown('Shift'); down({shiftKey: true}); expect(getFocusedTreeItemValue()).toBe('banana'); - expect(treeInstance.values().sort()).toEqual(['apple']); + expect(treeInstance.value().sort()).toEqual(['apple']); down({shiftKey: true}); // Focus 'berries' expect(getFocusedTreeItemValue()).toBe('berries'); - expect(treeInstance.values().sort()).toEqual(['apple', 'berries']); + expect(treeInstance.value().sort()).toEqual(['apple', 'berries']); }); it('should not change selection if tree is disabled', () => { - updateTree({values: ['fruits'], disabled: true}); + updateTree({value: ['fruits'], disabled: true}); down(); - expect(treeInstance.values()).toEqual(['fruits']); + expect(treeInstance.value()).toEqual(['fruits']); }); }); }); @@ -1098,17 +1098,17 @@ describe('Tree', () => { const fruits = getTreeItemElementByValue('fruits')!; click(blueberryEl); - expect(treeInstance.values()).toEqual(['blueberry']); + expect(treeInstance.value()).toEqual(['blueberry']); left(); left(); // collapse berries expect(berriesEl.getAttribute('aria-expanded')).toBe('false'); - expect(treeInstance.values()).toEqual(['blueberry']); + expect(treeInstance.value()).toEqual(['blueberry']); left(); left(); // collapse fruits expect(fruits.getAttribute('aria-expanded')).toBe('false'); - expect(treeInstance.values()).toEqual(['blueberry']); + expect(treeInstance.value()).toEqual(['blueberry']); }); describe('LTR', () => { @@ -1490,14 +1490,14 @@ describe('Tree', () => { updateTree({selectionMode: 'follow'}); type('Gr'); expect(isFocused('grains')).toBe(true); - expect(treeInstance.values()).toEqual(['grains']); + expect(treeInstance.value()).toEqual(['grains']); }); it('should not select the focused item if selectionMode is "explicit"', () => { updateTree({selectionMode: 'explicit'}); type('Gr'); expect(isFocused('grains')).toBe(true); - expect(treeInstance.values()).toEqual([]); + expect(treeInstance.value()).toEqual([]); }); it('should skip disabled items with typeahead if softDisabled=false', () => { @@ -1540,7 +1540,7 @@ interface TestTreeNode { [softDisabled]="softDisabled()" [orientation]="orientation()" [disabled]="disabled()" - [(values)]="values" + [(value)]="value" [nav]="nav()" [currentType]="currentType()" #tree="ngTree" @@ -1610,7 +1610,7 @@ class TestTreeComponent { {value: 'grains', label: 'Grains'}, {value: 'dairy', label: 'Dairy'}, ]); - values = signal([]); + value = signal([]); disabled = signal(false); orientation = signal<'vertical' | 'horizontal'>('vertical'); multi = signal(false); diff --git a/src/aria/tree/tree.ts b/src/aria/tree/tree.ts index d08cc870cbc0..594ae3cc28b5 100644 --- a/src/aria/tree/tree.ts +++ b/src/aria/tree/tree.ts @@ -132,7 +132,7 @@ export class Tree { readonly typeaheadDelay = input(500); /** The values of the currently selected items. */ - readonly values = model([]); + readonly value = model([]); /** Text direction. */ readonly textDirection = inject(Directionality).valueSignal; @@ -202,10 +202,10 @@ export class Tree { if (!(this._pattern instanceof ComboboxTreePattern)) return; const items = inputs.items(); - const values = untracked(() => this.values()); + const value = untracked(() => this.value()); - if (items && values.some(v => !items.some(i => i.value() === v))) { - this.values.set(values.filter(v => items.some(i => i.value() === v))); + if (items && value.some(v => !items.some(i => i.value() === v))) { + this.value.set(value.filter(v => items.some(i => i.value() === v))); } }); } diff --git a/src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.ts b/src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.ts index 1171dacdc2c7..cde8c74e31d1 100644 --- a/src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.ts +++ b/src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.ts @@ -76,7 +76,7 @@ export class AutocompleteAutoSelectExample { /** Clears the query and the listbox value. */ clear(): void { this.comboboxInput()?.value.set(''); - this.listbox?.()?.values.set([]); + this.listbox?.()?.value.set([]); } /** Handles keydown events on the clear button. */ diff --git a/src/components-examples/aria/autocomplete/autocomplete-highlight/autocomplete-highlight-example.ts b/src/components-examples/aria/autocomplete/autocomplete-highlight/autocomplete-highlight-example.ts index 2b3123d5e52f..fc490c2ed96b 100644 --- a/src/components-examples/aria/autocomplete/autocomplete-highlight/autocomplete-highlight-example.ts +++ b/src/components-examples/aria/autocomplete/autocomplete-highlight/autocomplete-highlight-example.ts @@ -76,7 +76,7 @@ export class AutocompleteHighlightExample { /** Clears the query and the listbox value. */ clear(): void { this.comboboxInput()?.value.set(''); - this.listbox?.()?.values.set([]); + this.listbox?.()?.value.set([]); } /** Handles keydown events on the clear button. */ diff --git a/src/components-examples/aria/autocomplete/autocomplete-manual/autocomplete-manual-example.ts b/src/components-examples/aria/autocomplete/autocomplete-manual/autocomplete-manual-example.ts index a1e7391bd6ea..7d1a725ad324 100644 --- a/src/components-examples/aria/autocomplete/autocomplete-manual/autocomplete-manual-example.ts +++ b/src/components-examples/aria/autocomplete/autocomplete-manual/autocomplete-manual-example.ts @@ -76,7 +76,7 @@ export class AutocompleteManualExample { /** Clears the query and the listbox value. */ clear(): void { this.comboboxInput()?.value.set(''); - this.listbox?.()?.values.set([]); + this.listbox?.()?.value.set([]); } /** Handles keydown events on the clear button. */ diff --git a/src/components-examples/aria/combobox/combobox-dialog/combobox-dialog-example.html b/src/components-examples/aria/combobox/combobox-dialog/combobox-dialog-example.html index 67eae7296522..4a8d62f95840 100644 --- a/src/components-examples/aria/combobox/combobox-dialog/combobox-dialog-example.html +++ b/src/components-examples/aria/combobox/combobox-dialog/combobox-dialog-example.html @@ -30,7 +30,7 @@
-
+
@for (option of options(); track option) {
{{option}} diff --git a/src/components-examples/aria/combobox/combobox-readonly-disabled/combobox-readonly-disabled-example.ts b/src/components-examples/aria/combobox/combobox-readonly-disabled/combobox-readonly-disabled-example.ts index ef1b9a3a4e3d..30c5019f333f 100644 --- a/src/components-examples/aria/combobox/combobox-readonly-disabled/combobox-readonly-disabled-example.ts +++ b/src/components-examples/aria/combobox/combobox-readonly-disabled/combobox-readonly-disabled-example.ts @@ -67,13 +67,13 @@ export class ComboboxReadonlyDisabledExample { constructor() { // Updates the display value when the listbox values change. afterRenderEffect(() => { - const values = this.listbox()?.values() || []; - if (values.length === 0) { + const value = this.listbox()?.value() || []; + if (value.length === 0) { this.displayValue.set('Select a label'); - } else if (values.length === 1) { - this.displayValue.set(values[0]); + } else if (value.length === 1) { + this.displayValue.set(value[0]); } else { - this.displayValue.set(`${values[0]} + ${values.length - 1} more`); + this.displayValue.set(`${value[0]} + ${value.length - 1} more`); } }); diff --git a/src/components-examples/aria/combobox/combobox-readonly-multiselect/combobox-readonly-multiselect-example.ts b/src/components-examples/aria/combobox/combobox-readonly-multiselect/combobox-readonly-multiselect-example.ts index 1e6a6eb4c6d1..61de9550d4ba 100644 --- a/src/components-examples/aria/combobox/combobox-readonly-multiselect/combobox-readonly-multiselect-example.ts +++ b/src/components-examples/aria/combobox/combobox-readonly-multiselect/combobox-readonly-multiselect-example.ts @@ -67,13 +67,13 @@ export class ComboboxReadonlyMultiselectExample { constructor() { // Updates the display value when the listbox values change. afterRenderEffect(() => { - const values = this.listbox()?.values() || []; - if (values.length === 0) { + const value = this.listbox()?.value() || []; + if (value.length === 0) { this.displayValue.set('Select a label'); - } else if (values.length === 1) { - this.displayValue.set(values[0]); + } else if (value.length === 1) { + this.displayValue.set(value[0]); } else { - this.displayValue.set(`${values[0]} + ${values.length - 1} more`); + this.displayValue.set(`${value[0]} + ${value.length - 1} more`); } }); diff --git a/src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.ts b/src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.ts index 264d221920b4..62c482a1c35a 100644 --- a/src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.ts +++ b/src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.ts @@ -67,8 +67,8 @@ export class ComboboxReadonlyExample { constructor() { // Updates the display value when the listbox values change. afterRenderEffect(() => { - const values = this.listbox()?.values() || []; - const displayValue = values.length ? values[0] : 'Select a label'; + const value = this.listbox()?.value() || []; + const displayValue = value.length ? value[0] : 'Select a label'; this.displayValue.set(displayValue); }); diff --git a/src/components-examples/aria/listbox/listbox-configurable/listbox-configurable-example.html b/src/components-examples/aria/listbox/listbox-configurable/listbox-configurable-example.html index e979b8fb8fd3..f39e842e284e 100644 --- a/src/components-examples/aria/listbox/listbox-configurable/listbox-configurable-example.html +++ b/src/components-examples/aria/listbox/listbox-configurable/listbox-configurable-example.html @@ -52,7 +52,7 @@
    { - const values = this.listbox()?.values(); + const value = this.listbox()?.value(); - if (!values?.length) { + if (!value?.length) { return 'Select a day'; } - if (values.length <= 2) { - return values.join(', '); + if (value.length <= 2) { + return value.join(', '); } - return `${values[0]} + ${values.length - 1} more`; + return `${value[0]} + ${value.length - 1} more`; }); /** The items available for selection. */ diff --git a/src/components-examples/aria/select/select/select-example.html b/src/components-examples/aria/select/select/select-example.html index 9dfd34de9b9f..00ed809cfa31 100644 --- a/src/components-examples/aria/select/select/select-example.html +++ b/src/components-examples/aria/select/select/select-example.html @@ -14,7 +14,7 @@ >
    -
    +
    @for (item of items; track item.label) {
    >(Listbox); /** The current value of the select. */ - value = computed(() => this.listbox()?.values()[0] ?? this.items[1]); + value = computed(() => this.listbox()?.value()[0] ?? this.items[1]); /** The items available for selection. */ items = [ diff --git a/src/components-examples/aria/toolbar/simple-toolbar.ts b/src/components-examples/aria/toolbar/simple-toolbar.ts index 56ed29dbd183..93cff9a7c677 100644 --- a/src/components-examples/aria/toolbar/simple-toolbar.ts +++ b/src/components-examples/aria/toolbar/simple-toolbar.ts @@ -90,7 +90,7 @@ export class SimpleToolbarRadioButton {
    -
    +
    @for (option of options; track option) {
    {{option}} diff --git a/src/components-examples/aria/tree/tree-configurable/tree-configurable-example.html b/src/components-examples/aria/tree/tree-configurable/tree-configurable-example.html index 9fbccf4943c4..a624afc1c3a1 100644 --- a/src/components-examples/aria/tree/tree-configurable/tree-configurable-example.html +++ b/src/components-examples/aria/tree/tree-configurable/tree-configurable-example.html @@ -36,7 +36,7 @@ [wrap]="wrap.value" [softDisabled]="softDisabled.value" [nav]="nav.value" - [(values)]="selectedValues" + [(value)]="selectedValues" #tree="ngTree" >