refactor(aria/combobox): revert autocomplete examples and move simple-combobox variants

Author: tjshiu

src/components-examples/aria/autocomplete/BUILD.bazel

@@ -13,8 +13,8 @@ ng_project(
         "//:node_modules/@angular/common",
         "//:node_modules/@angular/core",
         "//:node_modules/@angular/forms",
+        "//src/aria/combobox",
         "//src/aria/listbox",
-        "//src/aria/simple-combobox",
         "//src/cdk/overlay",
     ],
 )

src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.html

@@ -1,13 +1,10 @@
-<div class="example-combobox-container">
+<div ngCombobox filterMode="auto-select">
   <div #origin class="example-autocomplete">
     <span class="example-search-icon material-symbols-outlined" translate="no">search</span>
     <input
-      ngCombobox
-      #combobox="ngCombobox"
       aria-label="Label dropdown"
       placeholder="Select a country"
-      [(value)]="searchString"
-      [(expanded)]="popupExpanded"
+      ngComboboxInput
     />
     <button
       class="example-clear-button"
@@ -23,14 +20,17 @@
     {{countries().length === 0 ? 'No results found for ' + query() : ''}}
   </div>
 
-  <ng-template [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}" [cdkConnectedOverlayOpen]="true">
-    <ng-template ngComboboxPopup [combobox]="combobox">
+  <ng-template ngComboboxPopupContainer>
+    <ng-template
+      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
+      [cdkConnectedOverlayOpen]="true"
+    >
       <div class="example-popup">
         @if (countries().length === 0) {
           <div class="example-no-results">No results found</div>
         }
 
-        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabIndex]="-1" [(value)]="selectedOption" (click)="onCommit()" (keydown.enter)="onCommit()">
+        <div ngListbox>
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country" [disabled]="country === 'Brazil'">
               <span class="example-option-label">{{country}}</span>

src/components-examples/aria/autocomplete/autocomplete-auto-select/autocomplete-auto-select-example.ts

@@ -6,15 +6,20 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/simple-combobox';
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxPopup,
+  ComboboxPopupContainer,
+} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {
   afterRenderEffect,
   ChangeDetectionStrategy,
   Component,
   computed,
-  signal,
   viewChild,
+  viewChildren,
 } from '@angular/core';
 import {COUNTRIES} from '../countries';
 import {OverlayModule} from '@angular/cdk/overlay';
@@ -25,52 +30,60 @@ import {FormsModule} from '@angular/forms';
   selector: 'autocomplete-auto-select-example',
   templateUrl: 'autocomplete-auto-select-example.html',
   styleUrl: '../autocomplete.css',
-  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
+  imports: [
+    Combobox,
+    ComboboxInput,
+    ComboboxPopup,
+    ComboboxPopupContainer,
+    Listbox,
+    Option,
+    OverlayModule,
+    FormsModule,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AutocompleteAutoSelectExample {
   /** The selected value of the combobox. */
-  readonly listbox = viewChild(Listbox);
-  readonly combobox = viewChild(Combobox);
+  listbox = viewChild<Listbox<string>>(Listbox);
+
+  /** The options available in the listbox. */
+  options = viewChildren<Option<string>>(Option);
+
+  /** A reference to the ng aria combobox. */
+  combobox = viewChild<Combobox<string>>(Combobox);
 
-  popupExpanded = signal(false);
-  searchString = signal('');
-  selectedOption = signal<string[]>([]);
+  /** A reference to the ng aria combobox input. */
+  comboboxInput = viewChild<ComboboxInput>(ComboboxInput);
 
   /** The query string used to filter the list of countries. */
-  query = computed(() => this.searchString());
+  query = computed(() => this.comboboxInput()?.value() || '');
 
   /** The list of countries filtered by the query. */
   countries = computed(() =>
     COUNTRIES.filter(country => country.toLowerCase().startsWith(this.query().toLowerCase())),
   );
 
   constructor() {
+    // Scrolls to the active item when the active option changes.
     afterRenderEffect(() => {
-      this.listbox()?.scrollActiveItemIntoView();
+      if (this.combobox()?.expanded()) {
+        const option = this.options().find(opt => opt.active());
+        option?.element.scrollIntoView({block: 'nearest'});
+      }
     });
   }
 
   /** Clears the query and the listbox value. */
   clear(): void {
-    this.searchString.set('');
-    this.selectedOption.set([]);
-  }
-
-  onCommit() {
-    const selectedOption = this.selectedOption();
-    if (selectedOption.length > 0) {
-      this.searchString.set(selectedOption[0]);
-    }
-    this.popupExpanded.set(false);
-    this.combobox()?.element.focus();
+    this.comboboxInput()?.value.set('');
+    this.listbox?.()?.value.set([]);
   }
 
   /** Handles keydown events on the clear button. */
   onKeydown(event: KeyboardEvent): void {
     if (event.key === 'Enter') {
       this.clear();
-      this.popupExpanded.set(false);
+      this.combobox?.()?.close();
       event.stopPropagation();
     }
   }

src/components-examples/aria/autocomplete/autocomplete-disabled/autocomplete-disabled-example.html

@@ -1,26 +1,24 @@
-<div class="example-combobox-container">
+<div ngCombobox disabled>
   <div #origin class="example-autocomplete">
     <span class="example-search-icon material-symbols-outlined" translate="no">search</span>
     <input
-      ngCombobox
-      #combobox="ngCombobox"
       aria-label="Label dropdown"
       placeholder="Select a country"
-      [(value)]="searchString"
-      [(expanded)]="popupExpanded"
-      disabled
-      readonly
+      ngComboboxInput
     />
   </div>
 
-  <ng-template [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}" [cdkConnectedOverlayOpen]="true">
-    <ng-template ngComboboxPopup [combobox]="combobox">
+  <ng-template ngComboboxPopupContainer>
+    <ng-template
+      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
+      [cdkConnectedOverlayOpen]="true"
+    >
       <div class="example-popup">
         @if (countries().length === 0) {
           <div class="example-no-results">No results found</div>
         }
 
-        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabIndex]="-1" [(value)]="selectedOption">
+        <div ngListbox>
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country" [disabled]="country === 'Brazil'">
               <span class="example-option-label">{{country}}</span>

src/components-examples/aria/autocomplete/autocomplete-disabled/autocomplete-disabled-example.ts

@@ -6,7 +6,12 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/simple-combobox';
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxPopup,
+  ComboboxPopupContainer,
+} from '@angular/aria/combobox';
 import {Listbox, Option} from '@angular/aria/listbox';
 import {
   afterRenderEffect,
@@ -15,6 +20,7 @@ import {
   computed,
   signal,
   viewChild,
+  viewChildren,
 } from '@angular/core';
 import {COUNTRIES} from '../countries';
 import {OverlayModule} from '@angular/cdk/overlay';
@@ -25,29 +31,40 @@ import {FormsModule} from '@angular/forms';
   selector: 'autocomplete-disabled-example',
   templateUrl: 'autocomplete-disabled-example.html',
   styleUrl: '../autocomplete.css',
-  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
+  imports: [
+    Combobox,
+    ComboboxInput,
+    ComboboxPopup,
+    ComboboxPopupContainer,
+    Listbox,
+    Option,
+    OverlayModule,
+    FormsModule,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AutocompleteDisabledExample {
-  /** The selected value of the combobox. */
-  readonly listbox = viewChild(Listbox);
-  readonly combobox = viewChild(Combobox);
+  /** The options available in the listbox. */
+  options = viewChildren<Option<string>>(Option);
 
-  popupExpanded = signal(false);
-  searchString = signal('United States of America');
-  selectedOption = signal<string[]>([]);
+  /** A reference to the ng aria combobox. */
+  combobox = viewChild<Combobox<string>>(Combobox);
 
   /** The query string used to filter the list of countries. */
-  query = computed(() => this.searchString());
+  query = signal('United States of America');
 
   /** The list of countries filtered by the query. */
   countries = computed(() =>
     COUNTRIES.filter(country => country.toLowerCase().startsWith(this.query().toLowerCase())),
   );
 
   constructor() {
+    // Scrolls to the active item when the active option changes.
     afterRenderEffect(() => {
-      this.listbox()?.scrollActiveItemIntoView();
+      if (this.combobox()?.expanded()) {
+        const option = this.options().find(opt => opt.active());
+        option?.element.scrollIntoView({block: 'nearest'});
+      }
     });
   }
 }

src/components-examples/aria/autocomplete/autocomplete-highlight/autocomplete-highlight-example.html

@@ -1,14 +1,10 @@
-<div class="example-combobox-container">
+<div ngCombobox filterMode="highlight">
   <div #origin class="example-autocomplete">
     <span class="example-search-icon material-symbols-outlined" translate="no">search</span>
     <input
-      ngCombobox
-      #combobox="ngCombobox"
       aria-label="Label dropdown"
       placeholder="Select a country"
-      [(value)]="searchString"
-      [(expanded)]="popupExpanded"
-      [inlineSuggestion]="selectedOption()[0] || countries()[0]"
+      ngComboboxInput
     />
     <button
       class="example-clear-button"
@@ -23,15 +19,18 @@
   <div aria-live="polite" class="cdk-visually-hidden">
     {{countries().length === 0 ? 'No results found for ' + query() : ''}}
   </div>
-
-  <ng-template [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}" [cdkConnectedOverlayOpen]="true">
-    <ng-template ngComboboxPopup [combobox]="combobox">
+ 
+  <ng-template ngComboboxPopupContainer>
+    <ng-template
+      [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: true}"
+      [cdkConnectedOverlayOpen]="true"
+    >
       <div class="example-popup">
         @if (countries().length === 0) {
           <div class="example-no-results">No results found</div>
         }
 
-        <div ngListbox ngComboboxWidget focusMode="activedescendant" [tabIndex]="-1" [(value)]="selectedOption" (click)="onCommit()" (keydown.enter)="onCommit()">
+        <div ngListbox>
           @for (country of countries(); track country) {
             <div ngOption [value]="country" [label]="country" [disabled]="country === 'Brazil'">
               <span class="example-option-label">{{country}}</span>