@umbraco-cms/backoffice 18.2.1 → 18.3.0-rc

package/dist-cms/packages/core/tree/entity-actions/sort-children-of/modal/sort-children-of-modal.element.js

@@ -8,9 +8,12 @@ import { css, customElement, html, nothing, state } from '../../../../../../exte
 import { createExtensionApiByAlias } from '../../../../extension-registry/index.js';
 import { observeMultiple } from '../../../../../../libs/observable-api/index.js';
 import { UmbModalBaseElement } from '../../../../modal/index.js';
-import { UmbPaginationManager } from '../../../../utils/index.js';
+import { UmbDirection, UmbPaginationManager } from '../../../../utils/index.js';
+const UMB_SORT_TAB_INDIVIDUALLY = 'individually';
+const UMB_SORT_TAB_BY_FIELD = 'byField';
 let UmbSortChildrenOfModalElement = class UmbSortChildrenOfModalElement extends UmbModalBaseElement {
     #pagination;
+    #sortChildrenOfRepository;
     constructor() {
         super();
         this._children = [];
@@ -23,6 +26,10 @@ let UmbSortChildrenOfModalElement = class UmbSortChildrenOfModalElement extends
         this._tableItems = [];
         this._sortable = false;
         this._loading = false;
+        this._activeTab = UMB_SORT_TAB_INDIVIDUALLY;
+        this._supportsSortByField = false;
+        this._sortByFieldOptions = [];
+        this._selectedDirection = UmbDirection.ASCENDING;
         this._sortedUniques = new Set();
         this.#pagination = new UmbPaginationManager();
         this.#pagination.setPageSize(50);
@@ -40,10 +47,52 @@ let UmbSortChildrenOfModalElement = class UmbSortChildrenOfModalElement extends
             },
         ];
     }
+    /**
+     * The arguments used when sorting by field.
+     * Override in an entity-specific subclass to supply further arguments accepted by its repository.
+     * @returns {UmbSortChildrenOfByFieldArgs} the sort arguments
+     */
+    _getSortByFieldArgs() {
+        return {
+            unique: this.data.unique,
+            field: this._selectedField,
+            direction: this._selectedDirection,
+        };
+    }
+    /**
+     * Additional controls rendered at the end of the "Sort by field" sentence.
+     * Override in an entity-specific subclass to offer the further arguments its repository accepts.
+     * @returns {TemplateResult | typeof nothing} the rendered controls
+     */
+    _renderAdditionalSortByFieldOptions() {
+        return nothing;
+    }
     async firstUpdated(_changedProperties) {
         super.firstUpdated(_changedProperties);
         await this.#requestChildren();
         this._setTableColumns();
+        await this.#initSortByField();
+    }
+    async #initSortByField() {
+        try {
+            const repository = await this.#getSortChildrenOfRepository();
+            if (!repository.sortChildrenOfByField || !repository.requestSortByFieldOptions)
+                return;
+            this._sortByFieldOptions = await repository.requestSortByFieldOptions();
+            this._selectedField = this._sortByFieldOptions[0]?.value;
+            this._supportsSortByField = this._sortByFieldOptions.length > 0;
+        }
+        catch {
+            this._supportsSortByField = false;
+        }
+    }
+    async #getSortChildrenOfRepository() {
+        if (!this.#sortChildrenOfRepository) {
+            if (!this.data?.sortChildrenOfRepositoryAlias)
+                throw new Error('sortChildrenOfRepositoryAlias is required');
+            this.#sortChildrenOfRepository = await createExtensionApiByAlias(this, this.data.sortChildrenOfRepositoryAlias);
+        }
+        return this.#sortChildrenOfRepository;
     }
     async #requestChildren() {
         if (this.data?.unique === undefined)
@@ -104,15 +153,15 @@ let UmbSortChildrenOfModalElement = class UmbSortChildrenOfModalElement extends
         if (this._submitButtonState === 'waiting')
             return;
         event?.stopPropagation();
-        if (!this.data?.sortChildrenOfRepositoryAlias)
-            throw new Error('sortChildrenOfRepositoryAlias is required');
         this._submitButtonState = 'waiting';
         try {
-            const sortChildrenOfRepository = await createExtensionApiByAlias(this, this.data.sortChildrenOfRepositoryAlias);
-            const { error } = await sortChildrenOfRepository.sortChildrenOf({
-                unique: this.data.unique,
-                sorting: this.#getSortOrderOfSortedItems(),
-            });
+            const repository = await this.#getSortChildrenOfRepository();
+            const { error } = this._supportsSortByField && this._activeTab === UMB_SORT_TAB_BY_FIELD
+                ? await this.#sortByField(repository)
+                : await repository.sortChildrenOf({
+                    unique: this.data.unique,
+                    sorting: this.#getSortOrderOfSortedItems(),
+                });
             if (!error) {
                 this._submitButtonState = 'success';
                 this._submitModal();
@@ -126,6 +175,11 @@ let UmbSortChildrenOfModalElement = class UmbSortChildrenOfModalElement extends
             throw error;
         }
     }
+    #sortByField(repository) {
+        if (!repository.sortChildrenOfByField)
+            throw new Error('sortChildrenOfByField is not supported');
+        return repository.sortChildrenOfByField(this._getSortByFieldArgs());
+    }
     #getSortOrderOfSortedItems() {
         const sorting = [];
         // get the new sort order from the sorted uniques
@@ -171,10 +225,18 @@ let UmbSortChildrenOfModalElement = class UmbSortChildrenOfModalElement extends
         }
         return 0;
     }
+    #onFieldChange(event) {
+        this._selectedField = event.target.value;
+    }
+    #onDirectionChange(event) {
+        this._selectedDirection = event.target.value;
+    }
     render() {
+        const hasChildren = this._children.length > 0;
         return html `
 			<umb-body-layout headline=${this.localize.term('actions_sort')}>
-				${this._children.length === 0 ? this.#renderEmptyState() : this.#renderTable()}
+				${hasChildren && this._supportsSortByField ? this.#renderTabs() : nothing}
+				${hasChildren ? this.#renderActiveView() : this.#renderEmptyState()}
 				<uui-button
 					slot="actions"
 					label=${this.localize.term('general_cancel')}
@@ -189,12 +251,75 @@ let UmbSortChildrenOfModalElement = class UmbSortChildrenOfModalElement extends
 			</umb-body-layout>
 		`;
     }
+    #renderTabs() {
+        return html `
+			<uui-tab-group slot="navigation">
+				<uui-tab
+					label=${this.localize.term('sort_sortIndividuallyHeadline')}
+					data-mark="sort-children-of-modal:tab-individually"
+					?active=${this._activeTab === UMB_SORT_TAB_INDIVIDUALLY}
+					@click=${() => (this._activeTab = UMB_SORT_TAB_INDIVIDUALLY)}>
+					<umb-icon slot="icon" name="icon-grip"></umb-icon>
+					${this.localize.term('sort_sortIndividuallyHeadline')}
+				</uui-tab>
+				<uui-tab
+					label=${this.localize.term('sort_sortByFieldHeadline')}
+					data-mark="sort-children-of-modal:tab-by-field"
+					?active=${this._activeTab === UMB_SORT_TAB_BY_FIELD}
+					@click=${() => (this._activeTab = UMB_SORT_TAB_BY_FIELD)}>
+					<umb-icon slot="icon" name="icon-ordered-list"></umb-icon>
+					${this.localize.term('sort_sortByFieldHeadline')}
+				</uui-tab>
+			</uui-tab-group>
+		`;
+    }
+    #renderActiveView() {
+        if (this._supportsSortByField && this._activeTab === UMB_SORT_TAB_BY_FIELD) {
+            return this.#renderSortByFieldView();
+        }
+        return this.#renderIndividuallyView();
+    }
     #renderEmptyState() {
         return html `
 			<uui-label><umb-localize key="sort_sortEmptyState">This node has no child nodes to sort</umb-localize></uui-label>
 		`;
     }
-    #renderTable() {
+    #renderSortByFieldView() {
+        const fieldOptions = this._sortByFieldOptions.map((option) => ({
+            name: this.localize.string(option.label),
+            value: option.value,
+            selected: option.value === this._selectedField,
+        }));
+        const directionOptions = [
+            {
+                name: this.localize.term('sort_sortByFieldAscending'),
+                value: UmbDirection.ASCENDING,
+                selected: this._selectedDirection === UmbDirection.ASCENDING,
+            },
+            {
+                name: this.localize.term('sort_sortByFieldDescending'),
+                value: UmbDirection.DESCENDING,
+                selected: this._selectedDirection === UmbDirection.DESCENDING,
+            },
+        ];
+        return html `
+			<uui-box>
+				<div id="sort-by-field">
+					<span><umb-localize key="sort_sortByFieldSentence">Sort all children by</umb-localize></span>
+					<uui-select
+						label=${this.localize.term('sort_sortByFieldHeadline')}
+						.options=${fieldOptions}
+						@change=${this.#onFieldChange}></uui-select>
+					<uui-select
+						label=${this.localize.term('sort_sortByFieldDirectionLabel')}
+						.options=${directionOptions}
+						@change=${this.#onDirectionChange}></uui-select>
+					${this._renderAdditionalSortByFieldOptions()}
+				</div>
+			</uui-box>
+		`;
+    }
+    #renderIndividuallyView() {
         return html `
 			<umb-table
 				.config=${this._tableConfig}
@@ -216,6 +341,19 @@ let UmbSortChildrenOfModalElement = class UmbSortChildrenOfModalElement extends
     }
     static { this.styles = [
         css `
+			uui-tab-group {
+				--uui-tab-divider: var(--uui-color-border);
+				border-left: 1px solid var(--uui-color-border);
+				border-right: 1px solid var(--uui-color-border);
+			}
+
+			#sort-by-field {
+				display: flex;
+				gap: var(--uui-size-space-3);
+				align-items: center;
+				flex-wrap: wrap;
+			}
+
 			#loadMoreButton {
 				width: 100%;
 				margin-top: var(--uui-size-space-3);
@@ -250,6 +388,21 @@ __decorate([
 __decorate([
     state()
 ], UmbSortChildrenOfModalElement.prototype, "_submitButtonState", void 0);
+__decorate([
+    state()
+], UmbSortChildrenOfModalElement.prototype, "_activeTab", void 0);
+__decorate([
+    state()
+], UmbSortChildrenOfModalElement.prototype, "_supportsSortByField", void 0);
+__decorate([
+    state()
+], UmbSortChildrenOfModalElement.prototype, "_sortByFieldOptions", void 0);
+__decorate([
+    state()
+], UmbSortChildrenOfModalElement.prototype, "_selectedField", void 0);
+__decorate([
+    state()
+], UmbSortChildrenOfModalElement.prototype, "_selectedDirection", void 0);
 UmbSortChildrenOfModalElement = __decorate([
     customElement('umb-sort-children-of-modal')
 ], UmbSortChildrenOfModalElement);

package/dist-cms/packages/core/tree/entity-actions/sort-children-of/sort-children-of-data-source.interface.d.ts

@@ -1,5 +1,17 @@
-import type { UmbSortChildrenOfArgs } from './types.js';
+import type { UmbSortChildrenOfArgs, UmbSortChildrenOfByFieldArgs } from './types.js';
 import type { UmbDataSourceErrorResponse } from '../../../repository/index.js';
 export interface UmbSortChildrenOfDataSource {
+    /**
+     * Persists an explicit sort order for the children of an entity.
+     * @param {UmbSortChildrenOfArgs} args - the parent and the ordered children
+     * @returns {Promise<UmbDataSourceErrorResponse>} the result of the operation
+     */
     sortChildrenOf(args: UmbSortChildrenOfArgs): Promise<UmbDataSourceErrorResponse>;
+    /**
+     * Sorts the children of an entity by a single field on the server.
+     * Optional: only implemented by data sources whose entity supports server-side field sorting.
+     * @param {UmbSortChildrenOfByFieldArgs} args - the parent, field and direction
+     * @returns {Promise<UmbDataSourceErrorResponse>} the result of the operation
+     */
+    sortChildrenOfByField?(args: UmbSortChildrenOfByFieldArgs): Promise<UmbDataSourceErrorResponse>;
 }

package/dist-cms/packages/core/tree/entity-actions/sort-children-of/sort-children-of-repository.interface.d.ts

@@ -1,6 +1,24 @@
-import type { UmbSortChildrenOfArgs } from './types.js';
+import type { UmbSortChildrenByFieldOption, UmbSortChildrenOfArgs, UmbSortChildrenOfByFieldArgs } from './types.js';
 import type { UmbRepositoryErrorResponse } from '../../../repository/index.js';
 import type { UmbApi } from '../../../../../libs/extension-api/index.js';
 export interface UmbSortChildrenOfRepository extends UmbApi {
+    /**
+     * Persists an explicit sort order for the children of an entity.
+     * @param {UmbSortChildrenOfArgs} args - the parent and the ordered children
+     * @returns {Promise<UmbRepositoryErrorResponse>} the result of the operation
+     */
     sortChildrenOf(args: UmbSortChildrenOfArgs): Promise<UmbRepositoryErrorResponse>;
+    /**
+     * Sorts the children of an entity by a single field on the server.
+     * Optional: only implemented by repositories whose entity supports server-side field sorting.
+     * @param {UmbSortChildrenOfByFieldArgs} args - the parent, field and direction
+     * @returns {Promise<UmbRepositoryErrorResponse>} the result of the operation
+     */
+    sortChildrenOfByField?(args: UmbSortChildrenOfByFieldArgs): Promise<UmbRepositoryErrorResponse>;
+    /**
+     * Requests the fields the children of an entity can be sorted by on the server.
+     * Optional: only implemented by repositories whose entity supports server-side field sorting.
+     * @returns {Promise<Array<UmbSortChildrenByFieldOption>>} the available fields
+     */
+    requestSortByFieldOptions?(): Promise<Array<UmbSortChildrenByFieldOption>>;
 }

package/dist-cms/packages/core/tree/entity-actions/sort-children-of/types.d.ts

@@ -1,4 +1,5 @@
 import type { ManifestEntityAction, MetaEntityActionDefaultKind } from '../../../entity-action/index.js';
+import type { UmbDirectionType } from '../../../utils/index.js';
 export type { UmbSortChildrenOfRepository } from './sort-children-of-repository.interface.js';
 export type { UmbSortChildrenOfDataSource } from './sort-children-of-data-source.interface.js';
 export type * from './modal/types.js';
@@ -9,6 +10,31 @@ export interface UmbSortChildrenOfArgs {
         sortOrder: number;
     }>;
 }
+/**
+ * Arguments for sorting the children of an entity by a single field on the server.
+ */
+export interface UmbSortChildrenOfByFieldArgs {
+    unique: string | null;
+    /**
+     * The field to sort by. The accepted values are defined by the entity's server endpoint
+     * (e.g. the Content sort fields for documents and media).
+     */
+    field: string;
+    direction: UmbDirectionType;
+}
+/**
+ * An option shown in the "Sort by field" view of the sort children modal.
+ */
+export interface UmbSortChildrenByFieldOption {
+    /**
+     * The field value sent to the server (see {@link UmbSortChildrenOfByFieldArgs.field}).
+     */
+    value: string;
+    /**
+     * The label shown to the user. Localization keys prefixed with `#` are resolved before display.
+     */
+    label: string;
+}
 export interface ManifestEntityActionSortChildrenOfKind extends ManifestEntityAction<MetaEntityActionSortChildrenOfKind> {
     type: 'entityAction';
     kind: 'sortChildrenOf';

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

@@ -1,5 +1,5 @@
 import { UMB_ACTION_EVENT_CONTEXT } from '../../../../action/index.js';
-import { UmbEntityActionBase, UmbRequestReloadStructureForEntityEvent } from '../../../../entity-action/index.js';
+import { UmbEntityActionBase, UmbEntityDeletedEvent, UmbRequestReloadStructureForEntityEvent, } from '../../../../entity-action/index.js';
 import { createExtensionApiByAlias } from '../../../../extension-registry/index.js';
 import { umbConfirmModal } from '../../../../modal/index.js';
 export class UmbDeleteFolderEntityAction extends UmbEntityActionBase {
@@ -23,6 +23,11 @@ export class UmbDeleteFolderEntityAction extends UmbEntityActionBase {
             const actionEventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
             if (!actionEventContext)
                 throw new Error('Action event context is missing');
+            const deletedEvent = new UmbEntityDeletedEvent({
+                unique: this.args.unique,
+                entityType: this.args.entityType,
+            });
+            actionEventContext.dispatchEvent(deletedEvent);
             const event = new UmbRequestReloadStructureForEntityEvent({
                 unique: this.args.unique,
                 entityType: this.args.entityType,

package/dist-cms/packages/core/tree/folder/workspace/folder-workspace-editor.element.js

@@ -9,10 +9,10 @@ import { UmbLitElement } from '../../../lit-element/index.js';
 import { UmbTextStyles } from '../../../style/index.js';
 let UmbFolderWorkspaceEditorElement = class UmbFolderWorkspaceEditorElement extends UmbLitElement {
     render() {
-        return html `<umb-workspace-editor>
+        return html `<umb-entity-detail-workspace-editor>
 			<umb-icon id="icon" slot="header" name="icon-folder"></umb-icon>
 			<umb-workspace-header-name-editable slot="header"></umb-workspace-header-name-editable>
-		</umb-workspace-editor>`;
+		</umb-entity-detail-workspace-editor>`;
     }
     static { this.styles = [
         UmbTextStyles,

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

@@ -11,7 +11,7 @@ export * from './entity-actions/sort-children-of/index.js';
 export * from './folder/index.js';
 export * from './tree-item/index.js';
 export * from './tree-item-api/index.js';
-export { UmbTreeItemPickerExpansionManager, type UmbTreeItemPickerExpansionManagerArgs, } from './tree-item-picker/tree-item-picker-expansion.manager.js';
+export * from './tree-item-picker/index.js';
 export * from './tree-item-children/index.js';
 export * from './tree-menu-item/index.js';
 export * from './tree.element.js';

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

@@ -11,7 +11,7 @@ export * from './entity-actions/sort-children-of/index.js';
 export * from './folder/index.js';
 export * from './tree-item/index.js';
 export * from './tree-item-api/index.js';
-export { UmbTreeItemPickerExpansionManager, } from './tree-item-picker/tree-item-picker-expansion.manager.js';
+export * from './tree-item-picker/index.js';
 export * from './tree-item-children/index.js';
 export * from './tree-menu-item/index.js';
 export * from './tree.element.js';

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

@@ -1,6 +1,6 @@
 import type { UmbTreeItemContext } from '../index.js';
 import type { UmbTreeItemModel } from '../../types.js';
-import { type TemplateResult } from '../../../../../external/lit/index.js';
+import { nothing, type TemplateResult } from '../../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../lit-element/index.js';
 import type { UmbEntityFlag } from '../../../entity-flag/index.js';
 export declare abstract class UmbTreeItemElementBase<TreeItemModelType extends UmbTreeItemModel, TreeItemContextType extends UmbTreeItemContext<TreeItemModelType> = UmbTreeItemContext<TreeItemModelType>> extends UmbLitElement {
@@ -51,5 +51,8 @@ export declare abstract class UmbTreeItemElementBase<TreeItemModelType extends U
     protected _getIconToRender(icon: string): string;
     protected _getIconName(): string | null | undefined;
     renderLabel(): TemplateResult<1>;
+    protected _renderChildItem(item: TreeItemModelType): TemplateResult<1>;
+    protected _renderLoadPrevButton(): TemplateResult<1> | typeof nothing;
+    protected _renderLoadNextButton(): TemplateResult<1> | typeof nothing;
     static styles: import("lit").CSSResult[];
 }

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

@@ -31,6 +31,7 @@ export class UmbTreeItemElementBase extends UmbLitElement {
         this.#hasNodes = (e) => {
             return e.target.assignedNodes({ flatten: true }).length > 0;
         };
+        this.#renderChildItem = this._renderChildItem.bind(this);
     }
     set item(newVal) {
         if (newVal === this._item)
@@ -69,8 +70,8 @@ export class UmbTreeItemElementBase extends UmbLitElement {
             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.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');
+            this.observe(this.#api.isLoadingPrevChildren, (value) => (this._isLoadingPrevChildren = value), '_observeIsLoadingPrevChildren');
+            this.observe(this.#api.isLoadingNextChildren, (value) => (this._isLoadingNextChildren = value), '_observeIsLoadingNextChildren');
             this.observe(this.#api.targetPagination?.totalPrevItems, (value) => (this._hasPreviousItems = value !== undefined ? value > 0 : false), '_observeTotalPrevItems');
             this.observe(this.#api.targetPagination?.totalNextItems, (value) => (this._hasNextItems = value !== undefined ? value > 0 : false), '_observeTotalNextItems');
             this.#initTreeItem();
@@ -151,10 +152,10 @@ export class UmbTreeItemElementBase extends UmbLitElement {
 				label=${ifDefined(this._label)}
 				href=${ifDefined(this._isSelectableContext || this._noAccess ? undefined : this._href)}
 				.renderExpandSymbol=${this._renderExpandSymbol}>
-				${this.#renderLoadPrevButton()} ${this.renderIconContainer()} ${this.renderLabel()} ${this.#renderActions()}
+				${this._renderLoadPrevButton()} ${this.renderIconContainer()} ${this.renderLabel()} ${this.#renderActions()}
 				${this.#renderChildItems()}
 				<slot></slot>
-				${this.#renderLoadNextButton()}
+				${this._renderLoadNextButton()}
 			</uui-menu-item>
 		`;
     }
@@ -207,24 +208,24 @@ export class UmbTreeItemElementBase extends UmbLitElement {
         return html `<umb-entity-actions-bundle slot="actions" .label=${this._label}> </umb-entity-actions-bundle>`;
     }
     #renderChildItems() {
-        return html `
-			${this._childItems
-            ? repeat(this._childItems, (item) => `${item.entityType}:${item.unique}`, (item) => html `
-							<umb-tree-item
-								.entityType=${item.entityType}
-								.props=${{ hideActions: this.hideActions, item, isMenu: this.isMenu }}></umb-tree-item>
-						`)
-            : ''}
-		`;
+        if (!this._childItems)
+            return nothing;
+        return repeat(this._childItems, (item) => `${item.entityType}:${item.unique}`, this.#renderChildItem);
     }
-    #renderLoadPrevButton() {
+    #renderChildItem;
+    _renderChildItem(item) {
+        return html `<umb-tree-item
+			.entityType=${item.entityType}
+			.props=${{ hideActions: this.hideActions, item, isMenu: this.isMenu }}></umb-tree-item>`;
+    }
+    _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() {
+    _renderLoadNextButton() {
         if (!this._hasNextItems)
             return nothing;
         return html `
@@ -322,7 +323,7 @@ __decorate([
     state()
 ], UmbTreeItemElementBase.prototype, "_isSelected", void 0);
 __decorate([
-    state()
+    property({ type: Boolean, attribute: 'has-children', reflect: true })
 ], UmbTreeItemElementBase.prototype, "_hasChildren", void 0);
 __decorate([
     state()

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

@@ -4,7 +4,7 @@ import { combineLatest, distinctUntilChanged, map } from '../../../../external/r
 import { umbExtensionsRegistry } from '../../extension-registry/index.js';
 import { UmbBooleanState, UmbObjectState, UmbStringState } from '../../../../libs/observable-api/index.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
-import { UMB_WORKSPACE_EDIT_PATH_PATTERN } from '../../workspace/index.js';
+import { UMB_WORKSPACE_EDIT_PATH_PATTERN, UMB_WORKSPACE_PATH_PATTERN } from '../../workspace/index.js';
 import { debounce, UmbDeprecation } from '../../utils/index.js';
 import { UmbEntityContext, UmbParentEntityContext } from '../../entity/index.js';
 import { UMB_SECTION_CONTEXT } from '../../section/index.js';
@@ -267,10 +267,15 @@ export class UmbTreeItemApiContextBase extends UmbContextBase {
         this._treeContext?.selection.deselect(this.unique);
     }
     constructPath(pathname, entityType, unique) {
+        // A `null` unique means this tree item is the tree's root pseudo-entity, not a real, persisted item — it
+        // has no `edit/:unique` page of its own, so link to the workspace's bare path instead.
+        if (unique === null) {
+            return UMB_WORKSPACE_PATH_PATTERN.generateAbsolute({ sectionName: pathname, entityType });
+        }
         return UMB_WORKSPACE_EDIT_PATH_PATTERN.generateAbsolute({
             sectionName: pathname,
             entityType,
-            unique: unique ?? 'null',
+            unique,
         });
     }
 }

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

@@ -1 +1,4 @@
+export * from './tree-item-picker-expansion.manager.js';
+export * from './tree-item-picker-location.manager.js';
 export * from './tree-item-picker.context.js';
+export * from './tree-item-picker.context-token.js';

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

@@ -1 +1,4 @@
+export * from './tree-item-picker-expansion.manager.js';
+export * from './tree-item-picker-location.manager.js';
 export * from './tree-item-picker.context.js';
+export * from './tree-item-picker.context-token.js';

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

@@ -0,0 +1,80 @@
+import type { UmbTreeItemPickerBreadcrumbItem } from '../components/tree-item-picker-breadcrumb/index.js';
+import type { UmbTreeItemModel, UmbTreeRootModel, UmbTreeStartNode } from '../types.js';
+import type { UmbEntityModel } from '../../entity/index.js';
+import { UmbControllerBase } from '../../../../libs/class-api/index.js';
+import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
+import type { UmbInteractionMemoryManager } from '../../interaction-memory/index.js';
+/**
+ * The node a picker is browsing. It is the tree's own model of that node, so anything a consumer derives from it — the
+ * collection a content type configures, for instance — describes the node being browsed and cannot describe another.
+ *
+ * The tree root is a location like any other, which is what lets an undefined location mean only that the picker has
+ * not established one.
+ */
+export type UmbTreeItemPickerLocation = UmbTreeItemModel | UmbTreeRootModel;
+/**
+ * Construction arguments for {@link UmbTreeItemPickerLocationManager}.
+ */
+export interface UmbTreeItemPickerLocationManagerArgs {
+    /**
+     * When provided, the location the user left the picker in is remembered and restored.
+     */
+    interactionMemoryManager?: UmbInteractionMemoryManager;
+}
+/**
+ * Tracks where in a tree a picker is browsing: the trail to it, the node itself, and the memory of both.
+ */
+export declare class UmbTreeItemPickerLocationManager extends UmbControllerBase {
+    #private;
+    readonly breadcrumb: import("rxjs").Observable<UmbTreeItemPickerBreadcrumbItem[]>;
+    /**
+     * Where the picker is browsing, as a tri-state:
+     *
+     * - `undefined` — no location established yet.
+     * - `null` — the node last browsed to is not in the tree. A host should say so rather than show a level it cannot
+     *   describe, and must not treat this as still loading.
+     * - a model — the node being browsed.
+     */
+    readonly currentLocation: import("rxjs").Observable<UmbTreeItemPickerLocation | null | undefined>;
+    /**
+     * @param {UmbControllerHost} host - The controller host this manager is bound to.
+     * @param {UmbTreeItemPickerLocationManagerArgs} [args] - Optional construction arguments.
+     */
+    constructor(host: UmbControllerHost, args?: UmbTreeItemPickerLocationManagerArgs);
+    /**
+     * Sets the node the picker may not browse above. Set it before the tree alias, as the alias starts the load.
+     * @param {UmbTreeStartNode} [startNode] - The node to start from, or undefined to browse from the tree root.
+     * @memberof UmbTreeItemPickerLocationManager
+     */
+    setStartNode(startNode: UmbTreeStartNode | undefined): void;
+    /**
+     * Sets the tree to browse, which resolves its repository and loads the initial trail.
+     * @param {string} [treeAlias] - The alias of the tree.
+     * @memberof UmbTreeItemPickerLocationManager
+     */
+    setTreeAlias(treeAlias: string | undefined): void;
+    /**
+     * Returns the node currently being browsed.
+     * @returns {UmbTreeItemPickerLocation | null | undefined} The current location, undefined before one is established,
+     * or null when the node last browsed to is not in the tree.
+     * @memberof UmbTreeItemPickerLocationManager
+     */
+    getCurrentLocation(): UmbTreeItemPickerLocation | null | undefined;
+    /**
+     * Returns the trail to the node currently being browsed.
+     * @returns {Array<UmbTreeItemPickerBreadcrumbItem>} The trail, ending with the node being browsed.
+     * @memberof UmbTreeItemPickerLocationManager
+     */
+    getBreadcrumb(): Array<UmbTreeItemPickerBreadcrumbItem>;
+    /**
+     * Browses to a node, leaving the trail, the current location and the remembered location consistent with each other.
+     *
+     * A node already in the trail is browsed by shortening the trail to it, so stepping back up costs no request. A node
+     * the tree does not have leaves the current location `null`.
+     * @param {UmbEntityModel} [entity] - The node to browse, or undefined for the start node when there is one and the
+     * tree root otherwise.
+     * @returns {Promise<void>} Resolves once the trail and the current location have been set.
+     * @memberof UmbTreeItemPickerLocationManager
+     */
+    navigateTo(entity?: UmbEntityModel): Promise<void>;
+}