use selection manager in section picker + use uui-menu-item

src/Umbraco.Web.UI.Client/src/backoffice/core/modals/section-picker/section-picker-modal.element.ts

@@ -1,96 +1,68 @@
 import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { UmbModalElementPickerBase } from '@umbraco-cms/internal/modal';
+import { UmbSelectionManagerBase } from '@umbraco-cms/backoffice/utils';
+import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extensions-api';
 import type { ManifestSection } from '@umbraco-cms/backoffice/extensions-registry';
+import { UmbSectionPickerModalData, UmbSectionPickerModalResult } from '@umbraco-cms/backoffice/modal';
 
 @customElement('umb-section-picker-modal')
-export class UmbSectionPickerModalElement extends UmbModalElementPickerBase<ManifestSection> {
-
-
+export class UmbSectionPickerModalElement extends UmbModalBaseElement<
+	UmbSectionPickerModalData,
+	UmbSectionPickerModalResult
+> {
 	@state()
 	private _sections: Array<ManifestSection> = [];
 
+	#selectionManager = new UmbSelectionManagerBase();
+
+	#submit() {
+		this.modalHandler?.submit({
+			selection: this.#selectionManager.getSelection(),
+		});
+	}
+
+	#close() {
+		this.modalHandler?.reject();
+	}
+
 	connectedCallback(): void {
 		super.connectedCallback();
-		this.observe(umbExtensionsRegistry.extensionsOfType('section'), (sections: Array<ManifestSection>) => {
-			this._sections = sections;
-		});
+
+		// TODO: in theory this config could change during the lifetime of the modal, so we could observe it
+		this.#selectionManager.setMultiple(false);
+
+		this.observe(
+			umbExtensionsRegistry.extensionsOfType('section'),
+			(sections: Array<ManifestSection>) => (this._sections = sections)
+		);
 	}
 
 	render() {
 		return html`
 			<umb-workspace-editor headline="Select sections">
 				<uui-box>
-					<uui-input label="search"></uui-input>
-					<hr />
-					<div id="item-list">
-						${this._sections.map(
-							(item) => html`
-								<div
-									@click=${() => this.handleSelection(item.alias)}
-									@keydown=${(e: KeyboardEvent) => this._handleKeydown(e, item.alias)}
-									class=${this.isSelected(item.alias) ? 'item selected' : 'item'}>
-									<span>${item.meta.label}</span>
-								</div>
-							`
-						)}
-					</div>
+					${this._sections.map(
+						(item) => html`
+							<uui-menu-item
+								label=${item.meta.label}
+								selectable
+								?selected=${this.#selectionManager.isSelected(item.alias)}
+								@selected=${() => this.#selectionManager.select(item.alias)}
+								@unselected=${() => this.#selectionManager.deselect(item.alias)}></uui-menu-item>
+						`
+					)}
 				</uui-box>
 				<div slot="actions">
-					<uui-button label="Close" @click=${this.close}></uui-button>
-					<uui-button label="Submit" look="primary" color="positive" @click=${this.submit}></uui-button>
+					<uui-button label="Close" @click=${this.#close}></uui-button>
+					<uui-button label="Submit" look="primary" color="positive" @click=${this.#submit}></uui-button>
 				</div>
 			</umb-workspace-editor>
 		`;
 	}
 
-	static styles = [
-		UUITextStyles,
-		css`
-			uui-input {
-				width: 100%;
-			}
-			hr {
-				border: none;
-				border-bottom: 1px solid var(--uui-color-divider);
-				margin: 16px 0;
-			}
-			#item-list {
-				display: flex;
-				flex-direction: column;
-				gap: var(--uui-size-1);
-			}
-			.item {
-				color: var(--uui-color-interactive);
-				display: grid;
-				grid-template-columns: var(--uui-size-8) 1fr;
-				padding: var(--uui-size-4) var(--uui-size-2);
-				gap: var(--uui-size-space-5);
-				align-items: center;
-				border-radius: var(--uui-border-radius);
-				cursor: pointer;
-			}
-			.item.selected {
-				background-color: var(--uui-color-selected);
-				color: var(--uui-color-selected-contrast);
-			}
-			.item:not(.selected):hover {
-				background-color: var(--uui-color-surface-emphasis);
-				color: var(--uui-color-interactive-emphasis);
-			}
-			.item.selected:hover {
-				background-color: var(--uui-color-selected-emphasis);
-			}
-			.item uui-icon {
-				width: 100%;
-				box-sizing: border-box;
-				display: flex;
-				height: fit-content;
-			}
-		`,
-	];
+	static styles = [UUITextStyles, css``];
 }
 
 export default UmbSectionPickerModalElement;