feat(cdk-experimental/ui-patterns): tree

Author: ok7sai

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

@@ -15,5 +15,6 @@ ts_project(
         "//src/cdk-experimental/ui-patterns/listbox",
         "//src/cdk-experimental/ui-patterns/radio",
         "//src/cdk-experimental/ui-patterns/tabs",
+        "//src/cdk-experimental/ui-patterns/tree",
     ],
 )

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

@@ -27,7 +27,7 @@ import {SignalLike} from '../behaviors/signal-like/signal-like';
 export type AccordionGroupInputs = Omit<
   ListNavigationInputs<AccordionTriggerPattern> &
     ListFocusInputs<AccordionTriggerPattern> &
-    ListExpansionInputs<AccordionTriggerPattern>,
+    Omit<ListExpansionInputs, 'items'>,
   'focusMode'
 >;
 
@@ -43,7 +43,7 @@ export class AccordionGroupPattern {
   focusManager: ListFocus<AccordionTriggerPattern>;
 
   /** Controls expansion for the group. */
-  expansionManager: ListExpansion<AccordionTriggerPattern>;
+  expansionManager: ListExpansion;
 
   constructor(readonly inputs: AccordionGroupInputs) {
     this.wrap = inputs.wrap;
@@ -66,8 +66,6 @@ export class AccordionGroupPattern {
     });
     this.expansionManager = new ListExpansion({
       ...inputs,
-      focusMode,
-      focusManager: this.focusManager,
     });
   }
 }

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

@@ -5,17 +5,19 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/license
  */
-import {computed, signal} from '@angular/core';
+import {computed} from '@angular/core';
 import {SignalLike, WritableSignalLike} from '../signal-like/signal-like';
-import {ListFocus, ListFocusInputs, ListFocusItem} from '../list-focus/list-focus';
 
 /** Represents an item that can be expanded or collapsed. */
-export interface ExpansionItem extends ListFocusItem {
+export interface ExpansionItem {
   /** Whether the item is expandable. */
   expandable: SignalLike<boolean>;
 
   /** Used to uniquely identify an expansion item. */
   expansionId: SignalLike<string>;
+
+  /** Whether the expansion is disabled. */
+  disabled: SignalLike<boolean>;
 }
 
 export interface ExpansionControl extends ExpansionItem {}
@@ -30,10 +32,9 @@ export class ExpansionControl {
   /** Whether this item can be expanded. */
   readonly isExpandable = computed(() => this.inputs.expansionManager.isExpandable(this));
 
-  constructor(readonly inputs: ExpansionItem & {expansionManager: ListExpansion<ExpansionItem>}) {
+  constructor(readonly inputs: ExpansionItem & {expansionManager: ListExpansion}) {
     this.expansionId = inputs.expansionId;
     this.expandable = inputs.expandable;
-    this.element = inputs.element;
     this.disabled = inputs.disabled;
   }
 
@@ -54,28 +55,31 @@ export class ExpansionControl {
 }
 
 /** Represents the required inputs for an expansion behavior. */
-export interface ListExpansionInputs<T extends ExpansionItem> extends ListFocusInputs<T> {
+export interface ListExpansionInputs {
   /** Whether multiple items can be expanded at once. */
   multiExpandable: SignalLike<boolean>;
 
   /** An array of ids of the currently expanded items. */
   expandedIds: WritableSignalLike<string[]>;
+
+  /** An array of expansion items. */
+  items: SignalLike<ExpansionItem[]>;
+
+  /** Whether all expansions are disabled. */
+  disabled: SignalLike<boolean>;
 }
 
 /** Manages the expansion state of a list of items. */
-export class ListExpansion<T extends ExpansionItem> {
+export class ListExpansion {
   /** A signal holding an array of ids of the currently expanded items. */
   expandedIds: WritableSignalLike<string[]>;
 
-  /** The currently active (focused) item in the list. */
-  activeItem = computed(() => this.inputs.focusManager.activeItem());
-
-  constructor(readonly inputs: ListExpansionInputs<T> & {focusManager: ListFocus<T>}) {
-    this.expandedIds = inputs.expandedIds ?? signal([]);
+  constructor(readonly inputs: ListExpansionInputs) {
+    this.expandedIds = inputs.expandedIds;
   }
 
-  /** Opens the specified item, or the currently active item if none is specified. */
-  open(item: T = this.activeItem()) {
+  /** Opens the specified item. */
+  open(item: ExpansionItem) {
     if (!this.isExpandable(item)) return;
     if (this.isExpanded(item)) return;
     if (!this.inputs.multiExpandable()) {
@@ -84,18 +88,15 @@ export class ListExpansion<T extends ExpansionItem> {
     this.expandedIds.update(ids => ids.concat(item.expansionId()));
   }
 
-  /** Closes the specified item, or the currently active item if none is specified. */
-  close(item: T = this.activeItem()) {
+  /** Closes the specified item. */
+  close(item: ExpansionItem) {
     if (this.isExpandable(item)) {
       this.expandedIds.update(ids => ids.filter(id => id !== item.expansionId()));
     }
   }
 
-  /**
-   * Toggles the expansion state of the specified item,
-   * or the currently active item if none is specified.
-   */
-  toggle(item: T = this.activeItem()) {
+  /** Toggles the expansion state of the specified item. */
+  toggle(item: ExpansionItem) {
     this.expandedIds().includes(item.expansionId()) ? this.close(item) : this.open(item);
   }
 
@@ -116,12 +117,12 @@ export class ListExpansion<T extends ExpansionItem> {
   }
 
   /** Checks whether the specified item is expandable / collapsible. */
-  isExpandable(item: T) {
+  isExpandable(item: ExpansionItem) {
     return !this.inputs.disabled() && !item.disabled() && item.expandable();
   }
 
   /** Checks whether the specified item is currently expanded. */
-  isExpanded(item: T): boolean {
+  isExpanded(item: ExpansionItem): boolean {
     return this.expandedIds().includes(item.expansionId());
   }
 }

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

@@ -128,9 +128,7 @@ interface SelectOptions {
 export type TabListInputs = ListNavigationInputs<TabPattern> &
   Omit<ListSelectionInputs<TabPattern, string>, 'multi'> &
   ListFocusInputs<TabPattern> &
-  Omit<ListExpansionInputs<TabPattern>, 'multiExpandable' | 'expandedIds'> & {
-    disabled: SignalLike<boolean>;
-  };
+  Omit<ListExpansionInputs, 'multiExpandable' | 'expandedIds' | 'items'>;
 
 /** Controls the state of a tablist. */
 export class TabListPattern {
@@ -144,7 +142,7 @@ export class TabListPattern {
   focusManager: ListFocus<TabPattern>;
 
   /** Controls expansion for the tablist. */
-  expansionManager: ListExpansion<TabPattern>;
+  expansionManager: ListExpansion;
 
   /** Whether the tablist is vertically or horizontally oriented. */
   orientation: SignalLike<'vertical' | 'horizontal'>;
@@ -210,7 +208,6 @@ export class TabListPattern {
       ...inputs,
       multiExpandable: () => false,
       expandedIds: this.inputs.value,
-      focusManager: this.focusManager,
     });
   }
 
@@ -266,7 +263,7 @@ export class TabListPattern {
   private _select(opts?: SelectOptions) {
     if (opts?.select) {
       this.selection.selectOne();
-      this.expansionManager.open();
+      this.expansionManager.open(this.focusManager.activeItem());
     }
   }
 

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

@@ -0,0 +1,39 @@
+load("//tools:defaults.bzl", "ng_web_test_suite", "ts_project")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_project(
+    name = "tree",
+    srcs = [
+        "tree.ts",
+    ],
+    deps = [
+        "//:node_modules/@angular/core",
+        "//src/cdk-experimental/ui-patterns/behaviors/event-manager",
+        "//src/cdk-experimental/ui-patterns/behaviors/expansion",
+        "//src/cdk-experimental/ui-patterns/behaviors/list-focus",
+        "//src/cdk-experimental/ui-patterns/behaviors/list-navigation",
+        "//src/cdk-experimental/ui-patterns/behaviors/list-selection",
+        "//src/cdk-experimental/ui-patterns/behaviors/list-typeahead",
+        "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
+    ],
+)
+
+ts_project(
+    name = "unit_test_sources",
+    testonly = True,
+    srcs = [
+        "tree.spec.ts",
+    ],
+    deps = [
+        ":tree",
+        "//:node_modules/@angular/core",
+        "//src/cdk/keycodes",
+        "//src/cdk/testing/private",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)