primeng 20.3.0 → 21.0.0-rc.1

package/fesm2022/primeng-tree.mjs

@@ -2,10 +2,10 @@ export * from 'primeng/types/tree';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, forwardRef, signal, computed, numberAttribute, booleanAttribute, Input, ViewEncapsulation, Component, EventEmitter, HostListener, ContentChildren, ViewChild, ContentChild, Output, Optional, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { Injectable, InjectionToken, inject, forwardRef, signal, computed, numberAttribute, booleanAttribute, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, model, EventEmitter, HostListener, ContentChildren, ViewChild, ContentChild, Output, Optional, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { getOuterWidth, getOuterHeight, find, hasClass, findSingle, focus, removeAccents, resolveFieldData } from '@primeuix/utils';
+import { getOuterWidth, getOuterHeight, find, findSingle, focus, removeAccents, resolveFieldData } from '@primeuix/utils';
 import * as i4 from 'primeng/api';
 import { SharedModule, TranslationKeys, PrimeTemplate } from 'primeng/api';
 import * as i5 from 'primeng/autofocus';
@@ -43,7 +43,8 @@ const classes = {
         'p-tree-node-content': true,
         'p-tree-node-selectable': instance.selectable,
         'p-tree-node-dragover': instance.isNodeDropActive(),
-        'p-tree-node-selected': instance.selectionMode === 'checkbox' && instance.tree.highlightOnSelect ? instance.checked : instance.selected
+        'p-tree-node-selected': instance.selectionMode === 'checkbox' && instance.tree.highlightOnSelect ? instance.checked : instance.selected,
+        'p-tree-node-contextmenu-selected': instance.isContextMenuSelected()
     }),
     nodeToggleButton: 'p-tree-node-toggle-button',
     nodeToggleIcon: 'p-tree-node-toggle-icon',
@@ -58,10 +59,10 @@ class TreeStyle extends BaseStyle {
     name = 'tree';
     style = style;
     classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -159,19 +160,37 @@ class UITreeNode extends BaseComponent {
     loadingMode;
     tree = inject(forwardRef(() => Tree));
     timeout;
-    isPrevDropPointHovered = signal(false, ...(ngDevMode ? [{ debugName: "isPrevDropPointHovered" }] : []));
-    isNextDropPointHovered = signal(false, ...(ngDevMode ? [{ debugName: "isNextDropPointHovered" }] : []));
-    isNodeDropHovered = signal(false, ...(ngDevMode ? [{ debugName: "isNodeDropHovered" }] : []));
-    isPrevDropPointActive = computed(() => this.isPrevDropPointHovered() && this.isDroppable(), ...(ngDevMode ? [{ debugName: "isPrevDropPointActive" }] : []));
-    isNextDropPointActive = computed(() => this.isNextDropPointHovered() && this.isDroppable(), ...(ngDevMode ? [{ debugName: "isNextDropPointActive" }] : []));
-    isNodeDropActive = computed(() => this.isNodeDropHovered() && this.isNodeDroppable(), ...(ngDevMode ? [{ debugName: "isNodeDropActive" }] : []));
-    dropPosition = computed(() => (this.isPrevDropPointActive() ? -1 : this.isNextDropPointActive() ? 1 : 0), ...(ngDevMode ? [{ debugName: "dropPosition" }] : []));
+    isPrevDropPointHovered = signal(false, { ...(ngDevMode ? { debugName: "isPrevDropPointHovered" } : {}) });
+    isNextDropPointHovered = signal(false, { ...(ngDevMode ? { debugName: "isNextDropPointHovered" } : {}) });
+    isNodeDropHovered = signal(false, { ...(ngDevMode ? { debugName: "isNodeDropHovered" } : {}) });
+    isPrevDropPointActive = computed(() => this.isPrevDropPointHovered() && this.isDroppable(), { ...(ngDevMode ? { debugName: "isPrevDropPointActive" } : {}) });
+    isNextDropPointActive = computed(() => this.isNextDropPointHovered() && this.isDroppable(), { ...(ngDevMode ? { debugName: "isNextDropPointActive" } : {}) });
+    isNodeDropActive = computed(() => this.isNodeDropHovered() && this.isNodeDroppable(), { ...(ngDevMode ? { debugName: "isNodeDropActive" } : {}) });
+    dropPosition = computed(() => (this.isPrevDropPointActive() ? -1 : this.isNextDropPointActive() ? 1 : 0), { ...(ngDevMode ? { debugName: "dropPosition" } : {}) });
     _componentStyle = inject(TreeStyle);
+    /**
+     * Computed signal that reactively tracks selection state.
+     */
+    _selected = computed(() => {
+        // Reading selection() makes this computed reactive to selection changes
+        this.tree.selection();
+        return this.tree.isSelected(this.node);
+    }, { ...(ngDevMode ? { debugName: "_selected" } : {}) });
+    /**
+     * Computed signal that reactively tracks context menu selection state.
+     */
+    _contextMenuSelected = computed(() => {
+        const selection = this.tree.contextMenuSelection();
+        if (!selection || !this.node) {
+            return false;
+        }
+        return selection === this.node || (selection.key && selection.key === this.node.key);
+    }, { ...(ngDevMode ? { debugName: "_contextMenuSelected" } : {}) });
     get selected() {
-        return this.tree.selectionMode === 'single' || this.tree.selectionMode === 'multiple' ? this.isSelected() : undefined;
+        return this.tree.selectionMode === 'single' || this.tree.selectionMode === 'multiple' ? this._selected() : undefined;
     }
     get checked() {
-        return this.tree.selectionMode === 'checkbox' ? this.isSelected() : undefined;
+        return this.tree.selectionMode === 'checkbox' ? this._selected() : undefined;
     }
     get nodeClass() {
         return this.tree._componentStyle.classes.node({ instance: this });
@@ -216,7 +235,10 @@ class UITreeNode extends BaseComponent {
         return this.tree.isNodeLeaf(this.node);
     }
     isSelected() {
-        return this.tree.isSelected(this.node);
+        return this._selected();
+    }
+    isContextMenuSelected() {
+        return this._contextMenuSelected();
     }
     isSameNode(event) {
         return event.currentTarget && (event.currentTarget.isSameNode(event.target) || event.currentTarget.isSameNode(event.target.closest('[role="treeitem"]')));
@@ -504,7 +526,7 @@ class UITreeNode extends BaseComponent {
         event.preventDefault();
     }
     setAllNodesTabIndexes() {
-        const nodes = find(this.tree.el.nativeElement, '.p-tree-node');
+        const nodes = find(this.tree.el.nativeElement, '[data-pc-section="node"]');
         const hasSelectedNode = [...nodes].some((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true');
         [...nodes].forEach((node) => {
             node.tabIndex = -1;
@@ -540,7 +562,7 @@ class UITreeNode extends BaseComponent {
         }
     }
     findLastVisibleDescendant(nodeElement) {
-        const listElement = Array.from(nodeElement.children).find((el) => hasClass(el, 'p-tree-node'));
+        const listElement = Array.from(nodeElement.children).find((el) => el.getAttribute('data-pc-section') === 'node');
         const childrenListElement = listElement?.children[1];
         if (childrenListElement && childrenListElement.children.length > 0) {
             const lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];
@@ -571,8 +593,8 @@ class UITreeNode extends BaseComponent {
             focus(node);
         }, 1);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UITreeNode, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: UITreeNode, isStandalone: true, selector: "p-treeNode", inputs: { rowNode: "rowNode", node: "node", parentNode: "parentNode", root: ["root", "root", booleanAttribute], index: ["index", "index", numberAttribute], firstChild: ["firstChild", "firstChild", booleanAttribute], lastChild: ["lastChild", "lastChild", booleanAttribute], level: ["level", "level", numberAttribute], indentation: ["indentation", "indentation", numberAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], loadingMode: "loadingMode" }, providers: [TreeStyle, { provide: TREENODE_INSTANCE, useExisting: UITreeNode }, { provide: PARENT_INSTANCE, useExisting: UITreeNode }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UITreeNode, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: UITreeNode, isStandalone: true, selector: "p-treeNode", inputs: { rowNode: "rowNode", node: "node", parentNode: "parentNode", root: ["root", "root", booleanAttribute], index: ["index", "index", numberAttribute], firstChild: ["firstChild", "firstChild", booleanAttribute], lastChild: ["lastChild", "lastChild", booleanAttribute], level: ["level", "level", numberAttribute], indentation: ["indentation", "indentation", numberAttribute], itemSize: ["itemSize", "itemSize", numberAttribute], loadingMode: "loadingMode" }, providers: [TreeStyle, { provide: TREENODE_INSTANCE, useExisting: UITreeNode }, { provide: PARENT_INSTANCE, useExisting: UITreeNode }], usesInheritance: true, ngImport: i0, template: `
         @if (node) {
             <li
                 [class]="cn(cx('node'), node.styleClass)"
@@ -636,6 +658,7 @@ class UITreeNode extends BaseComponent {
                         [tabindex]="-1"
                         (click)="$event.preventDefault()"
                         [pt]="getPTOptions('pcNodeCheckbox')"
+                        [unstyled]="unstyled()"
                     >
                         <ng-container *ngIf="tree.checkboxIconTemplate || tree._checkboxIconTemplate">
                             <ng-template #icon>
@@ -662,7 +685,7 @@ class UITreeNode extends BaseComponent {
                     </span>
                 </div>
                 @if (isNextDropPointActive()) {
-                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
+                    <div [class]="cx('dropPoint', { next: true })" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
                 }
                 <ul [class]="cx('nodeChildren')" *ngIf="!tree.virtualScroll && node.children && node.expanded" role="group" [pBind]="ptm('nodeChildren')">
                     <p-treeNode
@@ -675,18 +698,21 @@ class UITreeNode extends BaseComponent {
                         [itemSize]="itemSize"
                         [level]="level + 1"
                         [loadingMode]="loadingMode"
+                        [pt]="pt"
+                        [unstyled]="unstyled()"
                     ></p-treeNode>
                 </ul>
             </li>
         }
-    `, isInline: true, dependencies: [{ kind: "component", type: UITreeNode, selector: "p-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i3.Bind, selector: "[pBind]", inputs: ["pBind"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "component", type: UITreeNode, selector: "p-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: Ripple, selector: "[pRipple]" }, { kind: "component", type: Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChevronRightIcon, selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "component", type: ChevronDownIcon, selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i3.Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: UITreeNode, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: UITreeNode, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeNode',
                     standalone: true,
                     imports: [CommonModule, Ripple, Checkbox, FormsModule, ChevronRightIcon, ChevronDownIcon, SpinnerIcon, SharedModule, BindModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
         @if (node) {
             <li
@@ -751,6 +777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         [tabindex]="-1"
                         (click)="$event.preventDefault()"
                         [pt]="getPTOptions('pcNodeCheckbox')"
+                        [unstyled]="unstyled()"
                     >
                         <ng-container *ngIf="tree.checkboxIconTemplate || tree._checkboxIconTemplate">
                             <ng-template #icon>
@@ -777,7 +804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     </span>
                 </div>
                 @if (isNextDropPointActive()) {
-                    <div [class]="cx('dropPoint')" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
+                    <div [class]="cx('dropPoint', { next: true })" [attr.aria-hidden]="true" [pBind]="getPTOptions('dropPoint')"></div>
                 }
                 <ul [class]="cx('nodeChildren')" *ngIf="!tree.virtualScroll && node.children && node.expanded" role="group" [pBind]="ptm('nodeChildren')">
                     <p-treeNode
@@ -790,6 +817,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                         [itemSize]="itemSize"
                         [level]="level + 1"
                         [loadingMode]="loadingMode"
+                        [pt]="pt"
+                        [unstyled]="unstyled()"
                     ></p-treeNode>
                 </ul>
             </li>
@@ -858,7 +887,7 @@ class Tree extends BaseComponent {
      * A single treenode instance or an array to refer to the selections.
      * @group Props
      */
-    selection;
+    selection = model(null, { ...(ngDevMode ? { debugName: "selection" } : {}) });
     /**
      * Style class of the component.
      * @deprecated since v20.0.0, use `class` instead.
@@ -870,6 +899,16 @@ class Tree extends BaseComponent {
      * @group Props
      */
     contextMenu;
+    /**
+     * Defines the behavior of context menu selection, in "separate" mode context menu updates contextMenuSelection property whereas in joint mode selection property is used instead so that when row selection is enabled, both row selection and context menu selection use the same property.
+     * @group Props
+     */
+    contextMenuSelectionMode = 'joint';
+    /**
+     * Selected node with a context menu.
+     * @group Props
+     */
+    contextMenuSelection = model(null, { ...(ngDevMode ? { debugName: "contextMenuSelection" } : {}) });
     /**
      * Scope of the draggable nodes to match a droppableScope.
      * @group Props
@@ -1025,12 +1064,6 @@ class Tree extends BaseComponent {
      * @group Props
      */
     highlightOnSelect = false;
-    /**
-     * Callback to invoke on selection change.
-     * @param {(TreeNode<any> | TreeNode<any>[] | null)} event - Custom selection change event.
-     * @group Emits
-     */
-    selectionChange = new EventEmitter();
     /**
      * Callback to invoke when a node is selected.
      * @param {TreeNodeSelectEvent} event - Node select event.
@@ -1098,52 +1131,60 @@ class Tree extends BaseComponent {
      */
     onFilter = new EventEmitter();
     /**
-     * Filter template.
+     * Custom filter template.
+     * @param {TreeFilterTemplateContext} context - filter context.
+     * @see {@link TreeFilterTemplateContext}
      * @group Templates
      */
     filterTemplate;
     /**
-     * Node template.
+     * Custom node template.
      * @group Templates
      */
     nodeTemplate;
     /**
-     * Header template.
+     * Custom header template.
      * @group Templates
      */
     headerTemplate;
     /**
-     * Footer template.
+     * Custom footer template.
      * @group Templates
      */
     footerTemplate;
     /**
-     * Loader template.
+     * Custom loader template.
+     * @param {TreeLoaderTemplateContext} context - loader context.
+     * @see {@link TreeLoaderTemplateContext}
      * @group Templates
      */
     loaderTemplate;
     /**
-     * Empty message template.
+     * Custom empty message template.
      * @group Templates
      */
-    emptyMessageTemplate;
+    emptyTemplate;
     /**
-     * Toggler icon template.
+     * Custom toggler icon template.
+     * @param {TreeTogglerIconTemplateContext} context - toggler icon context.
+     * @see {@link TreeTogglerIconTemplateContext}
      * @group Templates
      */
     togglerIconTemplate;
     /**
-     * Checkbox icon template.
+     * Custom checkbox icon template.
+     * @param {TreeCheckboxIconTemplateContext} context - checkbox icon context.
+     * @see {@link TreeCheckboxIconTemplateContext}
      * @group Templates
      */
     checkboxIconTemplate;
     /**
-     * Loading icon template.
+     * Custom loading icon template.
      * @group Templates
      */
     loadingIconTemplate;
     /**
-     * Filter icon template.
+     * Custom filter icon template.
      * @group Templates
      */
     filterIconTemplate;
@@ -1153,7 +1194,7 @@ class Tree extends BaseComponent {
     contentViewChild;
     templates;
     _headerTemplate;
-    _emptyMessageTemplate;
+    _emptyTemplate;
     _footerTemplate;
     _loaderTemplate;
     _togglerIconTemplate;
@@ -1171,7 +1212,7 @@ class Tree extends BaseComponent {
                     this._headerTemplate = item.template;
                     break;
                 case 'empty':
-                    this._emptyMessageTemplate = item.template;
+                    this._emptyTemplate = item.template;
                     break;
                 case 'footer':
                     this._footerTemplate = item.template;
@@ -1286,10 +1327,11 @@ class Tree extends BaseComponent {
     }
     onNodeClick(event, node) {
         let eventTarget = event.target;
-        if (hasClass(eventTarget, 'p-tree-toggler') || hasClass(eventTarget, 'p-tree-toggler-icon')) {
+        const section = eventTarget?.getAttribute?.('data-pc-section');
+        if (section === 'nodetogglebutton' || section === 'nodetoggleicon') {
             return;
         }
-        else if (this.selectionMode) {
+        if (this.selectionMode) {
             if (node.selectable === false) {
                 node.style = '--p-focus-ring-color: none;';
                 return;
@@ -1307,27 +1349,26 @@ class Tree extends BaseComponent {
             }
             let index = this.findIndexInSelection(node);
             let selected = index >= 0;
+            const currentSelection = this.selection();
             if (this.isCheckboxSelectionMode()) {
                 if (selected) {
                     if (this.propagateSelectionDown)
                         this.propagateDown(node, false);
                     else
-                        this.selection = this.selection.filter((val, i) => i != index);
+                        this.selection.set(currentSelection.filter((_val, i) => i != index));
                     if (this.propagateSelectionUp && node.parent) {
                         this.propagateUp(node.parent, false);
                     }
-                    this.selectionChange.emit(this.selection);
                     this.onNodeUnselect.emit({ originalEvent: event, node: node });
                 }
                 else {
                     if (this.propagateSelectionDown)
                         this.propagateDown(node, true);
                     else
-                        this.selection = [...(this.selection || []), node];
+                        this.selection.set([...(currentSelection || []), node]);
                     if (this.propagateSelectionUp && node.parent) {
                         this.propagateUp(node.parent, true);
                     }
-                    this.selectionChange.emit(this.selection);
                     this.onNodeSelect.emit({ originalEvent: event, node: node });
                 }
             }
@@ -1337,22 +1378,20 @@ class Tree extends BaseComponent {
                     let metaKey = event.metaKey || event.ctrlKey;
                     if (selected && metaKey) {
                         if (this.isSingleSelectionMode()) {
-                            this.selectionChange.emit(null);
+                            this.selection.set(null);
                         }
                         else {
-                            this.selection = this.selection.filter((val, i) => i != index);
-                            this.selectionChange.emit(this.selection);
+                            this.selection.set(currentSelection.filter((_val, i) => i != index));
                         }
                         this.onNodeUnselect.emit({ originalEvent: event, node: node });
                     }
                     else {
                         if (this.isSingleSelectionMode()) {
-                            this.selectionChange.emit(node);
+                            this.selection.set(node);
                         }
                         else if (this.isMultipleSelectionMode()) {
-                            this.selection = !metaKey ? [] : this.selection || [];
-                            this.selection = [...this.selection, node];
-                            this.selectionChange.emit(this.selection);
+                            const base = !metaKey ? [] : currentSelection || [];
+                            this.selection.set([...base, node]);
                         }
                         this.onNodeSelect.emit({ originalEvent: event, node: node });
                     }
@@ -1360,11 +1399,11 @@ class Tree extends BaseComponent {
                 else {
                     if (this.isSingleSelectionMode()) {
                         if (selected) {
-                            this.selection = null;
+                            this.selection.set(null);
                             this.onNodeUnselect.emit({ originalEvent: event, node: node });
                         }
                         else {
-                            this.selection = node;
+                            this.selection.set(node);
                             setTimeout(() => {
                                 this.onNodeSelect.emit({ originalEvent: event, node: node });
                             });
@@ -1372,17 +1411,16 @@ class Tree extends BaseComponent {
                     }
                     else {
                         if (selected) {
-                            this.selection = this.selection.filter((val, i) => i != index);
+                            this.selection.set(currentSelection.filter((_val, i) => i != index));
                             this.onNodeUnselect.emit({ originalEvent: event, node: node });
                         }
                         else {
-                            this.selection = [...(this.selection || []), node];
+                            this.selection.set([...(currentSelection || []), node]);
                             setTimeout(() => {
                                 this.onNodeSelect.emit({ originalEvent: event, node: node });
                             });
                         }
                     }
-                    this.selectionChange.emit(this.selection);
                 }
             }
         }
@@ -1394,20 +1432,36 @@ class Tree extends BaseComponent {
     onNodeRightClick(event, node) {
         if (this.contextMenu) {
             let eventTarget = event.target;
-            if (eventTarget.className && eventTarget.className.indexOf('p-tree-toggler') === 0) {
+            const section = eventTarget.getAttribute('data-pc-section');
+            if (section === 'nodetogglebutton' || section === 'nodetoggleicon') {
                 return;
             }
-            else {
-                let index = this.findIndexInSelection(node);
-                let selected = index >= 0;
-                if (!selected) {
-                    if (this.isSingleSelectionMode())
-                        this.selectionChange.emit(node);
-                    else
-                        this.selectionChange.emit([node]);
-                }
+            let index = this.findIndexInSelection(node);
+            let isNodeSelected = index >= 0;
+            const onContextMenuCallback = () => {
                 this.contextMenu.show(event);
+                this.contextMenu.hideCallback = () => {
+                    this.contextMenuSelection.set(null);
+                };
                 this.onNodeContextMenuSelect.emit({ originalEvent: event, node: node });
+            };
+            if (this.contextMenuSelectionMode === 'separate') {
+                // In 'separate' mode: Update contextMenuSelection with clicked node, don't modify selection
+                this.contextMenuSelection.set(node);
+                onContextMenuCallback();
+            }
+            else if (this.contextMenuSelectionMode === 'joint') {
+                // In 'joint' mode: Update only selection, don't touch contextMenuSelection
+                if (!isNodeSelected) {
+                    if (this.isSingleSelectionMode()) {
+                        this.selection.set(node);
+                    }
+                    else {
+                        this.selection.set([node]);
+                    }
+                }
+                // If already selected, keep current selection as is
+                onContextMenuCallback();
             }
         }
     }
@@ -1416,14 +1470,17 @@ class Tree extends BaseComponent {
     }
     findIndexInSelection(node) {
         let index = -1;
-        if (this.selectionMode && this.selection) {
+        const currentSelection = this.selection();
+        if (this.selectionMode && currentSelection) {
             if (this.isSingleSelectionMode()) {
-                let areNodesEqual = (this.selection.key && this.selection.key === node.key) || this.selection == node;
+                const sel = currentSelection;
+                let areNodesEqual = (sel.key && sel.key === node.key) || sel == node;
                 index = areNodesEqual ? 0 : -1;
             }
             else {
-                for (let i = 0; i < this.selection.length; i++) {
-                    let selectedNode = this.selection[i];
+                const selArray = currentSelection;
+                for (let i = 0; i < selArray.length; i++) {
+                    let selectedNode = selArray[i];
                     let areNodesEqual = (selectedNode.key && selectedNode.key === node.key) || selectedNode == node;
                     if (areNodesEqual) {
                         index = i;
@@ -1472,15 +1529,16 @@ class Tree extends BaseComponent {
                     childPartialSelected = true;
                 }
             }
+            const currentSelection = this.selection() || [];
             if (select && selectedCount == node.children.length) {
-                this.selection = [...(this.selection || []), node];
+                this.selection.set([...currentSelection, node]);
                 node.partialSelected = false;
             }
             else {
                 if (!select) {
                     let index = this.findIndexInSelection(node);
                     if (index >= 0) {
-                        this.selection = this.selection.filter((val, i) => i != index);
+                        this.selection.set(currentSelection.filter((_val, i) => i != index));
                     }
                 }
                 if (childPartialSelected || (selectedCount > 0 && selectedCount != node.children.length))
@@ -1497,11 +1555,12 @@ class Tree extends BaseComponent {
     }
     propagateDown(node, select) {
         let index = this.findIndexInSelection(node);
+        const currentSelection = this.selection() || [];
         if (select && index == -1) {
-            this.selection = [...(this.selection || []), node];
+            this.selection.set([...currentSelection, node]);
         }
         else if (!select && index > -1) {
-            this.selection = this.selection.filter((val, i) => i != index);
+            this.selection.set(currentSelection.filter((_val, i) => i != index));
         }
         node.partialSelected = false;
         this.syncNodeOption(node, this.filteredNodes, 'partialSelected');
@@ -1768,9 +1827,20 @@ class Tree extends BaseComponent {
             this.dragStopSubscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Tree, deps: [{ token: i4.TreeDragDropService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: Tree, isStandalone: true, selector: "p-tree", inputs: { value: "value", selectionMode: "selectionMode", loadingMode: "loadingMode", selection: "selection", styleClass: "styleClass", contextMenu: "contextMenu", draggableScope: "draggableScope", droppableScope: "droppableScope", draggableNodes: ["draggableNodes", "draggableNodes", booleanAttribute], droppableNodes: ["droppableNodes", "droppableNodes", booleanAttribute], metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], propagateSelectionUp: ["propagateSelectionUp", "propagateSelectionUp", booleanAttribute], propagateSelectionDown: ["propagateSelectionDown", "propagateSelectionDown", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", emptyMessage: "emptyMessage", ariaLabel: "ariaLabel", togglerAriaLabel: "togglerAriaLabel", ariaLabelledBy: "ariaLabelledBy", validateDrop: ["validateDrop", "validateDrop", booleanAttribute], filter: ["filter", "filter", booleanAttribute], filterInputAutoFocus: ["filterInputAutoFocus", "filterInputAutoFocus", booleanAttribute], filterBy: "filterBy", filterMode: "filterMode", filterOptions: "filterOptions", filterPlaceholder: "filterPlaceholder", filteredNodes: "filteredNodes", filterLocale: "filterLocale", scrollHeight: "scrollHeight", lazy: ["lazy", "lazy", booleanAttribute], virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", indentation: ["indentation", "indentation", numberAttribute], _templateMap: "_templateMap", trackBy: "trackBy", highlightOnSelect: ["highlightOnSelect", "highlightOnSelect", booleanAttribute] }, outputs: { selectionChange: "selectionChange", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onNodeContextMenuSelect: "onNodeContextMenuSelect", onNodeDoubleClick: "onNodeDoubleClick", onNodeDrop: "onNodeDrop", onLazyLoad: "onLazyLoad", onScroll: "onScroll", onScrollIndexChange: "onScrollIndexChange", onFilter: "onFilter" }, host: { listeners: { "drop": "handleDropEvent($event)", "dragover": "handleDragOverEvent($event)", "dragenter": "handleDragEnterEvent()", "dragleave": "handleDragLeaveEvent($event)" }, properties: { "class": "cn(cx('root'), styleClass)" } }, providers: [TreeStyle, { provide: TREE_INSTANCE, useExisting: Tree }, { provide: PARENT_INSTANCE, useExisting: Tree }], queries: [{ propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "nodeTemplate", first: true, predicate: ["node"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }, { propertyName: "emptyMessageTemplate", first: true, predicate: ["empty"] }, { propertyName: "togglerIconTemplate", first: true, predicate: ["togglericon"] }, { propertyName: "checkboxIconTemplate", first: true, predicate: ["checkboxicon"] }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i3.Bind }], ngImport: i0, template: `
-        <div [class]="cx('mask')" *ngIf="loading && loadingMode === 'mask'" [pBind]="ptm('mask')">
+    get containerDataP() {
+        return this.cn({
+            loading: this.loading,
+            scrollable: this.scrollHeight === 'flex'
+        });
+    }
+    get wrapperDataP() {
+        return this.cn({
+            scrollable: this.scrollHeight === 'flex'
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Tree, deps: [{ token: i4.TreeDragDropService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: Tree, isStandalone: true, selector: "p-tree", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: false, isRequired: false, transformFunction: null }, loadingMode: { classPropertyName: "loadingMode", publicName: "loadingMode", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: false, isRequired: false, transformFunction: null }, contextMenu: { classPropertyName: "contextMenu", publicName: "contextMenu", isSignal: false, isRequired: false, transformFunction: null }, contextMenuSelectionMode: { classPropertyName: "contextMenuSelectionMode", publicName: "contextMenuSelectionMode", isSignal: false, isRequired: false, transformFunction: null }, contextMenuSelection: { classPropertyName: "contextMenuSelection", publicName: "contextMenuSelection", isSignal: true, isRequired: false, transformFunction: null }, draggableScope: { classPropertyName: "draggableScope", publicName: "draggableScope", isSignal: false, isRequired: false, transformFunction: null }, droppableScope: { classPropertyName: "droppableScope", publicName: "droppableScope", isSignal: false, isRequired: false, transformFunction: null }, draggableNodes: { classPropertyName: "draggableNodes", publicName: "draggableNodes", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, droppableNodes: { classPropertyName: "droppableNodes", publicName: "droppableNodes", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, metaKeySelection: { classPropertyName: "metaKeySelection", publicName: "metaKeySelection", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, propagateSelectionUp: { classPropertyName: "propagateSelectionUp", publicName: "propagateSelectionUp", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, propagateSelectionDown: { classPropertyName: "propagateSelectionDown", publicName: "propagateSelectionDown", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: false, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, togglerAriaLabel: { classPropertyName: "togglerAriaLabel", publicName: "togglerAriaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, validateDrop: { classPropertyName: "validateDrop", publicName: "validateDrop", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterInputAutoFocus: { classPropertyName: "filterInputAutoFocus", publicName: "filterInputAutoFocus", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterBy: { classPropertyName: "filterBy", publicName: "filterBy", isSignal: false, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: false, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: false, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: false, isRequired: false, transformFunction: null }, filteredNodes: { classPropertyName: "filteredNodes", publicName: "filteredNodes", isSignal: false, isRequired: false, transformFunction: null }, filterLocale: { classPropertyName: "filterLocale", publicName: "filterLocale", isSignal: false, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: false, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, virtualScrollItemSize: { classPropertyName: "virtualScrollItemSize", publicName: "virtualScrollItemSize", isSignal: false, isRequired: false, transformFunction: numberAttribute }, virtualScrollOptions: { classPropertyName: "virtualScrollOptions", publicName: "virtualScrollOptions", isSignal: false, isRequired: false, transformFunction: null }, indentation: { classPropertyName: "indentation", publicName: "indentation", isSignal: false, isRequired: false, transformFunction: numberAttribute }, _templateMap: { classPropertyName: "_templateMap", publicName: "_templateMap", isSignal: false, isRequired: false, transformFunction: null }, trackBy: { classPropertyName: "trackBy", publicName: "trackBy", isSignal: false, isRequired: false, transformFunction: null }, highlightOnSelect: { classPropertyName: "highlightOnSelect", publicName: "highlightOnSelect", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { selection: "selectionChange", contextMenuSelection: "contextMenuSelectionChange", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onNodeContextMenuSelect: "onNodeContextMenuSelect", onNodeDoubleClick: "onNodeDoubleClick", onNodeDrop: "onNodeDrop", onLazyLoad: "onLazyLoad", onScroll: "onScroll", onScrollIndexChange: "onScrollIndexChange", onFilter: "onFilter" }, host: { listeners: { "drop": "handleDropEvent($event)", "dragover": "handleDragOverEvent($event)", "dragenter": "handleDragEnterEvent()", "dragleave": "handleDragLeaveEvent($event)" }, properties: { "class": "cn(cx('root'), styleClass)", "attr.data-p": "containerDataP" } }, providers: [TreeStyle, { provide: TREE_INSTANCE, useExisting: Tree }, { provide: PARENT_INSTANCE, useExisting: Tree }], queries: [{ propertyName: "filterTemplate", first: true, predicate: ["filter"] }, { propertyName: "nodeTemplate", first: true, predicate: ["node"] }, { propertyName: "headerTemplate", first: true, predicate: ["header"] }, { propertyName: "footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "loaderTemplate", first: true, predicate: ["loader"] }, { propertyName: "emptyTemplate", first: true, predicate: ["empty"] }, { propertyName: "togglerIconTemplate", first: true, predicate: ["togglericon"] }, { propertyName: "checkboxIconTemplate", first: true, predicate: ["checkboxicon"] }, { propertyName: "loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "filterIconTemplate", first: true, predicate: ["filtericon"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "contentViewChild", first: true, predicate: ["content"], descendants: true }], usesInheritance: true, hostDirectives: [{ directive: i3.Bind }], ngImport: i0, template: `
+        <div [class]="cx('mask')" *ngIf="loading && loadingMode === 'mask'" [pBind]="ptm('mask')" animate.enter="p-overlay-mask-enter-active" animate.leave="p-overlay-mask-leave-active">
             <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)" [pBind]="ptm('loadingIcon')"></i>
             <ng-container *ngIf="!loadingIcon">
                 <svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" spin [class]="cx('loadingIcon')" [pBind]="ptm('loadingIcon')" />
@@ -1783,7 +1853,7 @@ class Tree extends BaseComponent {
         @if (filterTemplate || _filterTemplate) {
             <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { $implicit: filterOptions }"></ng-container>
         } @else {
-            <p-iconfield *ngIf="filter" [class]="cx('pcFilterContainer')" [pt]="ptm('pcFilterContainer')">
+            <p-iconfield *ngIf="filter" [class]="cx('pcFilterContainer')" [pt]="ptm('pcFilterContainer')" [unstyled]="unstyled()">
                 <input
                     #filter
                     [pAutoFocus]="filterInputAutoFocus"
@@ -1795,8 +1865,9 @@ class Tree extends BaseComponent {
                     (keydown.enter)="$event.preventDefault()"
                     (input)="_filter($event.target?.value)"
                     [pt]="ptm('pcFilterInput')"
+                    [unstyled]="unstyled()"
                 />
-                <p-inputicon [pt]="ptm('pcFilterIconContainer')">
+                <p-inputicon [pt]="ptm('pcFilterIconContainer')" [unstyled]="unstyled()">
                     <svg data-p-icon="search" *ngIf="!filterIconTemplate && !_filterIconTemplate" [class]="cx('filterIcon')" [pBind]="ptm('filterIcon')" />
                     <span *ngIf="filterIconTemplate || _filterIconTemplate" [class]="cx('filterIcon')" [pBind]="ptm('filterIcon')">
                         <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
@@ -1822,6 +1893,7 @@ class Tree extends BaseComponent {
                 [options]="virtualScrollOptions"
                 [pt]="ptm('virtualScroller')"
                 hostName="tree"
+                [attr.data-p]="wrapperDataP"
             >
                 <ng-template #content let-items let-scrollerOptions="options">
                     <ul
@@ -1849,6 +1921,7 @@ class Tree extends BaseComponent {
                             [indentation]="indentation"
                             [loadingMode]="loadingMode"
                             [pt]="pt"
+                            [unstyled]="unstyled()"
                         ></p-treeNode>
                     </ul>
                 </ng-template>
@@ -1859,7 +1932,7 @@ class Tree extends BaseComponent {
                 </ng-container>
             </p-scroller>
             <ng-container *ngIf="!virtualScroll">
-                <div #wrapper [class]="cx('wrapper')" [style.max-height]="scrollHeight" [pBind]="ptm('wrapper')">
+                <div #wrapper [class]="cx('wrapper')" [style.max-height]="scrollHeight" [pBind]="ptm('wrapper')" [attr.data-p]="wrapperDataP">
                     <ul #content [class]="cx('rootChildren')" *ngIf="getRootNode()" role="tree" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" [pBind]="ptm('rootChildren')">
                         <p-treeNode
                             *ngFor="let node of getRootNode(); let firstChild = first; let lastChild = last; let index = index; trackBy: trackBy.bind(this)"
@@ -1870,6 +1943,7 @@ class Tree extends BaseComponent {
                             [level]="0"
                             [loadingMode]="loadingMode"
                             [pt]="pt"
+                            [unstyled]="unstyled()"
                         ></p-treeNode>
                     </ul>
                 </div>
@@ -1877,22 +1951,22 @@ class Tree extends BaseComponent {
         </ng-container>
 
         <div [class]="cx('emptyMessage')" *ngIf="!loading && (getRootNode() == null || getRootNode().length === 0)" [pBind]="ptm('emptyMessage')">
-            <ng-container *ngIf="!emptyMessageTemplate && !_emptyMessageTemplate; else emptyFilter">
+            <ng-container *ngIf="!emptyTemplate && !_emptyTemplate; else emptyFilter">
                 {{ emptyMessageLabel }}
             </ng-container>
-            <ng-template #emptyFilter *ngTemplateOutlet="emptyMessageTemplate || _emptyMessageTemplate"></ng-template>
+            <ng-template #emptyFilter *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-template>
         </div>
         <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: SearchIcon, selector: "[data-p-icon=\"search\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: UITreeNode, selector: "p-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i5.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "ngmodule", type: SharedModule }, { kind: "component", type: SearchIcon, selector: "[data-p-icon=\"search\"]" }, { kind: "component", type: SpinnerIcon, selector: "[data-p-icon=\"spinner\"]" }, { kind: "directive", type: InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: UITreeNode, selector: "p-treeNode", inputs: ["rowNode", "node", "parentNode", "root", "index", "firstChild", "lastChild", "level", "indentation", "itemSize", "loadingMode"] }, { kind: "ngmodule", type: AutoFocusModule }, { kind: "directive", type: i5.AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: Tree, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: Tree, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tree',
                     standalone: true,
                     imports: [CommonModule, Scroller, SharedModule, SearchIcon, SpinnerIcon, InputText, FormsModule, IconField, InputIcon, UITreeNode, AutoFocusModule, Bind],
                     template: `
-        <div [class]="cx('mask')" *ngIf="loading && loadingMode === 'mask'" [pBind]="ptm('mask')">
+        <div [class]="cx('mask')" *ngIf="loading && loadingMode === 'mask'" [pBind]="ptm('mask')" animate.enter="p-overlay-mask-enter-active" animate.leave="p-overlay-mask-leave-active">
             <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)" [pBind]="ptm('loadingIcon')"></i>
             <ng-container *ngIf="!loadingIcon">
                 <svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" spin [class]="cx('loadingIcon')" [pBind]="ptm('loadingIcon')" />
@@ -1905,7 +1979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
         @if (filterTemplate || _filterTemplate) {
             <ng-container *ngTemplateOutlet="filterTemplate || _filterTemplate; context: { $implicit: filterOptions }"></ng-container>
         } @else {
-            <p-iconfield *ngIf="filter" [class]="cx('pcFilterContainer')" [pt]="ptm('pcFilterContainer')">
+            <p-iconfield *ngIf="filter" [class]="cx('pcFilterContainer')" [pt]="ptm('pcFilterContainer')" [unstyled]="unstyled()">
                 <input
                     #filter
                     [pAutoFocus]="filterInputAutoFocus"
@@ -1917,8 +1991,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     (keydown.enter)="$event.preventDefault()"
                     (input)="_filter($event.target?.value)"
                     [pt]="ptm('pcFilterInput')"
+                    [unstyled]="unstyled()"
                 />
-                <p-inputicon [pt]="ptm('pcFilterIconContainer')">
+                <p-inputicon [pt]="ptm('pcFilterIconContainer')" [unstyled]="unstyled()">
                     <svg data-p-icon="search" *ngIf="!filterIconTemplate && !_filterIconTemplate" [class]="cx('filterIcon')" [pBind]="ptm('filterIcon')" />
                     <span *ngIf="filterIconTemplate || _filterIconTemplate" [class]="cx('filterIcon')" [pBind]="ptm('filterIcon')">
                         <ng-template *ngTemplateOutlet="filterIconTemplate || _filterIconTemplate"></ng-template>
@@ -1944,6 +2019,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 [options]="virtualScrollOptions"
                 [pt]="ptm('virtualScroller')"
                 hostName="tree"
+                [attr.data-p]="wrapperDataP"
             >
                 <ng-template #content let-items let-scrollerOptions="options">
                     <ul
@@ -1971,6 +2047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                             [indentation]="indentation"
                             [loadingMode]="loadingMode"
                             [pt]="pt"
+                            [unstyled]="unstyled()"
                         ></p-treeNode>
                     </ul>
                 </ng-template>
@@ -1981,7 +2058,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 </ng-container>
             </p-scroller>
             <ng-container *ngIf="!virtualScroll">
-                <div #wrapper [class]="cx('wrapper')" [style.max-height]="scrollHeight" [pBind]="ptm('wrapper')">
+                <div #wrapper [class]="cx('wrapper')" [style.max-height]="scrollHeight" [pBind]="ptm('wrapper')" [attr.data-p]="wrapperDataP">
                     <ul #content [class]="cx('rootChildren')" *ngIf="getRootNode()" role="tree" [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledBy" [pBind]="ptm('rootChildren')">
                         <p-treeNode
                             *ngFor="let node of getRootNode(); let firstChild = first; let lastChild = last; let index = index; trackBy: trackBy.bind(this)"
@@ -1992,6 +2069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                             [level]="0"
                             [loadingMode]="loadingMode"
                             [pt]="pt"
+                            [unstyled]="unstyled()"
                         ></p-treeNode>
                     </ul>
                 </div>
@@ -1999,10 +2077,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
         </ng-container>
 
         <div [class]="cx('emptyMessage')" *ngIf="!loading && (getRootNode() == null || getRootNode().length === 0)" [pBind]="ptm('emptyMessage')">
-            <ng-container *ngIf="!emptyMessageTemplate && !_emptyMessageTemplate; else emptyFilter">
+            <ng-container *ngIf="!emptyTemplate && !_emptyTemplate; else emptyFilter">
                 {{ emptyMessageLabel }}
             </ng-container>
-            <ng-template #emptyFilter *ngTemplateOutlet="emptyMessageTemplate || _emptyMessageTemplate"></ng-template>
+            <ng-template #emptyFilter *ngTemplateOutlet="emptyTemplate || _emptyTemplate"></ng-template>
         </div>
         <ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate"></ng-container>
     `,
@@ -2010,7 +2088,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     providers: [TreeStyle, { provide: TREE_INSTANCE, useExisting: Tree }, { provide: PARENT_INSTANCE, useExisting: Tree }],
                     host: {
-                        '[class]': "cn(cx('root'), styleClass)"
+                        '[class]': "cn(cx('root'), styleClass)",
+                        '[attr.data-p]': 'containerDataP'
                     },
                     hostDirectives: [Bind]
                 }]
@@ -2022,13 +2101,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 type: Input
             }], loadingMode: [{
                 type: Input
-            }], selection: [{
-                type: Input
-            }], styleClass: [{
+            }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }, { type: i0.Output, args: ["selectionChange"] }], styleClass: [{
                 type: Input
             }], contextMenu: [{
                 type: Input
-            }], draggableScope: [{
+            }], contextMenuSelectionMode: [{
+                type: Input
+            }], contextMenuSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextMenuSelection", required: false }] }, { type: i0.Output, args: ["contextMenuSelectionChange"] }], draggableScope: [{
                 type: Input
             }], droppableScope: [{
                 type: Input
@@ -2104,8 +2183,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }], highlightOnSelect: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], selectionChange: [{
-                type: Output
             }], onNodeSelect: [{
                 type: Output
             }], onNodeUnselect: [{
@@ -2143,7 +2220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
             }], loaderTemplate: [{
                 type: ContentChild,
                 args: ['loader', { descendants: false }]
-            }], emptyMessageTemplate: [{
+            }], emptyTemplate: [{
                 type: ContentChild,
                 args: ['empty', { descendants: false }]
             }], togglerIconTemplate: [{
@@ -2187,11 +2264,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                 args: ['dragleave', ['$event']]
             }] } });
 class TreeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule], exports: [Tree, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.1", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule], exports: [Tree, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeModule, imports: [Tree, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: TreeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TreeModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Tree, SharedModule],