@umbraco-cms/backoffice 17.1.0 → 17.2.0-rc2

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor-properties.element.js

@@ -57,12 +57,23 @@ let UmbContentTypeDesignEditorPropertiesElement = class UmbContentTypeDesignEdit
             onChange: ({ model }) => {
                 this._properties = model;
             },
-            onContainerChange: ({ item }) => {
+            onContainerChange: async ({ item }) => {
                 if (this._containerId === undefined) {
                     throw new Error('ContainerId is not set');
                 }
+                if (this._ownerContentTypeUnique === undefined) {
+                    throw new Error('OwnerContentTypeUnique is not set');
+                }
+                let containerId = this._containerId;
+                // ensure container is local:
+                if (this._containerId !== null) {
+                    const container = await this.#propertyStructureHelper
+                        .getStructureManager()
+                        ?.ensureContainerOf(this._containerId, this._ownerContentTypeUnique);
+                    containerId = container?.id || this._containerId;
+                }
                 this.#propertyStructureHelper.partialUpdateProperty(item.unique, {
-                    container: this._containerId ? { id: this._containerId } : null,
+                    container: containerId ? { id: containerId } : null,
                 });
             },
             onEnd: ({ item }) => {

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor-property.element.js

@@ -125,8 +125,7 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
         else {
             return html `
 				<div id="header">
-					<p><b>${this.property.name}</b></p>
-					<p><i>${this.property.alias}</i></p>
+					<p>${this.localize.string(this.property.name)}<i>${this.property.alias}</i></p>
 					<p>${this.property.description}</p>
 				</div>
 				<div id="editor">
@@ -282,12 +281,15 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
     static { this.styles = [
         UmbTextStyles,
         css `
-			:host(:not([sort-mode-active])) {
-				display: grid;
-				grid-template-columns: 300px auto;
-				column-gap: var(--uui-size-layout-2);
+			:host {
+				display: block;
 				border-bottom: 1px solid var(--uui-color-divider);
 				padding: var(--uui-size-layout-1) 0;
+			}
+			:host(:not([sort-mode-active])) {
+				display: grid;
+				grid-template-columns: 320px auto;
+				column-gap: var(--uui-size-space-5);
 				container-type: inline-size;
 			}
 
@@ -312,16 +314,14 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
 				position: relative;
 				display: flex;
 				padding: 0;
-				margin-bottom: var(--uui-size-3);
-			}
-
-			:host([sort-mode-active]:last-of-type) {
-				margin-bottom: 0;
 			}
 
 			:host([sort-mode-active]:not([_inherited])) {
 				cursor: grab;
 			}
+			:host([sort-mode-active][_inherited]) {
+				cursor: not-allowed;
+			}
 
 			:host([sort-mode-active]) .sortable {
 				flex: 1;
@@ -333,9 +333,6 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
 			:host([sort-mode-active][_inherited]) .sortable {
 				color: var(--uui-color-disabled-contrast);
 			}
-			:host([sort-mode-active]:not([_inherited])) .sortable {
-				background-color: var(--uui-color-divider);
-			}
 
 			:host([sort-mode-active]) uui-input {
 				max-width: 75px;
@@ -373,6 +370,7 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
 
 			#header i {
 				opacity: 0.55;
+				float: right;
 			}
 
 			#header umb-input-with-alias {
@@ -403,7 +401,7 @@ let UmbContentTypeDesignEditorPropertyElement = class UmbContentTypeDesignEditor
 			}
 			#editor-name {
 				position: absolute;
-				top: var(--uui-size-space-4);
+				top: var(--uui-size-space-3);
 				left: var(--uui-size-space-4);
 				font-size: var(--uui-type-small-size);
 				font-weight: 400;

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor-tab.element.js

@@ -48,7 +48,7 @@ let UmbContentTypeDesignEditorTabElement = class UmbContentTypeDesignEditorTabEl
             onChange: ({ model }) => {
                 this._groups = model;
             },
-            onContainerChange: ({ item }) => {
+            onContainerChange: async ({ item }) => {
                 if (this.#containerId === undefined) {
                     throw new Error('ContainerId is not set');
                 }
@@ -56,8 +56,18 @@ let UmbContentTypeDesignEditorTabElement = class UmbContentTypeDesignEditorTabEl
                     // This may be possible later, but for now this is not possible. [NL]
                     throw new Error('OwnerId is not set for the given container, we cannot move containers that are not owned by the current Document.');
                 }
+                let containerId = this.#containerId;
+                // ensure container is local:
+                if (containerId !== null) {
+                    const structureManager = this.#groupStructureHelper.getStructureManager();
+                    if (!structureManager) {
+                        throw new Error('Could not get Structure Manager from Structure Helper');
+                    }
+                    const container = await structureManager.ensureContainerOf(containerId, structureManager.getOwnerContentType().unique);
+                    containerId = container?.id || null;
+                }
                 this.#groupStructureHelper.partialUpdateContainer(item.ownerId, {
-                    parent: this.#containerId ? { id: this.#containerId } : null,
+                    parent: containerId ? { id: containerId } : null,
                 });
             },
             onEnd: ({ item }) => {
@@ -180,7 +190,7 @@ let UmbContentTypeDesignEditorTabElement = class UmbContentTypeDesignEditorTabEl
     #onAddGroup;
     render() {
         return html `
-			${this.#containerId
+			${this.#containerId !== undefined
             ? html `
 							<uui-box class="${this._hasProperties ? '' : 'opaque'}">
 								<umb-content-type-design-editor-properties

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor.element.d.ts

@@ -6,6 +6,7 @@ export declare class UmbContentTypeDesignEditorElement extends UmbLitElement imp
     #private;
     set manifest(value: ManifestWorkspaceViewContentTypeDesignEditorKind);
     private _compositionRepositoryAlias?;
+    private _hasRootProperties;
     private _hasRootGroups;
     private _routes?;
     private _tabs?;

package/dist-cms/packages/content/content-type/workspace/views/design/content-type-design-editor.element.js

@@ -83,7 +83,7 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
         });
         this.#designContext = new UmbContentTypeDesignEditorContext(this);
         this.#tabsStructureHelper = new UmbContentTypeContainerStructureHelper(this);
-        //private _hasRootProperties = false;
+        this._hasRootProperties = false;
         this._hasRootGroups = false;
         this._activePath = '';
         this.#sorter.disable();
@@ -103,7 +103,10 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
             this.#sorter.setModel(tabs);
             this.#createRoutes();
         });
-        // _hasRootProperties can be gotten via _tabsStructureHelper.hasProperties. But we do not support root properties currently.
+        this.observe(this.#tabsStructureHelper.hasProperties, (hasRootProperties) => {
+            this._hasRootProperties = hasRootProperties;
+            this.#createRoutes();
+        }, 'observeRootProperties');
         this.consumeContext(UMB_CONTENT_TYPE_WORKSPACE_CONTEXT, (workspaceContext) => {
             this.#workspaceContext = workspaceContext;
             this.#tabsStructureHelper.setStructureManager(workspaceContext?.structure);
@@ -152,7 +155,7 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
                 this.#currentTabComponent.containerId = null;
             },
         });
-        if (this._hasRootGroups || this._tabs.length === 0) {
+        if (this._hasRootGroups || this._hasRootProperties || this._tabs.length === 0) {
             routes.push({
                 path: '',
                 pathMatch: 'full',
@@ -425,15 +428,15 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
     renderRootTab() {
         const path = this._routerPath + '/root';
         const rootTabActive = path === this._activePath;
-        if (!this._hasRootGroups && !this._sortModeActive) {
-            // If we don't have any root groups and we are not in sort mode, then we don't want to render the root tab.
+        if (!this._hasRootGroups && !this._hasRootProperties && !this._sortModeActive) {
+            // If we don't have any root groups/properties and we are not in sort mode, then we don't want to render the root tab.
             return nothing;
         }
         return html `
 			<uui-tab
 				id="root-tab"
 				data-mark="root-tab"
-				class=${this._hasRootGroups || rootTabActive ? '' : 'content-tab-is-empty'}
+				class=${this._hasRootGroups || this._hasRootProperties || rootTabActive ? '' : 'content-tab-is-empty'}
 				label=${this.localize.term('general_generic')}
 				.active=${rootTabActive}
 				href=${path}
@@ -656,6 +659,9 @@ let UmbContentTypeDesignEditorElement = class UmbContentTypeDesignEditorElement
 __decorate([
     state()
 ], UmbContentTypeDesignEditorElement.prototype, "_compositionRepositoryAlias", void 0);
+__decorate([
+    state()
+], UmbContentTypeDesignEditorElement.prototype, "_hasRootProperties", void 0);
 __decorate([
     state()
 ], UmbContentTypeDesignEditorElement.prototype, "_hasRootGroups", void 0);

package/dist-cms/packages/core/auth/auth.context.js

@@ -18,6 +18,8 @@ export class UmbAuthContext extends UmbContextBase {
     #authFlow;
     #authWindowProxy;
     #previousAuthUrl;
+    // Event handler for storage events - arrow function to maintain consistent reference
+    #onStorageEvent;
     /**
      * Observable that acts as a signal for when the authorization state changes.
      * @remark It will emit once per second, so it can be used to trigger UI updates or other actions when the authorization state changes.
@@ -34,6 +36,17 @@ export class UmbAuthContext extends UmbContextBase {
         // Timeout is different from `isAuthorized` because it can occur repeatedly
         this.#isTimeout = new Subject();
         this.#isInitialized = new ReplaySubject(1);
+        // Event handler for storage events - arrow function to maintain consistent reference
+        this.#onStorageEvent = async (evt) => {
+            if (evt.key === UMB_STORAGE_TOKEN_RESPONSE_NAME) {
+                // Close any open auth windows
+                this.#authWindowProxy?.close();
+                // Refresh the local storage state into memory
+                await this.setInitialState();
+                // Let any auth listeners (such as the auth modal) know that the auth state has changed
+                this.#authFlow.authorizationSignal.next();
+            }
+        };
         /**
          * Observable that emits true when the auth context is initialized.
          * @remark It will only emit once and then complete itself.
@@ -64,7 +77,7 @@ export class UmbAuthContext extends UmbContextBase {
         }, '_authFlowAuthorizationSignal');
         // Observe changes to local storage and update the authorization state
         // This establishes the tab-to-tab communication
-        window.addEventListener('storage', this.#onStorageEvent.bind(this));
+        window.addEventListener('storage', this.#onStorageEvent);
         if (!isTestEnvironment()) {
             // Start the session timeout controller
             new UmbAuthSessionTimeoutController(this, this.#authFlow);
@@ -72,17 +85,7 @@ export class UmbAuthContext extends UmbContextBase {
     }
     destroy() {
         super.destroy();
-        window.removeEventListener('storage', this.#onStorageEvent.bind(this));
-    }
-    async #onStorageEvent(evt) {
-        if (evt.key === UMB_STORAGE_TOKEN_RESPONSE_NAME) {
-            // Close any open auth windows
-            this.#authWindowProxy?.close();
-            // Refresh the local storage state into memory
-            await this.setInitialState();
-            // Let any auth listeners (such as the auth modal) know that the auth state has changed
-            this.#authFlow.authorizationSignal.next();
-        }
+        window.removeEventListener('storage', this.#onStorageEvent);
     }
     /**
      * Initiates the login flow.

package/dist-cms/packages/core/backend-api/types.gen.d.ts

@@ -363,6 +363,7 @@ export type CreateUserDataRequestModel = {
 export type CreateUserGroupRequestModel = {
     name: string;
     alias: string;
+    description?: string | null;
     icon?: string | null;
     sections: Array<string>;
     languages: Array<string>;
@@ -2408,6 +2409,7 @@ export type UpdateUserDataRequestModel = {
 export type UpdateUserGroupRequestModel = {
     name: string;
     alias: string;
+    description?: string | null;
     icon?: string | null;
     sections: Array<string>;
     languages: Array<string>;
@@ -2497,6 +2499,7 @@ export type UserGroupItemResponseModel = {
 export type UserGroupResponseModel = {
     name: string;
     alias: string;
+    description?: string | null;
     icon?: string | null;
     sections: Array<string>;
     languages: Array<string>;
@@ -5802,7 +5805,12 @@ export type GetDocumentByIdReferencedByErrors = {
      * The authenticated user does not have access to this resource
      */
     403: unknown;
+    /**
+     * Not Found
+     */
+    404: ProblemDetails;
 };
+export type GetDocumentByIdReferencedByError = GetDocumentByIdReferencedByErrors[keyof GetDocumentByIdReferencedByErrors];
 export type GetDocumentByIdReferencedByResponses = {
     /**
      * OK
@@ -5830,7 +5838,12 @@ export type GetDocumentByIdReferencedDescendantsErrors = {
      * The authenticated user does not have access to this resource
      */
     403: unknown;
+    /**
+     * Not Found
+     */
+    404: ProblemDetails;
 };
+export type GetDocumentByIdReferencedDescendantsError = GetDocumentByIdReferencedDescendantsErrors[keyof GetDocumentByIdReferencedDescendantsErrors];
 export type GetDocumentByIdReferencedDescendantsResponses = {
     /**
      * OK
@@ -8401,7 +8414,12 @@ export type GetMediaByIdReferencedByErrors = {
      * The authenticated user does not have access to this resource
      */
     403: unknown;
+    /**
+     * Not Found
+     */
+    404: ProblemDetails;
 };
+export type GetMediaByIdReferencedByError = GetMediaByIdReferencedByErrors[keyof GetMediaByIdReferencedByErrors];
 export type GetMediaByIdReferencedByResponses = {
     /**
      * OK
@@ -8429,7 +8447,12 @@ export type GetMediaByIdReferencedDescendantsErrors = {
      * The authenticated user does not have access to this resource
      */
     403: unknown;
+    /**
+     * Not Found
+     */
+    404: ProblemDetails;
 };
+export type GetMediaByIdReferencedDescendantsError = GetMediaByIdReferencedDescendantsErrors[keyof GetMediaByIdReferencedDescendantsErrors];
 export type GetMediaByIdReferencedDescendantsResponses = {
     /**
      * OK
@@ -10016,7 +10039,12 @@ export type GetMemberByIdReferencedByErrors = {
      * The authenticated user does not have access to this resource
      */
     403: unknown;
+    /**
+     * Not Found
+     */
+    404: ProblemDetails;
 };
+export type GetMemberByIdReferencedByError = GetMemberByIdReferencedByErrors[keyof GetMemberByIdReferencedByErrors];
 export type GetMemberByIdReferencedByResponses = {
     /**
      * OK
@@ -10044,7 +10072,12 @@ export type GetMemberByIdReferencedDescendantsErrors = {
      * The authenticated user does not have access to this resource
      */
     403: unknown;
+    /**
+     * Not Found
+     */
+    404: ProblemDetails;
 };
+export type GetMemberByIdReferencedDescendantsError = GetMemberByIdReferencedDescendantsErrors[keyof GetMemberByIdReferencedDescendantsErrors];
 export type GetMemberByIdReferencedDescendantsResponses = {
     /**
      * OK

package/dist-cms/packages/core/collection/action/collection-action-button.element.js

@@ -28,7 +28,7 @@ let UmbCollectionActionButtonElement = class UmbCollectionActionButtonElement ex
             throw new Error('No manifest defined');
         if (!this._manifest.api)
             return;
-        this.#api = await createExtensionApi(this, this._manifest);
+        this.#api = await createExtensionApi(this, this._manifest, [this._manifest]);
         this._href = (await this.#api?.getHref?.()) ?? this.manifest?.meta.href;
         this._additionalOptions = (await this.#api?.hasAddionalOptions?.()) ?? this.manifest?.meta.additionalOptions;
     }

package/dist-cms/packages/core/collection/action/create/collection-create-action.element.js

@@ -19,11 +19,11 @@ let UmbCollectionCreateActionButtonElement = class UmbCollectionCreateActionButt
         this._popoverOpen = event.newState === 'open';
     }
     async #onClick(event, controller, href) {
-        event.stopPropagation();
         // skip if href is defined
         if (href) {
             return;
         }
+        event.stopPropagation();
         if (!controller.api)
             throw new Error('No API found');
         await controller.api.execute().catch(() => { });

package/dist-cms/packages/core/collection/bulk-action/collection-bulk-action.manager.d.ts

@@ -1,5 +1,5 @@
+import type { UmbCollectionBulkActionConfiguration } from '../types.js';
 import { UmbControllerBase } from '../../../../libs/class-api/index.js';
-import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 /**
  * Manager responsible for tracking the availability of bulk actions in a collection.
  */
@@ -11,8 +11,13 @@ export declare class UmbCollectionBulkActionManager extends UmbControllerBase {
      */
     readonly hasBulkActions: import("rxjs").Observable<boolean | undefined>;
     /**
-     * Creates a new instance of the bulk action manager.
-     * @param {UmbControllerHost} host - The controller host that owns this manager.
+     * Sets the configuration for the bulk action manager.
+     * @param {UmbCollectionBulkActionConfiguration | undefined} config - Configuration for the bulk action manager.
      */
-    constructor(host: UmbControllerHost);
+    setConfig(config: UmbCollectionBulkActionConfiguration | undefined): void;
+    /**
+     * Gets the current configuration.
+     * @returns {UmbCollectionBulkActionConfiguration | undefined} The current configuration.
+     */
+    getConfig(): UmbCollectionBulkActionConfiguration | undefined;
 }

package/dist-cms/packages/core/collection/bulk-action/collection-bulk-action.manager.js

@@ -2,28 +2,58 @@ import { UmbControllerBase } from '../../../../libs/class-api/index.js';
 import { UmbExtensionsManifestInitializer } from '../../../../libs/extension-api/index.js';
 import { umbExtensionsRegistry } from '../../extension-registry/index.js';
 import { UmbBooleanState } from '../../../../libs/observable-api/index.js';
+const observerAlias = 'umbCollectionBulkActionsObserver';
 /**
  * Manager responsible for tracking the availability of bulk actions in a collection.
  */
 export class UmbCollectionBulkActionManager extends UmbControllerBase {
-    #hasBulkActions;
-    /**
-     * Creates a new instance of the bulk action manager.
-     * @param {UmbControllerHost} host - The controller host that owns this manager.
-     */
-    constructor(host) {
-        super(host);
+    constructor() {
+        super(...arguments);
         this.#hasBulkActions = new UmbBooleanState(undefined);
         /**
          * Observable that emits `true` if bulk actions are available, `false` if none are registered,
          * or `undefined` if the state has not yet been determined.
          */
         this.hasBulkActions = this.#hasBulkActions.asObservable();
-        this.#observeBulkActions();
+    }
+    #hasBulkActions;
+    #config;
+    /**
+     * Sets the configuration for the bulk action manager.
+     * @param {UmbCollectionBulkActionConfiguration | undefined} config - Configuration for the bulk action manager.
+     */
+    setConfig(config) {
+        const oldConfig = this.#config;
+        this.#config = config;
+        this.#toggleFeature(oldConfig, config);
+    }
+    /**
+     * Gets the current configuration.
+     * @returns {UmbCollectionBulkActionConfiguration | undefined} The current configuration.
+     */
+    getConfig() {
+        return this.#config;
+    }
+    #toggleFeature(oldConfig, newConfig) {
+        // Handle enabling/disabling bulk actions based on the new configuration.
+        // Only disable if explicitly set to false.
+        if (newConfig?.enabled === false) {
+            // Avoid unnecessary operations if bulk actions are already disabled.
+            if (oldConfig?.enabled === false && newConfig?.enabled === false)
+                return;
+            this.removeUmbControllerByAlias(observerAlias);
+            this.#hasBulkActions.setValue(false);
+        }
+        else {
+            // Avoid unnecessary operations if bulk actions are already enabled.
+            if (oldConfig?.enabled === true && newConfig?.enabled === true)
+                return;
+            this.#observeBulkActions();
+        }
     }
     #observeBulkActions() {
         new UmbExtensionsManifestInitializer(this, umbExtensionsRegistry, 'entityBulkAction', null, (bulkActionControllers) => {
             this.#hasBulkActions.setValue(bulkActionControllers.length > 0);
-        });
+        }, observerAlias);
     }
 }

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

@@ -5,10 +5,12 @@ export declare class UmbCollectionItemPickerModalElement extends UmbModalBaseEle
     #private;
     private _selectionConfiguration;
     private _hasSelection;
+    private _isSearchable;
     private _searchQuery?;
     constructor();
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
 }
 export { UmbCollectionItemPickerModalElement as element };
 declare global {

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UmbCollectionItemPickerContext } from './collection-item-picker-modal.context.js';
-import { html, customElement, state, nothing, ifDefined } from '../../../../external/lit/index.js';
+import { html, customElement, state, nothing, ifDefined, css, classMap } from '../../../../external/lit/index.js';
 import { UmbModalBaseElement } from '../../modal/index.js';
 import { UmbDeselectedEvent, UmbSelectedEvent } from '../../event/index.js';
 let UmbCollectionItemPickerModalElement = class UmbCollectionItemPickerModalElement extends UmbModalBaseElement {
@@ -15,9 +15,11 @@ let UmbCollectionItemPickerModalElement = class UmbCollectionItemPickerModalElem
         this._selectionConfiguration = {
             multiple: false,
             selectable: true,
+            selectOnly: true,
             selection: [],
         };
         this._hasSelection = false;
+        this._isSearchable = false;
         this.#pickerContext = new UmbCollectionItemPickerContext(this);
         this.#searchSelectableFilter = () => true;
         this.#pickerContext.selection.setSelectable(true);
@@ -40,6 +42,7 @@ let UmbCollectionItemPickerModalElement = class UmbCollectionItemPickerModalElem
             this._selectionConfiguration = {
                 ...this._selectionConfiguration,
                 multiple,
+                selectableFilter: this.data?.pickableFilter,
             };
         }
         if (_changedProperties.has('value')) {
@@ -47,7 +50,7 @@ let UmbCollectionItemPickerModalElement = class UmbCollectionItemPickerModalElem
             this.#pickerContext.selection.setSelection(selection);
             this._selectionConfiguration = {
                 ...this._selectionConfiguration,
-                selection: [...selection],
+                selection: [...selection].filter((x) => x !== null),
             };
         }
     }
@@ -58,9 +61,10 @@ let UmbCollectionItemPickerModalElement = class UmbCollectionItemPickerModalElem
         }, 'umbPickerSelectionObserver');
     }
     #observeSearch() {
+        this.observe(this.#pickerContext?.search.searchable, (isSearchable) => (this._isSearchable = isSearchable ?? false), null);
         this.observe(this.#pickerContext.search.query, (query) => {
             this._searchQuery = query?.query;
-        }, 'umbPickerSearchQueryObserver');
+        }, null);
     }
     #onItemSelected(event) {
         event.stopPropagation();
@@ -74,34 +78,57 @@ let UmbCollectionItemPickerModalElement = class UmbCollectionItemPickerModalElem
     }
     #searchSelectableFilter;
     render() {
+        const renderCollection = !!this.data?.collection.alias;
         return html `
-			<umb-body-layout headline=${this.localize.term('general_choose')}>
-				<uui-box> ${this.#renderSearch()} ${this.#renderCollection()}</uui-box>
-				${this.#renderActions()}
+			<umb-body-layout
+				headline="${this.localize.term('general_choose')}"
+				?main-no-padding=${renderCollection}
+				class=${classMap({ 'has-search': this._isSearchable, 'is-searching': !!this._searchQuery })}>
+				${this.#renderSearch()} ${this.#renderMain(renderCollection)} ${this.#renderActions()}
 			</umb-body-layout>
 		`;
     }
     #renderSearch() {
+        if (!this._isSearchable)
+            return nothing;
         const selectableFilter = this.data?.search?.pickableFilter ?? this.data?.pickableFilter ?? this.#searchSelectableFilter;
         return html `
-			<umb-picker-search-field></umb-picker-search-field>
-			<umb-picker-search-result .pickableFilter=${selectableFilter}></umb-picker-search-result>
+			<div id="search-container">
+				<umb-picker-search-field></umb-picker-search-field>
+				<umb-picker-search-result .pickableFilter=${selectableFilter}></umb-picker-search-result>
+			</div>
 		`;
     }
+    #renderMain(hasCollectionAlias) {
+        return html ` ${hasCollectionAlias ? this.#renderCollection() : this.#renderCollectionMenu()} `;
+    }
     #renderCollection() {
-        if (this._searchQuery) {
-            return nothing;
-        }
-        return html ` <umb-collection-menu
-			alias=${ifDefined(this.data?.collection?.menuAlias)}
-			.props=${{
+        return html `
+			<umb-collection
+				alias=${ifDefined(this.data?.collection.alias)}
+				.config=${{
+            selectionConfiguration: this._selectionConfiguration,
+            bulkActionConfiguration: { enabled: false },
+        }}
+				@selected=${this.#onItemSelected}
+				@deselected=${this.#onItemDeselected}></umb-collection>
+		`;
+    }
+    #renderCollectionMenu() {
+        return html `
+			<uui-box id="collection-menu-box"
+				><umb-collection-menu
+					alias=${ifDefined(this.data?.collection?.menuAlias)}
+					.props=${{
             selectionConfiguration: this._selectionConfiguration,
             filterArgs: this.data?.collection?.filterArgs,
             filter: this.data?.filter,
             selectableFilter: this.data?.pickableFilter,
         }}
-			@selected=${this.#onItemSelected}
-			@deselected=${this.#onItemDeselected}></umb-collection-menu>`;
+					@selected=${this.#onItemSelected}
+					@deselected=${this.#onItemDeselected}></umb-collection-menu
+			></uui-box>
+		`;
     }
     #renderActions() {
         return html `
@@ -116,6 +143,32 @@ let UmbCollectionItemPickerModalElement = class UmbCollectionItemPickerModalElem
 			</div>
 		`;
     }
+    static { this.styles = [
+        css `
+			umb-collection {
+				display: block;
+				height: fit-content;
+			}
+
+			umb-body-layout[main-no-padding].has-search {
+				#search-container {
+					padding: var(--uui-size-layout-1);
+					padding-bottom: 0;
+				}
+
+				umb-collection {
+					margin-top: calc(-1 * var(--uui-size-4));
+				}
+			}
+
+			umb-body-layout.is-searching {
+				umb-collection,
+				#collection-menu-box {
+					display: none;
+				}
+			}
+		`,
+    ]; }
 };
 __decorate([
     state()
@@ -123,6 +176,9 @@ __decorate([
 __decorate([
     state()
 ], UmbCollectionItemPickerModalElement.prototype, "_hasSelection", void 0);
+__decorate([
+    state()
+], UmbCollectionItemPickerModalElement.prototype, "_isSearchable", void 0);
 __decorate([
     state()
 ], UmbCollectionItemPickerModalElement.prototype, "_searchQuery", void 0);

package/dist-cms/packages/core/collection/collection-item-picker-modal/types.d.ts

@@ -4,7 +4,8 @@ export interface UmbCollectionItemPickerModalData<CollectionItemType = UmbEntity
     collection: UmbCollectionItemPickerModalCollectionConfig;
 }
 export interface UmbCollectionItemPickerModalCollectionConfig<FilterArgsType = Record<string, unknown>> {
-    menuAlias: string;
+    alias?: string;
+    menuAlias?: string;
     filterArgs?: FilterArgsType;
 }
 export interface UmbCollectionItemPickerModalValue extends UmbPickerModalValue {