register document picker search result item

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

@@ -245,7 +245,12 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 	}
 
 	#renderPickerSearchResultItem(item: any) {
-		return html` <uui-menu-item label=${item.entityType + ' ' + item.unique}> </uui-menu-item> `;
+		return html`
+			<umb-picker-search-result-item
+				.props=${{ item }}
+				.item=${item}
+				.entityType=${item.entityType}></umb-picker-search-result-item>
+		`;
 	}
 
 	static override styles = [

src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.context.ts

@@ -0,0 +1,10 @@
+import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbDocumentPickerSearchResultItemContext extends UmbContextBase<UmbDocumentPickerSearchResultItemContext> {
+	constructor(host: UmbControllerHost) {
+		super(host, 'pickerSearchResultItem');
+	}
+}
+
+export { UmbDocumentPickerSearchResultItemContext as api };

src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/document-picker-search-result-item.element.ts

@@ -0,0 +1,36 @@
+import type { UmbDocumentItemModel } from '../repository/item/types.js';
+import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { css, customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+
+const elementName = 'umb-document-picker-search-result-item';
+@customElement(elementName)
+export class UmbDocumentPickerSearchResultItemElement extends UmbLitElement {
+	@property({ type: Object })
+	item?: UmbDocumentItemModel;
+
+	override render() {
+		if (!this.item) return nothing;
+
+		return html`
+			<uui-ref-node name=${this.item.name} id=${this.item.unique} readonly selectable>
+				${this.#renderIcon()}
+			</uui-ref-node>
+		`;
+	}
+
+	#renderIcon() {
+		if (!this.item?.documentType.icon) return nothing;
+		return html`<umb-icon slot="icon" name=${this.item.documentType.icon}></umb-icon>`;
+	}
+
+	static override styles = [UmbTextStyles, css``];
+}
+
+export { UmbDocumentPickerSearchResultItemElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		[elementName]: UmbDocumentPickerSearchResultItemElement;
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts

@@ -1,3 +1,4 @@
+import { UMB_DOCUMENT_ENTITY_TYPE } from '../entity.js';
 import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
 
 export const manifests: Array<ManifestTypes | UmbBackofficeManifestKind> = [
@@ -6,5 +7,7 @@ export const manifests: Array<ManifestTypes | UmbBackofficeManifestKind> = [
 		alias: 'Umb.PickerSearchResultItem.Document',
 		name: 'Document Picker Search Result Item',
 		element: () => import('./document-picker-search-result-item.element.js'),
+		api: () => import('./document-picker-search-result-item.context.js'),
+		forEntityTypes: [UMB_DOCUMENT_ENTITY_TYPE],
 	},
 ];