feat(cdk-experimental/combobox): add tree integration

Author: wagnermaciel

src/cdk-experimental/combobox/combobox.ts

@@ -18,7 +18,7 @@ import {
   WritableSignal,
 } from '@angular/core';
 import {DeferredContent, DeferredContentAware} from '@angular/cdk-experimental/deferred-content';
-import {ComboboxPattern, ComboboxPopupControls} from '../ui-patterns';
+import {ComboboxPattern, ComboboxListboxControls, ComboboxTreeControls} from '../ui-patterns';
 
 @Directive({
   selector: '[cdkCombobox]',
@@ -66,7 +66,7 @@ export class CdkCombobox<V> {
     ...this,
     inputEl: signal(undefined),
     containerEl: signal(undefined),
-    popupControls: () => this.popup()?.actions(),
+    popupControls: () => this.popup()?.controls(),
   });
 
   constructor() {
@@ -118,6 +118,8 @@ export class CdkComboboxPopup<V> {
   /** The combobox that the popup belongs to. */
   readonly combobox = inject<CdkCombobox<V>>(CdkCombobox, {optional: true});
 
-  /** The actions that the combobox can perform on the popup. */
-  readonly actions = signal<ComboboxPopupControls<any, V> | undefined>(undefined);
+  /** The controls the popup exposes to the combobox. */
+  readonly controls = signal<
+    ComboboxListboxControls<any, V> | ComboboxTreeControls<any, V> | undefined
+  >(undefined);
 }

src/cdk-experimental/deferred-content/deferred-content.ts

@@ -14,6 +14,7 @@ import {
   TemplateRef,
   signal,
   ViewContainerRef,
+  model,
 } from '@angular/core';
 
 /**
@@ -22,7 +23,7 @@ import {
 @Directive()
 export class DeferredContentAware {
   readonly contentVisible = signal(false);
-  readonly preserveContent = input(false);
+  readonly preserveContent = model(false);
 }
 
 /**

src/cdk-experimental/listbox/listbox.ts

@@ -138,7 +138,7 @@ export class CdkListbox<V> {
       : new ListboxPattern<V>(inputs);
 
     if (this._popup) {
-      this._popup.actions.set((this.pattern as ComboboxListboxPattern<V>).comboboxActions);
+      this._popup.controls.set(this.pattern as ComboboxListboxPattern<V>);
     }
 
     afterRenderEffect(() => {

src/cdk-experimental/tree/BUILD.bazel

@@ -10,6 +10,7 @@ ng_project(
         "tree.ts",
     ],
     deps = [
+        "//src/cdk-experimental/combobox",
         "//src/cdk-experimental/deferred-content",
         "//src/cdk-experimental/ui-patterns",
         "//src/cdk/a11y",

src/cdk-experimental/tree/tree.ts

@@ -23,7 +23,8 @@ import {
 import {_IdGenerator} from '@angular/cdk/a11y';
 import {Directionality} from '@angular/cdk/bidi';
 import {DeferredContent, DeferredContentAware} from '@angular/cdk-experimental/deferred-content';
-import {TreeItemPattern, TreePattern} from '../ui-patterns/tree/tree';
+import {ComboboxTreePattern, TreeItemPattern, TreePattern} from '../ui-patterns';
+import {CdkCombobox, CdkComboboxPopup} from '@angular/cdk-experimental/combobox';
 
 interface HasElement {
   element: Signal<HTMLElement>;
@@ -74,8 +75,14 @@ function sortDirectives(a: HasElement, b: HasElement) {
     '(pointerdown)': 'pattern.onPointerdown($event)',
     '(focusin)': 'onFocus()',
   },
+  hostDirectives: [{directive: CdkComboboxPopup}],
 })
 export class CdkTree<V> {
+  /** A reference to the parent combobox popup, if one exists. */
+  private readonly _popup = inject<CdkComboboxPopup<V>>(CdkComboboxPopup, {
+    optional: true,
+  });
+
   /** A reference to the tree element. */
   private readonly _elementRef = inject(ElementRef);
 
@@ -121,19 +128,30 @@ export class CdkTree<V> {
   );
 
   /** The UI pattern for the tree. */
-  readonly pattern: TreePattern<V> = new TreePattern<V>({
-    ...this,
-    allItems: computed(() =>
-      [...this._unorderedItems()].sort(sortDirectives).map(item => item.pattern),
-    ),
-    activeItem: signal(undefined),
-    element: () => this._elementRef.nativeElement,
-  });
+  readonly pattern: TreePattern<V>;
 
   /** Whether the tree has received focus yet. */
   private _hasFocused = signal(false);
 
   constructor() {
+    const inputs = {
+      ...this,
+      allItems: computed(() =>
+        [...this._unorderedItems()].sort(sortDirectives).map(item => item.pattern),
+      ),
+      activeItem: signal(undefined),
+      element: () => this._elementRef.nativeElement,
+      combobox: () => this._popup?.combobox?.pattern,
+    };
+
+    this.pattern = this._popup?.combobox
+      ? new ComboboxTreePattern<V>(inputs)
+      : new TreePattern<V>(inputs);
+
+    if (this._popup?.combobox) {
+      this._popup?.controls?.set(this.pattern as ComboboxTreePattern<V>);
+    }
+
     afterRenderEffect(() => {
       if (!this._hasFocused()) {
         this.pattern.setDefaultState();
@@ -176,7 +194,7 @@ export class CdkTree<V> {
     '[attr.aria-setsize]': 'pattern.setsize()',
     '[attr.aria-posinset]': 'pattern.posinset()',
     '[attr.tabindex]': 'pattern.tabindex()',
-    '[attr.inert]': 'pattern.visible() ? null : true',
+    '[attr.inert]': 'pattern.inert()',
   },
 })
 export class CdkTreeItem<V> implements OnInit, OnDestroy, HasElement {
@@ -312,10 +330,19 @@ export class CdkTreeItemGroup<V> implements OnInit, OnDestroy, HasElement {
   /** Tree item that owns the group. */
   readonly ownedBy = input.required<CdkTreeItem<V>>();
 
+  /** The combobox that the input belongs to. */
+  // readonly combobox = inject(CdkCombobox);
+
   constructor() {
+    this._deferredContentAware.preserveContent.set(true);
     // Connect the group's hidden state to the DeferredContentAware's visibility.
     afterRenderEffect(() => {
-      this._deferredContentAware.contentVisible.set(this.visible());
+      const tree = this.ownedBy().tree();
+      if (tree.pattern instanceof ComboboxTreePattern) {
+        this._deferredContentAware.contentVisible.set(
+          tree.pattern.inputs.combobox()?.isFocused() ?? false,
+        );
+      }
     });
   }
 

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

@@ -38,7 +38,7 @@ export class ExpansionControl {
     this.disabled = inputs.disabled;
   }
 
-  /** Requests the Expansopn manager to open this item. */
+  /** Requests the Expansion manager to open this item. */
   open() {
     this.inputs.expansionManager.open(this);
   }

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

@@ -17,7 +17,7 @@ export type ComboboxInputs<T extends ListItem<V>, V> = {
   value: WritableSignalLike<V | undefined>;
 
   /** The controls for the popup associated with the combobox. */
-  popupControls: SignalLike<ComboboxPopupControls<T, V> | undefined>;
+  popupControls: SignalLike<ComboboxListboxControls<T, V> | ComboboxTreeControls<T, V> | undefined>;
 
   /** The HTML input element that serves as the combobox input. */
   inputEl: SignalLike<HTMLInputElement | undefined>;
@@ -33,7 +33,10 @@ export type ComboboxInputs<T extends ListItem<V>, V> = {
 };
 
 /** An interface that allows combobox popups to expose the necessary controls for the combobox. */
-export type ComboboxPopupControls<T extends ListItem<V>, V> = {
+export type ComboboxListboxControls<T extends ListItem<V>, V> = {
+  /** The ARIA role for the popup. */
+  role: SignalLike<'listbox' | 'tree' | 'grid'>;
+
   /** The ID of the active item in the popup. */
   activeId: SignalLike<string | undefined>;
 
@@ -71,6 +74,17 @@ export type ComboboxPopupControls<T extends ListItem<V>, V> = {
   setValue: (value: V | undefined) => void; // For re-setting the value if the popup was destroyed.
 };
 
+export type ComboboxTreeControls<T extends ListItem<V>, V> = ComboboxListboxControls<T, V> & {
+  /** Expands the currently active item in the popup. */
+  expandItem: () => void;
+
+  /** Collapses the currently active item in the popup. */
+  collapseItem: () => void;
+
+  /** Checks if the currently active item in the popup is expandable. */
+  isItemExpandable: () => boolean;
+};
+
 /** Controls the state of a combobox. */
 export class ComboboxPattern<T extends ListItem<V>, V> {
   /** Whether the combobox is expanded. */
@@ -88,6 +102,12 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
   /** Whether the combobox is focused. */
   isFocused = signal(false);
 
+  /** The key used to navigate to the previous item in the list. */
+  expandKey = computed(() => 'ArrowRight'); // TODO: RTL support.
+
+  /** The key used to navigate to the next item in the list. */
+  collapseKey = computed(() => 'ArrowLeft'); // TODO: RTL support.
+
   /** The keydown event manager for the combobox. */
   keydown = computed(() => {
     if (!this.expanded()) {
@@ -96,15 +116,21 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
         .on('ArrowUp', () => this.open({last: true}));
     }
 
-    return new KeyboardEventManager()
+    const popupControls = this.inputs.popupControls();
+
+    if (!popupControls) {
+      return new KeyboardEventManager();
+    }
+
+    const manager = new KeyboardEventManager()
       .on('ArrowDown', () => this.next())
       .on('ArrowUp', () => this.prev())
       .on('Home', () => this.first())
       .on('End', () => this.last())
       .on('Escape', () => {
-        if (this.inputs.filterMode() === 'highlight' && this.inputs.popupControls()?.activeId()) {
-          this.inputs.popupControls()?.unfocus();
-          this.inputs.popupControls()?.clearSelection();
+        if (this.inputs.filterMode() === 'highlight' && popupControls.activeId()) {
+          popupControls.unfocus();
+          popupControls.clearSelection();
 
           const inputEl = this.inputs.inputEl();
 
@@ -116,6 +142,18 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
         }
       }) // TODO: When filter mode is 'highlight', escape should revert to the last committed value.
       .on('Enter', () => this.select({commit: true, close: true}));
+
+    if (popupControls.role() === 'tree') {
+      const treeControls = popupControls as ComboboxTreeControls<T, V>;
+
+      if (treeControls.isItemExpandable()) {
+        manager
+          .on(this.expandKey(), () => treeControls.expandItem())
+          .on(this.collapseKey(), () => treeControls.collapseItem());
+      }
+    }
+
+    return manager;
   });
 
   /** The pointerup event manager for the combobox. */

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

@@ -2,14 +2,23 @@ import {computed} from '@angular/core';
 import {ListboxInputs, ListboxPattern} from './listbox';
 import {SignalLike} from '../behaviors/signal-like/signal-like';
 import {OptionPattern} from './option';
-import {ComboboxPattern, ComboboxPopupControls} from '../combobox/combobox';
+import {ComboboxPattern, ComboboxListboxControls} from '../combobox/combobox';
 
 export type ComboboxListboxInputs<V> = ListboxInputs<V> & {
   /** The combobox controlling the listbox. */
   combobox: SignalLike<ComboboxPattern<OptionPattern<V>, V> | undefined>;
 };
 
-export class ComboboxListboxPattern<V> extends ListboxPattern<V> {
+export class ComboboxListboxPattern<V>
+  extends ListboxPattern<V>
+  implements ComboboxListboxControls<OptionPattern<V>, V>
+{
+  role = () => 'listbox' as const;
+
+  /** The id of the active (focused) item in the listbox. */
+  activeId = computed(() => this.listBehavior.activedescendant());
+
+  /** The tabindex for the listbox. Always -1 because the combobox handles focus. */
   override tabindex: SignalLike<-1 | 0> = () => -1;
 
   constructor(override readonly inputs: ComboboxListboxInputs<V>) {
@@ -22,30 +31,52 @@ export class ComboboxListboxPattern<V> extends ListboxPattern<V> {
     super(inputs);
   }
 
+  /** Noop. The combobox handles keydown events. */
   override onKeydown(_: KeyboardEvent): void {}
+
+  /** Noop. The combobox handles pointerdown events. */
   override onPointerdown(_: PointerEvent): void {}
+
+  /** Noop. The combobox controls the open state. */
   override setDefaultState(): void {}
 
-  /** The actions that can be performed on a combobox popup listbox. */
-  comboboxActions: ComboboxPopupControls<OptionPattern<V>, V> = {
-    activeId: computed(() => this.listBehavior.activedescendant()),
-    next: () => this.listBehavior.next(),
-    prev: () => this.listBehavior.prev(),
-    last: () => this.listBehavior.last(),
-    first: () => this.listBehavior.first(),
-    unfocus: () => this.listBehavior.unfocus(),
-    select: item => this.listBehavior.select(item),
-    clearSelection: () => this.listBehavior.deselectAll(),
-    getItem: e => this._getItem(e),
-    getSelectedItem: () => this.inputs.items().find(i => i.selected()),
-    setValue: (value: V | undefined) => this.inputs.value.set(value ? [value] : []),
-    filter: (text: string) => {
-      const filterFn = this.inputs.combobox()!.inputs.filter();
-
-      this.inputs.items().forEach(i => {
-        const isMatch = filterFn(text, i.searchTerm());
-        i.inert.set(isMatch ? null : true);
-      });
-    },
+  /** Navigates to the next focusable item in the listbox. */
+  next = () => this.listBehavior.next();
+
+  /** Navigates to the previous focusable item in the listbox. */
+  prev = () => this.listBehavior.prev();
+
+  /** Navigates to the last focusable item in the listbox. */
+  last = () => this.listBehavior.last();
+
+  /** Navigates to the first focusable item in the listbox. */
+  first = () => this.listBehavior.first();
+
+  /** Unfocuses the currently focused item in the listbox. */
+  unfocus = () => this.listBehavior.unfocus();
+
+  /** Selects the specified item in the listbox. */
+  select = (item?: OptionPattern<V>) => this.listBehavior.select(item);
+
+  /** Clears the selection in the listbox. */
+  clearSelection = () => this.listBehavior.deselectAll();
+
+  /** Retrieves the OptionPattern associated with a pointer event. */
+  getItem = (e: PointerEvent) => this._getItem(e);
+
+  /** Retrieves the currently selected item in the listbox. */
+  getSelectedItem = () => this.inputs.items().find(i => i.selected());
+
+  /** Sets the value of the combobox listbox. */
+  setValue = (value: V | undefined) => this.inputs.value.set(value ? [value] : []);
+
+  /** Filters the items in the listbox based on the provided text. */
+  filter = (text: string) => {
+    const filterFn = this.inputs.combobox()!.inputs.filter();
+
+    this.inputs.items().forEach(i => {
+      const isMatch = filterFn(text, i.searchTerm());
+      i.inert.set(isMatch ? null : true);
+    });
   };
 }

src/cdk-experimental/ui-patterns/public-api.ts

@@ -16,3 +16,5 @@ export * from './behaviors/signal-like/signal-like';
 export * from './tabs/tabs';
 export * from './accordion/accordion';
 export * from './toolbar/toolbar';
+export * from './tree/tree';
+export * from './tree/combobox-tree';

src/cdk-experimental/ui-patterns/tree/BUILD.bazel

@@ -5,6 +5,7 @@ package(default_visibility = ["//visibility:public"])
 ts_project(
     name = "tree",
     srcs = [
+        "combobox-tree.ts",
         "tree.ts",
     ],
     deps = [
@@ -13,6 +14,7 @@ ts_project(
         "//src/cdk-experimental/ui-patterns/behaviors/expansion",
         "//src/cdk-experimental/ui-patterns/behaviors/list",
         "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
+        "//src/cdk-experimental/ui-patterns/combobox",
     ],
 )