@umbraco-cms/backoffice 14.0.0-rc3 → 14.0.0-rc4

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

@@ -1,17 +1,19 @@
 import { UmbRequestReloadTreeItemChildrenEvent } from '../reload-tree-item-children/index.js';
+import { UMB_TREE_CONTEXT } from './default-tree.context-token.js';
 import { UMB_ACTION_EVENT_CONTEXT } from '../../action/index.js';
 import { umbExtensionsRegistry, } from '../../extension-registry/index.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import { UmbExtensionApiInitializer } from '../../../../libs/extension-api/index.js';
-import { UmbPaginationManager, UmbSelectionManager } from '../../utils/index.js';
-import { UmbArrayState, UmbObjectState } from '../../../../libs/observable-api/index.js';
-import { UmbContextToken } from '../../../../libs/context-api/index.js';
+import { UmbPaginationManager, UmbSelectionManager, debounce } from '../../utils/index.js';
+import { UmbRequestReloadChildrenOfEntityEvent, } from '../../entity-action/index.js';
+import { UmbArrayState, UmbBooleanState, UmbObjectState } from '../../../../libs/observable-api/index.js';
 import { UmbChangeEvent } from '../../event/index.js';
 export class UmbDefaultTreeContext extends UmbContextBase {
+    #additionalRequestArgs;
     #treeRoot;
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
     #rootItems;
+    #hideTreeRoot;
+    #startNode;
     #manifest;
     #repository;
     #actionEventContext;
@@ -20,17 +22,23 @@ export class UmbDefaultTreeContext extends UmbContextBase {
     #initialized;
     #init;
     constructor(host) {
-        super(host, UMB_DEFAULT_TREE_CONTEXT);
-        this.#treeRoot = new UmbObjectState(undefined);
-        this.treeRoot = this.#treeRoot.asObservable();
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
+        super(host, UMB_TREE_CONTEXT);
+        this.#additionalRequestArgs = new UmbObjectState({});
+        this.additionalRequestArgs = this.#additionalRequestArgs.asObservable();
+        this.#treeRoot = new UmbObjectState(undefined);
+        this.treeRoot = this.#treeRoot.asObservable();
         this.#rootItems = new UmbArrayState([], (x) => x.unique);
         this.rootItems = this.#rootItems.asObservable();
         this.selectableFilter = () => true;
         this.filter = () => true;
         this.selection = new UmbSelectionManager(this._host);
         this.pagination = new UmbPaginationManager();
+        this.#hideTreeRoot = new UmbBooleanState(false);
+        this.hideTreeRoot = this.#hideTreeRoot.asObservable();
+        this.#startNode = new UmbObjectState(undefined);
+        this.startNode = this.#startNode.asObservable();
         this.#paging = {
             skip: 0,
             take: 50,
@@ -39,23 +47,33 @@ export class UmbDefaultTreeContext extends UmbContextBase {
         this.#init = new Promise((resolve) => {
             this.#initialized ? resolve() : (this.#initResolver = resolve);
         });
+        /**
+         * Loads the tree
+         * @memberof UmbDefaultTreeContext
+         */
+        // TODO: debouncing the load tree method because multiple props can be set at the same time
+        // that would trigger multiple loadTree calls. This is a temporary solution to avoid that.
+        this.loadTree = debounce(() => this.#debouncedLoadTree(), 100);
+        /**
+         * Reloads the tree
+         * @memberof UmbDefaultTreeContext
+         */
+        this.loadMore = () => this.#debouncedLoadTree(true);
         this.#onPageChange = (event) => {
             const target = event.target;
             this.#paging.skip = target.getSkip();
-            this.loadRootItems();
+            this.loadMore();
         };
         this.#onReloadRequest = (event) => {
             // Only handle root request here. Items are handled by the tree item context
             const treeRoot = this.#treeRoot.getValue();
             if (treeRoot === undefined)
                 return;
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
             if (event.getUnique() !== treeRoot.unique)
                 return;
             if (event.getEntityType() !== treeRoot.entityType)
                 return;
-            this.loadRootItems();
+            this.loadTree();
         };
         this.pagination.setPageSize(this.#paging.take);
         this.#consumeContexts();
@@ -70,15 +88,14 @@ export class UmbDefaultTreeContext extends UmbContextBase {
         // @ts-ignore
         hostElement.addEventListener('temp-reload-tree-item-parent', (event) => {
             const treeRoot = this.#treeRoot.getValue();
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            const unique = treeRoot.unique;
+            const unique = treeRoot?.unique;
             if (event.detail.unique === unique) {
                 event.stopPropagation();
-                this.loadRootItems();
+                this.loadTree();
             }
         });
-        this.loadTreeRoot();
+        // always load the tree root because we need the root entity to reload the entire tree
+        this.#loadTreeRoot();
     }
     // TODO: find a generic way to do this
     #checkIfInitialized() {
@@ -113,31 +130,119 @@ export class UmbDefaultTreeContext extends UmbContextBase {
     getRepository() {
         return this.#repository;
     }
-    async loadTreeRoot() {
+    #debouncedLoadTree(reload = false) {
+        if (this.getStartNode()) {
+            this.#loadRootItems(reload);
+            return;
+        }
+        const hideTreeRoot = this.getHideTreeRoot();
+        if (hideTreeRoot) {
+            this.#loadRootItems(reload);
+            return;
+        }
+    }
+    async #loadTreeRoot() {
         await this.#init;
         const { data } = await this.#repository.requestTreeRoot();
         if (data) {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
             this.#treeRoot.setValue(data);
+            this.pagination.setTotalItems(1);
         }
     }
-    async loadRootItems() {
+    async #loadRootItems(loadMore = false) {
         await this.#init;
-        const { data } = await this.#repository.requestRootTreeItems({
-            skip: this.#paging.skip,
-            take: this.#paging.take,
-        });
+        const skip = loadMore ? this.#paging.skip : 0;
+        const take = loadMore ? this.#paging.take : this.pagination.getCurrentPageNumber() * this.#paging.take;
+        // If we have a start node get children of that instead of the root
+        const startNode = this.getStartNode();
+        const additionalArgs = this.#additionalRequestArgs.getValue();
+        const { data } = startNode?.unique
+            ? await this.#repository.requestTreeItemsOf({
+                ...additionalArgs,
+                parent: {
+                    unique: startNode.unique,
+                    entityType: startNode.entityType,
+                },
+                skip,
+                take,
+            })
+            : await this.#repository.requestTreeRootItems({
+                ...additionalArgs,
+                skip,
+                take,
+            });
         if (data) {
-            this.#rootItems.setValue(data.items);
+            if (loadMore) {
+                const currentItems = this.#rootItems.getValue();
+                this.#rootItems.setValue([...currentItems, ...data.items]);
+            }
+            else {
+                this.#rootItems.setValue(data.items);
+            }
             this.pagination.setTotalItems(data.total);
         }
     }
+    /**
+     * Sets the hideTreeRoot config
+     * @param {boolean} hideTreeRoot
+     * @memberof UmbDefaultTreeContext
+     */
+    setHideTreeRoot(hideTreeRoot) {
+        this.#hideTreeRoot.setValue(hideTreeRoot);
+        // we need to reset the tree if this config changes
+        this.#resetTree();
+        this.loadTree();
+    }
+    /**
+     * Gets the hideTreeRoot config
+     * @return {boolean}
+     * @memberof UmbDefaultTreeContext
+     */
+    getHideTreeRoot() {
+        return this.#hideTreeRoot.getValue();
+    }
+    /**
+     * Sets the startNode config
+     * @param {UmbTreeStartNode} startNode
+     * @memberof UmbDefaultTreeContext
+     */
+    setStartNode(startNode) {
+        this.#startNode.setValue(startNode);
+        // we need to reset the tree if this config changes
+        this.#resetTree();
+        this.loadTree();
+    }
+    /**
+     * Updates the requestArgs config and reloads the tree.
+     */
+    updateAdditionalRequestArgs(args) {
+        this.#additionalRequestArgs.setValue({ ...this.#additionalRequestArgs.getValue(), ...args });
+        this.#resetTree();
+        this.loadTree();
+    }
+    getAdditionalRequestArgs() {
+        return this.#additionalRequestArgs.getValue();
+    }
+    /**
+     * Gets the startNode config
+     * @return {UmbTreeStartNode}
+     * @memberof UmbDefaultTreeContext
+     */
+    getStartNode() {
+        return this.#startNode.getValue();
+    }
+    #resetTree() {
+        this.#treeRoot.setValue(undefined);
+        this.#rootItems.setValue([]);
+        this.pagination.clear();
+    }
     #consumeContexts() {
         this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (instance) => {
             this.#actionEventContext = instance;
             this.#actionEventContext.removeEventListener(UmbRequestReloadTreeItemChildrenEvent.TYPE, this.#onReloadRequest);
+            this.#actionEventContext.removeEventListener(UmbRequestReloadChildrenOfEntityEvent.TYPE, this.#onReloadRequest);
             this.#actionEventContext.addEventListener(UmbRequestReloadTreeItemChildrenEvent.TYPE, this.#onReloadRequest);
+            this.#actionEventContext.addEventListener(UmbRequestReloadChildrenOfEntityEvent.TYPE, this.#onReloadRequest);
         });
     }
     #onPageChange;
@@ -152,8 +257,8 @@ export class UmbDefaultTreeContext extends UmbContextBase {
     #onReloadRequest;
     destroy() {
         this.#actionEventContext?.removeEventListener(UmbRequestReloadTreeItemChildrenEvent.TYPE, this.#onReloadRequest);
+        this.#actionEventContext?.removeEventListener(UmbRequestReloadChildrenOfEntityEvent.TYPE, this.#onReloadRequest);
         super.destroy();
     }
 }
-export default UmbDefaultTreeContext;
-export const UMB_DEFAULT_TREE_CONTEXT = new UmbContextToken('UmbTreeContext');
+export { UmbDefaultTreeContext as api };

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

@@ -1,4 +1,4 @@
-import type { UmbTreeItemModelBase, UmbTreeSelectionConfiguration } from '../types.js';
+import type { UmbTreeItemModelBase, UmbTreeSelectionConfiguration, UmbTreeStartNode } from '../types.js';
 import type { PropertyValueMap } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
 export declare class UmbDefaultTreeElement extends UmbLitElement {
@@ -7,6 +7,7 @@ export declare class UmbDefaultTreeElement extends UmbLitElement {
     selectionConfiguration: UmbTreeSelectionConfiguration;
     hideTreeItemActions: boolean;
     hideTreeRoot: boolean;
+    startNode?: UmbTreeStartNode;
     selectableFilter: (item: UmbTreeItemModelBase) => boolean;
     filter: (item: UmbTreeItemModelBase) => boolean;
     private _rootItems;

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

@@ -4,7 +4,7 @@ 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 { UMB_DEFAULT_TREE_CONTEXT } from './default-tree.context.js';
+import { UMB_TREE_CONTEXT } from './default-tree.context-token.js';
 import { html, nothing, customElement, property, state, repeat } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../lit-element/index.js';
 let UmbDefaultTreeElement = class UmbDefaultTreeElement extends UmbLitElement {
@@ -32,7 +32,7 @@ let UmbDefaultTreeElement = class UmbDefaultTreeElement extends UmbLitElement {
         };
         this.#init = Promise.all([
             // TODO: Notice this can be retrieve via a api property. [NL]
-            this.consumeContext(UMB_DEFAULT_TREE_CONTEXT, (instance) => {
+            this.consumeContext(UMB_TREE_CONTEXT, (instance) => {
                 this.#treeContext = instance;
                 this.observe(this.#treeContext.treeRoot, (treeRoot) => (this._treeRoot = treeRoot));
                 this.observe(this.#treeContext.rootItems, (rootItems) => (this._rootItems = rootItems));
@@ -50,11 +50,11 @@ let UmbDefaultTreeElement = class UmbDefaultTreeElement extends UmbLitElement {
             this.#treeContext.selection.setSelectable(this._selectionConfiguration.selectable ?? true);
             this.#treeContext.selection.setSelection(this._selectionConfiguration.selection ?? []);
         }
+        if (_changedProperties.has('startNode')) {
+            this.#treeContext.setStartNode(this.startNode);
+        }
         if (_changedProperties.has('hideTreeRoot')) {
-            if (this.hideTreeRoot === true) {
-                await this.#init;
-                this.#treeContext.loadRootItems();
-            }
+            this.#treeContext.setHideTreeRoot(this.hideTreeRoot);
         }
         if (_changedProperties.has('selectableFilter')) {
             this.#treeContext.selectableFilter = this.selectableFilter;
@@ -79,7 +79,7 @@ let UmbDefaultTreeElement = class UmbDefaultTreeElement extends UmbLitElement {
 		`;
     }
     #renderRootItems() {
-        // only shot the root items directly if the tree root is hidden
+        // only show the root items directly if the tree root is hidden
         if (this.hideTreeRoot === true) {
             return html `
 				${repeat(this._rootItems, (item, index) => item.name + '___' + index, (item) => html `<umb-tree-item
@@ -109,6 +109,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: false })
 ], UmbDefaultTreeElement.prototype, "hideTreeRoot", void 0);
+__decorate([
+    property({ type: Object, attribute: false })
+], UmbDefaultTreeElement.prototype, "startNode", void 0);
 __decorate([
     property({ attribute: false })
 ], UmbDefaultTreeElement.prototype, "selectableFilter", void 0);

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

@@ -1,2 +1,3 @@
-export { UmbDefaultTreeElement as UmbTreeDefaultElement } from './default-tree.element.js';
-export { UmbDefaultTreeContext as UmbTreeDefaultContext } from './default-tree.context.js';
+export { UmbDefaultTreeElement } from './default-tree.element.js';
+export { UmbDefaultTreeContext } from './default-tree.context.js';
+export { UMB_TREE_CONTEXT } from './default-tree.context-token.js';

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

@@ -1,2 +1,3 @@
-export { UmbDefaultTreeElement as UmbTreeDefaultElement } from './default-tree.element.js';
-export { UmbDefaultTreeContext as UmbTreeDefaultContext } from './default-tree.context.js';
+export { UmbDefaultTreeElement } from './default-tree.element.js';
+export { UmbDefaultTreeContext } from './default-tree.context.js';
+export { UMB_TREE_CONTEXT } from './default-tree.context-token.js';

package/dist-cms/packages/core/tree/folder/entity-action/create-folder/create-folder.action.js

@@ -1,7 +1,7 @@
 import { UMB_ACTION_EVENT_CONTEXT } from '../../../../action/index.js';
-import { UmbEntityActionBase } from '../../../../entity-action/index.js';
+import { UmbEntityActionBase, UmbRequestReloadChildrenOfEntityEvent } from '../../../../entity-action/index.js';
 import { UMB_MODAL_MANAGER_CONTEXT } from '../../../../modal/index.js';
-import { UMB_FOLDER_CREATE_MODAL, UmbRequestReloadTreeItemChildrenEvent } from '../../../index.js';
+import { UMB_FOLDER_CREATE_MODAL } from '../../../index.js';
 export class UmbCreateFolderEntityAction extends UmbEntityActionBase {
     async execute() {
         const modalManager = await this.getContext(UMB_MODAL_MANAGER_CONTEXT);
@@ -16,7 +16,7 @@ export class UmbCreateFolderEntityAction extends UmbEntityActionBase {
         });
         await modalContext.onSubmit();
         const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
-        const event = new UmbRequestReloadTreeItemChildrenEvent({
+        const event = new UmbRequestReloadChildrenOfEntityEvent({
             entityType: this.args.entityType,
             unique: this.args.unique,
         });

package/dist-cms/packages/core/tree/folder/modal/folder-create-modal.token.d.ts

@@ -1,11 +1,9 @@
+import type { UmbEntityModel } from '../../../entity/index.js';
 import { UmbModalToken } from '../../../modal/index.js';
 import type { UmbFolderModel } from '../../index.js';
 export interface UmbFolderCreateModalData {
     folderRepositoryAlias: string;
-    parent: {
-        unique: string | null;
-        entityType: string;
-    };
+    parent: UmbEntityModel;
 }
 export interface UmbFolderCreateModalValue {
     folder: UmbFolderModel;

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

@@ -1,4 +1,3 @@
-import { UmbRequestReloadTreeItemChildrenEvent } from './reload-tree-item-children/index.js';
 export * from './tree-item/index.js';
 export * from './default/index.js';
 export * from './data/index.js';
@@ -9,4 +8,3 @@ export { UmbReloadTreeItemChildrenEntityAction, UmbRequestReloadTreeItemChildren
 export type { UmbTreePickerModalData, UmbTreePickerModalValue } from './tree-picker/index.js';
 export { UMB_TREE_PICKER_MODAL, UMB_TREE_PICKER_MODAL_ALIAS } from './tree-picker/index.js';
 export * from './types.js';
-export { UmbRequestReloadTreeItemChildrenEvent as UmbReloadTreeItemChildrenRequestEntityActionEvent };

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

@@ -1,4 +1,3 @@
-import { UmbRequestReloadTreeItemChildrenEvent } from './reload-tree-item-children/index.js';
 export * from './tree-item/index.js';
 export * from './default/index.js';
 export * from './data/index.js';
@@ -8,8 +7,3 @@ export * from './tree.element.js';
 export { UmbReloadTreeItemChildrenEntityAction, UmbRequestReloadTreeItemChildrenEvent, } from './reload-tree-item-children/index.js';
 export { UMB_TREE_PICKER_MODAL, UMB_TREE_PICKER_MODAL_ALIAS } from './tree-picker/index.js';
 export * from './types.js';
-/*
- * @deprecated Use UmbRequestReloadTreeItemChildrenEvent instead — Will be removed before RC.
- * TODO: Delete before RC.
- */
-export { UmbRequestReloadTreeItemChildrenEvent as UmbReloadTreeItemChildrenRequestEntityActionEvent };

package/dist-cms/packages/core/tree/reload-tree-item-children/reload-tree-item-children-request.event.d.ts

@@ -1,4 +1,7 @@
 import { UmbEntityActionEvent, type UmbEntityActionEventArgs } from '../../entity-action/index.js';
+/**
+ * @deprecated Use `UmbRequestReloadChildrenOfEntityEvent` instead.
+ */
 export declare class UmbRequestReloadTreeItemChildrenEvent extends UmbEntityActionEvent {
     static readonly TYPE = "request-reload-tree-item-children";
     constructor(args: UmbEntityActionEventArgs);

package/dist-cms/packages/core/tree/reload-tree-item-children/reload-tree-item-children-request.event.js

@@ -1,4 +1,7 @@
 import { UmbEntityActionEvent } from '../../entity-action/index.js';
+/**
+ * @deprecated Use `UmbRequestReloadChildrenOfEntityEvent` instead.
+ */
 export class UmbRequestReloadTreeItemChildrenEvent extends UmbEntityActionEvent {
     static { this.TYPE = 'request-reload-tree-item-children'; }
     constructor(args) {

package/dist-cms/packages/core/tree/reload-tree-item-children/reload-tree-item-children.action.js

@@ -1,5 +1,4 @@
-import { UmbRequestReloadTreeItemChildrenEvent } from './reload-tree-item-children-request.event.js';
-import { UmbEntityActionBase } from '../../entity-action/index.js';
+import { UmbEntityActionBase, UmbRequestReloadChildrenOfEntityEvent } from '../../entity-action/index.js';
 import { UMB_ACTION_EVENT_CONTEXT } from '../../action/index.js';
 export class UmbReloadTreeItemChildrenEntityAction extends UmbEntityActionBase {
     constructor(host, args) {
@@ -7,7 +6,7 @@ export class UmbReloadTreeItemChildrenEntityAction extends UmbEntityActionBase {
     }
     async execute() {
         const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
-        eventContext.dispatchEvent(new UmbRequestReloadTreeItemChildrenEvent({
+        eventContext.dispatchEvent(new UmbRequestReloadChildrenOfEntityEvent({
             unique: this.args.unique,
             entityType: this.args.entityType,
         }));

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

@@ -1,14 +1,13 @@
 import type { UmbTreeItemContext } from '../tree-item-context.interface.js';
-import { type UmbDefaultTreeContext } from '../../default/default-tree.context.js';
-import type { UmbTreeItemModelBase } from '../../types.js';
+import { type UmbDefaultTreeContext } from '../../default/index.js';
+import type { UmbTreeItemModel, UmbTreeRootModel } from '../../types.js';
 import type { ManifestTreeItem } from '../../../extension-registry/index.js';
 import { UmbObjectState } from '../../../../../libs/observable-api/index.js';
 import type { UmbControllerHost } from '../../../../../libs/controller-api/index.js';
 import { UmbContextBase } from '../../../../../libs/class-api/index.js';
 import { UmbContextToken } from '../../../../../libs/context-api/index.js';
 import { UmbPaginationManager } from '../../../utils/index.js';
-export type UmbTreeItemUniqueFunction<TreeItemType extends UmbTreeItemModelBase> = (x: TreeItemType) => string | null | undefined;
-export declare abstract class UmbTreeItemContextBase<TreeItemType extends UmbTreeItemModelBase> extends UmbContextBase<UmbTreeItemContext<TreeItemType>> implements UmbTreeItemContext<TreeItemType> {
+export declare abstract class UmbTreeItemContextBase<TreeItemType extends UmbTreeItemModel, TreeRootType extends UmbTreeRootModel> extends UmbContextBase<UmbTreeItemContext<TreeItemType>> implements UmbTreeItemContext<TreeItemType> {
     #private;
     unique?: string | null;
     entityType?: string;
@@ -24,8 +23,8 @@ export declare abstract class UmbTreeItemContextBase<TreeItemType extends UmbTre
     readonly isActive: import("rxjs/internal/Observable").Observable<boolean>;
     readonly hasActions: import("rxjs/internal/Observable").Observable<boolean>;
     readonly path: import("rxjs/internal/Observable").Observable<string>;
-    treeContext?: UmbDefaultTreeContext<TreeItemType>;
-    constructor(host: UmbControllerHost, getUniqueFunction: UmbTreeItemUniqueFunction<TreeItemType>);
+    treeContext?: UmbDefaultTreeContext<TreeItemType, TreeRootType>;
+    constructor(host: UmbControllerHost);
     /**
      * Sets the manifest
      * @param {ManifestCollection} manifest
@@ -40,7 +39,16 @@ export declare abstract class UmbTreeItemContextBase<TreeItemType extends UmbTre
      */
     getManifest(): ManifestTreeItem | undefined;
     setTreeItem(treeItem: TreeItemType | undefined): void;
-    loadChildren(): Promise<void>;
+    /**
+     * Load children of the tree item
+     * @memberof UmbTreeItemContextBase
+     */
+    loadChildren: () => Promise<void>;
+    /**
+     * Load more children of the tree item
+     * @memberof UmbTreeItemContextBase
+     */
+    loadMore: () => Promise<void>;
     toggleContextMenu(): void;
     select(): void;
     deselect(): void;

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

@@ -1,4 +1,4 @@
-import { UMB_DEFAULT_TREE_CONTEXT } from '../../default/default-tree.context.js';
+import { UMB_TREE_CONTEXT } from '../../default/index.js';
 import { UmbRequestReloadTreeItemChildrenEvent } from '../../reload-tree-item-children/index.js';
 import { map } from '../../../../../external/rxjs/index.js';
 import { UMB_SECTION_CONTEXT, UMB_SECTION_SIDEBAR_CONTEXT } from '../../../section/index.js';
@@ -7,7 +7,7 @@ import { UmbArrayState, UmbBooleanState, UmbObjectState, UmbStringState } from '
 import { UmbContextBase } from '../../../../../libs/class-api/index.js';
 import { UmbContextToken } from '../../../../../libs/context-api/index.js';
 import { UMB_ACTION_EVENT_CONTEXT } from '../../../action/index.js';
-import { UmbRequestReloadStructureForEntityEvent } from '../../../entity-action/index.js';
+import { UmbRequestReloadChildrenOfEntityEvent, UmbRequestReloadStructureForEntityEvent, } from '../../../entity-action/index.js';
 import { UmbPaginationManager, debounce } from '../../../utils/index.js';
 import { UmbChangeEvent } from '../../../event/index.js';
 export class UmbTreeItemContextBase extends UmbContextBase {
@@ -26,10 +26,9 @@ export class UmbTreeItemContextBase extends UmbContextBase {
     #sectionContext;
     #sectionSidebarContext;
     #actionEventContext;
-    #getUniqueFunction;
     // TODO: get this from the tree context
     #paging;
-    constructor(host, getUniqueFunction) {
+    constructor(host) {
         super(host, UMB_TREE_ITEM_CONTEXT);
         this.pagination = new UmbPaginationManager();
         this._treeItem = new UmbObjectState(undefined);
@@ -59,6 +58,16 @@ export class UmbTreeItemContextBase extends UmbContextBase {
             skip: 0,
             take: 50,
         };
+        /**
+         * Load children of the tree item
+         * @memberof UmbTreeItemContextBase
+         */
+        this.loadChildren = () => this.#loadChildren();
+        /**
+         * Load more children of the tree item
+         * @memberof UmbTreeItemContextBase
+         */
+        this.loadMore = () => this.#loadChildren(true);
         this.#onReloadRequest = (event) => {
             if (event.getUnique() !== this.unique)
                 return;
@@ -78,9 +87,7 @@ export class UmbTreeItemContextBase extends UmbContextBase {
             It does not look like there is a way to have a "dynamic" parent context that will stop when a
             specific parent is reached (a tree item unique that matches the parentUnique of this item) */
             const treeItem = this.getTreeItem();
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            const parentUnique = treeItem?.parentUnique;
+            const parentUnique = treeItem?.parent.unique;
             const customEvent = new CustomEvent('temp-reload-tree-item-parent', {
                 detail: { unique: parentUnique },
                 bubbles: true,
@@ -91,11 +98,10 @@ export class UmbTreeItemContextBase extends UmbContextBase {
         this.#onPageChange = (event) => {
             const target = event.target;
             this.#paging.skip = target.getSkip();
-            this.loadChildren();
+            this.loadMore();
         };
         this.#debouncedCheckIsActive = debounce(() => this.#checkIsActive(), 100);
         this.pagination.setPageSize(this.#paging.take);
-        this.#getUniqueFunction = getUniqueFunction;
         this.#consumeContexts();
         // listen for page changes on the pagination manager
         this.pagination.addEventListener(UmbChangeEvent.TYPE, this.#onPageChange);
@@ -145,11 +151,10 @@ export class UmbTreeItemContextBase extends UmbContextBase {
             this._treeItem.setValue(undefined);
             return;
         }
-        const unique = this.#getUniqueFunction(treeItem);
         // Only check for undefined. The tree root has null as unique
-        if (unique === undefined)
-            throw new Error('Could not create tree item context, unique key is missing');
-        this.unique = unique;
+        if (treeItem.unique === undefined)
+            throw new Error('Could not create tree item context, unique is missing');
+        this.unique = treeItem.unique;
         if (!treeItem.entityType)
             throw new Error('Could not create tree item context, tree item type is missing');
         this.entityType = treeItem.entityType;
@@ -161,21 +166,36 @@ export class UmbTreeItemContextBase extends UmbContextBase {
         this.#observeIsSelected();
         this.#observeSectionPath();
     }
-    async loadChildren() {
+    async #loadChildren(loadMore = false) {
         if (this.unique === undefined)
             throw new Error('Could not request children, unique key is missing');
+        if (this.entityType === undefined)
+            throw new Error('Could not request children, entity type is missing');
         // TODO: wait for tree context to be ready
         const repository = this.treeContext?.getRepository();
         if (!repository)
             throw new Error('Could not request children, repository is missing');
         this.#isLoading.setValue(true);
+        const skip = loadMore ? this.#paging.skip : 0;
+        const take = loadMore ? this.#paging.take : this.pagination.getCurrentPageNumber() * this.#paging.take;
+        const additionalArgs = this.treeContext?.getAdditionalRequestArgs();
         const { data } = await repository.requestTreeItemsOf({
-            parentUnique: this.unique,
-            skip: this.#paging.skip,
-            take: this.#paging.take,
+            parent: {
+                unique: this.unique,
+                entityType: this.entityType,
+            },
+            skip,
+            take,
+            ...additionalArgs,
         });
         if (data) {
-            this.#childItems.setValue(data.items);
+            if (loadMore) {
+                const currentItems = this.#childItems.getValue();
+                this.#childItems.setValue([...currentItems, ...data.items]);
+            }
+            else {
+                this.#childItems.setValue(data.items);
+            }
             this.#hasChildren.setValue(data.total > 0);
             this.pagination.setTotalItems(data.total);
         }
@@ -209,16 +229,20 @@ export class UmbTreeItemContextBase extends UmbContextBase {
         this.consumeContext(UMB_SECTION_SIDEBAR_CONTEXT, (instance) => {
             this.#sectionSidebarContext = instance;
         });
-        this.consumeContext(UMB_DEFAULT_TREE_CONTEXT, (treeContext) => {
+        this.consumeContext(UMB_TREE_CONTEXT, (treeContext) => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
             this.treeContext = treeContext;
             this.#observeIsSelectable();
             this.#observeIsSelected();
         });
         this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (instance) => {
             this.#actionEventContext?.removeEventListener(UmbRequestReloadTreeItemChildrenEvent.TYPE, this.#onReloadRequest);
+            this.#actionEventContext?.removeEventListener(UmbRequestReloadChildrenOfEntityEvent.TYPE, this.#onReloadRequest);
             this.#actionEventContext?.removeEventListener(UmbRequestReloadStructureForEntityEvent.TYPE, this.#onReloadStructureRequest);
             this.#actionEventContext = instance;
             this.#actionEventContext.addEventListener(UmbRequestReloadTreeItemChildrenEvent.TYPE, this.#onReloadRequest);
+            this.#actionEventContext.addEventListener(UmbRequestReloadChildrenOfEntityEvent.TYPE, this.#onReloadRequest);
             this.#actionEventContext.addEventListener(UmbRequestReloadStructureForEntityEvent.TYPE, this.#onReloadStructureRequest);
         });
     }
@@ -285,6 +309,7 @@ export class UmbTreeItemContextBase extends UmbContextBase {
     }
     destroy() {
         this.#actionEventContext?.removeEventListener(UmbRequestReloadTreeItemChildrenEvent.TYPE, this.#onReloadRequest);
+        this.#actionEventContext?.removeEventListener(UmbRequestReloadChildrenOfEntityEvent.TYPE, this.#onReloadRequest);
         this.#actionEventContext?.removeEventListener(UmbRequestReloadStructureForEntityEvent.TYPE, this.#onReloadStructureRequest);
         window.removeEventListener('navigationend', this.#debouncedCheckIsActive);
         super.destroy();

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

@@ -1,6 +1,6 @@
-import type { UmbTreeItemModelBase } from '../../types.js';
+import type { UmbTreeItemModel } from '../../types.js';
 import { UmbLitElement } from '../../../lit-element/index.js';
-export declare abstract class UmbTreeItemElementBase<TreeItemModelType extends UmbTreeItemModelBase> extends UmbLitElement {
+export declare abstract class UmbTreeItemElementBase<TreeItemModelType extends UmbTreeItemModel> extends UmbLitElement {
     #private;
     _item?: TreeItemModelType;
     get item(): TreeItemModelType | undefined;

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

@@ -1,8 +1,8 @@
-import type { UmbTreeItemModelBase } from '../types.js';
+import type { UmbTreeItemModel } from '../types.js';
 import type { UmbPaginationManager } from '../../utils/pagination-manager/pagination.manager.js';
 import type { Observable } from '../../../../external/rxjs/index.js';
 import type { UmbApi } from '../../../../libs/extension-api/index.js';
-export interface UmbTreeItemContext<TreeItemType extends UmbTreeItemModelBase> extends UmbApi {
+export interface UmbTreeItemContext<TreeItemType extends UmbTreeItemModel> extends UmbApi {
     unique?: string | null;
     entityType?: string;
     treeItem: Observable<TreeItemType | undefined>;