Improvement: Direct usage of selection manager instead of proxy methods

src/packages/core/collection/default/collection-default.context.ts

@@ -43,7 +43,7 @@ export class UmbDefaultCollectionContext<
 	});
 
 	public readonly pagination = new UmbPaginationManager();
-	public readonly selection = new UmbSelectionManager();
+	public readonly selection = new UmbSelectionManager(this);
 	public readonly view;
 
 	constructor(host: UmbControllerHostElement, config: UmbCollectionConfiguration = { pageSize: 50 }) {

src/packages/core/modal/common/section-picker/section-picker-modal.element.ts

@@ -16,7 +16,7 @@ export class UmbSectionPickerModalElement extends UmbModalBaseElement<
 	@state()
 	private _sections: Array<ManifestSection> = [];
 
-	#selectionManager = new UmbSelectionManager();
+	#selectionManager = new UmbSelectionManager(this);
 
 	connectedCallback(): void {
 		super.connectedCallback();
@@ -33,14 +33,8 @@ export class UmbSectionPickerModalElement extends UmbModalBaseElement<
 	}
 
 	#submit() {
-		this.value = {
-			selection: this.#selectionManager.getSelection(),
-		};
-		this.modalContext?.submit();
-	}
-
-	#close() {
-		this.modalContext?.reject();
+		this.value = { selection: this.#selectionManager.getSelection() };
+		this._submitModal();
 	}
 
 	render() {
@@ -59,7 +53,7 @@ export class UmbSectionPickerModalElement extends UmbModalBaseElement<
 					)}
 				</uui-box>
 				<div slot="actions">
-					<uui-button label="Close" @click=${this.#close}></uui-button>
+					<uui-button label="Close" @click=${this._rejectModal}></uui-button>
 					<uui-button label="Submit" look="primary" color="positive" @click=${this.#submit}></uui-button>
 				</div>
 			</umb-body-layout>

src/packages/core/tree/tree-item-base/tree-item-base.context.ts

@@ -104,13 +104,13 @@ export class UmbTreeItemContextBase<TreeItemType extends UmbTreeItemModelBase>
 	}
 
 	public select() {
-		if (this.unique === undefined) throw new Error('Could not select, unique key is missing');
-		this.treeContext?.select(this.unique);
+		if (this.unique === undefined) throw new Error('Could not select. Unique is missing');
+		this.treeContext?.selection.select(this.unique);
 	}
 
 	public deselect() {
-		if (this.unique === undefined) throw new Error('Could not deselect, unique key is missing');
-		this.treeContext?.deselect(this.unique);
+		if (this.unique === undefined) throw new Error('Could not deselect. Unique is missing');
+		this.treeContext?.selection.deselect(this.unique);
 	}
 
 	#consumeContexts() {
@@ -138,7 +138,7 @@ export class UmbTreeItemContextBase<TreeItemType extends UmbTreeItemModelBase>
 	#observeIsSelectable() {
 		if (!this.treeContext) return;
 		this.observe(
-			this.treeContext.selectable,
+			this.treeContext.selection.selectable,
 			(value) => {
 				this.#isSelectableContext.next(value);
 
@@ -156,7 +156,7 @@ export class UmbTreeItemContextBase<TreeItemType extends UmbTreeItemModelBase>
 		if (!this.treeContext || !this.unique) return;
 
 		this.observe(
-			this.treeContext.selection.pipe(map((selection) => selection.includes(this.unique!))),
+			this.treeContext.selection.selection.pipe(map((selection) => selection.includes(this.unique!))),
 			(isSelected) => {
 				this.#isSelected.next(isSelected);
 			},

src/packages/core/tree/tree.context.ts

@@ -7,26 +7,15 @@ import {
 	type ManifestTree,
 	umbExtensionsRegistry,
 } from '@umbraco-cms/backoffice/extension-registry';
-import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbBaseController } from '@umbraco-cms/backoffice/class-api';
 import { type UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { ProblemDetails } from '@umbraco-cms/backoffice/backend-api';
 import { UmbSelectionManager } from '@umbraco-cms/backoffice/utils';
-import { UmbSelectionChangeEvent } from '@umbraco-cms/backoffice/event';
 
 // TODO: update interface
 export interface UmbTreeContext<TreeItemType extends UmbTreeItemModelBase> extends UmbBaseController {
-	readonly selectable: Observable<boolean>;
-	readonly selection: Observable<Array<string | null>>;
-	setSelectable(value: boolean): void;
-	getSelectable(): boolean;
-	setMultiple(value: boolean): void;
-	getMultiple(): boolean;
-	setSelection(value: Array<string | null>): void;
-	getSelection(): Array<string | null>;
-	select(unique: string | null): void;
-	deselect(unique: string | null): void;
+	selection: UmbSelectionManager;
 	requestChildrenOf: (parentUnique: string | null) => Promise<{
 		data?: UmbPagedData<TreeItemType>;
 		error?: ProblemDetails;
@@ -38,17 +27,11 @@ export class UmbTreeContextBase<TreeItemType extends UmbTreeItemModelBase>
 	extends UmbBaseController
 	implements UmbTreeContext<TreeItemType>
 {
-	#selectionManager = new UmbSelectionManager();
-
-	#selectable = new UmbBooleanState(false);
-	public readonly selectable = this.#selectable.asObservable();
-
-	public readonly multiple = this.#selectionManager.multiple;
-	public readonly selection = this.#selectionManager.selection;
-
 	public repository?: UmbTreeRepository<TreeItemType>;
 	public selectableFilter?: (item: TreeItemType) => boolean = () => true;
 
+	public readonly selection = new UmbSelectionManager(this._host);
+
 	#treeAlias?: string;
 
 	#initResolver?: () => void;
@@ -82,41 +65,6 @@ export class UmbTreeContextBase<TreeItemType extends UmbTreeItemModelBase>
 		return this.#treeAlias;
 	}
 
-	public setSelectable(value: boolean) {
-		this.#selectable.next(value);
-	}
-
-	public getSelectable() {
-		return this.#selectable.getValue();
-	}
-
-	public setMultiple(value: boolean) {
-		this.#selectionManager.setMultiple(value);
-	}
-
-	public getMultiple() {
-		return this.#selectionManager.getMultiple();
-	}
-
-	public setSelection(value: Array<string | null>) {
-		this.#selectionManager.setSelection(value);
-	}
-
-	public getSelection() {
-		return this.#selectionManager.getSelection();
-	}
-
-	public select(unique: string | null) {
-		if (!this.getSelectable()) return;
-		this.#selectionManager.select(unique);
-		this._host.getHostElement().dispatchEvent(new UmbSelectionChangeEvent());
-	}
-
-	public deselect(unique: string | null) {
-		this.#selectionManager.deselect(unique);
-		this._host.getHostElement().dispatchEvent(new UmbSelectionChangeEvent());
-	}
-
 	public async requestTreeRoot() {
 		await this.#init;
 		return this.repository!.requestTreeRoot();

src/packages/core/tree/tree.element.ts

@@ -19,27 +19,27 @@ export class UmbTreeElement extends UmbLitElement {
 
 	@property({ type: Boolean, reflect: true })
 	get selectable() {
-		return this.#treeContext.getSelectable();
+		return this.#treeContext.selection.getSelectable();
 	}
 	set selectable(newVal) {
-		this.#treeContext.setSelectable(newVal);
+		this.#treeContext.selection.setSelectable(newVal);
 	}
 
 	@property({ type: Array })
 	get selection() {
-		return this.#treeContext.getSelection();
+		return this.#treeContext.selection.getSelection();
 	}
 	set selection(newVal) {
 		if (!Array.isArray(newVal)) return;
-		this.#treeContext?.setSelection(newVal);
+		this.#treeContext?.selection.setSelection(newVal);
 	}
 
 	@property({ type: Boolean, reflect: true })
 	get multiple() {
-		return this.#treeContext.getMultiple();
+		return this.#treeContext.selection.getMultiple();
 	}
 	set multiple(newVal) {
-		this.#treeContext.setMultiple(newVal);
+		this.#treeContext.selection.setMultiple(newVal);
 	}
 
 	// TODO: what is the best name for this functionality?

src/packages/settings/languages/modals/language-picker/language-picker-modal.element.ts

@@ -18,7 +18,7 @@ export class UmbLanguagePickerModalElement extends UmbModalBaseElement<
 	private _languages: Array<LanguageResponseModel> = [];
 
 	#languageRepository = new UmbLanguageRepository(this);
-	#selectionManager = new UmbSelectionManager();
+	#selectionManager = new UmbSelectionManager(this);
 
 	connectedCallback(): void {
 		super.connectedCallback();

src/packages/user/user-group/modals/user-group-picker/user-group-picker-modal.element.ts

@@ -14,7 +14,7 @@ export class UmbUserGroupPickerModalElement extends UmbModalBaseElement<
 	@state()
 	private _userGroups: Array<UserGroupResponseModel> = [];
 
-	#selectionManager = new UmbSelectionManager();
+	#selectionManager = new UmbSelectionManager(this);
 	#userGroupCollectionRepository = new UmbUserGroupCollectionRepository(this);
 
 	connectedCallback(): void {

src/packages/user/user/modals/user-picker/user-picker-modal.element.ts

@@ -10,7 +10,7 @@ export class UmbUserPickerModalElement extends UmbModalBaseElement<UmbUserPicker
 	@state()
 	private _users: Array<UserItemResponseModel> = [];
 
-	#selectionManager = new UmbSelectionManager();
+	#selectionManager = new UmbSelectionManager(this);
 	#userCollectionRepository = new UmbUserCollectionRepository(this);
 
 	connectedCallback(): void {

src/shared/utils/index.ts

@@ -8,7 +8,7 @@ export * from './pagination-manager/pagination.manager.js';
 export * from './path-decode.function.js';
 export * from './path-encode.function.js';
 export * from './path-folder-name.function.js';
-export * from './selection-manager.js';
+export * from './selection-manager/selection.manager.js';
 export * from './udi-service.js';
 export * from './umbraco-path.function.js';
 export * from './split-string-to-array.js';