@umbraco-cms/backoffice 18.0.1 → 18.1.0-rc

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

@@ -1,30 +1,9 @@
 import { UmbTreeItemChildrenManager } from '../tree-item-children.manager.js';
-import { UmbTreeItemEntityActionManager } from '../tree-item-entity-action.manager.js';
 import { UmbTreeItemTargetExpansionManager } from '../tree-item-expansion.manager.js';
-import { UMB_TREE_CONTEXT } from '../../tree.context.token.js';
-import { UMB_TREE_ITEM_CONTEXT } from '../tree-item.context.token.js';
-import { ensureSlash } from '../../../router/index.js';
-import { map } from '../../../../../external/rxjs/index.js';
-import { UmbBooleanState, UmbObjectState, UmbStringState } from '../../../../../libs/observable-api/index.js';
-import { UmbContextBase } from '../../../../../libs/class-api/index.js';
-import { debounce } from '../../../utils/index.js';
-import { UmbEntityContext, UmbParentEntityContext } from '../../../entity/index.js';
-import { UMB_SECTION_CONTEXT } from '../../../section/index.js';
-import { UMB_WORKSPACE_EDIT_PATH_PATTERN } from '../../../workspace/index.js';
-export class UmbTreeItemContextBase extends UmbContextBase {
-    #gotTreeContext;
-    #manifest;
-    #isSelectable;
-    #isSelectableContext;
-    #isSelected;
-    #isActive;
-    #path;
+import { UmbTreeItemApiContextBase } from '../../tree-item-api/tree-item-api-context-base.js';
+import { UmbDeprecation } from '../../../utils/index.js';
+export class UmbTreeItemContextBase extends UmbTreeItemApiContextBase {
     #treeItemExpansionManager;
-    #treeItemEntityActionManager;
-    #sectionContext;
-    #entityContext;
-    #parentContext;
-    #hasActiveDescendant;
     #isMenu;
     setIsMenu(isMenu) {
         this.#isMenu = isMenu;
@@ -33,19 +12,7 @@ export class UmbTreeItemContextBase extends UmbContextBase {
         return this.#isMenu;
     }
     constructor(host) {
-        super(host, UMB_TREE_ITEM_CONTEXT);
-        this._treeItem = new UmbObjectState(undefined);
-        this.treeItem = this._treeItem.asObservable();
-        this.#isSelectable = new UmbBooleanState(false);
-        this.isSelectable = this.#isSelectable.asObservable();
-        this.#isSelectableContext = new UmbBooleanState(false);
-        this.isSelectableContext = this.#isSelectableContext.asObservable();
-        this.#isSelected = new UmbBooleanState(false);
-        this.isSelected = this.#isSelected.asObservable();
-        this.#isActive = new UmbBooleanState(false);
-        this.isActive = this.#isActive.asObservable();
-        this.#path = new UmbStringState('');
-        this.path = this.#path.asObservable();
+        super(host);
         this._treeItemChildrenManager = new UmbTreeItemChildrenManager(this);
         this.childItems = this._treeItemChildrenManager.children;
         this.hasChildren = this._treeItemChildrenManager.hasChildren;
@@ -60,12 +27,6 @@ export class UmbTreeItemContextBase extends UmbContextBase {
             targetPaginationManager: this.targetPagination,
         });
         this.isOpen = this.#treeItemExpansionManager.isExpanded;
-        this.#treeItemEntityActionManager = new UmbTreeItemEntityActionManager(this);
-        this.hasActions = this.#treeItemEntityActionManager.hasActions;
-        this.#entityContext = new UmbEntityContext(this);
-        this.#parentContext = new UmbParentEntityContext(this);
-        this.#hasActiveDescendant = new UmbBooleanState(undefined);
-        this.hasActiveDescendant = this.#hasActiveDescendant.asObservable();
         this.#isMenu = false;
         /**
          * Load children of the tree item
@@ -86,129 +47,29 @@ export class UmbTreeItemContextBase extends UmbContextBase {
          * @returns {Promise<void>}
          */
         this.loadNextItems = () => this._treeItemChildrenManager.loadNextChildren();
-        this.#checkIsActive = async () => {
-            // don't set the active state if the item is selectable
-            const isSelectable = this.#isSelectable.getValue();
-            if (isSelectable) {
-                this.#isActive.setValue(false);
-                return;
-            }
-            /* Check if the current location includes the path of this tree item.
-            We ensure that the paths ends with a slash to avoid collisions with paths like /path-1 and /path-1-2 where /path-1 is in both.
-            Instead we compare /path-1/ with /path-1-2/ which wont collide.*/
-            const location = ensureSlash(window.location.pathname);
-            const comparePath = ensureSlash(this.#path.getValue());
-            const isActive = location.includes(comparePath);
-            if (this.#isActive.getValue() === isActive)
-                return;
-            if (!this.entityType || this.unique === undefined) {
-                throw new Error('Could not check active state, entity type or unique is missing');
-            }
-            const ascending = this.getAscending();
-            // Only if this type of item has ancestors...
-            if (ascending) {
-                const path = [...ascending, { entityType: this.entityType, unique: this.unique }];
-                await this.#gotTreeContext;
-                if (isActive) {
-                    this.treeContext?.activeManager.setActive(path);
-                }
-                else {
-                    // If this is the current, then remove it:
-                    // This is a hack, where we are assuming that another active item would have made its entrance and replaced the 'active' within 2 second. [NL]
-                    // The problem is that it may take some time before an item appears in the tree and communicates that its active.
-                    // And in the meantime the removal of this would have resulted in the parent closing. And since we don't use Active state to open the tree, then we have a problem.
-                    debounce(() => this.treeContext?.activeManager.removeActiveIfMatch(path), 1000);
-                }
-            }
-            this.#isActive.setValue(isActive);
-        };
-        this.#debouncedCheckIsActive = debounce(this.#checkIsActive, 100);
         // TODO: Get take size from Tree context
         this._treeItemChildrenManager.setTakeSize(50);
-        this.#consumeContexts();
-        window.addEventListener('navigationend', this.#debouncedCheckIsActive);
-    }
-    /**
-     * Sets the manifest
-     * @param {ManifestCollection} manifest
-     * @memberof UmbCollectionContext
-     */
-    set manifest(manifest) {
-        if (this.#manifest === manifest)
-            return;
-        this.#manifest = manifest;
-    }
-    get manifest() {
-        return this.#manifest;
-    }
-    /**
-     * Returns the current path value
-     * @returns {string}
-     * @memberof UmbTreeItemContextBase
-     */
-    getPath() {
-        return this.#path.getValue();
     }
     /**
-     * Returns the ascending items of this tree item
-     * @returns {Array<UmbEntityModel>}
+     * Returns the manifest.
+     * @returns {ManifestCollection}
      * @memberof UmbTreeItemContextBase
+     * @deprecated Use the `.manifest` property instead.
      */
-    getAscending() {
-        // This should be supported for all trees.
-        return this._treeItem.getValue()?.ancestors;
+    getManifest() {
+        new UmbDeprecation({
+            removeInVersion: '18.0.0',
+            deprecated: 'getManifest',
+            solution: 'Use .manifest property instead',
+        }).warn();
+        return this.manifest;
     }
     setTreeItem(treeItem) {
-        if (!treeItem) {
-            this._treeItem.setValue(undefined);
-            this.#entityContext.setEntityType(undefined);
-            this.#entityContext.setUnique(null);
+        super.setTreeItem(treeItem);
+        if (!treeItem)
             return;
-        }
-        // Only check for undefined. The tree root has null as 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;
-        this.#entityContext.setEntityType(treeItem.entityType);
-        this.#entityContext.setUnique(treeItem.unique);
         this._treeItemChildrenManager.setTreeItem(treeItem);
         this.#treeItemExpansionManager.setTreeItem(treeItem);
-        this.#treeItemEntityActionManager.setTreeItem(treeItem);
-        const parentEntity = treeItem.parent
-            ? {
-                entityType: treeItem.parent.entityType,
-                unique: treeItem.parent.unique,
-            }
-            : undefined;
-        this.#parentContext.setParent(parentEntity);
-        this._treeItem.setValue(treeItem);
-        // Update observers:
-        this.#observeIsSelectable();
-        this.#observeIsSelected();
-        this.#observeSectionPath();
-    }
-    /**
-     * Selects the tree item
-     * @memberof UmbTreeItemContextBase
-     * @returns {void}
-     */
-    select() {
-        if (this.unique === undefined)
-            throw new Error('Could not select. Unique is missing');
-        this.treeContext?.selection.select(this.unique);
-    }
-    /**
-     * Deselects the tree item
-     * @memberof UmbTreeItemContextBase
-     * @returns {void}
-     */
-    deselect() {
-        if (this.unique === undefined)
-            throw new Error('Could not deselect. Unique is missing');
-        this.treeContext?.selection.deselect(this.unique);
     }
     showChildren() {
         const entityType = this.entityType;
@@ -220,7 +81,7 @@ export class UmbTreeItemContextBase extends UmbContextBase {
             throw new Error('Could not show children, unique is missing');
         }
         // It is the tree that keeps track of the open children. We tell the tree to open this child
-        this.treeContext?.expansion.expandItem({ entityType, unique });
+        this._treeContext?.expansion.expandItem({ entityType, unique });
     }
     hideChildren() {
         const entityType = this.entityType;
@@ -231,94 +92,27 @@ export class UmbTreeItemContextBase extends UmbContextBase {
         if (unique === undefined) {
             throw new Error('Could not show children, unique is missing');
         }
-        this.treeContext?.expansion.collapseItem({ entityType, unique });
-    }
-    async #consumeContexts() {
-        // TODO: Stop consuming the section context, instead lets get the needed data from the tree context. [NL]
-        this.consumeContext(UMB_SECTION_CONTEXT, (instance) => {
-            this.#sectionContext = instance;
-            this.#observeSectionPath();
-        });
-        this.#gotTreeContext = this.consumeContext(UMB_TREE_CONTEXT, (treeContext) => {
-            this.treeContext = treeContext;
-            this.#observeIsSelectable();
-            this.#observeIsSelected();
-            this.#observeFoldersOnly();
-            this.#observeAdditionalRequestArgs();
-            this.#observeActive();
-        }).asPromise();
-    }
-    getTreeItem() {
-        return this._treeItem.getValue();
-    }
-    #observeIsSelectable() {
-        if (!this.treeContext)
-            return;
-        this.observe(this.treeContext.selection.selectable, (value) => {
-            this.#isSelectableContext.setValue(value);
-            // If the tree is selectable, check if this item is selectable
-            if (value === true) {
-                const isSelectable = this.treeContext?.selectableFilter?.(this.getTreeItem()) ?? true;
-                this.#isSelectable.setValue(isSelectable);
-                this.#checkIsActive();
-            }
-        }, 'observeIsSelectable');
+        this._treeContext?.expansion.collapseItem({ entityType, unique });
     }
-    #observeIsSelected() {
-        if (!this.treeContext || this.unique === undefined)
-            return;
-        this.observe(this.treeContext.selection.selection.pipe(map((selection) => selection.includes(this.unique))), (isSelected) => {
-            this.#isSelected.setValue(isSelected);
-        }, 'observeIsSelected');
+    _onTreeContextChanged(context) {
+        super._onTreeContextChanged(context);
+        this.#observeFoldersOnly();
+        this.#observeAdditionalRequestArgs();
     }
     #observeFoldersOnly() {
         if (this.unique === undefined)
             return;
-        this.observe(this.treeContext?.foldersOnly, (foldersOnly) => {
+        this.observe(this._treeContext?.foldersOnly, (foldersOnly) => {
             this._treeItemChildrenManager.setFoldersOnly(foldersOnly ?? false);
         }, 'observeFoldersOnly');
     }
     #observeAdditionalRequestArgs() {
         if (this.unique === undefined)
             return;
-        this.observe(this.treeContext?.additionalRequestArgs, (additionalRequestArgs) => {
+        this.observe(this._treeContext?.additionalRequestArgs, (additionalRequestArgs) => {
             if (!additionalRequestArgs)
                 return;
             this._treeItemChildrenManager.setAdditionalRequestArgs(additionalRequestArgs);
         }, 'observeAdditionalRequestArgs');
     }
-    #observeActive() {
-        if (this.unique === undefined || this.entityType === undefined)
-            return;
-        const entity = { entityType: this.entityType, unique: this.unique };
-        this.observe(this.treeContext?.activeManager.hasActiveDescendants(entity), (hasActiveDescendant) => {
-            if (this.#hasActiveDescendant.getValue() === undefined && hasActiveDescendant === false) {
-                return;
-            }
-            this.#hasActiveDescendant.setValue(hasActiveDescendant);
-        }, 'observeActiveDescendant');
-    }
-    #observeSectionPath() {
-        this.observe(this.#sectionContext?.pathname, (pathname) => {
-            if (!pathname || !this.entityType || this.unique === undefined)
-                return;
-            const path = this.constructPath(pathname, this.entityType, this.unique);
-            this.#path.setValue(path);
-            this.#checkIsActive();
-        }, 'observeSectionPath');
-    }
-    #checkIsActive;
-    #debouncedCheckIsActive;
-    // TODO: use router context
-    constructPath(pathname, entityType, unique) {
-        return UMB_WORKSPACE_EDIT_PATH_PATTERN.generateAbsolute({
-            sectionName: pathname,
-            entityType,
-            unique: unique ?? 'null',
-        });
-    }
-    destroy() {
-        window.removeEventListener('navigationend', this.#debouncedCheckIsActive);
-        super.destroy();
-    }
 }

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

@@ -8,26 +8,6 @@ export declare abstract class UmbTreeItemElementBase<TreeItemModelType extends U
     set item(newVal: TreeItemModelType);
     get item(): TreeItemModelType | undefined;
     protected _item?: TreeItemModelType;
-    /**
-     * @internal
-     * Indicates whether the user has no access to this tree item.
-     * This property is reflected as an attribute for styling purposes.
-     *
-     * **Usage Pattern (opt-in):**
-     * Child classes that support access restrictions should observe their context's `noAccess` observable
-     * and update this property. The base class provides the property, styling, and interaction prevention,
-     * but does not subscribe to the observable to avoid forcing all tree item types to implement it.
-     *
-     * **Example (in child class api setter):**
-     * ```typescript
-     * this.observe(this.#api.noAccess, (noAccess) => (this._noAccess = noAccess));
-     * ```
-     *
-     * **Why not in the base interface?**
-     * Adding `noAccess` to `UmbTreeItemContext` would be a breaking change, forcing all tree item
-     * implementations (users, members, data types, etc.) to provide this property even when access
-     * restrictions don't apply to them.
-     */
     protected _noAccess: boolean;
     /**
      * @param item - The item from which to extract flags.
@@ -48,13 +28,13 @@ export declare abstract class UmbTreeItemElementBase<TreeItemModelType extends U
     private _isLoading;
     private _isSelectableContext;
     private _isSelectable;
+    private _selectOnly;
     protected _isSelected: boolean;
     private _hasChildren;
     protected _forceShowExpand: boolean;
     private _isOpen;
     private _iconSlotHasChildren;
     private _totalPages;
-    private _currentPage;
     private _hasPreviousItems;
     private _hasNextItems;
     protected _isMenu: boolean;

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

@@ -10,26 +10,6 @@ import { UmbTextStyles } from '../../../style/index.js';
 export class UmbTreeItemElementBase extends UmbLitElement {
     constructor() {
         super(...arguments);
-        /**
-         * @internal
-         * Indicates whether the user has no access to this tree item.
-         * This property is reflected as an attribute for styling purposes.
-         *
-         * **Usage Pattern (opt-in):**
-         * Child classes that support access restrictions should observe their context's `noAccess` observable
-         * and update this property. The base class provides the property, styling, and interaction prevention,
-         * but does not subscribe to the observable to avoid forcing all tree item types to implement it.
-         *
-         * **Example (in child class api setter):**
-         * ```typescript
-         * this.observe(this.#api.noAccess, (noAccess) => (this._noAccess = noAccess));
-         * ```
-         *
-         * **Why not in the base interface?**
-         * Adding `noAccess` to `UmbTreeItemContext` would be a breaking change, forcing all tree item
-         * implementations (users, members, data types, etc.) to provide this property even when access
-         * restrictions don't apply to them.
-         */
         this._noAccess = false;
         this._isLoadingPrevChildren = false;
         this._isLoadingNextChildren = false;
@@ -38,13 +18,13 @@ export class UmbTreeItemElementBase extends UmbLitElement {
         this._isLoading = false;
         this._isSelectableContext = false;
         this._isSelectable = false;
+        this._selectOnly = false;
         this._isSelected = false;
         this._hasChildren = false;
         this._forceShowExpand = false;
         this._isOpen = false;
         this._iconSlotHasChildren = false;
         this._totalPages = 1;
-        this._currentPage = 1;
         this._hasPreviousItems = false;
         this._hasNextItems = false;
         this._isMenu = false;
@@ -82,9 +62,10 @@ export class UmbTreeItemElementBase extends UmbLitElement {
             this.observe(this.#api.isLoading, (value) => (this._isLoading = value), '_observeIsLoading');
             this.observe(this.#api.isSelectableContext, (value) => (this._isSelectableContext = value), '_observeIsSelectableContext');
             this.observe(this.#api.isSelectable, (value) => (this._isSelectable = value), '_observeIsSelectable');
+            this.observe(this.#api.selectOnly, (value) => (this._selectOnly = value), '_observeSelectOnly');
             this.observe(this.#api.isSelected, (value) => (this._isSelected = value), '_observeIsSelected');
+            this.observe(this.#api.noAccess, (value) => (this._noAccess = value), '_observeNoAccess');
             this.observe(this.#api.path, (value) => (this._href = value), '_observePath');
-            this.observe(this.#api.pagination.currentPage, (value) => (this._currentPage = value), '_observeCurrentPage');
             this.observe(this.#api.pagination.totalPages, (value) => (this._totalPages = value), '_observeTotalPages');
             this.observe(this.#api.isLoadingPrevChildren, (value) => (this._isLoadingPrevChildren = value ?? false), '_observeIsLoadingPrevChildren');
             this.observe(this.#api.isLoadingNextChildren, (value) => (this._isLoadingNextChildren = value ?? false), '_observeIsLoadingNextChildren');
@@ -119,6 +100,12 @@ export class UmbTreeItemElementBase extends UmbLitElement {
         event.stopPropagation();
         this.#api?.deselect();
     }
+    #handleDblClick(event) {
+        if (!this._item?.hasChildren)
+            return;
+        event.stopPropagation();
+        this.#api?.open();
+    }
     _onShowChildren(event) {
         event.stopPropagation();
         // Prevent default cause we will now control the show-children state ourself.
@@ -137,8 +124,7 @@ export class UmbTreeItemElementBase extends UmbLitElement {
     }
     #onLoadNext(event) {
         event.stopPropagation();
-        const next = (this._currentPage = this._currentPage + 1);
-        this.#api?.pagination.setCurrentPageNumber(next);
+        this.#api?.loadNextItems?.();
     }
     // Note: Currently we want to prevent opening when the item is in a selectable context, but this might change in the future.
     // If we like to be able to open items in selectable context, then we might want to make it as a menu item action, so you have to click ... and chose an action called 'Edit'
@@ -153,7 +139,7 @@ export class UmbTreeItemElementBase extends UmbLitElement {
 				@selected=${this._handleSelectedItem}
 				@deselected=${this._handleDeselectedItem}
 				?active=${this._isActive}
-				?disabled=${(this._isSelectableContext && !this._isSelectable) || this._noAccess}
+				?disabled=${this._noAccess || (this._isSelectableContext && !this._isSelectable)}
 				?selectable=${this._isSelectable}
 				?selected=${this._isSelected}
 				.loading=${this._isLoading}
@@ -209,7 +195,7 @@ export class UmbTreeItemElementBase extends UmbLitElement {
         return this._item?.icon;
     }
     renderLabel() {
-        return html `<slot name="label" slot="label"></slot>`;
+        return html `<span slot="label" @dblclick=${this.#handleDblClick}>${this._label}<slot name="label"></slot></span>`;
     }
     #renderActions() {
         if (this.hideActions)
@@ -327,6 +313,9 @@ __decorate([
 __decorate([
     state()
 ], UmbTreeItemElementBase.prototype, "_isSelectable", void 0);
+__decorate([
+    state()
+], UmbTreeItemElementBase.prototype, "_selectOnly", void 0);
 __decorate([
     state()
 ], UmbTreeItemElementBase.prototype, "_isSelected", void 0);
@@ -345,9 +334,6 @@ __decorate([
 __decorate([
     state()
 ], UmbTreeItemElementBase.prototype, "_totalPages", void 0);
-__decorate([
-    state()
-], UmbTreeItemElementBase.prototype, "_currentPage", void 0);
 __decorate([
     state()
 ], UmbTreeItemElementBase.prototype, "_hasPreviousItems", void 0);

package/dist-cms/packages/core/tree/tree-item/tree-item-children.manager.d.ts

@@ -9,6 +9,7 @@ export declare class UmbTreeItemChildrenManager<TreeItemType extends UmbTreeItem
     readonly offsetPagination: UmbPaginationManager;
     readonly targetPagination: UmbTargetPaginationManager<UmbEntityModel>;
     readonly children: import("rxjs").Observable<TreeItemType[]>;
+    readonly currentPageChildren: import("rxjs").Observable<TreeItemType[]>;
     readonly hasChildren: import("rxjs").Observable<boolean>;
     readonly treeItem: import("rxjs").Observable<TreeItemType | TreeRootType | undefined>;
     readonly foldersOnly: import("rxjs").Observable<boolean>;
@@ -103,5 +104,6 @@ export declare class UmbTreeItemChildrenManager<TreeItemType extends UmbTreeItem
      * @memberof UmbRepositoryTreeItemChildrenManager
      */
     clear(): void;
+    loadPage(pageNumber: number): Promise<void>;
     destroy(): void;
 }

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

@@ -2,7 +2,6 @@ import { UMB_TREE_CONTEXT } from '../tree.context.token.js';
 import { UmbRequestReloadTreeItemChildrenEvent } from '../entity-actions/reload-tree-item-children/index.js';
 import { UMB_TREE_ITEM_CONTEXT } from './tree-item.context.token.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
-import { UmbChangeEvent } from '../../event/index.js';
 import { UmbArrayState, UmbBooleanState, UmbObjectState } from '../../../../libs/observable-api/index.js';
 import { UmbPaginationManager, UmbTargetPaginationManager, } from '../../utils/index.js';
 import { UMB_ACTION_EVENT_CONTEXT } from '../../action/index.js';
@@ -10,6 +9,7 @@ import { UmbHasChildrenEntityContext, UmbRequestReloadChildrenOfEntityEvent, Umb
 import { UMB_NOTIFICATION_CONTEXT } from '../../notification/index.js';
 export class UmbTreeItemChildrenManager extends UmbControllerBase {
     #children;
+    #currentPageChildren;
     #hasChildren;
     #hasChildrenContext;
     #treeItem;
@@ -32,6 +32,8 @@ export class UmbTreeItemChildrenManager extends UmbControllerBase {
         this.targetPagination = new UmbTargetPaginationManager(this);
         this.#children = new UmbArrayState([], (x) => x.unique);
         this.children = this.#children.asObservable();
+        this.#currentPageChildren = new UmbArrayState([], (x) => x.unique);
+        this.currentPageChildren = this.#currentPageChildren.asObservable();
         this.#hasChildren = new UmbBooleanState(false);
         this.hasChildren = this.#hasChildren.asObservable();
         this.#hasChildrenContext = new UmbHasChildrenEntityContext(this);
@@ -54,28 +56,33 @@ export class UmbTreeItemChildrenManager extends UmbControllerBase {
         this.#loadChildrenRetries = 0;
         this.#loadPrevItemsRetries = 0;
         this.#loadNextItemsRetries = 0;
-        this.#onPageChange = () => this.loadNextChildren();
         this.#onReloadChildrenRequest = (event) => {
-            const entityType = this.getTreeItem()?.entityType;
-            const unique = this.getTreeItem()?.unique;
-            if (event.getEntityType() !== entityType)
+            // Match against the parent we actually load children for. When drilled into a start node
+            // the children belong to the start node, not the tree root held by getTreeItem().
+            const parent = this.getStartNode() || this.getTreeItem();
+            if (event.getEntityType() !== parent?.entityType)
                 return;
-            if (event.getUnique() !== unique)
+            if (event.getUnique() !== parent?.unique)
                 return;
             this.reloadChildren();
         };
         this.#onReloadStructureForEntityRequest = async (event) => {
-            const entityType = this.getTreeItem()?.entityType;
-            const unique = this.getTreeItem()?.unique;
-            if (event.getEntityType() !== entityType)
+            const entity = { entityType: event.getEntityType(), unique: event.getUnique() };
+            // A child we are currently displaying changed its structure (e.g. was deleted, moved or
+            // renamed). Reload our own children so the change is reflected. This is the manager that
+            // owns the displayed list, so it also covers flat card/table views where the children have
+            // no individual tree-item context to react on their own behalf.
+            if (this.isChildLoaded(entity)) {
+                this.reloadChildren();
                 return;
-            if (event.getUnique() !== unique)
-                return;
-            if (this.#parentTreeItemContext) {
-                this.#parentTreeItemContext.reloadChildren();
             }
-            else if (this.#treeContext) {
-                this.#treeContext.reloadTree();
+            // Our own item changed and no parent manager displays us as a child (we are the
+            // root/context-level manager). Reload the whole tree so the change is picked up.
+            const treeItem = this.getTreeItem();
+            if (!this.#parentTreeItemContext &&
+                event.getEntityType() === treeItem?.entityType &&
+                event.getUnique() === treeItem?.unique) {
+                this.#treeContext?.reloadTree();
             }
         };
         this.#removeEventListeners = () => {
@@ -83,8 +90,6 @@ export class UmbTreeItemChildrenManager extends UmbControllerBase {
             this.#actionEventContext?.removeEventListener(UmbRequestReloadChildrenOfEntityEvent.TYPE, this.#onReloadChildrenRequest);
             this.#actionEventContext?.removeEventListener(UmbRequestReloadStructureForEntityEvent.TYPE, this.#onReloadStructureForEntityRequest);
         };
-        // listen for page changes on the pagination manager
-        this.offsetPagination.addEventListener(UmbChangeEvent.TYPE, this.#onPageChange);
         this.#listenForActionEvents();
         this.consumeContext(UMB_TREE_CONTEXT, (treeContext) => {
             this.#treeContext = treeContext;
@@ -221,7 +226,13 @@ export class UmbTreeItemChildrenManager extends UmbControllerBase {
         const baseTarget = this.targetPagination.getBaseTarget();
         // When reloading we only want to send the target values with the request if we can find the target to reload from.
         const canSendTarget = reload === false || (reload && this.targetPagination.hasBaseTargetInCurrentItems());
-        const targetPaging = baseTarget && baseTarget.unique && canSendTarget
+        // If all known items fit within a single page, skip target pagination and load from
+        // the start instead, this prevents "show more" appearing on small lists after operations
+        // that change item order like sort children.
+        const hasCustomTargetWindow = this.#takeBeforeTarget !== undefined || this.#takeAfterTarget !== undefined;
+        const totalKnownItems = this.offsetPagination.getTotalItems();
+        const fitsInSinglePage = !hasCustomTargetWindow && reload && totalKnownItems > 0 && totalKnownItems <= this.offsetPagination.getPageSize();
+        const targetPaging = !fitsInSinglePage && baseTarget && baseTarget.unique && canSendTarget
             ? {
                 target: {
                     unique: baseTarget.unique,
@@ -286,6 +297,7 @@ export class UmbTreeItemChildrenManager extends UmbControllerBase {
         if (data) {
             const items = data.items;
             this.#children.setValue(items);
+            this.#currentPageChildren.setValue(items);
             this.setHasChildren(data.total > 0);
             this.offsetPagination.setTotalItems(data.total);
             this.targetPagination.setCurrentItems(items);
@@ -416,8 +428,10 @@ export class UmbTreeItemChildrenManager extends UmbControllerBase {
         if (data) {
             const items = data.items;
             this.#children.append(items);
+            this.#currentPageChildren.setValue(items);
             this.setHasChildren(data.total > 0);
             this.offsetPagination.setTotalItems(data.total);
+            this.offsetPagination.setCurrentPageNumber(this.offsetPagination.getCurrentPageNumber() + 1);
             this.targetPagination.appendCurrentItems(data.items);
             this.targetPagination.setTotalItems(data.total);
             this.targetPagination.setTotalItemsAfterEndTarget(data.totalAfter);
@@ -451,6 +465,7 @@ export class UmbTreeItemChildrenManager extends UmbControllerBase {
      */
     clear() {
         this.#children.setValue([]);
+        this.#currentPageChildren.setValue([]);
         this.offsetPagination.clear();
         this.targetPagination.clear();
     }
@@ -516,7 +531,11 @@ export class UmbTreeItemChildrenManager extends UmbControllerBase {
             });
         }
     }
-    #onPageChange;
+    async loadPage(pageNumber) {
+        this.offsetPagination.setCurrentPageNumber(pageNumber);
+        this.#children.setValue([]);
+        await this.#loadChildren();
+    }
     #listenForActionEvents() {
         this.consumeContext(UMB_ACTION_EVENT_CONTEXT, (instance) => {
             this.#removeEventListeners();

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

@@ -1,38 +1,23 @@
+import type { UmbTreeItemApi } from '../tree-item-api/tree-item-api.interface.js';
 import type { UmbTreeItemModel } from '../types.js';
 import type { UmbPaginationManager } from '../../utils/index.js';
 import type { Observable } from '../../../../external/rxjs/index.js';
-import type { UmbApi } from '../../../../libs/extension-api/index.js';
-import type { UmbContextMinimal } from '../../../../libs/context-api/index.js';
 import type { UmbTargetPaginationManager } from '../../utils/index.js';
-export interface UmbTreeItemContext<TreeItemType extends UmbTreeItemModel = UmbTreeItemModel> extends UmbApi, UmbContextMinimal {
-    unique?: string | null;
-    entityType?: string;
-    treeItem: Observable<TreeItemType | undefined>;
+export interface UmbTreeItemContext<TreeItemType extends UmbTreeItemModel = UmbTreeItemModel> extends UmbTreeItemApi<TreeItemType> {
     childItems: Observable<TreeItemType[]>;
     hasChildren: Observable<boolean>;
     isLoading: Observable<boolean>;
-    isSelectableContext: Observable<boolean>;
-    isSelectable: Observable<boolean>;
-    isSelected: Observable<boolean>;
-    isActive: Observable<boolean>;
     isOpen: Observable<boolean>;
-    hasActions: Observable<boolean>;
-    path: Observable<string>;
     pagination: UmbPaginationManager;
     targetPagination: UmbTargetPaginationManager;
-    getTreeItem(): TreeItemType | undefined;
-    setTreeItem(treeItem: TreeItemType | undefined): void;
-    select(): void;
-    deselect(): void;
-    constructPath(pathname: string, entityType: string, unique: string): string;
+    isLoadingPrevChildren: Observable<boolean>;
+    isLoadingNextChildren: Observable<boolean>;
     loadChildren(): void;
     reloadChildren(): void;
     showChildren(): void;
     hideChildren(): void;
     loadPrevItems(): void;
     loadNextItems(): void;
-    isLoadingPrevChildren: Observable<boolean>;
-    isLoadingNextChildren: Observable<boolean>;
     setIsMenu(isMenu: boolean): void;
     getIsMenu(): boolean;
 }