refactor(aria/tree): simplify expansion logic

Author: wagnermaciel

src/aria/private/behaviors/tree/BUILD.bazel

@@ -7,6 +7,7 @@ ts_project(
     srcs = ["tree.ts"],
     deps = [
         "//:node_modules/@angular/core",
+        "//src/aria/private/behaviors/expansion",
         "//src/aria/private/behaviors/list",
         "//src/aria/private/behaviors/list-focus",
         "//src/aria/private/behaviors/list-navigation",

src/aria/private/behaviors/tree/tree.spec.ts

@@ -17,9 +17,10 @@ interface TestItem<V = number> extends TreeItem<V, TestItem<V>> {
   searchTerm: WritableSignalLike<string>;
   index: WritableSignalLike<number>;
   children: WritableSignalLike<TestItem<V>[]>;
-  parent?: TestItem<V>;
+  parent: WritableSignalLike<TestItem<V> | undefined>;
   visible: WritableSignalLike<boolean>;
   expanded: WritableSignalLike<boolean>;
+  expandable: WritableSignalLike<boolean>;
   focusable: WritableSignalLike<boolean>;
 }
 
@@ -44,6 +45,7 @@ describe('Tree Behavior', () => {
       ...focusInputs,
       values: signal([]),
       multi: signal(false),
+      multiExpandable: signal(true),
       selectionMode: signal('follow'),
       wrap: signal(true),
       orientation: signal('vertical'),
@@ -65,8 +67,10 @@ describe('Tree Behavior', () => {
           searchTerm: signal(String(value)),
           index: signal(index),
           children: signal<TestItem<V>[]>([]),
+          parent: signal<TestItem<V> | undefined>(undefined),
           visible: signal(true),
           expanded: signal(false),
+          expandable: signal(true),
           focusable: signal(true),
         }) as TestItem<V>,
     );
@@ -79,7 +83,7 @@ describe('Tree Behavior', () => {
       const parent = items[Number(parentIdx)];
       const children = childIndices.map(i => items[i]);
       parent.children.set(children);
-      children.forEach(child => (child.parent = parent));
+      children.forEach(child => child.parent.set(parent));
     });
   }
 

src/aria/private/behaviors/tree/tree.ts

@@ -7,6 +7,7 @@
  */
 
 import {computed, signal, SignalLike} from '../signal-like/signal-like';
+import {ExpansionItem, ListExpansion, ListExpansionInputs} from '../expansion/expansion';
 import {ListFocus, ListFocusInputs, ListFocusItem} from '../list-focus/list-focus';
 import {
   ListNavigation,
@@ -28,15 +29,17 @@ import {NavOptions} from '../list/list';
 
 /** Represents an item in the tree. */
 export interface TreeItem<V, T extends TreeItem<V, T>>
-  extends ListTypeaheadItem, ListNavigationItem, ListSelectionItem<V>, ListFocusItem {
+  extends
+    ListTypeaheadItem,
+    ListNavigationItem,
+    ListSelectionItem<V>,
+    ListFocusItem,
+    ExpansionItem {
   /** The children of this item. */
-  children?: SignalLike<T[]>;
-
-  /** Whether this item is expanded. */
-  expanded?: SignalLike<boolean>;
+  children: SignalLike<T[] | undefined>;
 
   /** The parent of this item. */
-  parent?: T;
+  parent: SignalLike<T | undefined>;
 
   /** Whether this item is visible. */
   visible: SignalLike<boolean>;
@@ -46,7 +49,8 @@ export interface TreeItem<V, T extends TreeItem<V, T>>
 export type TreeInputs<T extends TreeItem<V, T>, V> = ListFocusInputs<T> &
   ListNavigationInputs<T> &
   ListSelectionInputs<T, V> &
-  ListTypeaheadInputs<T>;
+  ListTypeaheadInputs<T> &
+  ListExpansionInputs;
 
 /** Controls the state of a tree. */
 export class Tree<T extends TreeItem<V, T>, V> {
@@ -62,6 +66,9 @@ export class Tree<T extends TreeItem<V, T>, V> {
   /** Controls focus for the tree. */
   focusBehavior: ListFocus<T>;
 
+  /** Controls expansion for the tree. */
+  expansionBehavior: ListExpansion;
+
   /** Whether the tree is disabled. */
   disabled = computed(() => this.focusBehavior.isListDisabled());
 
@@ -81,10 +88,11 @@ export class Tree<T extends TreeItem<V, T>, V> {
   private _wrap = signal(true);
 
   constructor(readonly inputs: TreeInputs<T, V>) {
-    this.focusBehavior = new ListFocus(inputs);
-    this.selectionBehavior = new ListSelection({...inputs, focusManager: this.focusBehavior});
-    this.typeaheadBehavior = new ListTypeahead({...inputs, focusManager: this.focusBehavior});
-    this.navigationBehavior = new ListNavigation({
+    this.focusBehavior = new ListFocus<T>(inputs);
+    this.selectionBehavior = new ListSelection<T, V>({...inputs, focusManager: this.focusBehavior});
+    this.typeaheadBehavior = new ListTypeahead<T>({...inputs, focusManager: this.focusBehavior});
+    this.expansionBehavior = new ListExpansion(inputs);
+    this.navigationBehavior = new ListNavigation<T>({
       ...inputs,
       focusManager: this.focusBehavior,
       wrap: computed(() => this._wrap() && this.inputs.wrap()),
@@ -138,7 +146,11 @@ export class Tree<T extends TreeItem<V, T>, V> {
   nextSibling(opts?: NavOptions<T>) {
     this._navigate(opts, () => {
       const item = this.inputs.activeItem();
-      const items = item?.parent?.children?.()?.filter(c => c.visible() !== false) ?? [];
+      const items =
+        item
+          ?.parent?.()
+          ?.children?.()
+          ?.filter(c => c.visible() !== false) ?? [];
       return this.navigationBehavior.next({items, ...opts});
     });
   }
@@ -147,15 +159,19 @@ export class Tree<T extends TreeItem<V, T>, V> {
   prevSibling(opts?: NavOptions<T>) {
     this._navigate(opts, () => {
       const item = this.inputs.activeItem();
-      const items = item?.parent?.children?.()?.filter(c => c.visible() !== false) ?? [];
+      const items =
+        item
+          ?.parent?.()
+          ?.children?.()
+          ?.filter(c => c.visible() !== false) ?? [];
       return this.navigationBehavior.prev({items, ...opts});
     });
   }
 
   /** Navigates to the parent of the current active item. */
   parent(opts?: NavOptions<T>) {
     this._navigate(opts, () =>
-      this.navigationBehavior.goto(this.inputs.activeItem()?.parent, opts),
+      this.navigationBehavior.goto(this.inputs.activeItem()?.parent?.(), opts),
     );
   }
 
@@ -219,11 +235,59 @@ export class Tree<T extends TreeItem<V, T>, V> {
     this.selectionBehavior.toggleAll();
   }
 
+  /** Toggles the expansion of the given item. */
+  toggleExpansion(item?: T) {
+    item ??= this.inputs.activeItem();
+    if (!item || !this.isFocusable(item)) return;
+
+    if (this.isExpandable(item)) {
+      this.expansionBehavior.toggle(item);
+    }
+  }
+
+  /** Expands the given item. */
+  expand(item: T) {
+    if (this.isExpandable(item)) {
+      this.expansionBehavior.open(item);
+    }
+  }
+
+  /** Collapses the given item. */
+  collapse(item: T) {
+    this.expansionBehavior.close(item);
+  }
+
+  /** Expands all sibling items of the given item (or active item). */
+  expandSiblings(item?: T) {
+    item ??= this.inputs.activeItem();
+    if (!item) return;
+
+    const parent = item.parent?.();
+    // TODO: This assumes that items without a parent are root items.
+    const siblings = parent ? parent.children?.() : this.inputs.items().filter(i => !i.parent?.());
+    siblings?.forEach(s => this.expand(s));
+  }
+
+  /** Expands all items in the tree. */
+  expandAll() {
+    this.expansionBehavior.openAll();
+  }
+
+  /** Collapses all items in the tree. */
+  collapseAll() {
+    this.expansionBehavior.closeAll();
+  }
+
   /** Checks if the given item is able to receive focus. */
   isFocusable(item: T) {
     return this.focusBehavior.isFocusable(item);
   }
 
+  /** Checks if the given item is expandable. */
+  isExpandable(item: T) {
+    return this.expansionBehavior.isExpandable(item);
+  }
+
   /** Handles updating selection for the tree. */
   updateSelection(opts: NavOptions<T> = {anchor: true}) {
     if (opts.toggle) {
@@ -265,9 +329,7 @@ export class Tree<T extends TreeItem<V, T>, V> {
    * Constructs navigation options with the visible items subset.
    */
   private _getNavOpts(opts?: NavOptions<T>): ListNavigationOpts<T> {
-    const visibleItems = this.inputs.items().filter(i => {
-      return i.visible() !== false;
-    });
+    const visibleItems = this.inputs.items().filter(i => i.visible() !== false);
 
     return {
       items: visibleItems,

src/aria/private/tree/combobox-tree.ts

@@ -19,8 +19,11 @@ export class ComboboxTreePattern<V>
   extends TreePattern<V>
   implements ComboboxTreeControls<TreeItemPattern<V>, V>
 {
+  /** Toggles to expand or collapse a tree item. */
+  toggleExpansion = (item?: TreeItemPattern<V>) => this.treeBehavior.toggleExpansion(item);
+
   /** Whether the currently focused item is collapsible. */
-  isItemCollapsible = () => this.inputs.activeItem()?.parent instanceof TreeItemPattern;
+  isItemCollapsible = () => this.inputs.activeItem()?.parent() instanceof TreeItemPattern;
 
   /** The ARIA role for the tree. */
   role = () => 'tree' as const;
@@ -93,22 +96,22 @@ export class ComboboxTreePattern<V>
   /** Sets the value of the combobox tree. */
   setValue = (value: V | undefined) => this.inputs.values.set(value ? [value] : []);
 
-  /** Expands the currently focused item if it is expandable. */
-  expandItem = () => this.expand();
+  /** Expands the currently focused item if it is expandable, or navigates to the first child. */
+  expandItem = () => this._expandOrFirstChild();
 
-  /** Collapses the currently focused item if it is expandable. */
-  collapseItem = () => this.collapse();
+  /** Collapses the currently focused item if it is expandable, or navigates to the parent. */
+  collapseItem = () => this._collapseOrParent();
 
   /** Whether the specified item or the currently active item is expandable. */
   isItemExpandable(item: TreeItemPattern<V> | undefined = this.inputs.activeItem()) {
     return item ? item.expandable() : false;
   }
 
   /** Expands all of the tree items. */
-  expandAll = () => this.items().forEach(item => this.expansionBehavior.open(item));
+  expandAll = () => this.treeBehavior.expandAll();
 
   /** Collapses all of the tree items. */
-  collapseAll = () => this.items().forEach(item => item.expansionBehavior.close(item));
+  collapseAll = () => this.treeBehavior.collapseAll();
 
   /** Whether the currently active item is selectable. */
   isItemSelectable = (item: TreeItemPattern<V> | undefined = this.inputs.activeItem()) => {