tree-picker-modal: updated with selection config

src/Umbraco.Web.UI.Client/src/packages/core/modal/common/tree-picker/tree-picker-modal.element.ts

@@ -1,9 +1,8 @@
-import { type UmbTreeElement } from '../../../tree/tree.element.js';
 import { html, customElement, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UmbTreePickerModalData, UmbPickerModalValue, UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
 import { UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event';
-import { UmbTreeItemModelBase } from '@umbraco-cms/backoffice/tree';
+import { UmbTreeElement, UmbTreeItemModelBase, type UmbTreeSelectionConfiguration } from '@umbraco-cms/backoffice/tree';
 
 @customElement('umb-tree-picker-modal')
 export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase> extends UmbModalBaseElement<
@@ -11,10 +10,11 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 	UmbPickerModalValue
 > {
 	@state()
-	_selection: Array<string | null> = [];
-
-	@state()
-	_multiple = false;
+	_selectionConfiguration: UmbTreeSelectionConfiguration = {
+		multiple: false,
+		selectable: true,
+		selection: [],
+	};
 
 	connectedCallback() {
 		super.connectedCallback();
@@ -22,17 +22,17 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 		// TODO: We should make a nicer way to observe the value..
 		if (this.modalContext) {
 			this.observe(this.modalContext.value, (value) => {
-				this._selection = value?.selection ?? [];
+				this._selectionConfiguration.selection = value?.selection ?? [];
 			});
 		}
 
-		this._multiple = this.data?.multiple ?? false;
+		this._selectionConfiguration.multiple = this.data?.multiple ?? false;
 	}
 
 	#onSelectionChange(e: CustomEvent) {
 		e.stopPropagation();
 		const element = e.target as UmbTreeElement;
-		this.value = { selection: element.selection };
+		this.value = { selection: element.getSelection() };
 		this.dispatchEvent(new UmbSelectionChangeEvent());
 	}
 
@@ -44,11 +44,9 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 						?hide-tree-root=${this.data?.hideTreeRoot}
 						alias=${ifDefined(this.data?.treeAlias)}
 						@selection-change=${this.#onSelectionChange}
-						.selection=${this._selection}
-						selectable
+						.selectionConfiguration=${this._selectionConfiguration}
 						.filter=${this.data?.filter}
-						.selectableFilter=${this.data?.pickableFilter}
-						?multiple=${this._multiple}></umb-tree>
+						.selectableFilter=${this.data?.pickableFilter}></umb-tree>
 				</uui-box>
 				<div slot="actions">
 					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>