add selectable filter on for tree element

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree-item-base/tree-item-base.context.ts

@@ -138,7 +138,13 @@ export class UmbTreeItemContextBase<TreeItemType extends TreeItemPresentationMod
 
 	#observeIsSelectable() {
 		if (!this.treeContext) return;
-		new UmbObserverController(this.host, this.treeContext.selectable, (value) => this.#isSelectable.next(value));
+		new UmbObserverController(this.host, this.treeContext.selectable, (value) => {
+			// If the tree is selectable, check if this item is selectable
+			if (value === true) {
+				const isSelectable = this.treeContext?.selectableFilter(this.getTreeItem()!) || false;
+				this.#isSelectable.next(isSelectable);
+			}
+		});
 	}
 
 	#observeIsSelected() {

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.context.ts

@@ -37,9 +37,10 @@ export class UmbTreeContextBase<TreeItemType extends TreeItemPresentationModel>
 	#selection = new UmbArrayState(<Array<string | null>>[]);
 	public readonly selection = this.#selection.asObservable();
 
-	#treeAlias?: string;
-	repository?: UmbTreeRepository<TreeItemType>;
+	public repository?: UmbTreeRepository<TreeItemType>;
+	public selectableFilter: (item: TreeItemType) => boolean = () => true;
 
+	#treeAlias?: string;
 	#treeManifestObserver?: UmbObserverController<any>;
 
 	#initResolver?: () => void;

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/tree/tree.element.ts

@@ -61,6 +61,14 @@ export class UmbTreeElement extends UmbLitElement {
 		this.requestUpdate('hideTreeRoot', oldVal);
 	}
 
+	@property()
+	get selectableFilter() {
+		return this.#treeContext.selectableFilter;
+	}
+	set selectableFilter(newVal) {
+		this.#treeContext.selectableFilter = newVal;
+	}
+
 	@state()
 	private _items: TreeItemPresentationModel[] = [];