@umbraco-cms/backoffice 18.2.1 → 18.3.0-rc

package/dist-cms/packages/core/tree/tree-item-picker/tree-item-picker-location.manager.js

@@ -0,0 +1,258 @@
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import { UmbExtensionApiInitializer } from '../../../../libs/extension-api/index.js';
+import { umbExtensionsRegistry } from '../../extension-registry/index.js';
+import { UmbArrayState, UmbObjectState } from '../../../../libs/observable-api/index.js';
+const LOCATION_MEMORY_UNIQUE = 'UmbTreeItemPickerLocation';
+/**
+ * Tracks where in a tree a picker is browsing: the trail to it, the node itself, and the memory of both.
+ */
+export class UmbTreeItemPickerLocationManager extends UmbControllerBase {
+    #trail;
+    #breadcrumb;
+    #currentLocation;
+    #interactionMemoryManager;
+    #treeAlias;
+    #startNode;
+    #repository;
+    #loaded;
+    #loadPromise;
+    /**
+     * @param {UmbControllerHost} host - The controller host this manager is bound to.
+     * @param {UmbTreeItemPickerLocationManagerArgs} [args] - Optional construction arguments.
+     */
+    constructor(host, args) {
+        super(host);
+        this.#trail = new UmbArrayState([], (x) => x.unique ?? 'root');
+        this.#breadcrumb = new UmbArrayState([], (x) => x.unique ?? 'root');
+        this.breadcrumb = this.#breadcrumb.asObservable();
+        this.#currentLocation = new UmbObjectState(undefined);
+        /**
+         * Where the picker is browsing, as a tri-state:
+         *
+         * - `undefined` — no location established yet.
+         * - `null` — the node last browsed to is not in the tree. A host should say so rather than show a level it cannot
+         *   describe, and must not treat this as still loading.
+         * - a model — the node being browsed.
+         */
+        this.currentLocation = this.#currentLocation.asObservable();
+        this.#loaded = false;
+        this.#interactionMemoryManager = args?.interactionMemoryManager;
+    }
+    /**
+     * Sets the node the picker may not browse above. Set it before the tree alias, as the alias starts the load.
+     * @param {UmbTreeStartNode} [startNode] - The node to start from, or undefined to browse from the tree root.
+     * @memberof UmbTreeItemPickerLocationManager
+     */
+    setStartNode(startNode) {
+        this.#startNode = startNode;
+    }
+    /**
+     * Sets the tree to browse, which resolves its repository and loads the initial trail.
+     * @param {string} [treeAlias] - The alias of the tree.
+     * @memberof UmbTreeItemPickerLocationManager
+     */
+    setTreeAlias(treeAlias) {
+        if (!treeAlias || treeAlias === this.#treeAlias)
+            return;
+        this.#treeAlias = treeAlias;
+        this.#setTrail([]);
+        this.#currentLocation.setValue(undefined);
+        this.#loaded = false;
+        this.#loadPromise = undefined;
+        const repositoryAlias = umbExtensionsRegistry.getByAlias(treeAlias)?.meta?.repositoryAlias;
+        // Without a repository there is no tree, so there is no location to establish either.
+        if (!repositoryAlias)
+            return;
+        new UmbExtensionApiInitializer(this, umbExtensionsRegistry, repositoryAlias, [this], async (permitted, ctrl) => {
+            this.#repository = permitted ? ctrl.api : undefined;
+            if (this.#repository && !this.#loaded) {
+                this.#loaded = true;
+                // A remembered location is where the picker reopens, so the start is not committed when one is going to
+                // replace it. Committing both would hand the host two locations in a row, and a host that renders a
+                // different view per location would mount one for the start and tear it down again mid-initialisation.
+                const remembered = this.#getRememberedEntity();
+                this.#loadPromise = this.#loadInitialTrail(!remembered);
+                await this.#loadPromise;
+                // An empty trail means the start itself could not be established, which `#loadInitialTrail` has already
+                // reported. There is nowhere to restore into.
+                if (remembered && this.#trail.getValue().length) {
+                    await this.#restoreFromMemory(remembered);
+                    // Committed here rather than by the initial trail, so a restore that did not land still leaves the
+                    // picker somewhere.
+                    if (this.#currentLocation.getValue() === undefined) {
+                        this.#setLocationAndMemory(this.#resolveStart());
+                    }
+                }
+            }
+        });
+    }
+    /**
+     * Returns the node currently being browsed.
+     * @returns {UmbTreeItemPickerLocation | null | undefined} The current location, undefined before one is established,
+     * or null when the node last browsed to is not in the tree.
+     * @memberof UmbTreeItemPickerLocationManager
+     */
+    getCurrentLocation() {
+        return this.#currentLocation.getValue();
+    }
+    /**
+     * Returns the trail to the node currently being browsed.
+     * @returns {Array<UmbTreeItemPickerBreadcrumbItem>} The trail, ending with the node being browsed.
+     * @memberof UmbTreeItemPickerLocationManager
+     */
+    getBreadcrumb() {
+        return this.#breadcrumb.getValue();
+    }
+    /**
+     * Browses to a node, leaving the trail, the current location and the remembered location consistent with each other.
+     *
+     * A node already in the trail is browsed by shortening the trail to it, so stepping back up costs no request. A node
+     * the tree does not have leaves the current location `null`.
+     * @param {UmbEntityModel} [entity] - The node to browse, or undefined for the start node when there is one and the
+     * tree root otherwise.
+     * @returns {Promise<void>} Resolves once the trail and the current location have been set.
+     * @memberof UmbTreeItemPickerLocationManager
+     */
+    async navigateTo(entity) {
+        // The initial trail establishes the root and the ceiling, so it has to be in place first.
+        await this.#loadPromise;
+        if (!entity?.unique) {
+            this.#setLocationAndMemory(this.#resolveStart());
+            return;
+        }
+        const node = await this.#resolve({ unique: entity.unique, entityType: entity.entityType });
+        if (!node) {
+            // Somewhere we cannot describe is worse than nowhere, so the location says something is wrong rather than
+            // leaving a host to render a level it knows nothing about.
+            this.#currentLocation.setValue(null);
+            this.#deleteLocationMemory();
+            return;
+        }
+        this.#setLocationAndMemory(node);
+    }
+    /**
+     * Browsing to no node means returning to wherever the picker starts, which is the first step of the trail.
+     * @returns {UmbTreeItemPickerLocation | undefined} The start node or the tree root, whichever the picker starts at.
+     */
+    #resolveStart() {
+        const trail = this.#trail.getValue();
+        if (!trail.length)
+            return undefined;
+        this.#setTrail(trail.slice(0, 1));
+        return trail[0];
+    }
+    /**
+     * Finds the node in the trail, shortening it, or rebuilds the trail from the tree.
+     * @param {UmbTreeStartNode} entity - The node to browse.
+     * @returns {Promise<UmbTreeItemPickerLocation | undefined>} The node, or undefined when the tree does not have it.
+     */
+    async #resolve(entity) {
+        const trail = this.#trail.getValue();
+        const index = trail.findIndex((node) => node.unique === entity.unique);
+        if (index >= 0) {
+            this.#setTrail(trail.slice(0, index + 1));
+            return trail[index];
+        }
+        if (!this.#repository)
+            return undefined;
+        const { data } = await this.#repository.requestTreeItemAncestors({ treeItem: entity });
+        const items = data ?? [];
+        const node = items.find((item) => item.unique === entity.unique);
+        // The trail is left as it was when the node is not there, so a host can still show where the user came from.
+        if (!node)
+            return undefined;
+        this.#setTrail(this.#toTrail(items));
+        return node;
+    }
+    /**
+     * Establishes the trail the picker starts from, and the location with it unless a restore is going to supersede it.
+     * @param {boolean} commitLocation - Whether to report the start as the current location.
+     */
+    async #loadInitialTrail(commitLocation) {
+        if (!this.#repository)
+            return;
+        if (this.#startNode) {
+            const { data } = await this.#repository.requestTreeItemAncestors({ treeItem: this.#startNode });
+            const items = data ?? [];
+            const node = items.find((item) => item.unique === this.#startNode.unique);
+            // A start the tree does not have is reported whether or not a restore follows: there is no trail to restore
+            // into, so the failure is the outcome.
+            if (!node) {
+                this.#currentLocation.setValue(null);
+                return;
+            }
+            this.#setTrail(this.#toTrail(items));
+            if (commitLocation)
+                this.#currentLocation.setValue(node);
+            return;
+        }
+        const { data: root } = await this.#repository.requestTreeRoot();
+        if (!root)
+            return;
+        this.#setTrail([root]);
+        if (commitLocation)
+            this.#currentLocation.setValue(root);
+    }
+    /**
+     * Maps an ancestors response to a trail, cut off at the start node when there is one and rooted at the tree root
+     * when there is not.
+     * @param {Array<UmbTreeItemModel>} items - The ancestors response.
+     * @returns {Array<UmbTreeItemPickerLocation>} The trail.
+     */
+    #toTrail(items) {
+        if (this.#startNode) {
+            const ceilingIndex = items.findIndex((item) => item.unique === this.#startNode.unique);
+            return ceilingIndex >= 0 ? items.slice(ceilingIndex) : items;
+        }
+        const root = this.#trail.getValue().find((node) => node.unique === null);
+        return root ? [root, ...items] : items;
+    }
+    #setTrail(trail) {
+        this.#trail.setValue(trail);
+        this.#breadcrumb.setValue(trail.map((node) => ({ unique: node.unique, entityType: node.entityType, name: node.name })));
+    }
+    /**
+     * Only `navigateTo` does this: loading the initial trail must not overwrite the location a previous session left
+     * behind, as that is what gets restored.
+     * @param {UmbTreeItemPickerLocation} [location] - The location the user browsed to.
+     */
+    #setLocationAndMemory(location) {
+        this.#currentLocation.setValue(location);
+        // The root is where a picker starts, so it is not worth a memory.
+        if (!location?.unique) {
+            this.#deleteLocationMemory();
+            return;
+        }
+        const memory = {
+            unique: LOCATION_MEMORY_UNIQUE,
+            value: { entity: { unique: location.unique, entityType: location.entityType } },
+        };
+        this.#interactionMemoryManager?.setMemory(memory);
+    }
+    #deleteLocationMemory() {
+        this.#interactionMemoryManager?.deleteMemory(LOCATION_MEMORY_UNIQUE);
+    }
+    #getRememberedEntity() {
+        return this.#interactionMemoryManager?.getMemory(LOCATION_MEMORY_UNIQUE)?.value?.entity;
+    }
+    /**
+     * Browses to the location a previous session left behind.
+     * @param {UmbTreeStartNode} entity - The remembered node.
+     */
+    async #restoreFromMemory(entity) {
+        if (!this.#repository)
+            return;
+        if (this.#startNode) {
+            const { data } = await this.#repository.requestTreeItemAncestors({ treeItem: entity });
+            const isWithinStartNode = (data ?? []).some((ancestor) => ancestor.unique === this.#startNode.unique);
+            if (!isWithinStartNode)
+                return;
+        }
+        await this.navigateTo(entity);
+        // Opening a picker is not a request for that node, so a remembered location that has since been deleted is
+        // quietly dropped rather than presented to the user as something they asked for.
+        if (this.#currentLocation.getValue() === null) {
+            this.#setLocationAndMemory(this.#resolveStart());
+        }
+    }
+}

package/dist-cms/packages/core/tree/tree-item-picker/tree-item-picker.context-token.d.ts

@@ -0,0 +1,10 @@
+import type { UmbTreeItemPickerContext } from './tree-item-picker.context.js';
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+import type { UmbPickerContext } from '../../picker/index.js';
+/**
+ * A picker context that browses a tree, and therefore has a location.
+ *
+ * The alias is the one every picker context is provided under; the discriminator is what narrows it to those that can
+ * be browsed. A picker with no location — a flat collection picker, say — deliberately does not match.
+ */
+export declare const UMB_TREE_ITEM_PICKER_CONTEXT: UmbContextToken<UmbPickerContext, UmbTreeItemPickerContext>;

package/dist-cms/packages/core/tree/tree-item-picker/tree-item-picker.context-token.js

@@ -0,0 +1,8 @@
+import { UmbContextToken } from '../../../../libs/context-api/index.js';
+/**
+ * A picker context that browses a tree, and therefore has a location.
+ *
+ * The alias is the one every picker context is provided under; the discriminator is what narrows it to those that can
+ * be browsed. A picker with no location — a flat collection picker, say — deliberately does not match.
+ */
+export const UMB_TREE_ITEM_PICKER_CONTEXT = new UmbContextToken('UmbPickerContext', undefined, (context) => context.location !== undefined);

package/dist-cms/packages/core/tree/tree-item-picker/tree-item-picker.context.d.ts

@@ -1,6 +1,8 @@
 import { UmbTreeItemPickerExpansionManager } from './tree-item-picker-expansion.manager.js';
+import { UmbTreeItemPickerLocationManager } from './tree-item-picker-location.manager.js';
 import { UmbPickerContext } from '../../picker/index.js';
 export declare class UmbTreeItemPickerContext extends UmbPickerContext {
     readonly expansion: UmbTreeItemPickerExpansionManager;
+    readonly location: UmbTreeItemPickerLocationManager;
 }
 export { UmbTreeItemPickerContext as api };

package/dist-cms/packages/core/tree/tree-item-picker/tree-item-picker.context.js

@@ -1,4 +1,5 @@
 import { UmbTreeItemPickerExpansionManager } from './tree-item-picker-expansion.manager.js';
+import { UmbTreeItemPickerLocationManager } from './tree-item-picker-location.manager.js';
 import { UmbPickerContext } from '../../picker/index.js';
 export class UmbTreeItemPickerContext extends UmbPickerContext {
     constructor() {
@@ -6,6 +7,9 @@ export class UmbTreeItemPickerContext extends UmbPickerContext {
         this.expansion = new UmbTreeItemPickerExpansionManager(this, {
             interactionMemoryManager: this.interactionMemory,
         });
+        this.location = new UmbTreeItemPickerLocationManager(this, {
+            interactionMemoryManager: this.interactionMemory,
+        });
     }
 }
 export { UmbTreeItemPickerContext as api };

package/dist-cms/packages/core/tree/tree-picker-modal/tree-picker-modal.element.d.ts

@@ -1,5 +1,6 @@
 import { UmbTreeItemPickerContext } from '../tree-item-picker/index.js';
 import type { UmbTreeItemModelBase } from '../types.js';
+import '../components/tree-item-picker-breadcrumb/index.js';
 import type { UmbTreePickerModalData, UmbTreePickerModalValue } from './types.js';
 import { UmbPickerModalBaseElement } from '../../picker/index.js';
 import type { PropertyValueMap } from '../../../../external/lit/index.js';
@@ -14,14 +15,11 @@ export declare class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemM
     private _activeTab;
     private _treeExpansion;
     private _treeInteractionMemories?;
+    /** Tri-state, as the location manager reports it: undefined until established, null for a node the tree does not have. */
     private _currentLocation?;
-    private _breadcrumb;
+    private _treeStartNode?;
     private _searchField?;
     private _treeAlias?;
-    private _initialStartNode?;
-    private _repository?;
-    private _breadcrumbLoaded;
-    private _breadcrumbLoadPromise?;
     protected _pickerContext: UmbTreeItemPickerContext;
     constructor();
     connectedCallback(): void;

package/dist-cms/packages/core/tree/tree-picker-modal/tree-picker-modal.element.js

@@ -6,15 +6,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UmbTreeItemPickerContext } from '../tree-item-picker/index.js';
 import { UmbTreeItemOpenEvent } from '../tree-item/events/tree-item-open.event.js';
-import { css, customElement, html, ifDefined, nothing, query, repeat, state, } from '../../../../external/lit/index.js';
+import '../components/tree-item-picker-breadcrumb/index.js';
+import { css, customElement, html, ifDefined, nothing, query, state } from '../../../../external/lit/index.js';
 import { UmbDeselectedEvent, UmbSelectedEvent } from '../../event/index.js';
 import { UmbModalRouteRegistrationController } from '../../router/index.js';
 import { UmbPickerModalBaseElement } from '../../picker/index.js';
 import { UMB_WORKSPACE_MODAL } from '../../workspace/index.js';
-import { UmbExtensionApiInitializer } from '../../../../libs/extension-api/index.js';
-import { umbExtensionsRegistry } from '../../extension-registry/index.js';
 const TREE_MEMORY_UNIQUE = 'UmbTreeItemPickerTree';
-const LOCATION_MEMORY_UNIQUE = 'UmbTreeItemPickerLocation';
 let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPickerModalBaseElement {
     constructor() {
         super();
@@ -28,14 +26,11 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
         this._isSearchable = false;
         this._activeTab = 'browse';
         this._treeExpansion = [];
-        this._breadcrumb = [];
-        this._breadcrumbLoaded = false;
         this._pickerContext = new UmbTreeItemPickerContext(this);
         this.#onTreeItemOpen = async (event) => {
             event.stopPropagation();
             const { unique, entityType } = event;
-            await this.#navigateToLocation({ unique, entityType });
-            this.#setLocationInInteractionMemory();
+            await this._pickerContext.location.navigateTo({ unique, entityType });
         };
         this.#searchSelectableFilter = () => true;
         this._pickerContext.selection.setSelectable(true);
@@ -46,6 +41,7 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
         this.#observeSearch();
         this.#observeExpansion();
         this.#observeTreeInteractionMemories();
+        this.#observeLocation();
     }
     connectedCallback() {
         super.connectedCallback();
@@ -74,12 +70,8 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
             };
             if (this.data?.treeAlias && this.data.treeAlias !== this._treeAlias) {
                 this._treeAlias = this.data.treeAlias;
-                this._initialStartNode = this.data.startNode;
-                this._currentLocation = this.data.startNode;
-                this._breadcrumb = [];
-                this._breadcrumbLoaded = false;
-                this._breadcrumbLoadPromise = undefined;
-                this.#initRepository(this.data.treeAlias);
+                this._pickerContext.location.setStartNode(this.data.startNode);
+                this._pickerContext.location.setTreeAlias(this.data.treeAlias);
             }
             if (this.data?.treeExpansion !== undefined) {
                 this._pickerContext.expansion.setExpansion(this.data.treeExpansion);
@@ -94,117 +86,14 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
             };
         }
     }
-    #initRepository(treeAlias) {
-        const treeManifest = umbExtensionsRegistry.getByAlias(treeAlias);
-        const repositoryAlias = treeManifest?.meta?.repositoryAlias;
-        if (!repositoryAlias)
-            return;
-        new UmbExtensionApiInitializer(this, umbExtensionsRegistry, repositoryAlias, [this], async (permitted, ctrl) => {
-            this._repository = permitted ? ctrl.api : undefined;
-            if (this._repository && !this._breadcrumbLoaded) {
-                this._breadcrumbLoaded = true;
-                this._breadcrumbLoadPromise = this.#loadInitialBreadcrumb();
-                await this._breadcrumbLoadPromise;
-                await this.#restoreLocationFromMemory();
-            }
-        });
-    }
-    async #loadInitialBreadcrumb() {
-        if (!this._repository)
-            return;
-        if (this._initialStartNode) {
-            const { data } = await this._repository.requestTreeItemAncestors({
-                treeItem: this._initialStartNode,
-            });
-            const items = data ?? [];
-            const ceilingIndex = items.findIndex((item) => item.unique === this._initialStartNode.unique);
-            const sliced = ceilingIndex >= 0 ? items.slice(ceilingIndex) : items;
-            this._breadcrumb = sliced.map((item) => ({
-                unique: item.unique,
-                entityType: item.entityType,
-                name: item.name,
-            }));
-        }
-        else {
-            const { data: root } = await this._repository.requestTreeRoot();
-            if (root) {
-                this._breadcrumb = [{ unique: null, entityType: root.entityType, name: root.name }];
-            }
-        }
-    }
     #onTreeItemOpen;
-    async #navigateToLocation(entity) {
-        this._currentLocation = entity;
-        if (!this._repository)
-            return;
-        await this._breadcrumbLoadPromise;
-        const { data } = await this._repository.requestTreeItemAncestors({ treeItem: entity });
-        const items = data ?? [];
-        if (this._initialStartNode) {
-            const ceilingIndex = items.findIndex((item) => item.unique === this._initialStartNode.unique);
-            const sliced = ceilingIndex >= 0 ? items.slice(ceilingIndex) : items;
-            this._breadcrumb = sliced.map((item) => ({
-                unique: item.unique,
-                entityType: item.entityType,
-                name: item.name,
-            }));
-        }
-        else {
-            const root = this._breadcrumb[0];
-            this._breadcrumb = [
-                ...(root ? [root] : []),
-                ...items.map((item) => ({
-                    unique: item.unique,
-                    entityType: item.entityType,
-                    name: item.name,
-                })),
-            ];
-        }
-    }
-    #setLocationInInteractionMemory() {
-        if (!this._currentLocation) {
-            this._pickerContext.interactionMemory.deleteMemory(LOCATION_MEMORY_UNIQUE);
-            return;
-        }
-        const memory = {
-            unique: LOCATION_MEMORY_UNIQUE,
-            value: {
-                entity: {
-                    unique: this._currentLocation.unique,
-                    entityType: this._currentLocation.entityType,
-                },
-            },
-        };
-        this._pickerContext.interactionMemory.setMemory(memory);
-    }
-    #getLocationFromInteractionMemory() {
-        const memory = this._pickerContext.interactionMemory.getMemory(LOCATION_MEMORY_UNIQUE);
-        return memory?.value?.entity;
-    }
-    async #restoreLocationFromMemory() {
-        const entity = this.#getLocationFromInteractionMemory();
-        if (!entity || !this._repository)
-            return;
-        if (this._initialStartNode) {
-            const { data } = await this._repository.requestTreeItemAncestors({ treeItem: entity });
-            const isWithinStartNode = (data ?? []).some((a) => a.unique === this._initialStartNode.unique);
-            if (!isWithinStartNode)
-                return;
-        }
-        await this.#navigateToLocation(entity);
-    }
-    #onBreadcrumbItemClick(index) {
-        if (index === this._breadcrumb.length - 1)
-            return;
-        const item = this._breadcrumb[index];
-        if (index === 0 && !this._initialStartNode) {
-            this._currentLocation = undefined;
-        }
-        else {
-            this._currentLocation = { unique: item.unique, entityType: item.entityType };
-        }
-        this._breadcrumb = this._breadcrumb.slice(0, index + 1);
-        this.#setLocationInInteractionMemory();
+    #observeLocation() {
+        this.observe(this._pickerContext.location.currentLocation, (location) => {
+            this._currentLocation = location;
+            this._treeStartNode = location?.unique
+                ? { unique: location.unique, entityType: location.entityType }
+                : undefined;
+        }, 'umbTreeItemPickerLocationObserver');
     }
     #observePickerSelection() {
         this.observe(this._pickerContext.selection.selection, (selection) => {
@@ -340,6 +229,13 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
 		`;
     }
     #renderTree() {
+        // A level the tree cannot describe has no renderer, so the tree does not stand in for it.
+        if (this._currentLocation === null) {
+            return html `${this.#renderBreadcrumb()}
+				<div id="not-found" class="uui-text">
+					<h4>${this.localize.term('general_notFound')}</h4>
+				</div>`;
+        }
         return html `
 			${this.#renderBreadcrumb()}
 			<umb-tree
@@ -353,7 +249,7 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
             selectionConfiguration: this._selectionConfiguration,
             filter: this.data?.filter,
             selectableFilter: this.data?.pickableFilter,
-            startNode: this._currentLocation,
+            startNode: this._treeStartNode,
             foldersOnly: this.data?.foldersOnly,
             expansion: this._treeExpansion,
             interactionMemories: this._treeInteractionMemories,
@@ -365,21 +261,7 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
 		`;
     }
     #renderBreadcrumb() {
-        if (!this._breadcrumb.length)
-            return nothing;
-        return html `
-			<div id="breadcrumb">
-				<uui-breadcrumbs>
-					${repeat(this._breadcrumb, (item) => item.unique ?? 'root', (item, index) => html `
-							<uui-breadcrumb-item
-								?last-item=${index === this._breadcrumb.length - 1}
-								@click=${() => this.#onBreadcrumbItemClick(index)}>
-								${this.localize.string(item.name)}
-							</uui-breadcrumb-item>
-						`)}
-				</uui-breadcrumbs>
-			</div>
-		`;
+        return html `<umb-tree-item-picker-breadcrumb id="breadcrumb"></umb-tree-item-picker-breadcrumb>`;
     }
     #renderSelectionCount() {
         if (!this._selectionConfiguration.multiple || !this._hasSelection)
@@ -418,13 +300,9 @@ let UmbTreePickerModalElement = class UmbTreePickerModalElement extends UmbPicke
 			margin-bottom: var(--uui-size-space-4);
 		}
 
-		uui-breadcrumbs {
-			overflow: hidden;
-			min-width: 0;
-		}
-
-		uui-breadcrumb-item:not([last-item]) {
-			cursor: pointer;
+		#not-found {
+			text-align: center;
+			padding: var(--uui-size-layout-1);
 		}
 
 		#selection-info {
@@ -470,7 +348,7 @@ __decorate([
 ], UmbTreePickerModalElement.prototype, "_currentLocation", void 0);
 __decorate([
     state()
-], UmbTreePickerModalElement.prototype, "_breadcrumb", void 0);
+], UmbTreePickerModalElement.prototype, "_treeStartNode", void 0);
 __decorate([
     query('umb-picker-search-field')
 ], UmbTreePickerModalElement.prototype, "_searchField", void 0);

package/dist-cms/packages/core/tree/view/index.d.ts

@@ -1,3 +1,4 @@
 export type * from './types.js';
+export * from './table/index.js';
 export * from './tree-view.manager.js';
 export * from './tree-view-element-base.js';

package/dist-cms/packages/core/tree/view/index.js

@@ -1,2 +1,3 @@
+export * from './table/index.js';
 export * from './tree-view.manager.js';
 export * from './tree-view-element-base.js';

package/dist-cms/packages/core/tree/view/table/index.d.ts

@@ -1 +1,2 @@
 export type * from './types.js';
+export * from './table-tree-view.element.js';

package/dist-cms/packages/core/tree/view/table/index.js

@@ -1 +1 @@
-export {};
+export * from './table-tree-view.element.js';

package/dist-cms/packages/core/tree/view/table/table-tree-view.element.d.ts

@@ -1,9 +1,14 @@
 import type { UmbTreeItemModel } from '../../types.js';
 import { UmbTreeViewElementBase } from '../tree-view-element-base.js';
 import type { ManifestTreeViewTableKind } from './types.js';
-import { nothing, type PropertyValues } from '../../../../../external/lit/index.js';
+import { nothing, type PropertyValues, type TemplateResult } from '../../../../../external/lit/index.js';
 import './tree-name-table-column-layout.element.js';
 import '../../../entity-action/index.js';
+/**
+ * Renders the items of the tree as rows of a table, with a column for the name, any columns declared by the
+ * `treeView` manifest, and the entity actions.
+ * @augments {UmbTreeViewElementBase<UmbTreeItemModel>}
+ */
 export declare class UmbTableTreeViewElement extends UmbTreeViewElementBase<UmbTreeItemModel> {
     #private;
     private _items;
@@ -12,9 +17,28 @@ export declare class UmbTableTreeViewElement extends UmbTreeViewElementBase<UmbT
     set manifest(value: ManifestTreeViewTableKind | undefined);
     get manifest(): ManifestTreeViewTableKind | undefined;
     protected _gotTreeContext(): void;
+    /**
+     * Whether the item shows an expand symbol, which leads further into the tree.
+     * @param {UmbTreeItemModel} item - The tree item the row represents.
+     * @returns {boolean} True when the item shows the expand symbol.
+     */
+    protected _showExpandSymbol(item: UmbTreeItemModel): boolean;
+    /**
+     * Where activating the expand symbol of the item leads. Without a path, it asks the tree to drill into the item.
+     * @param {UmbTreeItemModel} _item - The tree item the row represents.
+     * @param {string | undefined} path - The path of the item, when the row is not selectable.
+     * @returns {string | undefined} The path to navigate to.
+     */
+    protected _getExpandPath(_item: UmbTreeItemModel, path: string | undefined): string | undefined;
+    /**
+     * Renders the expand symbol of the item, or `undefined` for the default.
+     * @param {UmbTreeItemModel} _item - The tree item the row represents.
+     * @returns {TemplateResult | undefined} The symbol to render.
+     */
+    protected _renderExpandSymbol(_item: UmbTreeItemModel): TemplateResult | undefined;
     willUpdate(changedProperties: PropertyValues): void;
     disconnectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+    render(): TemplateResult<1> | typeof nothing;
     static styles: import("lit").CSSResult[];
 }
 export default UmbTableTreeViewElement;