Variants Sorting: Sort by language name (fix #21408)

src/Umbraco.Web.UI.Client/src/packages/core/workspace/components/workspace-split-view/workspace-split-view-variant-selector.element.ts

@@ -61,6 +61,13 @@ export class UmbWorkspaceSplitViewVariantSelectorElement<
 	@state()
 	private _labelDefault = '';
 
+	/**
+	 * Method to sort variants in the selector.
+	 * Should be overwritten by actual implementation.
+	 * @param {VariantOptionModelType} a - First variant option to compare
+	 * @param {VariantOptionModelType} b - Second variant option to compare
+	 * @returns	{number} - Sorting value
+	 */
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	protected _variantSorter = (a: VariantOptionModelType, b: VariantOptionModelType) => {
 		return 0;

src/Umbraco.Web.UI.Client/src/packages/documents/documents/modals/shared/document-variant-language-picker.element.ts

@@ -1,4 +1,5 @@
 import { UmbDocumentVariantState, type UmbDocumentVariantOptionModel } from '../../types.js';
+import { sortVariants } from '../../utils.js';
 import type { UUIBooleanInputElement } from '@umbraco-cms/backoffice/external/uui';
 import {
 	css,
@@ -19,7 +20,13 @@ export class UmbDocumentVariantLanguagePickerElement extends UmbLitElement {
 	#selectionManager!: UmbSelectionManager<string>;
 
 	@property({ type: Array, attribute: false })
-	variantLanguageOptions: Array<UmbDocumentVariantOptionModel> = [];
+	public get variantLanguageOptions(): Array<UmbDocumentVariantOptionModel> {
+		return this.#variantLanguageOptions;
+	}
+	public set variantLanguageOptions(value: Array<UmbDocumentVariantOptionModel>) {
+		this.#variantLanguageOptions = value.sort(sortVariants);
+	}
+	#variantLanguageOptions: Array<UmbDocumentVariantOptionModel> = [];
 
 	@property({ attribute: false })
 	set selectionManager(value: UmbSelectionManager<string>) {

src/Umbraco.Web.UI.Client/src/packages/documents/documents/utils.ts

@@ -34,7 +34,7 @@ export const sortVariants = (a: VariantType, b: VariantType) => {
 	const compareState = (a: VariantType, b: VariantType) =>
 		getVariantStateOrderValue(a.variant) - getVariantStateOrderValue(b.variant);
 
-	const compareName = (a: VariantType, b: VariantType) => a.variant?.name.localeCompare(b.variant?.name || '') || 99;
+	const compareName = (a: VariantType, b: VariantType) => a.language?.name.localeCompare(b.language?.name || '') || 999;
 
 	return compareDefault(a, b) || compareMandatory(a, b) || compareState(a, b) || compareName(a, b);
 };