Merge branch 'main' into feature/property-editor-tags

src/Umbraco.Web.UI.Client/.vscode/settings.json

@@ -5,6 +5,7 @@
 		"Backoffice",
 		"combobox",
 		"Elementable",
+		"pickable",
 		"templating",
 		"variantable"
 	],

src/Umbraco.Web.UI.Client/libs/modal/modal.interfaces.ts

@@ -1,7 +1,8 @@
 export interface UmbPickerModalData<T> {
-	multiple: boolean;
-	selection: Array<string | null>;
+	multiple?: boolean;
+	selection?: Array<string | null>;
 	filter?: (item: T) => boolean;
+	pickableFilter?: (item: T) => boolean;
 }
 
 export interface UmbPickerModalResult {

src/Umbraco.Web.UI.Client/libs/modal/token/data-type-picker-modal.token.ts

@@ -1,13 +1,8 @@
-import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
+import { FolderTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import { UmbModalToken, UmbPickerModalData, UmbPickerModalResult } from '@umbraco-cms/backoffice/modal';
 
-export interface UmbDataTypePickerModalData {
-	selection?: Array<string | null>;
-	multiple?: boolean;
-}
-
-export interface UmbDataTypePickerModalResult {
-	selection: Array<string | null>;
-}
+export type UmbDataTypePickerModalData = UmbPickerModalData<FolderTreeItemResponseModel>;
+export type UmbDataTypePickerModalResult = UmbPickerModalResult;
 
 export const UMB_DATA_TYPE_PICKER_MODAL = new UmbModalToken<UmbDataTypePickerModalData, UmbDataTypePickerModalResult>(
 	'Umb.Modal.DataTypePicker',

src/Umbraco.Web.UI.Client/libs/picker-input/picker-input.context.ts

@@ -7,6 +7,7 @@ import {
 	UMB_MODAL_CONTEXT_TOKEN,
 	UmbModalContext,
 	UmbModalToken,
+	UmbPickerModalData,
 } from '@umbraco-cms/backoffice/modal';
 import { UmbContextConsumerController } from '@umbraco-cms/backoffice/context-api';
 import { ItemResponseModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -20,6 +21,8 @@ export class UmbPickerInputContext<ItemType extends ItemResponseModelBaseModel>
 
 	public modalContext?: UmbModalContext;
 
+	public pickableFilter?: (item: ItemType) => boolean = () => true;
+
 	#selection = new UmbArrayState<string>([]);
 	selection = this.#selection.asObservable();
 
@@ -74,14 +77,14 @@ export class UmbPickerInputContext<ItemType extends ItemResponseModelBaseModel>
 		this.#selection.next(selection);
 	}
 
-	// TODO: revisit this method. How do we best pass picker data?
-	// If modalAlias is a ModalToken, then via TS, we should get the correct type for pickerData. Otherwise fallback to unknown.
-	openPicker(pickerData?: any) {
+	// TODO: If modalAlias is a ModalToken, then via TS, we should get the correct type for pickerData. Otherwise fallback to unknown.
+	openPicker(pickerData?: Partial<UmbPickerModalData<ItemType>>) {
 		if (!this.modalContext) throw new Error('Modal context is not initialized');
 
 		const modalHandler = this.modalContext.open(this.modalAlias, {
 			multiple: this.max === 1 ? false : true,
 			selection: [...this.getSelection()],
+			pickableFilter: this.pickableFilter,
 			...pickerData,
 		});
 

src/Umbraco.Web.UI.Client/libs/tree/tree-item-base.context.ts

@@ -138,7 +138,13 @@ export class UmbTreeItemContextBase<TreeItemType extends TreeItemPresentationMod
 
 	#observeIsSelectable() {
 		if (!this.treeContext) return;
-		new UmbObserverController(this.host, this.treeContext.selectable, (value) => this.#isSelectable.next(value));
+		new UmbObserverController(this.host, this.treeContext.selectable, (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.next(isSelectable);
+			}
+		});
 	}
 
 	#observeIsSelected() {

src/Umbraco.Web.UI.Client/libs/tree/tree.context.ts

@@ -40,8 +40,10 @@ export class UmbTreeContextBase<TreeItemType extends TreeItemPresentationModel>
 	public readonly multiple = this.#selectionManager.multiple;
 	public readonly selection = this.#selectionManager.selection;
 
+	public repository?: UmbTreeRepository<TreeItemType>;
+	public selectableFilter?: (item: TreeItemType) => boolean = () => true;
+
 	#treeAlias?: string;
-	repository?: UmbTreeRepository<TreeItemType>;
 	#treeManifestObserver?: UmbObserverController<any>;
 
 	#initResolver?: () => void;

src/Umbraco.Web.UI.Client/src/backoffice/core/components/input-list-base/input-list-base.ts

@@ -6,7 +6,7 @@ import {
 	UmbModalToken,
 	UmbModalType,
 	UMB_MODAL_CONTEXT_TOKEN,
-	UmbPickerModalData,
+	UmbPickerModalResult,
 } from '@umbraco-cms/backoffice/modal';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
@@ -43,7 +43,7 @@ export class UmbInputListBaseElement extends UmbLitElement {
 			selection: this.value,
 		});
 
-		modalHandler?.onSubmit().then((data: UmbPickerModalData<string>) => {
+		modalHandler?.onSubmit().then((data: UmbPickerModalResult) => {
 			if (data) {
 				this.value = data.selection.filter((id) => id !== null && id !== undefined) as Array<string>;
 				this.selectionUpdated();

src/Umbraco.Web.UI.Client/src/backoffice/core/components/tree/tree.element.ts

@@ -62,6 +62,14 @@ export class UmbTreeElement extends UmbLitElement {
 		this.requestUpdate('hideTreeRoot', oldVal);
 	}
 
+	@property()
+	get selectableFilter() {
+		return this.#treeContext.selectableFilter;
+	}
+	set selectableFilter(newVal) {
+		this.#treeContext.selectableFilter = newVal;
+	}
+
 	@state()
 	private _items: TreeItemPresentationModel[] = [];
 

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/components/data-type-input/data-type-input.element.ts

@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { UmbDataTypePickerContext } from './data-type-input.context';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
-import type { DataTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
+import type { DataTypeItemResponseModel, FolderTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
 
 @customElement('umb-data-type-input')
 export class UmbDataTypeInputElement extends FormControlMixin(UmbLitElement) {
@@ -67,6 +67,14 @@ export class UmbDataTypeInputElement extends FormControlMixin(UmbLitElement) {
 		this.selectedIds = idsString.split(/[ ,]+/);
 	}
 
+	@property()
+	get pickableFilter() {
+		return this.#pickerContext.pickableFilter;
+	}
+	set pickableFilter(newVal) {
+		this.#pickerContext.pickableFilter = newVal;
+	}
+
 	@state()
 	private _items?: Array<DataTypeItemResponseModel>;
 

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/modal/data-type-picker/data-type-picker-modal.element.ts

@@ -53,6 +53,7 @@ export class UmbDataTypePickerModalElement extends UmbLitElement {
 						@selected=${this.#onSelectionChange}
 						.selection=${this._selection}
 						selectable
+						.selectableFilter=${this.data?.pickableFilter}
 						?multiple=${this._multiple}></umb-tree>
 				</uui-box>
 				<div slot="actions">