Merge branch 'release/16.0' into v16/feature/context-proxy

# Conflicts:
#	src/Umbraco.Web.UI.Client/src/packages/core/repository/detail/detail-repository-base.ts
#	src/Umbraco.Web.UI.Client/src/packages/core/tree/default/default-tree.element.ts

src/Umbraco.Web.UI.Client/package.json

@@ -10,6 +10,7 @@
 		"./context-api": "./dist-cms/libs/context-api/index.js",
 		"./controller-api": "./dist-cms/libs/controller-api/index.js",
 		"./element-api": "./dist-cms/libs/element-api/index.js",
+		"./context-proxy": "./dist-cms/libs/context-proxy/index.js",
 		"./embedded-media": "./dist-cms/packages/embedded-media/index.js",
 		"./extension-api": "./dist-cms/libs/extension-api/index.js",
 		"./extension-types": "./dist-cms/packages/extension-types/index.d.ts",

src/Umbraco.Web.UI.Client/src/libs/context-api/provide/context-provide.event.ts

@@ -7,6 +7,7 @@ export const UMB_CONTEXT_PROVIDE_EVENT_TYPE = 'umb:context-provide';
  */
 export interface UmbContextProvideEvent extends Event {
 	readonly contextAlias: string | UmbContextToken;
+	clone(): UmbContextProvideEvent;
 }
 
 /**
@@ -18,6 +19,9 @@ export class UmbContextProvideEventImplementation extends Event implements UmbCo
 	public constructor(public readonly contextAlias: string | UmbContextToken) {
 		super(UMB_CONTEXT_PROVIDE_EVENT_TYPE, { bubbles: true, composed: true });
 	}
+	public clone(): UmbContextProvideEvent {
+		return new UmbContextProvideEventImplementation(this.contextAlias);
+	}
 }
 
 export const isUmbContextProvideEventType = (event: Event): event is UmbContextProvideEventImplementation => {

src/Umbraco.Web.UI.Client/src/libs/context-proxy/context-proxy.controller.ts

@@ -0,0 +1,64 @@
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+import {
+	UMB_CONTEXT_PROVIDE_EVENT_TYPE,
+	UMB_CONTEXT_REQUEST_EVENT_TYPE,
+	type UmbContextProvideEvent,
+	type UmbContextRequestEvent,
+} from '@umbraco-cms/backoffice/context-api';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+
+const CtrlAlias = Symbol();
+
+/**
+ * @internal
+ * This controller creates a Proxy for the Context API.
+ * @description It is not advised for anyone to implement this unless they know exactly what they are doing.
+ */
+export class UmbContextProxy extends UmbControllerBase {
+	#target?: EventTarget;
+	#getDestination: () => EventTarget | undefined;
+	#ignorer: Array<string> = [];
+
+	constructor(host: UmbControllerHost, target: EventTarget | undefined, getDestination: () => EventTarget | undefined) {
+		super(host, CtrlAlias);
+		this.#target = target;
+		this.#getDestination = getDestination;
+
+		// Only handle something if there is a target. This could seem stupid, but since we support construction this controller despite a missing element, we enable the controller to destroy an already existing controller. aka replace it. [NL]
+		if (target) {
+			target.addEventListener(UMB_CONTEXT_REQUEST_EVENT_TYPE, this.#onContextRequest as EventListener);
+			target.addEventListener(UMB_CONTEXT_PROVIDE_EVENT_TYPE, this.#onContextProvide as EventListener);
+		}
+	}
+
+	/* We do not currently have a good enough control to ensure that the proxy is last, meaning if another context is provided at this element, it might respond after the proxy event has been dispatched.
+	To avoid such you can declare context aliases to be ignorer by the proxy.
+	*/
+	setIgnoreContextAliases(aliases: Array<string>) {
+		this.#ignorer = aliases;
+		return this;
+	}
+
+	#onContextRequest = (event: UmbContextRequestEvent) => {
+		const destination = this.#getDestination();
+		if (destination && !this.#ignorer.includes(event.contextAlias)) {
+			event.stopImmediatePropagation();
+			destination.dispatchEvent(event.clone());
+		}
+	};
+	#onContextProvide = (event: UmbContextProvideEvent) => {
+		const destination = this.#getDestination();
+		if (destination) {
+			event.stopPropagation();
+			destination.dispatchEvent(event.clone());
+		}
+	};
+
+	override destroy() {
+		super.destroy();
+		if (this.#target) {
+			this.#target.removeEventListener(UMB_CONTEXT_REQUEST_EVENT_TYPE, this.#onContextRequest as EventListener);
+			this.#target.removeEventListener(UMB_CONTEXT_PROVIDE_EVENT_TYPE, this.#onContextProvide as EventListener);
+		}
+	}
+}

src/Umbraco.Web.UI.Client/src/libs/context-proxy/index.ts

@@ -0,0 +1 @@
+export * from './context-proxy.controller.js';

src/Umbraco.Web.UI.Client/src/packages/core/modal/component/modal.element.ts

@@ -17,12 +17,8 @@ import {
 } from '@umbraco-cms/backoffice/external/uui';
 import { UMB_ROUTE_CONTEXT, type UmbRouterSlotElement } from '@umbraco-cms/backoffice/router';
 import { createExtensionElement, loadManifestElement } from '@umbraco-cms/backoffice/extension-api';
-import type { UmbContextRequestEvent } from '@umbraco-cms/backoffice/context-api';
-import {
-	UMB_CONTEXT_REQUEST_EVENT_TYPE,
-	UmbContextBoundary,
-	UmbContextProvider,
-} from '@umbraco-cms/backoffice/context-api';
+import { UmbContextBoundary, UmbContextProvider } from '@umbraco-cms/backoffice/context-api';
+import { UmbContextProxy } from '@umbraco-cms/backoffice/context-proxy';
 
 @customElement('umb-modal')
 export class UmbModalElement extends UmbLitElement {
@@ -64,18 +60,9 @@ export class UmbModalElement extends UmbLitElement {
 		// Makes sure that the modal triggers the reject of the context promise when it is closed by pressing escape.
 		this.element.addEventListener(UUIModalCloseEvent, this.#onClose);
 
-		// The following code is the context api proxy.
-		// It re-dispatches the context api request event to the origin target of this modal, in other words the element that initiated the modal. [NL]
-		this.element.addEventListener(UMB_CONTEXT_REQUEST_EVENT_TYPE, ((event: UmbContextRequestEvent) => {
-			if (!this.#modalContext) return;
-			// Note for this hack (The if-sentence):  [NL]
-			// We do not currently have a good enough control to ensure that the proxy is last, meaning if another context is provided at this element, it might respond after the proxy event has been dispatched.
-			// To avoid such this hack just prevents proxying the event if its a request for the Modal Context. [NL]
-			if (event.contextAlias !== UMB_MODAL_CONTEXT.contextAlias) {
-				event.stopImmediatePropagation();
-				this.#modalContext.getHostElement().dispatchEvent(event.clone());
-			}
-		}) as EventListener);
+		new UmbContextProxy(this, this.element, () => this.#modalContext?.getHostElement()).setIgnoreContextAliases([
+			UMB_MODAL_CONTEXT.contextAlias,
+		]);
 
 		this.#modalContext.onSubmit().then(
 			() => {

src/Umbraco.Web.UI.Client/src/packages/core/section/section-sidebar-context-menu/section-sidebar-context-menu.element.ts

@@ -1,10 +1,10 @@
 import type { UmbSectionSidebarContext } from '../section-sidebar/index.js';
 import { UMB_SECTION_SIDEBAR_CONTEXT } from '../section-sidebar/index.js';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, nothing, customElement, state, ref } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { observeMultiple } from '@umbraco-cms/backoffice/observable-api';
-import type { UmbContextRequestEvent } from '@umbraco-cms/backoffice/context-api';
+import { UmbContextProxy } from '@umbraco-cms/backoffice/context-proxy';
 
 @customElement('umb-section-sidebar-context-menu')
 export class UmbSectionSidebarContextMenuElement extends UmbLitElement {
@@ -67,15 +67,10 @@ export class UmbSectionSidebarContextMenuElement extends UmbLitElement {
 		this.#closeContextMenu();
 	}
 
-	#proxyContextRequests(event: UmbContextRequestEvent) {
-		if (!this.#sectionSidebarContext) return;
-		// Note for this hack (The if-sentence):  [NL]
-		// We do not currently have a good enough control to ensure that the proxy is last, meaning if another context is provided at this element, it might respond after the proxy event has been dispatched.
-		// To avoid such this hack just prevents proxying the event if its a request for its own context.
-		if (event.contextAlias !== UMB_SECTION_SIDEBAR_CONTEXT.contextAlias) {
-			event.stopImmediatePropagation();
-			this.#sectionSidebarContext.getContextElement()?.dispatchEvent(event.clone());
-		}
+	#setupProxy(target: EventTarget | undefined) {
+		new UmbContextProxy(this, target, () => this.#sectionSidebarContext?.getContextElement()).setIgnoreContextAliases([
+			UMB_SECTION_SIDEBAR_CONTEXT.contextAlias,
+		]);
 	}
 
 	override render() {
@@ -96,7 +91,7 @@ export class UmbSectionSidebarContextMenuElement extends UmbLitElement {
 
 	#renderModal() {
 		return this._isOpen && this._unique !== undefined && this._entityType
-			? html`<uui-scroll-container id="action-modal" @umb:context-request=${this.#proxyContextRequests}>
+			? html`<uui-scroll-container id="action-modal" ${ref(this.#setupProxy)}>
 					${this._headline ? html`<h3>${this.localize.string(this._headline)}</h3>` : nothing}
 					<umb-entity-action-list
 						@action-executed=${this.#onActionExecuted}

src/Umbraco.Web.UI.Client/src/packages/core/tree/default/default-tree.context.ts

@@ -38,9 +38,9 @@ export class UmbDefaultTreeContext<
 
 	public selectableFilter?: (item: TreeItemType) => boolean = () => true;
 	public filter?: (item: TreeItemType) => boolean = () => true;
-	public readonly selection = new UmbSelectionManager(this._host);
+	public readonly selection = new UmbSelectionManager(this);
 	public readonly pagination = new UmbPaginationManager();
-	public readonly expansion = new UmbTreeExpansionManager(this._host);
+	public readonly expansion = new UmbTreeExpansionManager(this);
 
 	#hideTreeRoot = new UmbBooleanState(false);
 	hideTreeRoot = this.#hideTreeRoot.asObservable();
@@ -78,6 +78,7 @@ export class UmbDefaultTreeContext<
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
 		super(host, UMB_TREE_CONTEXT);
+
 		this.pagination.setPageSize(this.#paging.take);
 		this.#consumeContexts();
 
@@ -373,7 +374,7 @@ export class UmbDefaultTreeContext<
 			this,
 			umbExtensionsRegistry,
 			repositoryAlias,
-			[this._host],
+			[this],
 			(permitted, ctrl) => {
 				this.#repository = permitted ? ctrl.api : undefined;
 				this.#checkIfInitialized();

src/Umbraco.Web.UI.Client/tsconfig.json

@@ -38,6 +38,7 @@ DON'T EDIT THIS FILE DIRECTLY. It is generated by /devops/tsconfig/index.js
 			"@umbraco-cms/backoffice/context-api": ["./src/libs/context-api/index.ts"],
 			"@umbraco-cms/backoffice/controller-api": ["./src/libs/controller-api/index.ts"],
 			"@umbraco-cms/backoffice/element-api": ["./src/libs/element-api/index.ts"],
+			"@umbraco-cms/backoffice/context-proxy": ["./src/libs/context-proxy/index.ts"],
 			"@umbraco-cms/backoffice/embedded-media": ["./src/packages/embedded-media/index.ts"],
 			"@umbraco-cms/backoffice/extension-api": ["./src/libs/extension-api/index.ts"],
 			"@umbraco-cms/backoffice/localization-api": ["./src/libs/localization-api/index.ts"],