@angular/cdk-experimental 20.2.0-next.2 → 20.2.0-rc.0

package/fesm2022/tree.mjs

@@ -4,16 +4,17 @@ import { _IdGenerator } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import * as i1 from '@angular/cdk-experimental/deferred-content';
 import { DeferredContentAware, DeferredContent } from '@angular/cdk-experimental/deferred-content';
-import { M as Modifier, L as ListFocus, a as ListNavigation, K as KeyboardEventManager, P as PointerEventManager } from './list-focus-Czul8jzR.mjs';
-import { L as ListSelection } from './list-selection-C41ApAbt.mjs';
-import { L as ListTypeahead } from './list-typeahead-DIIbNJrP.mjs';
-import { E as ExpansionControl, L as ListExpansion } from './expansion-C9iQLHOG.mjs';
+import { List } from './list.mjs';
+import { ExpansionControl, ListExpansion } from './expansion.mjs';
+import { Modifier, KeyboardEventManager, PointerEventManager } from './list-navigation.mjs';
 
 /**
  * Represents an item in a Tree.
  */
 class TreeItemPattern {
     inputs;
+    /** The position of this item among its siblings. */
+    index = computed(() => this.tree().visibleItems().indexOf(this));
     /** The unique identifier used by the expansion behavior. */
     expansionId;
     /** Controls expansion for child items. */
@@ -33,9 +34,9 @@ class TreeItemPattern {
     /** The position of this item among its siblings (1-based). */
     posinset = computed(() => this.parent().children().indexOf(this) + 1);
     /** Whether the item is active. */
-    active = computed(() => this.tree().focusManager.activeItem() === this);
+    active = computed(() => this.tree().activeItem() === this);
     /** The tabindex of the item. */
-    tabindex = computed(() => this.tree().focusManager.getItemTabindex(this));
+    tabindex = computed(() => this.tree().listBehavior.getItemTabindex(this));
     /** Whether the item is selected. */
     selected = computed(() => {
         if (this.tree().nav()) {
@@ -81,14 +82,8 @@ class TreeItemPattern {
 /** Controls the state and interactions of a tree view. */
 class TreePattern {
     inputs;
-    /** Controls focus for the all visible tree items. */
-    focusManager;
-    /** Controls navigation for all visible tree items. */
-    navigationManager;
-    /** Controls selection for all visible tree items. */
-    selectionManager;
-    /** Controls typeahead for all visible tree items. */
-    typeaheadManager;
+    /** The list behavior for the tree. */
+    listBehavior;
     /** Controls expansion for direct children of the tree root (top-level items). */
     expansionManager;
     /** The root level is 0. */
@@ -96,11 +91,9 @@ class TreePattern {
     /** The root is always expanded. */
     expanded = () => true;
     /** The tabindex of the tree. */
-    tabindex = computed(() => this.focusManager.getListTabindex());
+    tabindex = computed(() => this.listBehavior.tabindex());
     /** The id of the current active item. */
-    activedescendant = computed(() => this.focusManager.getActiveDescendant());
-    /** Whether the tree is performing a range selection. */
-    inSelection = signal(false);
+    activedescendant = computed(() => this.listBehavior.activedescendant());
     /** The direct children of the root (top-level tree items). */
     children = computed(() => this.inputs.allItems().filter(item => item.level() === this.level() + 1));
     /** All currently visible tree items. An item is visible if their parent is expanded. */
@@ -136,67 +129,62 @@ class TreePattern {
         return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
     });
     /** Represents the space key. Does nothing when the user is actively using typeahead. */
-    dynamicSpaceKey = computed(() => (this.typeaheadManager.isTyping() ? '' : ' '));
+    dynamicSpaceKey = computed(() => (this.listBehavior.isTyping() ? '' : ' '));
     /** Regular expression to match characters for typeahead. */
     typeaheadRegexp = /^.$/;
-    /** Uncommitted tree item for selecting a range of tree items. */
-    anchorItem = signal(undefined);
-    /**
-     * Uncommitted tree item index for selecting a range of tree items.
-     *
-     * The index is computed in case the tree item position is changed caused by tree expansions.
-     */
-    anchorIndex = computed(() => this.anchorItem() ? this.visibleItems().indexOf(this.anchorItem()) : -1);
     /** The keydown event manager for the tree. */
     keydown = computed(() => {
         const manager = new KeyboardEventManager();
+        const list = this.listBehavior;
         if (!this.followFocus()) {
             manager
-                .on(this.prevKey, () => this.prev())
-                .on(this.nextKey, () => this.next())
-                .on('Home', () => this.first())
-                .on('End', () => this.last())
-                .on(this.typeaheadRegexp, e => this.search(e.key));
+                .on(this.prevKey, () => list.prev())
+                .on(this.nextKey, () => list.next())
+                .on('Home', () => list.first())
+                .on('End', () => list.last())
+                .on(this.typeaheadRegexp, e => list.search(e.key));
         }
         if (this.followFocus()) {
             manager
-                .on(this.prevKey, () => this.prev({ selectOne: true }))
-                .on(this.nextKey, () => this.next({ selectOne: true }))
-                .on('Home', () => this.first({ selectOne: true }))
-                .on('End', () => this.last({ selectOne: true }))
-                .on(this.typeaheadRegexp, e => this.search(e.key, { selectOne: true }));
+                .on(this.prevKey, () => list.prev({ selectOne: true }))
+                .on(this.nextKey, () => list.next({ selectOne: true }))
+                .on('Home', () => list.first({ selectOne: true }))
+                .on('End', () => list.last({ selectOne: true }))
+                .on(this.typeaheadRegexp, e => list.search(e.key, { selectOne: true }));
         }
         if (this.inputs.multi()) {
             manager
-                .on(Modifier.Any, 'Shift', () => this.anchorItem.set(this.focusManager.activeItem()))
-                .on(Modifier.Shift, this.prevKey, () => this.prev({ selectRange: true }))
-                .on(Modifier.Shift, this.nextKey, () => this.next({ selectRange: true }))
-                .on([Modifier.Ctrl | Modifier.Shift, Modifier.Meta | Modifier.Shift], 'Home', () => this.first({ selectRange: true, anchor: false }))
-                .on([Modifier.Ctrl | Modifier.Shift, Modifier.Meta | Modifier.Shift], 'End', () => this.last({ selectRange: true, anchor: false }))
-                .on(Modifier.Shift, 'Enter', () => this._updateSelection({ selectRange: true, anchor: false }))
-                .on(Modifier.Shift, this.dynamicSpaceKey, () => this._updateSelection({ selectRange: true, anchor: false }));
+                // TODO: Tracking the anchor by index can break if the
+                // tree is expanded or collapsed causing the index to change.
+                .on(Modifier.Any, 'Shift', () => list.anchor(this.listBehavior.activeIndex()))
+                .on(Modifier.Shift, this.prevKey, () => list.prev({ selectRange: true }))
+                .on(Modifier.Shift, this.nextKey, () => list.next({ selectRange: true }))
+                .on([Modifier.Ctrl | Modifier.Shift, Modifier.Meta | Modifier.Shift], 'Home', () => list.first({ selectRange: true, anchor: false }))
+                .on([Modifier.Ctrl | Modifier.Shift, Modifier.Meta | Modifier.Shift], 'End', () => list.last({ selectRange: true, anchor: false }))
+                .on(Modifier.Shift, 'Enter', () => list.updateSelection({ selectRange: true, anchor: false }))
+                .on(Modifier.Shift, this.dynamicSpaceKey, () => list.updateSelection({ selectRange: true, anchor: false }));
         }
         if (!this.followFocus() && this.inputs.multi()) {
             manager
-                .on(this.dynamicSpaceKey, () => this.selectionManager.toggle())
-                .on('Enter', () => this.selectionManager.toggle())
-                .on([Modifier.Ctrl, Modifier.Meta], 'A', () => this.selectionManager.toggleAll());
+                .on(this.dynamicSpaceKey, () => list.toggle())
+                .on('Enter', () => list.toggle())
+                .on([Modifier.Ctrl, Modifier.Meta], 'A', () => list.toggleAll());
         }
         if (!this.followFocus() && !this.inputs.multi()) {
-            manager.on(this.dynamicSpaceKey, () => this.selectionManager.toggleOne());
-            manager.on('Enter', () => this.selectionManager.toggleOne());
+            manager.on(this.dynamicSpaceKey, () => list.toggleOne());
+            manager.on('Enter', () => list.toggleOne());
         }
         if (this.inputs.multi() && this.followFocus()) {
             manager
-                .on([Modifier.Ctrl, Modifier.Meta], this.prevKey, () => this.prev())
-                .on([Modifier.Ctrl, Modifier.Meta], this.nextKey, () => this.next())
-                .on([Modifier.Ctrl, Modifier.Meta], ' ', () => this.selectionManager.toggle())
-                .on([Modifier.Ctrl, Modifier.Meta], 'Enter', () => this.selectionManager.toggle())
-                .on([Modifier.Ctrl, Modifier.Meta], 'Home', () => this.first())
-                .on([Modifier.Ctrl, Modifier.Meta], 'End', () => this.last())
+                .on([Modifier.Ctrl, Modifier.Meta], this.prevKey, () => list.prev())
+                .on([Modifier.Ctrl, Modifier.Meta], this.nextKey, () => list.next())
+                .on([Modifier.Ctrl, Modifier.Meta], ' ', () => list.toggle())
+                .on([Modifier.Ctrl, Modifier.Meta], 'Enter', () => list.toggle())
+                .on([Modifier.Ctrl, Modifier.Meta], 'Home', () => list.first())
+                .on([Modifier.Ctrl, Modifier.Meta], 'End', () => list.last())
                 .on([Modifier.Ctrl, Modifier.Meta], 'A', () => {
-                this.selectionManager.toggleAll();
-                this.selectionManager.select(); // Ensure the currect item remains selected.
+                list.toggleAll();
+                list.select(); // Ensure the currect item remains selected.
             });
         }
         manager
@@ -234,34 +222,19 @@ class TreePattern {
         this.allItems = inputs.allItems;
         this.focusMode = inputs.focusMode;
         this.disabled = inputs.disabled;
-        this.activeIndex = inputs.activeIndex;
+        this.activeItem = inputs.activeItem;
         this.skipDisabled = inputs.skipDisabled;
         this.wrap = inputs.wrap;
         this.orientation = inputs.orientation;
         this.textDirection = inputs.textDirection;
         this.multi = computed(() => (this.nav() ? false : this.inputs.multi()));
-        this.value = inputs.value;
         this.selectionMode = inputs.selectionMode;
         this.typeaheadDelay = inputs.typeaheadDelay;
-        this.focusManager = new ListFocus({
-            ...inputs,
-            items: this.visibleItems,
-        });
-        this.navigationManager = new ListNavigation({
-            ...inputs,
-            wrap: computed(() => this.inputs.wrap() && !this.inSelection()),
-            items: this.visibleItems,
-            focusManager: this.focusManager,
-        });
-        this.selectionManager = new ListSelection({
-            ...inputs,
-            items: this.visibleItems,
-            focusManager: this.focusManager,
-        });
-        this.typeaheadManager = new ListTypeahead({
+        this.value = inputs.value;
+        this.listBehavior = new List({
             ...inputs,
             items: this.visibleItems,
-            focusManager: this.focusManager,
+            multi: this.multi,
         });
         this.expansionManager = new ListExpansion({
             multiExpandable: () => true,
@@ -278,22 +251,22 @@ class TreePattern {
      * Otherwise, sets focus to the first focusable tree item.
      */
     setDefaultState() {
-        let firstItemIndex;
-        for (const [index, item] of this.allItems().entries()) {
+        let firstItem;
+        for (const item of this.allItems()) {
             if (!item.visible())
                 continue;
-            if (!this.focusManager.isFocusable(item))
+            if (!this.listBehavior.isFocusable(item))
                 continue;
-            if (firstItemIndex === undefined) {
-                firstItemIndex = index;
+            if (firstItem === undefined) {
+                firstItem = item;
             }
             if (item.selected()) {
-                this.activeIndex.set(index);
+                this.activeItem.set(item);
                 return;
             }
         }
-        if (firstItemIndex !== undefined) {
-            this.activeIndex.set(firstItemIndex);
+        if (firstItem !== undefined) {
+            this.activeItem.set(firstItem);
         }
     }
     /** Handles keydown events on the tree. */
@@ -308,36 +281,18 @@ class TreePattern {
             this.pointerdown().handle(event);
         }
     }
-    /** Navigates to the first visible tree item in the tree. */
-    first(opts) {
-        this._navigate(opts, () => this.navigationManager.first());
-    }
-    /** Navigates to the last visible tree item in the tree. */
-    last(opts) {
-        this._navigate(opts, () => this.navigationManager.last());
-    }
-    /** Navigates to the next visible tree item in the tree. */
-    next(opts) {
-        this._navigate(opts, () => this.navigationManager.next());
-    }
-    /** Navigates to the previous visible tree item in the tree. */
-    prev(opts) {
-        this._navigate(opts, () => this.navigationManager.prev());
-    }
     /** Navigates to the given tree item in the tree. */
-    goto(event, opts) {
-        const item = this._getItem(event);
-        this._navigate(opts, () => this.navigationManager.goto(item));
+    goto(e, opts) {
+        const item = this._getItem(e);
+        if (!item)
+            return;
+        this.listBehavior.goto(item, opts);
         this.toggleExpansion(item);
     }
-    /** Handles typeahead search navigation for the tree. */
-    search(char, opts) {
-        this._navigate(opts, () => this.typeaheadManager.search(char));
-    }
     /** Toggles to expand or collapse a tree item. */
     toggleExpansion(item) {
-        item ??= this.focusManager.activeItem();
-        if (!item || !this.focusManager.isFocusable(item))
+        item ??= this.activeItem();
+        if (!item || !this.listBehavior.isFocusable(item))
             return;
         if (!item.expandable())
             return;
@@ -350,67 +305,40 @@ class TreePattern {
     }
     /** Expands a tree item. */
     expand(item) {
-        item ??= this.focusManager.activeItem();
-        if (!item || !this.focusManager.isFocusable(item))
+        item ??= this.activeItem();
+        if (!item || !this.listBehavior.isFocusable(item))
             return;
         if (item.expandable() && !item.expanded()) {
             item.expansion.open();
         }
         else if (item.expanded() && item.children().length > 0) {
             const firstChild = item.children()[0];
-            if (this.focusManager.isFocusable(firstChild)) {
-                this.navigationManager.goto(firstChild);
+            if (this.listBehavior.isFocusable(firstChild)) {
+                this.listBehavior.goto(firstChild);
             }
         }
     }
     /** Expands all sibling tree items including itself. */
     expandSiblings(item) {
-        item ??= this.focusManager.activeItem();
-        const siblings = item.parent()?.children();
+        item ??= this.activeItem();
+        const siblings = item?.parent()?.children();
         siblings?.forEach(item => this.expand(item));
     }
     /** Collapses a tree item. */
     collapse(item) {
-        item ??= this.focusManager.activeItem();
-        if (!item || !this.focusManager.isFocusable(item))
+        item ??= this.activeItem();
+        if (!item || !this.listBehavior.isFocusable(item))
             return;
         if (item.expandable() && item.expanded()) {
             item.expansion.close();
         }
         else if (item.parent() && item.parent() !== this) {
             const parentItem = item.parent();
-            if (parentItem instanceof TreeItemPattern && this.focusManager.isFocusable(parentItem)) {
-                this.navigationManager.goto(parentItem);
+            if (parentItem instanceof TreeItemPattern && this.listBehavior.isFocusable(parentItem)) {
+                this.listBehavior.goto(parentItem);
             }
         }
     }
-    /** Safely performs a navigation operation. */
-    _navigate(opts = {}, operation) {
-        if (opts?.selectRange) {
-            this.inSelection.set(true);
-            this.selectionManager.rangeStartIndex.set(this.anchorIndex());
-        }
-        const moved = operation();
-        if (moved) {
-            this._updateSelection(opts);
-        }
-        this.inSelection.set(false);
-    }
-    /** Handles updating selection for the tree. */
-    _updateSelection(opts = { anchor: true }) {
-        if (opts.toggle) {
-            this.selectionManager.toggle();
-        }
-        if (opts.selectOne) {
-            this.selectionManager.selectOne();
-        }
-        if (opts.selectRange) {
-            this.selectionManager.selectRange();
-        }
-        if (!opts.anchor) {
-            this.anchorItem.set(this.visibleItems()[this.selectionManager.rangeStartIndex()]);
-        }
-    }
     /** Retrieves the TreeItemPattern associated with a DOM event, if any. */
     _getItem(event) {
         if (!(event.target instanceof HTMLElement)) {
@@ -453,8 +381,6 @@ function sortDirectives(a, b) {
 class CdkTree {
     /** All CdkTreeItem instances within this tree. */
     _unorderedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "_unorderedItems" }] : []));
-    /** All CdkGroup instances within this tree. */
-    unorderedGroups = signal(new Set(), ...(ngDevMode ? [{ debugName: "unorderedGroups" }] : []));
     /** Orientation of the tree. */
     orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
     /** Whether multi-selection is allowed. */
@@ -483,7 +409,7 @@ class CdkTree {
     pattern = new TreePattern({
         ...this,
         allItems: computed(() => [...this._unorderedItems()].sort(sortDirectives).map(item => item.pattern)),
-        activeIndex: signal(0),
+        activeItem: signal(undefined),
     });
     /** Whether the tree has received focus yet. */
     _hasFocused = signal(false, ...(ngDevMode ? [{ debugName: "_hasFocused" }] : []));
@@ -498,29 +424,17 @@ class CdkTree {
         this._hasFocused.set(true);
     }
     register(child) {
-        if (child instanceof CdkTreeItemGroup) {
-            this.unorderedGroups().add(child);
-            this.unorderedGroups.set(new Set(this.unorderedGroups()));
-        }
-        if (child instanceof CdkTreeItem) {
-            this._unorderedItems().add(child);
-            this._unorderedItems.set(new Set(this._unorderedItems()));
-        }
+        this._unorderedItems().add(child);
+        this._unorderedItems.set(new Set(this._unorderedItems()));
     }
-    deregister(child) {
-        if (child instanceof CdkTreeItemGroup) {
-            this.unorderedGroups().delete(child);
-            this.unorderedGroups.set(new Set(this.unorderedGroups()));
-        }
-        if (child instanceof CdkTreeItem) {
-            this._unorderedItems().delete(child);
-            this._unorderedItems.set(new Set(this._unorderedItems()));
-        }
+    unregister(child) {
+        this._unorderedItems().delete(child);
+        this._unorderedItems.set(new Set(this._unorderedItems()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.1", ngImport: i0, type: CdkTree, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0-next.1", type: CdkTree, isStandalone: true, selector: "[cdkTree]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, skipDisabled: { classPropertyName: "skipDisabled", publicName: "skipDisabled", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDelay: { classPropertyName: "typeaheadDelay", publicName: "typeaheadDelay", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, nav: { classPropertyName: "nav", publicName: "nav", isSignal: true, isRequired: false, transformFunction: null }, currentType: { classPropertyName: "currentType", publicName: "currentType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown": "pattern.onKeydown($event)", "pointerdown": "pattern.onPointerdown($event)", "focusin": "onFocus()" }, properties: { "attr.aria-orientation": "pattern.orientation()", "attr.aria-multiselectable": "pattern.multi()", "attr.aria-disabled": "pattern.disabled()", "attr.aria-activedescendant": "pattern.activedescendant()", "tabindex": "pattern.tabindex()" }, classAttribute: "cdk-tree" }, exportAs: ["cdkTree"], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTree, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0-rc.1", type: CdkTree, isStandalone: true, selector: "[cdkTree]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, focusMode: { classPropertyName: "focusMode", publicName: "focusMode", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, skipDisabled: { classPropertyName: "skipDisabled", publicName: "skipDisabled", isSignal: true, isRequired: false, transformFunction: null }, typeaheadDelay: { classPropertyName: "typeaheadDelay", publicName: "typeaheadDelay", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, nav: { classPropertyName: "nav", publicName: "nav", isSignal: true, isRequired: false, transformFunction: null }, currentType: { classPropertyName: "currentType", publicName: "currentType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { attributes: { "role": "tree" }, listeners: { "keydown": "pattern.onKeydown($event)", "pointerdown": "pattern.onPointerdown($event)", "focusin": "onFocus()" }, properties: { "attr.aria-orientation": "pattern.orientation()", "attr.aria-multiselectable": "pattern.multi()", "attr.aria-disabled": "pattern.disabled()", "attr.aria-activedescendant": "pattern.activedescendant()", "tabindex": "pattern.tabindex()" }, classAttribute: "cdk-tree" }, exportAs: ["cdkTree"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.1", ngImport: i0, type: CdkTree, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTree, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkTree]',
@@ -547,63 +461,72 @@ class CdkTreeItem {
     _elementRef = inject(ElementRef);
     /** A unique identifier for the tree item. */
     _id = inject(_IdGenerator).getId('cdk-tree-item-');
-    /** The top level CdkTree. */
-    _tree = inject((CdkTree));
-    /** The parent CdkTreeItem. */
-    _treeItem = inject((CdkTreeItem), { optional: true, skipSelf: true });
-    /** The parent CdkGroup, if any. */
-    _parentGroup = inject((CdkTreeItemGroup), { optional: true });
-    /** The top level TreePattern. */
-    _treePattern = computed(() => this._tree.pattern, ...(ngDevMode ? [{ debugName: "_treePattern" }] : []));
-    /** The parent TreeItemPattern. */
-    _parentPattern = computed(() => this._treeItem?.pattern ?? this._treePattern(), ...(ngDevMode ? [{ debugName: "_parentPattern" }] : []));
+    /** The owned tree item group. */
+    _group = signal(undefined, ...(ngDevMode ? [{ debugName: "_group" }] : []));
+    /** The id of the owned group. */
+    ownsId = computed(() => this._group()?.id, ...(ngDevMode ? [{ debugName: "ownsId" }] : []));
     /** The host native element. */
     element = computed(() => this._elementRef.nativeElement, ...(ngDevMode ? [{ debugName: "element" }] : []));
     /** The value of the tree item. */
     value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** The parent tree root or tree item group. */
+    parent = input.required(...(ngDevMode ? [{ debugName: "parent" }] : []));
     /** Whether the tree item is disabled. */
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     /** Optional label for typeahead. Defaults to the element's textContent. */
     label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
     /** Search term for typeahead. */
     searchTerm = computed(() => this.label() ?? this.element().textContent, ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
-    /** Manual group assignment. */
-    group = signal(undefined, ...(ngDevMode ? [{ debugName: "group" }] : []));
+    /** The tree root. */
+    tree = computed(() => {
+        if (this.parent() instanceof CdkTree) {
+            return this.parent();
+        }
+        return this.parent().ownedBy().tree();
+    }, ...(ngDevMode ? [{ debugName: "tree" }] : []));
     /** The UI pattern for this item. */
-    pattern = new TreeItemPattern({
-        ...this,
-        id: () => this._id,
-        tree: this._treePattern,
-        parent: this._parentPattern,
-        children: computed(() => this.group()
-            ?.children()
-            .map(item => item.pattern) ?? []),
-        hasChildren: computed(() => !!this.group()),
-    });
+    pattern;
     constructor() {
-        afterRenderEffect(() => {
-            const group = [...this._tree.unorderedGroups()].find(group => group.value() === this.value());
-            if (group) {
-                this.group.set(group);
-            }
-        });
         // Updates the visibility of the owned group.
         afterRenderEffect(() => {
-            this.group()?.visible.set(this.pattern.expanded());
+            this._group()?.visible.set(this.pattern.expanded());
         });
     }
     ngOnInit() {
-        this._tree.register(this);
-        this._parentGroup?.register(this);
+        this.parent().register(this);
+        this.tree().register(this);
+        const treePattern = computed(() => this.tree().pattern, ...(ngDevMode ? [{ debugName: "treePattern" }] : []));
+        const parentPattern = computed(() => {
+            if (this.parent() instanceof CdkTree) {
+                return treePattern();
+            }
+            return this.parent().ownedBy().pattern;
+        }, ...(ngDevMode ? [{ debugName: "parentPattern" }] : []));
+        this.pattern = new TreeItemPattern({
+            ...this,
+            id: () => this._id,
+            tree: treePattern,
+            parent: parentPattern,
+            children: computed(() => this._group()
+                ?.children()
+                .map(item => item.pattern) ?? []),
+            hasChildren: computed(() => !!this._group()),
+        });
     }
     ngOnDestroy() {
-        this._tree.deregister(this);
-        this._parentGroup?.deregister(this);
+        this.parent().unregister(this);
+        this.tree().unregister(this);
+    }
+    register(group) {
+        this._group.set(group);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.1", ngImport: i0, type: CdkTreeItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0-next.1", type: CdkTreeItem, isStandalone: true, selector: "[cdkTreeItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "treeitem" }, properties: { "class.cdk-active": "pattern.active()", "id": "pattern.id()", "attr.aria-expanded": "pattern.expandable() ? pattern.expanded() : null", "attr.aria-selected": "pattern.selected()", "attr.aria-current": "pattern.current()", "attr.aria-disabled": "pattern.disabled()", "attr.aria-level": "pattern.level()", "attr.aria-owns": "group()?.id", "attr.aria-setsize": "pattern.setsize()", "attr.aria-posinset": "pattern.posinset()", "attr.tabindex": "pattern.tabindex()", "attr.inert": "pattern.visible() ? null : true" }, classAttribute: "cdk-treeitem" }, exportAs: ["cdkTreeItem"], ngImport: i0 });
+    unregister() {
+        this._group.set(undefined);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTreeItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0-rc.1", type: CdkTreeItem, isStandalone: true, selector: "[cdkTreeItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, parent: { classPropertyName: "parent", publicName: "parent", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "treeitem" }, properties: { "class.cdk-active": "pattern.active()", "id": "pattern.id()", "attr.aria-expanded": "pattern.expandable() ? pattern.expanded() : null", "attr.aria-selected": "pattern.selected()", "attr.aria-current": "pattern.current()", "attr.aria-disabled": "pattern.disabled()", "attr.aria-level": "pattern.level()", "attr.aria-owns": "ownsId()", "attr.aria-setsize": "pattern.setsize()", "attr.aria-posinset": "pattern.posinset()", "attr.tabindex": "pattern.tabindex()", "attr.inert": "pattern.visible() ? null : true" }, classAttribute: "cdk-treeitem" }, exportAs: ["cdkTreeItem"], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.1", ngImport: i0, type: CdkTreeItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTreeItem, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkTreeItem]',
@@ -618,7 +541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.1",
                         '[attr.aria-current]': 'pattern.current()',
                         '[attr.aria-disabled]': 'pattern.disabled()',
                         '[attr.aria-level]': 'pattern.level()',
-                        '[attr.aria-owns]': 'group()?.id',
+                        '[attr.aria-owns]': 'ownsId()',
                         '[attr.aria-setsize]': 'pattern.setsize()',
                         '[attr.aria-posinset]': 'pattern.posinset()',
                         '[attr.tabindex]': 'pattern.tabindex()',
@@ -634,8 +557,6 @@ class CdkTreeItemGroup {
     _elementRef = inject(ElementRef);
     /** The DeferredContentAware host directive. */
     _deferredContentAware = inject(DeferredContentAware);
-    /** The top level CdkTree. */
-    _tree = inject((CdkTree));
     /** All groupable items that are descendants of the group. */
     _unorderedItems = signal(new Set(), ...(ngDevMode ? [{ debugName: "_unorderedItems" }] : []));
     /** The host native element. */
@@ -646,8 +567,8 @@ class CdkTreeItemGroup {
     visible = signal(true, ...(ngDevMode ? [{ debugName: "visible" }] : []));
     /** Child items within this group. */
     children = computed(() => [...this._unorderedItems()].sort(sortDirectives), ...(ngDevMode ? [{ debugName: "children" }] : []));
-    /** Identifier for matching the group owner. */
-    value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Tree item that owns the group. */
+    ownedBy = input.required(...(ngDevMode ? [{ debugName: "ownedBy" }] : []));
     constructor() {
         // Connect the group's hidden state to the DeferredContentAware's visibility.
         afterRenderEffect(() => {
@@ -655,23 +576,23 @@ class CdkTreeItemGroup {
         });
     }
     ngOnInit() {
-        this._tree.register(this);
+        this.ownedBy().register(this);
     }
     ngOnDestroy() {
-        this._tree.deregister(this);
+        this.ownedBy().unregister();
     }
     register(child) {
         this._unorderedItems().add(child);
         this._unorderedItems.set(new Set(this._unorderedItems()));
     }
-    deregister(child) {
+    unregister(child) {
         this._unorderedItems().delete(child);
         this._unorderedItems.set(new Set(this._unorderedItems()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.1", ngImport: i0, type: CdkTreeItemGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0-next.1", type: CdkTreeItemGroup, isStandalone: true, selector: "[cdkTreeItemGroup]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "id": "id", "attr.inert": "visible() ? null : true" }, classAttribute: "cdk-treeitem-group" }, exportAs: ["cdkTreeItemGroup"], hostDirectives: [{ directive: i1.DeferredContentAware, inputs: ["preserveContent", "preserveContent"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTreeItemGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.2.0-rc.1", type: CdkTreeItemGroup, isStandalone: true, selector: "[cdkTreeItemGroup]", inputs: { ownedBy: { classPropertyName: "ownedBy", publicName: "ownedBy", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "id": "id", "attr.inert": "visible() ? null : true" }, classAttribute: "cdk-treeitem-group" }, exportAs: ["cdkTreeItemGroup"], hostDirectives: [{ directive: i1.DeferredContentAware, inputs: ["preserveContent", "preserveContent"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.1", ngImport: i0, type: CdkTreeItemGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTreeItemGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cdkTreeItemGroup]',
@@ -695,10 +616,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.1",
  * for a `CdkTreeItemGroup`. This content can be lazily loaded.
  */
 class CdkTreeItemGroupContent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-next.1", ngImport: i0, type: CdkTreeItemGroupContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-next.1", type: CdkTreeItemGroupContent, isStandalone: true, selector: "ng-template[cdkTreeItemGroupContent]", hostDirectives: [{ directive: i1.DeferredContent }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTreeItemGroupContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.0-rc.1", type: CdkTreeItemGroupContent, isStandalone: true, selector: "ng-template[cdkTreeItemGroupContent]", hostDirectives: [{ directive: i1.DeferredContent }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-next.1", ngImport: i0, type: CdkTreeItemGroupContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0-rc.1", ngImport: i0, type: CdkTreeItemGroupContent, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[cdkTreeItemGroupContent]',