Skip to content

Commit f0e411b

Browse files
crisbetocrisbeto
committed
refactor(multiple): expose APIs necessary for demos
Exposes some APIs used in the demos instead of accessing the private `_pattern`.
1 parent d8841fc commit f0e411b

File tree

32 files changed

+63
-57
lines changed

32 files changed

+63
-57
lines changed

‎src/aria/combobox/combobox.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
import {
1010
afterRenderEffect,
11+
computed,
1112
contentChild,
1213
Directive,
1314
ElementRef,
@@ -37,7 +38,7 @@ import {toSignal} from '@angular/core/rxjs-interop';
3738
},
3839
],
3940
host: {
40-
'[attr.data-expanded]': '_pattern.expanded()',
41+
'[attr.data-expanded]': 'expanded()',
4142
'(input)': '_pattern.onInput($event)',
4243
'(keydown)': '_pattern.onKeydown($event)',
4344
'(pointerup)': '_pattern.onPointerup($event)',
@@ -81,6 +82,12 @@ export class Combobox<V> {
8182
/** The value of the first matching item in the popup. */
8283
readonly firstMatch = input<V | undefined>(undefined);
8384

85+
/** Whether the combobox is expanded. */
86+
readonly expanded = computed(() => this._pattern.expanded());
87+
88+
/** Input element connected to the combobox, if any. */
89+
readonly inputElement = computed(() => this._pattern.inputs.inputEl());
90+
8491
/** The combobox ui pattern. */
8592
readonly _pattern = new ComboboxPattern<any, V>({
8693
...this,

‎src/aria/listbox/listbox.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,10 @@ export class Listbox<V> {
183183
onFocus() {
184184
this._hasFocused.set(true);
185185
}
186+
187+
scrollActiveItemIntoView(options: ScrollIntoViewOptions = {block: 'nearest'}) {
188+
this._pattern.inputs.activeItem()?.element().scrollIntoView(options);
189+
}
186190
}
187191

188192
/** A selectable option in a Listbox. */
@@ -233,6 +237,9 @@ export class Option<V> {
233237
/** The text used by the typeahead search. */
234238
label = input<string>();
235239

240+
/** Whether the option is selected. */
241+
readonly selected = computed(() => this._pattern.selected());
242+
236243
/** The Option UIPattern. */
237244
readonly _pattern = new OptionPattern<V>({
238245
...this,

‎src/aria/radio-group/radio-group.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,9 @@ export class RadioButton<V> {
238238
/** Whether the radio button is disabled. */
239239
disabled = input(false, {transform: booleanAttribute});
240240

241+
/** Whether the radio button is selected. */
242+
readonly selected = computed(() => this._pattern.selected());
243+
241244
/** The RadioButton UIPattern. */
242245
readonly _pattern = new RadioButtonPattern<V>({
243246
...this,

‎src/aria/tree/tree.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,10 @@ export class Tree<V> {
201201
this._unorderedItems().delete(child);
202202
this._unorderedItems.set(new Set(this._unorderedItems()));
203203
}
204+
205+
scrollActiveItemIntoView(options: ScrollIntoViewOptions = {block: 'nearest'}) {
206+
this._pattern.inputs.activeItem()?.element().scrollIntoView(options);
207+
}
204208
}
205209

206210
/**

‎src/components-examples/aria/combobox/combobox-auto-select/combobox-auto-select-example.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,18 +46,16 @@ export class ComboboxAutoSelectExample {
4646
afterRenderEffect(() => {
4747
const popover = this.popover()!;
4848
const combobox = this.combobox()!;
49-
combobox._pattern.expanded() ? this.showPopover() : popover.nativeElement.hidePopover();
50-
51-
// TODO(wagnermaciel): Make this easier for developers to do.
52-
this.listbox()?._pattern.inputs.activeItem()?.element().scrollIntoView({block: 'nearest'});
49+
combobox.expanded() ? this.showPopover() : popover.nativeElement.hidePopover();
50+
this.listbox()?.scrollActiveItemIntoView();
5351
});
5452
}
5553

5654
showPopover() {
5755
const popover = this.popover()!;
5856
const combobox = this.combobox()!;
5957

60-
const comboboxRect = combobox._pattern.inputs.inputEl()?.getBoundingClientRect();
58+
const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
6159
const popoverEl = popover.nativeElement;
6260

6361
if (comboboxRect) {

‎src/components-examples/aria/combobox/combobox-highlight/combobox-highlight-example.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,18 +55,17 @@ export class ComboboxHighlightExample {
5555
afterRenderEffect(() => {
5656
const popover = this.popover()!;
5757
const combobox = this.combobox()!;
58-
combobox._pattern.expanded() ? this.showPopover() : popover.nativeElement.hidePopover();
58+
combobox.expanded() ? this.showPopover() : popover.nativeElement.hidePopover();
5959

60-
// TODO(wagnermaciel): Make this easier for developers to do.
61-
this.listbox()?._pattern.inputs.activeItem()?.element().scrollIntoView({block: 'nearest'});
60+
this.listbox()?.scrollActiveItemIntoView();
6261
});
6362
}
6463

6564
showPopover() {
6665
const popover = this.popover()!;
6766
const combobox = this.combobox()!;
6867

69-
const comboboxRect = combobox._pattern.inputs.inputEl()?.getBoundingClientRect();
68+
const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
7069
const popoverEl = popover.nativeElement;
7170

7271
if (comboboxRect) {

‎src/components-examples/aria/combobox/combobox-manual/combobox-manual-example.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,18 +55,17 @@ export class ComboboxManualExample {
5555
afterRenderEffect(() => {
5656
const popover = this.popover()!;
5757
const combobox = this.combobox()!;
58-
combobox._pattern.expanded() ? this.showPopover() : popover.nativeElement.hidePopover();
58+
combobox.expanded() ? this.showPopover() : popover.nativeElement.hidePopover();
5959

60-
// TODO(wagnermaciel): Make this easier for developers to do.
61-
this.listbox()?._pattern.inputs.activeItem()?.element().scrollIntoView({block: 'nearest'});
60+
this.listbox()?.scrollActiveItemIntoView();
6261
});
6362
}
6463

6564
showPopover() {
6665
const popover = this.popover()!;
6766
const combobox = this.combobox()!;
6867

69-
const comboboxRect = combobox._pattern.inputs.inputEl()?.getBoundingClientRect();
68+
const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
7069
const popoverEl = popover.nativeElement;
7170

7271
if (comboboxRect) {

‎src/components-examples/aria/combobox/combobox-readonly/combobox-readonly-example.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,18 +51,17 @@ export class ComboboxReadonlyExample {
5151
afterRenderEffect(() => {
5252
const popover = this.popover()!;
5353
const combobox = this.combobox()!;
54-
combobox._pattern.expanded() ? this.showPopover() : popover.nativeElement.hidePopover();
54+
combobox.expanded() ? this.showPopover() : popover.nativeElement.hidePopover();
5555

56-
// TODO(wagnermaciel): Make this easier for developers to do.
57-
this.listbox()?._pattern.inputs.activeItem()?.element().scrollIntoView({block: 'nearest'});
56+
this.listbox()?.scrollActiveItemIntoView();
5857
});
5958
}
6059

6160
showPopover() {
6261
const popover = this.popover()!;
6362
const combobox = this.combobox()!;
6463

65-
const comboboxRect = combobox._pattern.inputs.inputEl()?.getBoundingClientRect();
64+
const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
6665
const popoverEl = popover.nativeElement;
6766

6867
if (comboboxRect) {

‎src/components-examples/aria/combobox/combobox-tree-auto-select/combobox-tree-auto-select-example.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -81,18 +81,16 @@ export class ComboboxTreeAutoSelectExample {
8181
afterRenderEffect(() => {
8282
const popover = this.popover()!;
8383
const combobox = this.combobox()!;
84-
combobox._pattern.expanded() ? this.showPopover() : popover.nativeElement.hidePopover();
85-
86-
// TODO(wagnermaciel): Make this easier for developers to do.
87-
this.tree()?._pattern.inputs.activeItem()?.element().scrollIntoView({block: 'nearest'});
84+
combobox.expanded() ? this.showPopover() : popover.nativeElement.hidePopover();
85+
this.tree()?.scrollActiveItemIntoView();
8886
});
8987
}
9088

9189
showPopover() {
9290
const popover = this.popover()!;
9391
const combobox = this.combobox()!;
9492

95-
const comboboxRect = combobox._pattern.inputs.inputEl()?.getBoundingClientRect();
93+
const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
9694
const popoverEl = popover.nativeElement;
9795

9896
if (comboboxRect) {

‎src/components-examples/aria/combobox/combobox-tree-highlight/combobox-tree-highlight-example.ts‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -81,18 +81,16 @@ export class ComboboxTreeHighlightExample {
8181
afterRenderEffect(() => {
8282
const popover = this.popover()!;
8383
const combobox = this.combobox()!;
84-
combobox._pattern.expanded() ? this.showPopover() : popover.nativeElement.hidePopover();
85-
86-
// TODO(wagnermaciel): Make this easier for developers to do.
87-
this.tree()?._pattern.inputs.activeItem()?.element().scrollIntoView({block: 'nearest'});
84+
combobox.expanded() ? this.showPopover() : popover.nativeElement.hidePopover();
85+
this.tree()?.scrollActiveItemIntoView();
8886
});
8987
}
9088

9189
showPopover() {
9290
const popover = this.popover()!;
9391
const combobox = this.combobox()!;
9492

95-
const comboboxRect = combobox._pattern.inputs.inputEl()?.getBoundingClientRect();
93+
const comboboxRect = combobox.inputElement()?.getBoundingClientRect();
9694
const popoverEl = popover.nativeElement;
9795

9896
if (comboboxRect) {

0 commit comments

Comments
 (0)