support multi and single select in tree element

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

@@ -1,7 +1,7 @@
 import type { Observable } from 'rxjs';
 import { UmbTreeRepository } from '@umbraco-cms/backoffice/repository';
 import type { ManifestTree } from '@umbraco-cms/backoffice/extensions-registry';
-import { DeepState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
+import { BooleanState, DeepState, UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
 import { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller';
 import { createExtensionClass, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 
@@ -10,6 +10,7 @@ export interface UmbTreeContext {
 	readonly selectable: Observable<boolean>;
 	readonly selection: Observable<Array<string>>;
 	setSelectable(value: boolean): void;
+	setMultiple(value: boolean): void;
 	setSelection(value: Array<string>): void;
 	select(id: string): void;
 }
@@ -18,9 +19,12 @@ export class UmbTreeContextBase implements UmbTreeContext {
 	host: UmbControllerHostElement;
 	public tree: ManifestTree;
 
-	#selectable = new DeepState(false);
+	#selectable = new BooleanState(false);
 	public readonly selectable = this.#selectable.asObservable();
 
+	#multiple = new BooleanState(false);
+	public readonly multiple = this.#multiple.asObservable();
+
 	#selection = new DeepState(<Array<string>>[]);
 	public readonly selection = this.#selection.asObservable();
 
@@ -69,22 +73,36 @@ export class UmbTreeContextBase implements UmbTreeContext {
 		this.#selectable.next(value);
 	}
 
+	public getSelectable() {
+		return this.#selectable.getValue();
+	}
+
+	public setMultiple(value: boolean) {
+		this.#multiple.next(value);
+	}
+
+	public getMultiple() {
+		return this.#multiple.getValue();
+	}
+
 	public setSelection(value: Array<string>) {
 		if (!value) return;
 		this.#selection.next(value);
 	}
 
-	public select(id: string) {
-		const oldSelection = this.#selection.getValue();
-		if (oldSelection.indexOf(id) !== -1) return;
+	public getSelection() {
+		return this.#selection.getValue();
+	}
 
-		const selection = [...oldSelection, id];
-		this.#selection.next(selection);
+	public select(id: string) {
+		if (!this.getSelectable()) return;
+		const newSelection = this.getMultiple() ? [...this.getSelection(), id] : [id];
+		this.#selection.next(newSelection);
 	}
 
 	public deselect(id: string) {
-		const selection = this.#selection.getValue();
-		this.#selection.next(selection.filter((x) => x !== id));
+		const newSelection = this.getSelection().filter((x) => x !== id);
+		this.#selection.next(newSelection);
 	}
 
 	public async requestRootItems() {

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

@@ -51,6 +51,18 @@ export class UmbTreeElement extends UmbLitElement {
 		this._treeContext?.setSelection(newVal);
 	}
 
+	private _multiple = false;
+	@property({ type: Boolean, reflect: true })
+	get multiple() {
+		return this._multiple;
+	}
+	set multiple(newVal) {
+		const oldVal = this._multiple;
+		this._multiple = newVal;
+		this.requestUpdate('multiple', oldVal);
+		this._treeContext?.setMultiple(newVal);
+	}
+
 	@state()
 	private _tree?: ManifestTree;
 
@@ -86,6 +98,7 @@ export class UmbTreeElement extends UmbLitElement {
 		this._treeContext = new UmbTreeContextBase(this, this._tree);
 		this._treeContext.setSelectable(this.selectable);
 		this._treeContext.setSelection(this.selection);
+		this._treeContext.setMultiple(this.multiple);
 
 		this.#observeSelection();
 		this.#observeTreeRoot();