Section Sidebar Menu Expansion

src/Umbraco.Web.UI.Client/devops/module-dependencies/index.js

@@ -4,7 +4,7 @@ import { createImportMap } from '../importmap/index.js';
 
 const ILLEGAL_CORE_IMPORTS_THRESHOLD = 5;
 const SELF_IMPORTS_THRESHOLD = 0;
-const BIDIRECTIONAL_IMPORTS_THRESHOLD = 18;
+const BIDIRECTIONAL_IMPORTS_THRESHOLD = 16;
 
 const clientProjectRoot = path.resolve(import.meta.dirname, '../../');
 const modulePrefix = '@umbraco-cms/backoffice/';

src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/collapse-menu-item-entity-action/collapse-menu-item.entity-action.ts

@@ -0,0 +1,11 @@
+import { UmbEntityActionBase } from '@umbraco-cms/backoffice/entity-action';
+import { UMB_MENU_ITEM_CONTEXT } from '@umbraco-cms/backoffice/menu';
+
+export class ExampleCollapseMenuItemEntityAction extends UmbEntityActionBase<never> {
+	override async execute() {
+		const context = await this.getContext(UMB_MENU_ITEM_CONTEXT);
+		context?.expansion.collapseAll();
+	}
+}
+
+export { ExampleCollapseMenuItemEntityAction as api };

src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/collapse-menu-item-entity-action/manifests.ts

@@ -0,0 +1,15 @@
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'entityAction',
+		kind: 'default',
+		alias: 'Umb.EntityAction.Document.MenuItem.Collapse',
+		name: 'Collapse Document Menu Item',
+		api: () => import('./collapse-menu-item.entity-action.js'),
+		forEntityTypes: ['document-type-root', 'media-type-root', 'member-type-root', 'data-type-root'],
+		weight: -10,
+		meta: {
+			label: 'Collapse Menu Item',
+			icon: 'icon-wand',
+		},
+	},
+];

src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/index.ts

@@ -0,0 +1,4 @@
+import { manifests as playgroundDashboardManifests } from './playground-dashboard/manifests.js';
+import { manifests as collapseMenuItemManifests } from './collapse-menu-item-entity-action/manifests.js';
+
+export const manifests: Array<UmbExtensionManifest> = [...playgroundDashboardManifests, ...collapseMenuItemManifests];

src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/manifests.ts

@@ -0,0 +1,14 @@
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'dashboard',
+		kind: 'default',
+		name: 'Example Section Sidebar Menu Playground Dashboard',
+		alias: 'Example.Dashboard.SectionSidebarMenuPlayground',
+		element: () => import('./section-sidebar-menu-playground.element.js'),
+		weight: 3000,
+		meta: {
+			label: 'Section Sidebar Menu Playground',
+			pathname: 'section-sidebar-menu-playground',
+		},
+	},
+];

src/Umbraco.Web.UI.Client/examples/section-sidebar-menu-expansion/playground-dashboard/section-sidebar-menu-playground.element.ts

@@ -0,0 +1,102 @@
+import { html, customElement, LitElement, css, state, repeat } from '@umbraco-cms/backoffice/external/lit';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+import {
+	UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT,
+	UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT,
+	type UmbSectionMenuItemExpansionEntryModel,
+} from '@umbraco-cms/backoffice/menu';
+
+@customElement('example-section-sidebar-menu-playground-dashboard')
+export class ExampleSectionSidebarMenuPlaygroundDashboard extends UmbElementMixin(LitElement) {
+	#globalContext?: typeof UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT.TYPE;
+	#sectionContext?: typeof UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT.TYPE;
+
+	@state()
+	private _globalExpansion: Array<UmbSectionMenuItemExpansionEntryModel> = [];
+
+	@state()
+	private _sectionExpansion: Array<UmbSectionMenuItemExpansionEntryModel> = [];
+
+	constructor() {
+		super();
+
+		this.consumeContext(UMB_SECTION_SIDEBAR_MENU_GLOBAL_CONTEXT, (section) => {
+			this.#globalContext = section;
+			this.#observeGlobalExpansion();
+		});
+
+		this.consumeContext(UMB_SECTION_SIDEBAR_MENU_SECTION_CONTEXT, (section) => {
+			this.#sectionContext = section;
+			this.#observeSectionExpansion();
+		});
+	}
+
+	#observeGlobalExpansion() {
+		this.observe(this.#globalContext?.expansion.expansion, (items) => {
+			this._globalExpansion = items || [];
+		});
+	}
+
+	#observeSectionExpansion() {
+		this.observe(this.#sectionContext?.expansion.expansion, (items) => {
+			this._sectionExpansion = items || [];
+		});
+	}
+
+	#onCloseItem(event: PointerEvent, item: UmbSectionMenuItemExpansionEntryModel) {
+		event.stopPropagation();
+		this.#sectionContext?.expansion.collapseItem(item);
+	}
+
+	#onCollapseSection() {
+		this.#sectionContext?.expansion.collapseAll();
+	}
+
+	override render() {
+		return html` <umb-stack>
+			<uui-box headline="Open Items for this section">
+				<uui-button slot="header-actions" @click=${this.#onCollapseSection} compact>
+					<uui-icon name="icon-wand"></uui-icon>
+					Collapse All</uui-button
+				>
+				${repeat(
+					this._sectionExpansion,
+					(item) => item.entityType + item.unique,
+					(item) => this.#renderItem(item),
+				)}
+			</uui-box>
+			<uui-box headline="Open Items for all sections">
+				${repeat(
+					this._globalExpansion,
+					(item) => item.entityType + item.unique,
+					(item) => this.#renderItem(item),
+				)}
+			</uui-box>
+		</umb-stack>`;
+	}
+
+	#renderItem(item: UmbSectionMenuItemExpansionEntryModel) {
+		return html` <uui-ref-node
+			name=${item.entityType}
+			detail=${item.unique + ', ' + item.menuItemAlias + ', ' + item.sectionAlias}>
+			<uui-button slot="actions" @click=${(event: PointerEvent) => this.#onCloseItem(event, item)}>Close</uui-button>
+		</uui-ref-node>`;
+	}
+
+	static override styles = [
+		css`
+			:host {
+				display: block;
+				padding: var(--uui-size-layout-1);
+			}
+		`,
+	];
+}
+
+export { ExampleSectionSidebarMenuPlaygroundDashboard as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'example-section-sidebar-menu-playground-dashboard': ExampleSectionSidebarMenuPlaygroundDashboard;
+	}
+}

src/Umbraco.Web.UI.Client/src/apps/backoffice/components/backoffice-main.element.ts

@@ -78,6 +78,7 @@ export class UmbBackofficeMainElement extends UmbLitElement {
 		this._routes = newRoutes;
 	}
 
+	// TODO: v17. Remove this section context when we have api's as part of the section manifest.
 	private _provideSectionContext(sectionManifest: ManifestSection) {
 		if (!this._sectionContext) {
 			this._sectionContext = new UmbSectionContext(this);

src/Umbraco.Web.UI.Client/src/packages/content/content/workspace/content-detail-workspace-base.ts

@@ -924,11 +924,20 @@ export abstract class UmbContentDetailWorkspaceContextBase<
 		if (!eventContext) {
 			throw new Error('Event context is missing');
 		}
-		const event = new UmbRequestReloadChildrenOfEntityEvent({
+
+		const reloadStructureEvent = new UmbRequestReloadStructureForEntityEvent({
 			entityType: parent.entityType,
 			unique: parent.unique,
 		});
-		eventContext.dispatchEvent(event);
+
+		eventContext.dispatchEvent(reloadStructureEvent);
+
+		const reloadChildrenEvent = new UmbRequestReloadChildrenOfEntityEvent({
+			entityType: parent.entityType,
+			unique: parent.unique,
+		});
+
+		eventContext.dispatchEvent(reloadChildrenEvent);
 	}
 
 	async #update(variantIds: Array<UmbVariantId>, saveData: DetailModelType) {

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/components/extension-slot/extension-slot.element.ts

@@ -88,6 +88,18 @@
 	}
 	#props?: Record<string, unknown> = {};
 
+	@property({ type: Object, attribute: false })
+	set events(newVal: Record<string, (event: Event) => void> | undefined) {
+		this.#events = newVal;
+		if (this.#extensionsController) {
+			this.#addEventListenersToExtensionElement();
+		}
+	}
+	get events(): Record<string, (event: Event) => void> | undefined {
+		return this.#events;
+	}
+	#events?: Record<string, (event: Event) => void> = {};
+
 	@property({ type: String, attribute: 'default-element' })
 	public defaultElement?: string;
 
@@ -104,6 +116,7 @@
 	}
 	override disconnectedCallback(): void {
 		// _permitted is reset as the extensionsController fires a callback on destroy.
+		this.#removeEventListenersFromExtensionElement();
 		this.#attached = false;
 		this.#extensionsController?.destroy();
 		this.#extensionsController = undefined;
@@ -121,6 +134,7 @@
 				this.filter,
 				(extensionControllers) => {
 					this._permitted = extensionControllers;
+					this.#addEventListenersToExtensionElement();
 				},
 				undefined, // We can leave the alias undefined as we destroy this our selfs.
 				this.defaultElement,
@@ -144,6 +158,34 @@
 		return this.renderMethod ? this.renderMethod(ext, i) : ext.component;
 	};
 
+	#addEventListenersToExtensionElement() {
+		this._permitted?.forEach((initializer) => {
+			const component = initializer.component as HTMLElement;
+			if (!component) return;
+
+			const events = this.#events;
+			if (!events) return;
+
+			Object.entries(events).forEach(([eventName, handler]) => {
+				component.addEventListener(eventName, handler);
+			});
+		});
+	}
+
+	#removeEventListenersFromExtensionElement() {
+		this._permitted?.forEach((initializer) => {
+			const component = initializer.component as HTMLElement;
+			if (!component) return;
+
+			const events = this.#events;
+			if (!events) return;
+
+			Object.entries(events).forEach(([eventName, handler]) => {
+				component.removeEventListener(eventName, handler);
+			});
+		});
+	}
+
 	static override styles = css`
 		:host {
 			display: contents;

src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/index.ts

@@ -2,6 +2,8 @@ export * from './conditions/index.js';
 export * from './initializers/index.js';
 export * from './registry.js';
 export * from './utils/index.js';
+export * from './components/index.js';
+
 export type * from './models/types.js';
 export type * from './extensions/types.js';
 

src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/action/types.ts

@@ -1,4 +1,4 @@
-import type { MetaMenuItem } from '../../../menu-item.extension.js';
+import type { MetaMenuItem } from '../menu-item.extension.js';
 import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api';
 import type { UmbAction } from '@umbraco-cms/backoffice/action';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';

src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/constants.ts

@@ -0,0 +1 @@
+export * from './menu-item.context.token.js';

src/Umbraco.Web.UI.Client/src/packages/core/menu/components/menu-item/expansion/is-menu-item-expansion-entry.guard.ts

@@ -0,0 +1,16 @@
+import type { UmbMenuItemExpansionEntryModel } from '../../types.js';
+
+/**
+ * Checks if the provided object is a Menu Item Expansion Entry.
+ * @param {object } object - The object to check.
+ * @returns {boolean } True if the object is a Menu Item Expansion Entry, false otherwise.
+ */
+export function isMenuItemExpansionEntry(object: unknown): object is UmbMenuItemExpansionEntryModel {
+	return (
+		typeof object === 'object' &&
+		object !== null &&
+		'entityType' in object &&
+		'unique' in object &&
+		'menuItemAlias' in object
+	);
+}