@umbraco-cms/backoffice 17.5.2 → 17.6.0-rc

package/dist-cms/packages/core/tree/conditions/tree-alias.condition.d.ts

@@ -0,0 +1,8 @@
+import type { TreeAliasConditionConfig } from './types.js';
+import type { UmbConditionControllerArguments, UmbExtensionCondition } from '../../../../libs/extension-api/index.js';
+import { UmbConditionBase } from '../../extension-registry/index.js';
+import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+export declare class UmbTreeAliasCondition extends UmbConditionBase<TreeAliasConditionConfig> implements UmbExtensionCondition {
+    constructor(host: UmbControllerHost, args: UmbConditionControllerArguments<TreeAliasConditionConfig>);
+}
+export default UmbTreeAliasCondition;

package/dist-cms/packages/core/tree/conditions/tree-alias.condition.js

@@ -0,0 +1,11 @@
+import { UMB_TREE_CONTEXT } from '../tree.context.token.js';
+import { UmbConditionBase } from '../../extension-registry/index.js';
+export class UmbTreeAliasCondition extends UmbConditionBase {
+    constructor(host, args) {
+        super(host, args);
+        this.consumeContext(UMB_TREE_CONTEXT, (context) => {
+            this.permitted = context?.manifest?.alias === this.config.match;
+        });
+    }
+}
+export default UmbTreeAliasCondition;

package/dist-cms/packages/core/tree/conditions/types.d.ts

@@ -0,0 +1,15 @@
+import type { UMB_TREE_ALIAS_CONDITION } from './constants.js';
+import type { UmbConditionConfigBase } from '../../../../libs/extension-api/index.js';
+export type TreeAliasConditionConfig = UmbConditionConfigBase<typeof UMB_TREE_ALIAS_CONDITION> & {
+    /**
+     * The tree that this extension should be available in.
+     * @example
+     * "Umb.Tree.DocumentType"
+     */
+    match: string;
+};
+declare global {
+    interface UmbExtensionConditionConfigMap {
+        TreeAliasConditionConfig: TreeAliasConditionConfig;
+    }
+}

package/dist-cms/packages/core/tree/conditions/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,6 @@
 import { UmbTreeItemActiveManager } from '../active-manager/tree-active-manager.js';
 import { UmbTreeExpansionManager } from '../expansion-manager/index.js';
+import { UmbTreeViewManager } from '../view/tree-view.manager.js';
 import type { ManifestTree } from '../extensions/types.js';
 import type { UmbTreeContext } from '../tree.context.interface.js';
 import type { UmbTreeExpansionModel } from '../expansion-manager/types.js';
@@ -8,6 +9,7 @@ import type { UmbTreeRepository } from '../data/index.js';
 import type { UmbTreeRootItemsRequestArgs } from '../data/types.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import { UmbSelectionManager } from '../../utils/index.js';
+import { UmbInteractionMemoryManager } from '../../interaction-memory/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 export declare class UmbDefaultTreeContext<TreeItemType extends UmbTreeItemModel, TreeRootType extends UmbTreeRootModel, RequestArgsType extends UmbTreeRootItemsRequestArgs = UmbTreeRootItemsRequestArgs> extends UmbContextBase implements UmbTreeContext<TreeItemType, TreeRootType, RequestArgsType> {
     #private;
@@ -16,15 +18,22 @@ export declare class UmbDefaultTreeContext<TreeItemType extends UmbTreeItemModel
     filter?: (item: TreeItemType) => boolean;
     readonly selection: UmbSelectionManager<string | null>;
     readonly expansion: UmbTreeExpansionManager;
+    readonly interactionMemory: UmbInteractionMemoryManager;
+    readonly view: UmbTreeViewManager;
     readonly hideTreeRoot: import("rxjs").Observable<boolean>;
+    readonly hideTreeItemActions: import("rxjs").Observable<boolean>;
+    readonly selectOnly: import("rxjs").Observable<boolean | undefined>;
+    readonly isMenu: import("rxjs").Observable<boolean | undefined>;
     readonly expandTreeRoot: import("rxjs").Observable<boolean | undefined>;
     readonly rootItems: import("rxjs").Observable<TreeItemType[]>;
+    readonly currentPageItems: import("rxjs").Observable<TreeItemType[]>;
     readonly hasChildren: import("rxjs").Observable<boolean>;
     readonly pagination: import("../../utils/index.js").UmbPaginationManager;
-    readonly targetPagination: import("../../utils/index.js").UmbTargetPaginationManager<import("../../entity/types.js").UmbEntityModel>;
+    readonly targetPagination: import("../../utils/index.js").UmbTargetPaginationManager<import("../../entity/index.js").UmbEntityModel>;
     readonly startNode: import("rxjs").Observable<UmbTreeStartNode | undefined>;
     readonly foldersOnly: import("rxjs").Observable<boolean>;
     readonly additionalRequestArgs: import("rxjs").Observable<object | Partial<RequestArgsType>>;
+    readonly isLoading: import("rxjs").Observable<boolean>;
     readonly isLoadingPrevChildren: import("rxjs").Observable<boolean>;
     readonly isLoadingNextChildren: import("rxjs").Observable<boolean>;
     readonly activeManager: UmbTreeItemActiveManager;
@@ -44,6 +53,7 @@ export declare class UmbDefaultTreeContext<TreeItemType extends UmbTreeItemModel
      */
     getManifest(): ManifestTree | undefined;
     getRepository(): UmbTreeRepository<TreeItemType, TreeRootType, UmbTreeRootItemsRequestArgs, import("../index.js").UmbTreeChildrenOfRequestArgs, import("../index.js").UmbTreeAncestorsOfRequestArgs> | undefined;
+    open(item: TreeItemType): void;
     /**
      * Loads the tree
      * @memberof UmbDefaultTreeContext
@@ -56,9 +66,11 @@ export declare class UmbDefaultTreeContext<TreeItemType extends UmbTreeItemModel
     reloadTree: import("../../utils/index.js").UmbDebouncedFunction<() => Promise<void>>;
     /**
      * Reloads the tree
+     * @param pageNumber
      * @memberof UmbDefaultTreeContext
      * @returns {Promise<void>}
      */
+    loadPage: (pageNumber: number) => Promise<void>;
     loadMore: () => Promise<void>;
     /**
      * Load previous items of the tree item
@@ -72,6 +84,12 @@ export declare class UmbDefaultTreeContext<TreeItemType extends UmbTreeItemModel
      * @returns {Promise<void>}
      */
     loadNextItems: () => Promise<void>;
+    setHideTreeItemActions(value: boolean): void;
+    getHideTreeItemActions(): boolean;
+    setSelectOnly(value: boolean | undefined): void;
+    getSelectOnly(): boolean;
+    setIsMenu(value: boolean): void;
+    getIsMenu(): boolean;
     /**
      * Sets the hideTreeRoot config
      * @param {boolean} hideTreeRoot - Whether to hide the tree root

package/dist-cms/packages/core/tree/default/default-tree.context.js

@@ -1,16 +1,25 @@
+import { UmbTreeItemOpenEvent } from '../tree-item/events/tree-item-open.event.js';
 import { UmbTreeItemActiveManager } from '../active-manager/tree-active-manager.js';
 import { UmbTreeExpansionManager } from '../expansion-manager/index.js';
+import { UmbTreeViewManager } from '../view/tree-view.manager.js';
 import { UmbTreeItemChildrenManager } from '../tree-item/tree-item-children.manager.js';
 import { UmbTreeItemTargetExpansionManager } from '../tree-item/tree-item-expansion.manager.js';
 import { UMB_TREE_CONTEXT } from '../tree.context.token.js';
 import { UmbBooleanState, UmbObjectState } from '../../../../libs/observable-api/index.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import { UmbDeprecation, UmbSelectionManager, debounce } from '../../utils/index.js';
+import { UmbInteractionMemoryManager } from '../../interaction-memory/index.js';
 import { UmbExtensionApiInitializer } from '../../../../libs/extension-api/index.js';
 import { umbExtensionsRegistry } from '../../extension-registry/index.js';
+import { UmbEntityContext } from '../../entity/index.js';
 export class UmbDefaultTreeContext extends UmbContextBase {
     #treeRoot;
+    #entityContext;
     #hideTreeRoot;
+    #hideTreeItemActions;
+    #selectOnly;
+    #selectOnlyConfig;
+    #isMenu;
     #expandTreeRoot;
     #treeItemChildrenManager;
     #treeItemExpansionManager;
@@ -23,22 +32,33 @@ export class UmbDefaultTreeContext extends UmbContextBase {
         super(host, UMB_TREE_CONTEXT);
         this.#treeRoot = new UmbObjectState(undefined);
         this.treeRoot = this.#treeRoot.asObservable();
+        this.#entityContext = new UmbEntityContext(this);
         this.selectableFilter = () => true;
         this.filter = () => true;
         this.selection = new UmbSelectionManager(this);
         this.expansion = new UmbTreeExpansionManager(this);
+        this.interactionMemory = new UmbInteractionMemoryManager(this);
+        this.view = new UmbTreeViewManager(this, { interactionMemoryManager: this.interactionMemory });
         this.#hideTreeRoot = new UmbBooleanState(false);
         this.hideTreeRoot = this.#hideTreeRoot.asObservable();
+        this.#hideTreeItemActions = new UmbBooleanState(false);
+        this.hideTreeItemActions = this.#hideTreeItemActions.asObservable();
+        this.#selectOnly = new UmbBooleanState(undefined);
+        this.selectOnly = this.#selectOnly.asObservable();
+        this.#isMenu = new UmbBooleanState(undefined);
+        this.isMenu = this.#isMenu.asObservable();
         this.#expandTreeRoot = new UmbBooleanState(undefined);
         this.expandTreeRoot = this.#expandTreeRoot.asObservable();
         this.#treeItemChildrenManager = new UmbTreeItemChildrenManager(this);
         this.rootItems = this.#treeItemChildrenManager.children;
+        this.currentPageItems = this.#treeItemChildrenManager.currentPageChildren;
         this.hasChildren = this.#treeItemChildrenManager.hasChildren;
         this.pagination = this.#treeItemChildrenManager.offsetPagination;
         this.targetPagination = this.#treeItemChildrenManager.targetPagination;
         this.startNode = this.#treeItemChildrenManager.startNode;
         this.foldersOnly = this.#treeItemChildrenManager.foldersOnly;
         this.additionalRequestArgs = this.#treeItemChildrenManager.additionalRequestArgs;
+        this.isLoading = this.#treeItemChildrenManager.isLoading;
         this.isLoadingPrevChildren = this.#treeItemChildrenManager.isLoadingPrevChildren;
         this.isLoadingNextChildren = this.#treeItemChildrenManager.isLoadingNextChildren;
         this.#treeItemExpansionManager = new UmbTreeItemTargetExpansionManager(this, {
@@ -71,9 +91,11 @@ export class UmbDefaultTreeContext extends UmbContextBase {
         this.reloadTree = debounce(() => this.#debouncedLoadTree(true), 100);
         /**
          * Reloads the tree
+         * @param pageNumber
          * @memberof UmbDefaultTreeContext
          * @returns {Promise<void>}
          */
+        this.loadPage = (pageNumber) => this.#treeItemChildrenManager.loadPage(pageNumber);
         this.loadMore = () => this.#treeItemChildrenManager.loadNextChildren();
         /**
          * Load previous items of the tree item
@@ -88,8 +110,12 @@ export class UmbDefaultTreeContext extends UmbContextBase {
          */
         this.loadNextItems = () => this.#treeItemChildrenManager.loadNextChildren();
         this.#treeItemChildrenManager.setTakeSize(50);
-        // always load the tree root because we need the root entity to reload the entire tree
-        this.#loadTreeRoot();
+        // Auto-enable selectOnly when a selection exists and it was not explicitly set.
+        this.observe(this.selection.selection, (selection) => {
+            if (this.#selectOnlyConfig === undefined) {
+                this.#selectOnly.setValue((selection?.length ?? 0) > 0);
+            }
+        });
     }
     // TODO: find a generic way to do this
     #checkIfInitialized() {
@@ -107,6 +133,9 @@ export class UmbDefaultTreeContext extends UmbContextBase {
         if (this.#manifest === manifest)
             return;
         this.#manifest = manifest;
+        if (manifest?.alias) {
+            this.view.setTreeAlias(manifest.alias);
+        }
         this.#observeRepository(this.#manifest?.meta.repositoryAlias);
     }
     get manifest() {
@@ -129,11 +158,25 @@ export class UmbDefaultTreeContext extends UmbContextBase {
     getRepository() {
         return this.#repository;
     }
+    open(item) {
+        // The tree root has a null unique and is not a navigable target, so opening it is a no-op.
+        const unique = item.unique;
+        if (unique === null || unique === undefined)
+            return;
+        this.getHostElement().dispatchEvent(new UmbTreeItemOpenEvent({ unique, entityType: item.entityType }));
+    }
     async #debouncedLoadTree(reload = false) {
         await this.#init;
         const hasStartNode = this.getStartNode();
         const hideTreeRoot = this.getHideTreeRoot();
-        if (hasStartNode || hideTreeRoot) {
+        // Always load the tree root entity, even when the root node is hidden or we are drilled
+        // into a start node. The root entity is required to wire up the target/expansion handling
+        // at root level: the tree's expansion manager only starts observing once it has been given
+        // the root tree item, which is what lets a deep-link / breadcrumb target paginate the root.
+        this.#loadTreeRoot(reload);
+        // Load children when drilled into a node, when the root is hidden, or when
+        // the root is pre-expanded — all cases where children must be immediately visible.
+        if (hasStartNode || hideTreeRoot || this.getExpandTreeRoot()) {
             if (reload) {
                 this.#treeItemChildrenManager.reloadChildren();
             }
@@ -141,9 +184,6 @@ export class UmbDefaultTreeContext extends UmbContextBase {
                 this.#treeItemChildrenManager.loadChildren();
             }
         }
-        else {
-            this.#loadTreeRoot(reload);
-        }
     }
     async #loadTreeRoot(reload = false) {
         await this.#init;
@@ -152,6 +192,10 @@ export class UmbDefaultTreeContext extends UmbContextBase {
             this.#treeRoot.setValue(data);
             this.#treeItemChildrenManager.setTreeItem(data);
             this.#treeItemExpansionManager.setTreeItem(data);
+            if (!this.getStartNode()) {
+                this.#entityContext.setEntityType(data.entityType);
+                this.#entityContext.setUnique(data.unique);
+            }
             this.pagination.setTotalItems(1);
             if (!reload) {
                 if (this.getExpandTreeRoot()) {
@@ -160,6 +204,26 @@ export class UmbDefaultTreeContext extends UmbContextBase {
             }
         }
     }
+    setHideTreeItemActions(value) {
+        this.#hideTreeItemActions.setValue(value);
+    }
+    getHideTreeItemActions() {
+        return this.#hideTreeItemActions.getValue();
+    }
+    setSelectOnly(value) {
+        this.#selectOnlyConfig = value;
+        // If undefined (auto-detect), compute from current selection so re-renders don't reset the auto-detected state.
+        this.#selectOnly.setValue(value ?? (this.selection.getSelection()?.length ?? 0) > 0);
+    }
+    getSelectOnly() {
+        return this.#selectOnly.getValue() ?? false;
+    }
+    setIsMenu(value) {
+        this.#isMenu.setValue(value);
+    }
+    getIsMenu() {
+        return this.#isMenu.getValue() ?? false;
+    }
     /**
      * Sets the hideTreeRoot config
      * @param {boolean} hideTreeRoot - Whether to hide the tree root
@@ -186,6 +250,10 @@ export class UmbDefaultTreeContext extends UmbContextBase {
      */
     setStartNode(startNode) {
         this.#treeItemChildrenManager.setStartNode(startNode);
+        if (startNode) {
+            this.#entityContext.setEntityType(startNode.entityType);
+            this.#entityContext.setUnique(startNode.unique);
+        }
         // we need to reset the tree if this config changes
         this.#clearTree();
         this.loadTree();

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

@@ -3,6 +3,8 @@ import type { UmbTreeExpansionModel } from '../expansion-manager/types.js';
 import type { UmbDefaultTreeContext } from './default-tree.context.js';
 import { UmbLitElement } from '../../lit-element/index.js';
 import type { PropertyValueMap } from '../../../../external/lit/index.js';
+import type { UmbInteractionMemoryModel } from '../../interaction-memory/index.js';
+import '../components/tree-toolbar.element.js';
 export declare class UmbDefaultTreeElement extends UmbLitElement {
     #private;
     private _selectionConfiguration;
@@ -19,18 +21,18 @@ export declare class UmbDefaultTreeElement extends UmbLitElement {
     selectableFilter: (item: UmbTreeItemModelBase) => boolean;
     filter: (item: UmbTreeItemModelBase) => boolean;
     expansion: UmbTreeExpansionModel;
-    private _rootItems;
-    private _treeRoot?;
-    private _currentPage;
-    private _hasPreviousItems;
-    private _hasNextItems;
-    private _isLoadingPrevChildren;
-    private _isLoadingNextChildren;
+    showToolbar: boolean;
+    showTreeActions: boolean;
+    interactionMemories?: Array<UmbInteractionMemoryModel>;
+    private _viewElement?;
+    private _hasItems;
+    private _isLoading;
+    private _initialLoadDone;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void>;
     getSelection(): (string | null)[] | undefined;
     getExpansion(): UmbTreeExpansionModel | undefined;
     render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
 }
 export default UmbDefaultTreeElement;
 declare global {

package/dist-cms/packages/core/tree/default/default-tree.element.js

@@ -4,8 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, customElement, html, nothing, property, repeat, state } from '../../../../external/lit/index.js';
+import { css, customElement, html, nothing, property, state } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
+import { UmbTextStyles } from '../../style/index.js';
+import { createExtensionElement } from '../../../../libs/extension-api/index.js';
+import { UmbInteractionMemoriesChangeEvent } from '../../interaction-memory/index.js';
+import { jsonStringComparison } from '../../../../libs/observable-api/index.js';
+import '../components/tree-toolbar.element.js';
 let UmbDefaultTreeElement = class UmbDefaultTreeElement extends UmbLitElement {
     constructor() {
         super(...arguments);
@@ -23,38 +28,71 @@ let UmbDefaultTreeElement = class UmbDefaultTreeElement extends UmbLitElement {
         this.selectableFilter = () => true;
         this.filter = () => true;
         this.expansion = [];
-        this._rootItems = [];
-        this._currentPage = 1;
-        this._hasPreviousItems = false;
-        this._hasNextItems = false;
-        this._isLoadingPrevChildren = false;
-        this._isLoadingNextChildren = false;
+        this.showToolbar = false;
+        this.showTreeActions = false;
+        this.#lastDispatchedMemories = [];
+        this._hasItems = false;
+        this._isLoading = false;
+        this._initialLoadDone = false;
+        this.#hasBeenLoading = false;
     }
     get api() {
         return this._api;
     }
     set api(value) {
         this._api = value;
-        this.#observeData();
-    }
-    #observeData() {
-        this.observe(this._api?.treeRoot, (treeRoot) => (this._treeRoot = treeRoot), '_observeTreeRoot');
-        this.observe(this._api?.rootItems, (rootItems) => (this._rootItems = rootItems ?? []), '_observeRootItems');
-        this.observe(this._api?.pagination.currentPage, (value) => (this._currentPage = value ?? 1), '_observeCurrentPage');
-        this.observe(this._api?.isLoadingPrevChildren, (value) => (this._isLoadingPrevChildren = value ?? false), '_observeIsLoadingPrevChildren');
-        this.observe(this._api?.isLoadingNextChildren, (value) => (this._isLoadingNextChildren = value ?? false), '_observeIsLoadingNextChildren');
-        this.observe(this._api?.targetPagination?.totalPrevItems, (value) => (this._hasPreviousItems = value ? value > 0 : false), '_observeTotalPrevItems');
-        this.observe(this._api?.targetPagination?.totalNextItems, (value) => (this._hasNextItems = value ? value > 0 : false), '_observeTotalNextItems');
+        if (value) {
+            // Derive emptiness from the loaded children, not `hasChildren`: the latter is also written by the
+            // concurrent tree-root load (with the root's own child count), which can clobber the start node's value
+            // and intermittently hide the empty state.
+            this.observe(value.rootItems, (items) => (this._hasItems = (items?.length ?? 0) > 0), 'umbTreeRootItemsObserver');
+            // Track loading so the empty state isn't shown before the children have loaded, or while reloading.
+            this.observe(value.isLoading, (isLoading) => {
+                this._isLoading = isLoading ?? false;
+                if (isLoading) {
+                    this.#hasBeenLoading = true;
+                }
+                else if (this.#hasBeenLoading) {
+                    this._initialLoadDone = true;
+                }
+            }, 'umbTreeIsLoadingObserver');
+        }
+        if (value?.view) {
+            this.observe(value.view.currentView, async (manifest) => {
+                const element = manifest ? await createExtensionElement(manifest) : null;
+                if (element && 'manifest' in element) {
+                    element.manifest = manifest;
+                }
+                this._viewElement = element;
+            }, 'umbTreeCurrentViewObserver');
+        }
+        if (value?.interactionMemory) {
+            // Snapshot before forwarding so the first observer emission is not treated as a change.
+            this.#lastDispatchedMemories = this.interactionMemories ?? [];
+            this.interactionMemories?.forEach((m) => value.interactionMemory.setMemory(m));
+            this.observe(value.interactionMemory.memories, (memories) => {
+                if (!jsonStringComparison(memories, this.#lastDispatchedMemories)) {
+                    this.#lastDispatchedMemories = memories;
+                    this.dispatchEvent(new UmbInteractionMemoriesChangeEvent());
+                }
+            }, 'umbTreeInteractionMemoryObserver');
+        }
     }
+    #lastDispatchedMemories;
+    #hasBeenLoading;
     async updated(_changedProperties) {
         super.updated(_changedProperties);
         if (this._api === undefined)
             return;
+        if (_changedProperties.has('api')) {
+            this._api.loadTree();
+        }
         if (_changedProperties.has('selectionConfiguration')) {
             this._selectionConfiguration = this.selectionConfiguration;
             this._api.selection.setMultiple(this._selectionConfiguration.multiple ?? false);
             this._api.selection.setSelectable(this._selectionConfiguration.selectable ?? true);
             this._api.selection.setSelection(this._selectionConfiguration.selection ?? []);
+            this._api.setSelectOnly(this._selectionConfiguration.selectOnly);
         }
         if (_changedProperties.has('startNode')) {
             this._api.setStartNode(this.startNode);
@@ -77,6 +115,16 @@ let UmbDefaultTreeElement = class UmbDefaultTreeElement extends UmbLitElement {
         if (_changedProperties.has('expansion')) {
             this._api.setExpansion(this.expansion);
         }
+        if (_changedProperties.has('hideTreeItemActions')) {
+            this._api.setHideTreeItemActions?.(this.hideTreeItemActions);
+        }
+        if (_changedProperties.has('isMenu')) {
+            this._api.setIsMenu?.(this.isMenu ?? false);
+        }
+        if (_changedProperties.has('interactionMemories') && this._api?.interactionMemory) {
+            this.#lastDispatchedMemories = this.interactionMemories ?? [];
+            this.interactionMemories?.forEach((m) => this._api.interactionMemory.setMemory(m));
+        }
     }
     getSelection() {
         return this._api?.selection.getSelection();
@@ -84,67 +132,48 @@ let UmbDefaultTreeElement = class UmbDefaultTreeElement extends UmbLitElement {
     getExpansion() {
         return this._api?.expansion.getExpansion();
     }
-    #onLoadPrev(event) {
-        event.stopPropagation();
-        this._api?.loadPrevItems?.();
-    }
-    #onLoadNext(event) {
-        event.stopPropagation();
-        const next = (this._currentPage = this._currentPage + 1);
-        this._api?.pagination.setCurrentPageNumber(next);
-    }
     render() {
-        return html ` ${this.#renderTreeRoot()} ${this.#renderRootItems()}`;
-    }
-    #renderTreeRoot() {
-        if (this.hideTreeRoot || this._treeRoot === undefined)
-            return nothing;
         return html `
-			<umb-tree-item
-				.entityType=${this._treeRoot.entityType}
-				.props=${{
-            hideActions: this.hideTreeItemActions,
-            item: this._treeRoot,
-            isMenu: this.isMenu,
-        }}></umb-tree-item>
+			${this.showToolbar
+            ? html `<umb-tree-toolbar .showTreeActions=${this.showTreeActions}></umb-tree-toolbar>`
+            : nothing}
+			${this._viewElement ?? nothing} ${this.#renderEmptyState()}
 		`;
     }
-    #renderRootItems() {
-        // only show the root items directly if the tree root is hidden
-        if (this.hideTreeRoot === true) {
-            return html `
-				${this.#renderLoadPrevButton()}
-				${repeat(this._rootItems, (item, index) => item.name + '___' + index, (item) => html `
-						<umb-tree-item
-							.entityType=${item.entityType}
-							.props=${{ hideActions: this.hideTreeItemActions, item, isMenu: this.isMenu }}></umb-tree-item>
-					`)}
-				${this.#renderLoadNextButton()}
-			`;
-        }
-        else {
+    #renderEmptyState() {
+        // The empty state belongs to the children list, not a single view, so it is presented once here — mirroring
+        // the collection pattern. It is only relevant when the children are shown on their own (root hidden or drilled
+        // into a start node) and never in the sidebar menu.
+        if (this.isMenu || !(this.hideTreeRoot || this.startNode))
             return nothing;
+        if (!this._initialLoadDone) {
+            return html `<umb-view-loader></umb-view-loader>`;
         }
-    }
-    #renderLoadPrevButton() {
-        if (!this._hasPreviousItems)
-            return nothing;
-        return html `<umb-tree-load-prev-button
-			@click=${this.#onLoadPrev}
-			.loading=${this._isLoadingPrevChildren}></umb-tree-load-prev-button>`;
-    }
-    #renderLoadNextButton() {
-        if (!this._hasNextItems)
+        if (this._isLoading || this._hasItems)
             return nothing;
-        return html `<umb-tree-load-more-button
-			@click=${this.#onLoadNext}
-			.loading=${this._isLoadingNextChildren}></umb-tree-load-more-button> `;
+        return html `<div id="empty-state" class="uui-text"><h4>${this.localize.term('tree_noItems')}</h4></div>`;
     }
-    static { this.styles = css `
-		#load-more {
-			width: 100%;
-		}
-	`; }
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			:host {
+				display: contents;
+			}
+
+			#empty-state {
+				text-align: center;
+				padding: var(--uui-size-layout-1);
+				opacity: 0;
+				animation: fadeIn 100ms 100ms forwards;
+			}
+
+			@keyframes fadeIn {
+				100% {
+					opacity: 1;
+				}
+			}
+		`,
+    ]; }
 };
 __decorate([
     property({ type: Object, attribute: false })
@@ -180,26 +209,26 @@ __decorate([
     property({ attribute: false })
 ], UmbDefaultTreeElement.prototype, "expansion", void 0);
 __decorate([
-    state()
-], UmbDefaultTreeElement.prototype, "_rootItems", void 0);
+    property({ type: Boolean, attribute: 'show-toolbar' })
+], UmbDefaultTreeElement.prototype, "showToolbar", void 0);
 __decorate([
-    state()
-], UmbDefaultTreeElement.prototype, "_treeRoot", void 0);
+    property({ type: Boolean, attribute: 'show-tree-actions' })
+], UmbDefaultTreeElement.prototype, "showTreeActions", void 0);
 __decorate([
-    state()
-], UmbDefaultTreeElement.prototype, "_currentPage", void 0);
+    property({ attribute: false })
+], UmbDefaultTreeElement.prototype, "interactionMemories", void 0);
 __decorate([
     state()
-], UmbDefaultTreeElement.prototype, "_hasPreviousItems", void 0);
+], UmbDefaultTreeElement.prototype, "_viewElement", void 0);
 __decorate([
     state()
-], UmbDefaultTreeElement.prototype, "_hasNextItems", void 0);
+], UmbDefaultTreeElement.prototype, "_hasItems", void 0);
 __decorate([
     state()
-], UmbDefaultTreeElement.prototype, "_isLoadingPrevChildren", void 0);
+], UmbDefaultTreeElement.prototype, "_isLoading", void 0);
 __decorate([
     state()
-], UmbDefaultTreeElement.prototype, "_isLoadingNextChildren", void 0);
+], UmbDefaultTreeElement.prototype, "_initialLoadDone", void 0);
 UmbDefaultTreeElement = __decorate([
     customElement('umb-default-tree')
 ], UmbDefaultTreeElement);

package/dist-cms/packages/core/tree/entity-actions/duplicate-to/duplicate-to.action.js

@@ -1,23 +1,30 @@
-import { UMB_DUPLICATE_TO_MODAL } from './modal/duplicate-to-modal.token.js';
+import { UMB_TREE_PICKER_MODAL } from '../../tree-picker-modal/index.js';
 import { UmbEntityActionBase, UmbRequestReloadStructureForEntityEvent } from '../../../entity-action/index.js';
 import { umbOpenModal } from '../../../modal/index.js';
 import { createExtensionApiByAlias } from '../../../extension-registry/index.js';
 import { UMB_ACTION_EVENT_CONTEXT } from '../../../action/index.js';
+import { linkEntityExpansionEntries } from '../../../utils/index.js';
 export class UmbDuplicateToEntityAction extends UmbEntityActionBase {
     async execute() {
         if (!this.args.unique)
             throw new Error('Unique is not available');
         if (!this.args.entityType)
             throw new Error('Entity Type is not available');
-        const value = await umbOpenModal(this, UMB_DUPLICATE_TO_MODAL, {
+        const ancestors = await this.#requestAncestors();
+        const value = await umbOpenModal(this, UMB_TREE_PICKER_MODAL, {
             data: {
-                unique: this.args.unique,
-                entityType: this.args.entityType,
+                headline: '#actions_copyTo',
+                confirmLabel: '#general_copy',
                 treeAlias: this.args.meta.treeAlias,
                 foldersOnly: this.args.meta.foldersOnly,
+                expandTreeRoot: true,
+                treeExpansion: ancestors.length ? linkEntityExpansionEntries(ancestors) : undefined,
             },
-        });
-        const destinationUnique = value.destination.unique;
+        }).catch(() => undefined);
+        // The modal was cancelled.
+        if (!value)
+            return;
+        const destinationUnique = value.selection[0];
         if (destinationUnique === undefined)
             throw new Error('Destination Unique is not available');
         const duplicateRepository = await createExtensionApiByAlias(this, this.args.meta.duplicateRepositoryAlias);
@@ -32,6 +39,20 @@ export class UmbDuplicateToEntityAction extends UmbEntityActionBase {
         }
         this.#reloadMenu();
     }
+    async #requestAncestors() {
+        try {
+            const treeRepository = await createExtensionApiByAlias(this, this.args.meta.treeRepositoryAlias);
+            const { data } = (await treeRepository?.requestTreeItemAncestors({
+                treeItem: { unique: this.args.unique, entityType: this.args.entityType },
+            })) ?? {};
+            // Exclude self — the API returns the descendant as part of the ancestors list, but we only want to expand its parents.
+            return data?.filter((item) => item.unique !== this.args.unique) ?? [];
+        }
+        catch {
+            // Tree pre-expansion is a UX convenience — if it fails the modal still opens normally.
+            return [];
+        }
+    }
     async #reloadMenu() {
         const actionEventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
         if (!actionEventContext)