@umbraco-cms/backoffice 14.2.0 → 14.3.0-rc

package/dist-cms/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.js

@@ -8,34 +8,36 @@ import { UMB_DATATYPE_WORKSPACE_MODAL } from '../../workspace/data-type-workspac
 import { UMB_DATA_TYPE_ENTITY_TYPE } from '../../entity.js';
 import { UmbDataTypeCollectionRepository } from '../../collection/index.js';
 import { UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL } from './data-type-picker-flow-data-type-picker-modal.token.js';
-import { css, html, repeat, customElement, state, when, nothing } from '../../../../external/lit/index.js';
+import { css, customElement, html, nothing, repeat, state, when } from '../../../../external/lit/index.js';
 import { umbExtensionsRegistry } from '../../../core/extension-registry/index.js';
+import { umbFocus } from '../../../core/lit-element/index.js';
 import { UmbModalBaseElement } from '../../../core/modal/index.js';
 import { UmbModalRouteRegistrationController } from '../../../core/router/index.js';
+import { UmbPaginationManager, debounce, fromCamelCase } from '../../../core/utils/index.js';
 import { UmbTextStyles } from '../../../core/style/index.js';
-import { umbFocus } from '../../../core/lit-element/index.js';
 import { UMB_CONTENT_TYPE_WORKSPACE_CONTEXT } from '../../../core/content-type/index.js';
 import { UMB_PROPERTY_TYPE_WORKSPACE_CONTEXT } from '../../../core/property-type/index.js';
-import { UmbPaginationManager, debounce } from '../../../core/utils/index.js';
 let UmbDataTypePickerFlowModalElement = class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement {
     #initPromise;
     set data(value) {
         super.data = value;
-        this._submitLabel = this.data?.submitLabel ?? this._submitLabel;
     }
     #collectionRepository;
+    #createDataTypeModal;
+    #currentFilterQuery;
     #dataTypes;
+    #groupLookup;
     #propertyEditorUIs;
-    #currentFilterQuery;
     constructor() {
         super();
-        this._groupedPropertyEditorUIs = {};
-        this._submitLabel = 'Select';
+        this._groupedDataTypes = [];
+        this._groupedPropertyEditorUIs = [];
         this._currentPage = 1;
         this.pagination = new UmbPaginationManager();
+        this.#currentFilterQuery = '';
         this.#dataTypes = [];
+        this.#groupLookup = {};
         this.#propertyEditorUIs = [];
-        this.#currentFilterQuery = '';
         this.#debouncedFilterInput = debounce(() => {
             this._currentPage = 1;
             this.#handleFiltering();
@@ -43,10 +45,10 @@ let UmbDataTypePickerFlowModalElement = class UmbDataTypePickerFlowModalElement
         this.#collectionRepository = new UmbDataTypeCollectionRepository(this);
         this.#init();
     }
-    _createDataType(propertyEditorUiAlias) {
+    #createDataType(propertyEditorUiAlias) {
         // TODO: Could be nice with a more pretty way to prepend to the URL:
         // Open create modal:
-        this._createDataTypeModal.open({ uiAlias: propertyEditorUiAlias }, `create/parent/${UMB_DATA_TYPE_ENTITY_TYPE}/null`);
+        this.#createDataTypeModal.open({ uiAlias: propertyEditorUiAlias }, `create/parent/${UMB_DATA_TYPE_ENTITY_TYPE}/null`);
     }
     async #init() {
         this.pagination.setCurrentPageNumber(1);
@@ -54,8 +56,11 @@ let UmbDataTypePickerFlowModalElement = class UmbDataTypePickerFlowModalElement
         this.#initPromise = Promise.all([
             this.observe(umbExtensionsRegistry.byType('propertyEditorUi'), (propertyEditorUIs) => {
                 // Only include Property Editor UIs which has Property Editor Schema Alias
-                this.#propertyEditorUIs = propertyEditorUIs.filter((propertyEditorUi) => !!propertyEditorUi.meta.propertyEditorSchemaAlias);
-                this._performFiltering();
+                this.#propertyEditorUIs = propertyEditorUIs
+                    .filter((propertyEditorUi) => !!propertyEditorUi.meta.propertyEditorSchemaAlias)
+                    .sort((a, b) => a.meta.label.localeCompare(b.meta.label));
+                this.#groupLookup = Object.fromEntries(propertyEditorUIs.map((ui) => [ui.alias, ui.meta.group]));
+                this.#performFiltering();
             }).asPromise(),
         ]);
         new UmbModalRouteRegistrationController(this, UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL)
@@ -70,18 +75,18 @@ let UmbDataTypePickerFlowModalElement = class UmbDataTypePickerFlowModalElement
         })
             .onSubmit((submitData) => {
             if (submitData?.dataTypeId) {
-                this._select(submitData.dataTypeId);
+                this.#select(submitData.dataTypeId);
                 this._submitModal();
             }
             else if (submitData?.createNewWithPropertyEditorUiAlias) {
-                this._createDataType(submitData.createNewWithPropertyEditorUiAlias);
+                this.#createDataType(submitData.createNewWithPropertyEditorUiAlias);
             }
         })
             .observeRouteBuilder((routeBuilder) => {
             this._dataTypePickerModalRouteBuilder = routeBuilder;
             this.requestUpdate('_dataTypePickerModalRouteBuilder');
         });
-        this._createDataTypeModal = new UmbModalRouteRegistrationController(this, UMB_DATATYPE_WORKSPACE_MODAL)
+        this.#createDataTypeModal = new UmbModalRouteRegistrationController(this, UMB_DATATYPE_WORKSPACE_MODAL)
             .addAdditionalPath(':uiAlias')
             .onSetup(async (params) => {
             const contentContextConsumer = this.consumeContext(UMB_CONTENT_TYPE_WORKSPACE_CONTEXT, () => {
@@ -105,7 +110,7 @@ let UmbDataTypePickerFlowModalElement = class UmbDataTypePickerFlowModalElement
             };
         })
             .onSubmit((value) => {
-            this._select(value?.unique);
+            this.#select(value?.unique);
             this._submitModal();
         });
     }
@@ -124,13 +129,13 @@ let UmbDataTypePickerFlowModalElement = class UmbDataTypePickerFlowModalElement
             this.#dataTypes = data?.items ?? [];
         }
     }
-    _handleDataTypeClick(dataType) {
+    #handleDataTypeClick(dataType) {
         if (dataType.unique) {
-            this._select(dataType.unique);
+            this.#select(dataType.unique);
             this._submitModal();
         }
     }
-    _select(unique) {
+    #select(unique) {
         this.value = { selection: unique ? [unique] : [] };
     }
     async #onLoadMore() {
@@ -144,75 +149,79 @@ let UmbDataTypePickerFlowModalElement = class UmbDataTypePickerFlowModalElement
     #debouncedFilterInput;
     async #handleFiltering() {
         await this.#getDataTypes();
-        this._performFiltering();
+        this.#performFiltering();
     }
-    _performFiltering() {
+    #performFiltering() {
         if (this.#currentFilterQuery) {
-            const filteredDataTypes = this.#dataTypes.filter((dataType) => dataType.name?.toLowerCase().includes(this.#currentFilterQuery));
-            /* TODO: data type items doesn't have a group property. We will need a reference to the Property Editor UI to get the group.
-            this is a temp solution to group them as uncategorized. The same result as with the lodash groupBy.
-            */
-            this._groupedDataTypes = {
-                undefined: filteredDataTypes,
-            };
+            const filteredDataTypes = this.#dataTypes
+                .filter((dataType) => dataType.name?.toLowerCase().includes(this.#currentFilterQuery))
+                .sort((a, b) => a.name.localeCompare(b.name));
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            const grouped = Object.groupBy(filteredDataTypes, (dataType) => fromCamelCase(this.#groupLookup[dataType.propertyEditorUiAlias] ?? 'Uncategorized'));
+            this._groupedDataTypes = Object.keys(grouped)
+                .sort((a, b) => a.localeCompare(b))
+                .map((key) => ({ key, items: grouped[key] }));
         }
         else {
-            this._groupedDataTypes = undefined;
+            this._groupedDataTypes = [];
         }
         const filteredUIs = !this.#currentFilterQuery
             ? this.#propertyEditorUIs
-            : this.#propertyEditorUIs.filter((propertyEditorUI) => {
-                return (propertyEditorUI.name.toLowerCase().includes(this.#currentFilterQuery) ||
-                    propertyEditorUI.alias.toLowerCase().includes(this.#currentFilterQuery));
-            });
-        // TODO: groupBy is not known by TS yet
+            : this.#propertyEditorUIs.filter((propertyEditorUI) => propertyEditorUI.name.toLowerCase().includes(this.#currentFilterQuery) ||
+                propertyEditorUI.alias.toLowerCase().includes(this.#currentFilterQuery));
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
-        this._groupedPropertyEditorUIs = Object.groupBy(filteredUIs, (propertyEditorUI) => propertyEditorUI.meta.group);
+        const grouped = Object.groupBy(filteredUIs, (propertyEditorUi) => fromCamelCase(propertyEditorUi.meta.group ?? 'Uncategorized'));
+        this._groupedPropertyEditorUIs = Object.keys(grouped)
+            .sort((a, b) => a.localeCompare(b))
+            .map((key) => ({ key, items: grouped[key] }));
     }
     render() {
         return html `
-			<umb-body-layout headline="Select editor" class="uui-text">
-				<uui-box> ${this._renderFilter()} ${this._renderGrid()} </uui-box>
+			<umb-body-layout headline=${this.localize.term('defaultdialogs_selectEditor')} class="uui-text">
+				<uui-box> ${this.#renderFilter()} ${this.#renderGrid()} </uui-box>
 				<div slot="actions">
-					<uui-button label="Close" @click=${this._rejectModal}></uui-button>
+					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
 				</div>
 			</umb-body-layout>
 		`;
     }
-    _renderGrid() {
-        return this.#currentFilterQuery ? this._renderFilteredList() : this._renderUIs();
+    #renderGrid() {
+        return this.#currentFilterQuery ? this.#renderFilteredList() : this.#renderUIs();
     }
-    _renderFilter() {
+    #renderFilter() {
         return html ` <uui-input
 			type="search"
 			id="filter"
-			@input="${this.#onFilterInput}"
-			placeholder="Type to filter..."
-			label="Type to filter icons"
+			@input=${this.#onFilterInput}
+			placeholder=${this.localize.term('placeholders_filter')}
+			label=${this.localize.term('placeholders_filter')}
 			${umbFocus()}>
 			<uui-icon name="search" slot="prepend" id="filter-icon"></uui-icon>
 		</uui-input>`;
     }
-    _renderFilteredList() {
+    #renderFilteredList() {
         if (!this._groupedDataTypes)
             return nothing;
-        const dataTypesEntries = Object.entries(this._groupedDataTypes);
         if (!this._groupedPropertyEditorUIs)
             return nothing;
-        const editorUIEntries = Object.entries(this._groupedPropertyEditorUIs);
-        if (dataTypesEntries.length === 0 && editorUIEntries.length === 0) {
-            return html `Nothing matches your search, try another search term.`;
+        if (this._groupedDataTypes.length === 0 && this._groupedPropertyEditorUIs.length === 0) {
+            return html `<p>Nothing matches your search, try another search term.</p>`;
         }
         return html `
-			${when(dataTypesEntries.length > 0, () => html ` <h5 class="choice-type-headline">
-							<umb-localize key="contentTypeEditor_searchResultSettings">Available configurations</umb-localize>
-						</h5>
-						${this._renderDataTypes()}${this.#renderLoadMore()}`)}
-			${when(editorUIEntries.length > 0, () => html ` <h5 class="choice-type-headline">
-							<umb-localize key="contentTypeEditor_searchResultEditors">Create a new configuration</umb-localize>
-						</h5>
-						${this._renderUIs(true)}`)}
+			${when(this._groupedDataTypes.length > 0, () => html `
+					<h5 class="choice-type-headline">
+						<umb-localize key="contentTypeEditor_searchResultSettings">Available configurations</umb-localize>
+					</h5>
+					${this.#renderDataTypes()} ${this.#renderLoadMore()}
+				`)}
+			${when(this._groupedPropertyEditorUIs.length > 0, () => html `
+					<h5 class="choice-type-headline">
+						<umb-localize key="contentTypeEditor_searchResultEditors">Create a new configuration</umb-localize>
+					</h5>
+					${this.#renderUIs(true)}
+				`)}
 		`;
     }
     #renderLoadMore() {
@@ -220,63 +229,77 @@ let UmbDataTypePickerFlowModalElement = class UmbDataTypePickerFlowModalElement
             return;
         return html `<uui-button @click=${this.#onLoadMore} look="secondary" label="Load more"></uui-button>`;
     }
-    _renderDataTypes() {
+    #renderDataTypes() {
         if (!this._groupedDataTypes)
             return nothing;
-        const entries = Object.entries(this._groupedDataTypes);
         // TODO: Fix so we can have Data Types grouped. (or choose not to group them)
-        return entries.map(([key, value]) => html ` <h5 class="category-name">${key === 'undefined' ? 'Uncategorized' : key}</h5>
-					${this._renderGroupDataTypes(value)}`);
+        return this._groupedDataTypes.map((group) => html `
+				<h5 class="category-name">${group.key}</h5>
+				${this.#renderGroupDataTypes(group.items)}
+			`);
     }
-    _renderUIs(createAsNewOnPick) {
+    #renderUIs(createAsNewOnPick) {
         if (!this._groupedPropertyEditorUIs)
             return nothing;
-        const entries = Object.entries(this._groupedPropertyEditorUIs);
-        return entries.map(([key, value]) => html ` <h5 class="category-name">${key === 'undefined' ? 'Uncategorized' : key}</h5>
-					${this._renderGroupUIs(value, createAsNewOnPick)}`);
+        return this._groupedPropertyEditorUIs.map((group) => html `
+				<h5 class="category-name">${group.key}</h5>
+				${this.#renderGroupUIs(group.items, createAsNewOnPick)}
+			`);
     }
-    _renderGroupUIs(uis, createAsNewOnPick) {
-        return html ` <ul id="item-grid">
-			${this._dataTypePickerModalRouteBuilder
+    #renderGroupUIs(uis, createAsNewOnPick) {
+        return html `
+			<ul id="item-grid">
+				${this._dataTypePickerModalRouteBuilder
             ? repeat(uis, (propertyEditorUI) => propertyEditorUI.alias, (propertyEditorUI) => {
-                return html ` <li class="item">${this._renderDataTypeButton(propertyEditorUI, createAsNewOnPick)}</li>`;
+                return html `<li class="item">${this.#renderDataTypeButton(propertyEditorUI, createAsNewOnPick)}</li>`;
             })
             : ''}
-		</ul>`;
+			</ul>
+		`;
     }
-    _renderDataTypeButton(propertyEditorUI, createAsNewOnPick) {
+    #renderDataTypeButton(propertyEditorUI, createAsNewOnPick) {
         if (createAsNewOnPick) {
-            return html ` <uui-button
-				label="${propertyEditorUI.meta.label || propertyEditorUI.name}"
-				@click=${() => this._createDataType(propertyEditorUI.alias)}>
-				${this._renderItemContent(propertyEditorUI)}
-			</uui-button>`;
+            return html `
+				<uui-button
+					label=${propertyEditorUI.meta.label || propertyEditorUI.name}
+					@click=${() => this.#createDataType(propertyEditorUI.alias)}>
+					${this.#renderItemContent(propertyEditorUI)}
+				</uui-button>
+			`;
         }
         else {
-            return html ` <uui-button
-				label="${propertyEditorUI.meta.label || propertyEditorUI.name}"
-				href=${this._dataTypePickerModalRouteBuilder({ uiAlias: propertyEditorUI.alias })}>
-				${this._renderItemContent(propertyEditorUI)}
-			</uui-button>`;
+            return html `
+				<uui-button
+					label=${propertyEditorUI.meta.label || propertyEditorUI.name}
+					href=${this._dataTypePickerModalRouteBuilder({ uiAlias: propertyEditorUI.alias })}>
+					${this.#renderItemContent(propertyEditorUI)}
+				</uui-button>
+			`;
         }
     }
-    _renderItemContent(propertyEditorUI) {
-        return html `<div class="item-content">
-			<umb-icon name="${propertyEditorUI.meta.icon}" class="icon"></umb-icon>
-			${propertyEditorUI.meta.label || propertyEditorUI.name}
-		</div>`;
+    #renderItemContent(propertyEditorUI) {
+        return html `
+			<div class="item-content">
+				<umb-icon name=${propertyEditorUI.meta.icon} class="icon"></umb-icon>
+				${propertyEditorUI.meta.label || propertyEditorUI.name}
+			</div>
+		`;
     }
-    _renderGroupDataTypes(dataTypes) {
-        return html ` <ul id="item-grid">
-			${repeat(dataTypes, (dataType) => dataType.unique, (dataType) => html ` <li class="item" ?selected=${this.value.selection.includes(dataType.unique)}>
-						<uui-button .label=${dataType.name} type="button" @click="${() => this._handleDataTypeClick(dataType)}">
-							<div class="item-content">
-								<umb-icon name=${dataType.icon ?? 'icon-circle-dotted'} class="icon"></umb-icon>
-								${dataType.name}
-							</div>
-						</uui-button>
-					</li>`)}
-		</ul>`;
+    #renderGroupDataTypes(dataTypes) {
+        return html `
+			<ul id="item-grid">
+				${repeat(dataTypes, (dataType) => dataType.unique, (dataType) => html `
+						<li class="item" ?selected=${this.value.selection.includes(dataType.unique)}>
+							<uui-button .label=${dataType.name} type="button" @click=${() => this.#handleDataTypeClick(dataType)}>
+								<div class="item-content">
+									<umb-icon name=${dataType.icon ?? 'icon-circle-dotted'} class="icon"></umb-icon>
+									${dataType.name}
+								</div>
+							</uui-button>
+						</li>
+					`)}
+			</ul>
+		`;
     }
     static { this.styles = [
         UmbTextStyles,
@@ -340,6 +363,7 @@ let UmbDataTypePickerFlowModalElement = class UmbDataTypePickerFlowModalElement
 				height: 100%;
 				width: 100%;
 			}
+
 			#item-grid .item .icon {
 				font-size: 2em;
 				margin: auto;
@@ -350,7 +374,6 @@ let UmbDataTypePickerFlowModalElement = class UmbDataTypePickerFlowModalElement
 			}
 
 			.choice-type-headline {
-				text-transform: capitalize;
 				border-bottom: 1px solid var(--uui-color-divider);
 			}
 		`,
@@ -362,9 +385,6 @@ __decorate([
 __decorate([
     state()
 ], UmbDataTypePickerFlowModalElement.prototype, "_groupedPropertyEditorUIs", void 0);
-__decorate([
-    state()
-], UmbDataTypePickerFlowModalElement.prototype, "_submitLabel", void 0);
 __decorate([
     state()
 ], UmbDataTypePickerFlowModalElement.prototype, "_currentPage", void 0);

package/dist-cms/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.token.d.ts

@@ -1,5 +1,6 @@
 import { UmbModalToken } from '../../../core/modal/index.js';
 export interface UmbDataTypePickerFlowModalData {
+    /** @deprecated This property will be removed in Umbraco 15. */
     submitLabel?: string;
 }
 export type UmbDataTypePickerFlowModalValue = {

package/dist-cms/packages/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.d.ts

@@ -1,15 +1,11 @@
-import type { UmbPropertyEditorUIPickerModalData, UmbPropertyEditorUIPickerModalValue } from '../../../core/modal/index.js';
 import { UmbModalBaseElement } from '../../../core/modal/index.js';
+import type { UmbPropertyEditorUIPickerModalData, UmbPropertyEditorUIPickerModalValue } from '../../../core/modal/index.js';
 export declare class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement<UmbPropertyEditorUIPickerModalData, UmbPropertyEditorUIPickerModalValue> {
     #private;
     private _groupedPropertyEditorUIs;
     private _propertyEditorUIs;
-    private _submitLabel;
     connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
-    private _renderFilter;
-    private _renderGrid;
-    private _renderGroupItems;
     static styles: import("@lit/reactive-element/css-tag.js").CSSResult[];
 }
 export default UmbPropertyEditorUIPickerModalElement;

package/dist-cms/packages/data-type/modals/property-editor-ui-picker/property-editor-ui-picker-modal.element.js

@@ -4,95 +4,95 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html, customElement, state, repeat } from '../../../../external/lit/index.js';
-import { UmbTextStyles } from '../../../core/style/index.js';
-import { UmbModalBaseElement } from '../../../core/modal/index.js';
+import { css, customElement, html, repeat, state } from '../../../../external/lit/index.js';
+import { fromCamelCase } from '../../../core/utils/index.js';
 import { umbExtensionsRegistry } from '../../../core/extension-registry/index.js';
 import { umbFocus } from '../../../core/lit-element/index.js';
+import { UmbModalBaseElement } from '../../../core/modal/index.js';
 let UmbPropertyEditorUIPickerModalElement = class UmbPropertyEditorUIPickerModalElement extends UmbModalBaseElement {
     constructor() {
         super(...arguments);
-        this._groupedPropertyEditorUIs = {};
+        this._groupedPropertyEditorUIs = [];
         this._propertyEditorUIs = [];
-        this._submitLabel = 'Select';
     }
     connectedCallback() {
         super.connectedCallback();
-        // TODO: We never parse on a submit label, so this seem weird as we don't enable this of other places.
-        //this._submitLabel = this.data?.submitLabel ?? this._submitLabel;
         this.#usePropertyEditorUIs();
     }
     #usePropertyEditorUIs() {
         this.observe(umbExtensionsRegistry.byType('propertyEditorUi'), (propertyEditorUIs) => {
             // Only include Property Editor UIs which has Property Editor Schema Alias
-            this._propertyEditorUIs = propertyEditorUIs.filter((propertyEditorUi) => !!propertyEditorUi.meta.propertyEditorSchemaAlias);
-            // TODO: groupBy is not known by TS yet
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-expect-error
-            this._groupedPropertyEditorUIs = Object.groupBy(this._propertyEditorUIs, (propertyEditorUi) => propertyEditorUi.meta.group);
+            this._propertyEditorUIs = propertyEditorUIs
+                .filter((propertyEditorUi) => !!propertyEditorUi.meta.propertyEditorSchemaAlias)
+                .sort((a, b) => a.meta.label.localeCompare(b.meta.label));
+            this.#groupPropertyEditorUIs(this._propertyEditorUIs);
         });
     }
     #handleClick(propertyEditorUi) {
-        this.#select(propertyEditorUi.alias);
-    }
-    #select(alias) {
-        this.value = { selection: [alias] };
+        this.value = { selection: [propertyEditorUi.alias] };
+        this._submitModal();
     }
     #handleFilterInput(event) {
-        let query = event.target.value || '';
-        query = query.toLowerCase();
+        const query = (event.target.value || '').toLowerCase();
         const result = !query
             ? this._propertyEditorUIs
-            : this._propertyEditorUIs.filter((propertyEditorUI) => {
-                return (propertyEditorUI.name.toLowerCase().includes(query) || propertyEditorUI.alias.toLowerCase().includes(query));
-            });
-        // TODO: groupBy is not known by TS yet
+            : this._propertyEditorUIs.filter((propertyEditorUI) => propertyEditorUI.name.toLowerCase().includes(query) || propertyEditorUI.alias.toLowerCase().includes(query));
+        this.#groupPropertyEditorUIs(result);
+    }
+    #groupPropertyEditorUIs(items) {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-expect-error
-        this._groupedPropertyEditorUIs = Object.groupBy(result, (propertyEditorUI) => propertyEditorUI.meta.group);
+        const grouped = Object.groupBy(items, (propertyEditorUi) => fromCamelCase(propertyEditorUi.meta.group));
+        this._groupedPropertyEditorUIs = Object.keys(grouped)
+            .sort((a, b) => a.localeCompare(b))
+            .map((key) => ({ key, items: grouped[key] }));
     }
     render() {
         return html `
 			<umb-body-layout headline=${this.localize.term('propertyEditorPicker_openPropertyEditorPicker')}>
-				<uui-box> ${this._renderFilter()} ${this._renderGrid()} </uui-box>
+				<uui-box>${this.#renderFilter()} ${this.#renderGrid()}</uui-box>
 				<div slot="actions">
-					<uui-button label="Close" @click=${this._rejectModal}></uui-button>
-					<uui-button
-						label="${this._submitLabel}"
-						look="primary"
-						color="positive"
-						@click=${this._submitModal}></uui-button>
+					<uui-button label=${this.localize.term('general_close')} @click=${this._rejectModal}></uui-button>
 				</div>
 			</umb-body-layout>
 		`;
     }
-    _renderFilter() {
-        return html ` <uui-input
-			type="search"
-			id="filter"
-			@input="${this.#handleFilterInput}"
-			placeholder="Type to filter..."
-			label="Type to filter icons"
-			${umbFocus()}>
-			<uui-icon name="search" slot="prepend" id="filter-icon"></uui-icon>
-		</uui-input>`;
+    #renderFilter() {
+        return html `
+			<uui-input
+				type="search"
+				id="filter"
+				@input=${this.#handleFilterInput}
+				placeholder=${this.localize.term('placeholders_filter')}
+				label=${this.localize.term('placeholders_filter')}
+				${umbFocus()}>
+				<uui-icon name="search" slot="prepend" id="filter-icon"></uui-icon>
+			</uui-input>
+		`;
     }
-    _renderGrid() {
-        return html ` ${Object.entries(this._groupedPropertyEditorUIs).map(([key, value]) => html ` <h4>${key}</h4>
-					${this._renderGroupItems(value)}`)}`;
+    #renderGrid() {
+        return html `
+			${repeat(this._groupedPropertyEditorUIs, (group) => group.key, (group) => html `
+					<h4>${group.key}</h4>
+					${this.#renderGroupItems(group.items)}
+				`)}
+		`;
     }
-    _renderGroupItems(groupItems) {
-        return html ` <ul id="item-grid">
-			${repeat(groupItems, (propertyEditorUI) => propertyEditorUI.alias, (propertyEditorUI) => html ` <li class="item" ?selected=${this.value.selection.includes(propertyEditorUI.alias)}>
-						<button type="button" @click="${() => this.#handleClick(propertyEditorUI)}">
-							<umb-icon name="${propertyEditorUI.meta.icon}" class="icon"></umb-icon>
-							${propertyEditorUI.meta.label || propertyEditorUI.name}
-						</button>
-					</li>`)}
-		</ul>`;
+    #renderGroupItems(groupItems) {
+        return html `
+			<ul id="item-grid">
+				${repeat(groupItems, (propertyEditorUI) => propertyEditorUI.alias, (propertyEditorUI) => html `
+						<li class="item" ?selected=${this.value.selection.includes(propertyEditorUI.alias)}>
+							<button type="button" @click=${() => this.#handleClick(propertyEditorUI)}>
+								<umb-icon name=${propertyEditorUI.meta.icon} class="icon"></umb-icon>
+								${propertyEditorUI.meta.label || propertyEditorUI.name}
+							</button>
+						</li>
+					`)}
+			</ul>
+		`;
     }
     static { this.styles = [
-        UmbTextStyles,
         css `
 			#filter {
 				width: 100%;
@@ -164,9 +164,6 @@ __decorate([
 __decorate([
     state()
 ], UmbPropertyEditorUIPickerModalElement.prototype, "_propertyEditorUIs", void 0);
-__decorate([
-    state()
-], UmbPropertyEditorUIPickerModalElement.prototype, "_submitLabel", void 0);
 UmbPropertyEditorUIPickerModalElement = __decorate([
     customElement('umb-property-editor-ui-picker-modal')
 ], UmbPropertyEditorUIPickerModalElement);

package/dist-cms/packages/data-type/reference/repository/data-type-reference.server.data.d.ts

@@ -1,6 +1,5 @@
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 /**
- * @export
  * @class UmbDataTypeReferenceServerDataSource
  * @implements {RepositoryDetailDataSource}
  */
@@ -8,7 +7,7 @@ export declare class UmbDataTypeReferenceServerDataSource {
     #private;
     /**
      * Creates an instance of UmbDataTypeReferenceServerDataSource.
-     * @param {UmbControllerHost} host
+     * @param {UmbControllerHost} host - The controller host for this controller to be appended to
      * @memberof UmbDataTypeReferenceServerDataSource
      */
     constructor(host: UmbControllerHost);

package/dist-cms/packages/data-type/reference/repository/data-type-reference.server.data.js

@@ -1,7 +1,6 @@
 import { tryExecuteAndNotify } from '../../../core/resources/index.js';
 import { DataTypeService } from '../../../../external/backend-api/index.js';
 /**
- * @export
  * @class UmbDataTypeReferenceServerDataSource
  * @implements {RepositoryDetailDataSource}
  */
@@ -9,7 +8,7 @@ export class UmbDataTypeReferenceServerDataSource {
     #host;
     /**
      * Creates an instance of UmbDataTypeReferenceServerDataSource.
-     * @param {UmbControllerHost} host
+     * @param {UmbControllerHost} host - The controller host for this controller to be appended to
      * @memberof UmbDataTypeReferenceServerDataSource
      */
     constructor(host) {

package/dist-cms/packages/data-type/repository/detail/data-type-detail.server.data-source.d.ts

@@ -3,7 +3,6 @@ import type { UmbDetailDataSource } from '../../../core/repository/index.js';
 import type { UmbControllerHost } from '../../../../libs/controller-api/index.js';
 /**
  * A data source for the Data Type that fetches data from the server
- * @export
  * @class UmbDataTypeServerDataSource
  * @implements {RepositoryDetailDataSource}
  */
@@ -11,13 +10,14 @@ export declare class UmbDataTypeServerDataSource implements UmbDetailDataSource<
     #private;
     /**
      * Creates an instance of UmbDataTypeServerDataSource.
-     * @param {UmbControllerHost} host
+     * @param {UmbControllerHost} host - The controller host for this controller to be appended to
      * @memberof UmbDataTypeServerDataSource
      */
     constructor(host: UmbControllerHost);
     /**
      * Creates a new Data Type scaffold
      * @param {(string | null)} parentUnique
+     * @param preset
      * @returns { CreateDataTypeRequestModel }
      * @memberof UmbDataTypeServerDataSource
      */
@@ -40,6 +40,7 @@ export declare class UmbDataTypeServerDataSource implements UmbDetailDataSource<
     /**
      * Inserts a new Data Type on the server
      * @param {UmbDataTypeDetailModel} model
+     * @param parentUnique
      * @returns {*}
      * @memberof UmbDataTypeServerDataSource
      */
@@ -53,6 +54,7 @@ export declare class UmbDataTypeServerDataSource implements UmbDetailDataSource<
     /**
      * Updates a DataType on the server
      * @param {UmbDataTypeDetailModel} DataType
+     * @param model
      * @returns {*}
      * @memberof UmbDataTypeServerDataSource
      */