From 0cc46303eafb743fa39e28136d1b0e7431344ab9 Mon Sep 17 00:00:00 2001
From: Arthur Taylor <arthur.taylor@wikimedia.de>
Date: Mon, 23 Sep 2024 10:07:02 +0200
Subject: [PATCH] Replace Wikit Lookup component with Codex

Replace usages of Wikit's Lookup compontent in `ItemLookup` and
`SpellingVariantInput` with the `CdxLookup` component.

Bug: T370057
---
 cypress/e2e/NewLexemeForm.cy.js               |  20 ++-
 package-lock.json                             |  47 +++---
 package.json                                  |   4 +-
 src/components/ItemLookup.vue                 | 139 ++++++++++++------
 src/components/LanguageInput.vue              |  22 ++-
 src/components/NewLexemeForm.vue              |   2 +-
 src/components/SpellingVariantInput.vue       | 109 +++++++-------
 tests/integration/NewLexemeForm.test.ts       |  32 ++--
 tests/unit/components/ItemLookup.test.ts      |  42 ++----
 .../components/SpellingVariantInput.test.ts   |  52 +++----
 10 files changed, 262 insertions(+), 207 deletions(-)

diff --git a/cypress/e2e/NewLexemeForm.cy.js b/cypress/e2e/NewLexemeForm.cy.js
index ed29565a..82c63db8 100644
--- a/cypress/e2e/NewLexemeForm.cy.js
+++ b/cypress/e2e/NewLexemeForm.cy.js
@@ -66,13 +66,16 @@ describe( 'NewLexemeForm', () => {
 		cy.get( '.wbl-snl-language-lookup input' )
 			.type( '=Q123', { delay: 0 } );
 		checkA11y( '.wbl-snl-language-lookup' );
-		cy.get( '.wbl-snl-language-lookup .wikit-OptionsMenu__item' ).click();
+		cy.get( 'li.cdx-menu-item' ).contains( 'No match was found' ).should( 'not.exist' );
+		checkA11y( '.wbl-snl-language-lookup' );
+		cy.get( '.wbl-snl-language-lookup .cdx-menu-item' ).click();
 
 		cy.wait( '@LanguageCodeRetrieval' );
 
 		cy.get( '.wbl-snl-lexical-category-lookup input' )
 			.type( '=Q456', { delay: 0 } );
-		cy.get( '.wbl-snl-lexical-category-lookup .wikit-OptionsMenu__item' ).click();
+		cy.get( 'li.cdx-menu-item' ).contains( 'No match was found' ).should( 'not.exist' );
+		cy.get( '.wbl-snl-lexical-category-lookup .cdx-menu-item' ).click();
 
 		cy.get( '.wbl-snl-form button' )
 			.click();
@@ -99,17 +102,20 @@ describe( 'NewLexemeForm', () => {
 
 		cy.get( '.wbl-snl-language-lookup input' )
 			.type( '=Q123', { delay: 0 } );
-		cy.get( '.wbl-snl-language-lookup .wikit-OptionsMenu__item' ).click();
+		cy.get( '.wbl-snl-language-lookup li.cdx-menu-item' ).contains( 'No match was found' ).should( 'not.exist' );
+		cy.get( '.wbl-snl-language-lookup .cdx-menu-item' ).click();
 
 		cy.get( '.wbl-snl-lexical-category-lookup input' )
 			.type( '=Q456', { delay: 0 } );
-		cy.get( '.wbl-snl-lexical-category-lookup .wikit-OptionsMenu__item' ).click();
+		cy.get( '.wbl-snl-lexical-category-lookup li.cdx-menu-item' ).contains( 'No match was found' ).should( 'not.exist' );
+		cy.get( '.wbl-snl-lexical-category-lookup .cdx-menu-item' ).click();
 
 		cy.wait( '@LanguageCodeRetrieval' );
 
 		cy.get( '.wbl-snl-spelling-variant-lookup input' )
 			.type( 'en-ca', { delay: 0 } );
-		cy.get( '.wbl-snl-spelling-variant-lookup .wikit-OptionsMenu__item' ).click();
+		cy.get( '.wbl-snl-spelling-variant-lookup li.cdx-menu-item' ).contains( 'No match was found' ).should( 'not.exist' );
+		cy.get( '.wbl-snl-spelling-variant-lookup .cdx-menu-item' ).click();
 
 		cy.get( '.wbl-snl-form button' )
 			.click();
@@ -151,12 +157,12 @@ describe( 'NewLexemeForm', () => {
 
 		cy.get( '.wbl-snl-language-lookup input' ).click();
 
-		cy.get( '.wbl-snl-language-lookup .wikit-OptionsMenu__item__label' )
+		cy.get( '.wbl-snl-language-lookup .cdx-menu-item__text__label' )
 			.then( ( $element ) => {
 				expect( $element ).to.have.text( 'test language' );
 			} );
 
-		cy.get( '.wbl-snl-language-lookup .wikit-OptionsMenu__item__description' )
+		cy.get( '.wbl-snl-language-lookup .cdx-menu-item__text__description' )
 			.then( ( $element ) => {
 				expect( $element ).to.have.text( 'test language description' );
 			} );
diff --git a/package-lock.json b/package-lock.json
index 431def15..84c2454b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,8 @@
 			"version": "0.0.1",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
-				"@wikimedia/codex": "^1.13.1",
-				"@wikimedia/codex-design-tokens": "^1.13.1",
+				"@wikimedia/codex": "^1.14.0",
+				"@wikimedia/codex-design-tokens": "^1.14.0",
 				"@wmde/wikibase-datamodel-types": "^0.2.0",
 				"@wmde/wikit-tokens": "^3.0.0-alpha.12",
 				"@wmde/wikit-vue-components": "^3.0.0-alpha.12",
@@ -3552,13 +3552,12 @@
 			}
 		},
 		"node_modules/@wikimedia/codex": {
-			"version": "1.13.1",
-			"resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-1.13.1.tgz",
-			"integrity": "sha512-ZfG8EYVGaELU31b5NEaDkzAGQsuc7PFDw9juOst/tNW14w1uqN0ok7WwzyvtwzA7WFWVdu1WiYXtLlKpCsYiyw==",
-			"license": "GPL-2.0+",
+			"version": "1.14.0",
+			"resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-1.14.0.tgz",
+			"integrity": "sha512-BDoqpzcRN0tCWSIYtvb4ukFeSYStz09UZ2VkNPJ/YgtpmcSnFdpEcbL29k1W/BVntuL9XAkv88s0OHKoNX1ikA==",
 			"dependencies": {
 				"@floating-ui/vue": "1.0.6",
-				"@wikimedia/codex-icons": "1.13.1"
+				"@wikimedia/codex-icons": "1.14.0"
 			},
 			"engines": {
 				"node": ">=18",
@@ -3569,20 +3568,18 @@
 			}
 		},
 		"node_modules/@wikimedia/codex-design-tokens": {
-			"version": "1.13.1",
-			"resolved": "https://registry.npmjs.org/@wikimedia/codex-design-tokens/-/codex-design-tokens-1.13.1.tgz",
-			"integrity": "sha512-omIdJyp+kW6i0pCxsgqoA3S7htGk7NsqsmMNkm4JOAEzF7ojv9tWFg63/yxp3ENbmF29wiJw9AcKEPDnvjbi0Q==",
-			"license": "GPL-2.0+",
+			"version": "1.14.0",
+			"resolved": "https://registry.npmjs.org/@wikimedia/codex-design-tokens/-/codex-design-tokens-1.14.0.tgz",
+			"integrity": "sha512-EC+3H1Zi+CLWa++IlEi/5fz4rfRMPCySjUY4plKYwPk0U1jo+uap8+CWjq7NV/RRGzUYm0/LIITEVEpJnK91xg==",
 			"engines": {
 				"node": ">=18",
 				"npm": ">=7.21.0"
 			}
 		},
 		"node_modules/@wikimedia/codex-icons": {
-			"version": "1.13.1",
-			"resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-1.13.1.tgz",
-			"integrity": "sha512-eJEnelrDGkrmsf9nCylUOK4JQtCxQqdLvyVs8fHqUhzn1deYDE9HERbzhhTiGmBsBvncvuOCSXtl86jaHbqaAA==",
-			"license": "MIT",
+			"version": "1.14.0",
+			"resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-1.14.0.tgz",
+			"integrity": "sha512-KbevrFz4Z5Jw/zadfN3UxDs2owZ9inYP0MqARE4LA3NOWkJpD76e+58KABmAnSUtZ2swMi94CFWex9tODDFg0w==",
 			"engines": {
 				"node": ">=18",
 				"npm": ">=7.21.0"
@@ -17671,23 +17668,23 @@
 			}
 		},
 		"@wikimedia/codex": {
-			"version": "1.13.1",
-			"resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-1.13.1.tgz",
-			"integrity": "sha512-ZfG8EYVGaELU31b5NEaDkzAGQsuc7PFDw9juOst/tNW14w1uqN0ok7WwzyvtwzA7WFWVdu1WiYXtLlKpCsYiyw==",
+			"version": "1.14.0",
+			"resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-1.14.0.tgz",
+			"integrity": "sha512-BDoqpzcRN0tCWSIYtvb4ukFeSYStz09UZ2VkNPJ/YgtpmcSnFdpEcbL29k1W/BVntuL9XAkv88s0OHKoNX1ikA==",
 			"requires": {
 				"@floating-ui/vue": "1.0.6",
-				"@wikimedia/codex-icons": "1.13.1"
+				"@wikimedia/codex-icons": "1.14.0"
 			}
 		},
 		"@wikimedia/codex-design-tokens": {
-			"version": "1.13.1",
-			"resolved": "https://registry.npmjs.org/@wikimedia/codex-design-tokens/-/codex-design-tokens-1.13.1.tgz",
-			"integrity": "sha512-omIdJyp+kW6i0pCxsgqoA3S7htGk7NsqsmMNkm4JOAEzF7ojv9tWFg63/yxp3ENbmF29wiJw9AcKEPDnvjbi0Q=="
+			"version": "1.14.0",
+			"resolved": "https://registry.npmjs.org/@wikimedia/codex-design-tokens/-/codex-design-tokens-1.14.0.tgz",
+			"integrity": "sha512-EC+3H1Zi+CLWa++IlEi/5fz4rfRMPCySjUY4plKYwPk0U1jo+uap8+CWjq7NV/RRGzUYm0/LIITEVEpJnK91xg=="
 		},
 		"@wikimedia/codex-icons": {
-			"version": "1.13.1",
-			"resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-1.13.1.tgz",
-			"integrity": "sha512-eJEnelrDGkrmsf9nCylUOK4JQtCxQqdLvyVs8fHqUhzn1deYDE9HERbzhhTiGmBsBvncvuOCSXtl86jaHbqaAA=="
+			"version": "1.14.0",
+			"resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-1.14.0.tgz",
+			"integrity": "sha512-KbevrFz4Z5Jw/zadfN3UxDs2owZ9inYP0MqARE4LA3NOWkJpD76e+58KABmAnSUtZ2swMi94CFWex9tODDFg0w=="
 		},
 		"@wmde/eslint-config-wikimedia-typescript": {
 			"version": "0.2.12",
diff --git a/package.json b/package.json
index d878afb1..e771402a 100644
--- a/package.json
+++ b/package.json
@@ -43,8 +43,8 @@
 		"node": ">=16"
 	},
 	"dependencies": {
-		"@wikimedia/codex": "^1.13.1",
-		"@wikimedia/codex-design-tokens": "^1.13.1",
+		"@wikimedia/codex": "^1.14.0",
+		"@wikimedia/codex-design-tokens": "^1.14.0",
 		"@wmde/wikibase-datamodel-types": "^0.2.0",
 		"@wmde/wikit-tokens": "^3.0.0-alpha.12",
 		"@wmde/wikit-vue-components": "^3.0.0-alpha.12",
diff --git a/src/components/ItemLookup.vue b/src/components/ItemLookup.vue
index ec67129d..172f15f4 100644
--- a/src/components/ItemLookup.vue
+++ b/src/components/ItemLookup.vue
@@ -1,10 +1,20 @@
 <script setup lang="ts">
 import {
 	computed,
+	ComputedRef,
 	ref,
+	toRef,
 } from 'vue';
 import { SearchedItemOption } from '@/data-access/ItemSearcher';
-import WikitLookup from './WikitLookup';
+import {
+	CdxLookup,
+	CdxField,
+	MenuItemData,
+	ValidationStatusType,
+	ValidationMessages,
+	useModelWrapper,
+} from '@wikimedia/codex';
+import RequiredAsterisk from '@/components/RequiredAsterisk.vue';
 import debounce from 'lodash/debounce';
 import escapeRegExp from 'lodash/escapeRegExp';
 import { useMessages } from '@/plugins/MessagesPlugin/Messages';
@@ -19,6 +29,7 @@ interface Props {
 	itemSuggestions?: SearchedItemOption[];
 	ariaRequired?: boolean;
 }
+
 const props = withDefaults( defineProps<Props>(), {
 	error: null,
 	itemSuggestions: () => [],
@@ -33,6 +44,8 @@ const emit = defineEmits( {
 	'update:searchInput': null,
 } );
 
+const selection = ref( null );
+
 // itemSuggestions matching the current searchInput
 const suggestedOptions = computed( () => {
 	// eslint-disable-next-line security/detect-non-literal-regexp -- escapeRegExp used
@@ -69,11 +82,22 @@ const onOptionSelected = ( value: SearchedItemOption | null ) => {
 	emit( 'update:modelValue', value );
 };
 
+const onCodexOptionSelected = ( selectedItem: string | null ) => {
+	const searchOption = menuItems.value.find( ( item ) => item.id === selectedItem );
+	return onOptionSelected( searchOption ?? null );
+};
+
 const debouncedSearchForItems = debounce( async ( debouncedInputValue: string ) => {
 	searchedOptions.value = await props.searchForItems( debouncedInputValue );
 }, 150 );
-const onSearchInput = ( inputValue: string ) => {
-	emit( 'update:searchInput', inputValue );
+const lastInput = ref( null as string | null );
+const onInput = ( inputValue: string ) => {
+	if ( lastInput.value === inputValue ) {
+		return;
+	}
+	lastInput.value = inputValue;
+	const foundValue = menuItems.value
+		.find( ( item ) => item.display.label?.value === inputValue );
 	if ( inputValue.trim() === '' ) {
 		searchedOptions.value = [];
 		return;
@@ -85,10 +109,11 @@ const onSearchInput = ( inputValue: string ) => {
 	) {
 		return;
 	}
+	onCodexOptionSelected( foundValue?.id || null );
 	debouncedSearchForItems( inputValue );
 };
 
-const onScroll = async () => {
+const onLoadMore = async () => {
 	const searchReults = await props.searchForItems(
 		props.searchInput,
 		searchedOptions.value.length,
@@ -96,18 +121,8 @@ const onScroll = async () => {
 	searchedOptions.value = [ ...searchedOptions.value, ...searchReults ];
 };
 
-// the remaining setup translates multilingual SearchedItemOptions to monolingual WikitItemOptions
-
-interface WikitMenuItem {
-	label: string;
-	description: string;
-	tag?: string;
-}
-interface WikitItemOption extends WikitMenuItem {
-	value: string;
-}
-
-function searchResultToMonolingualOption( searchResult: SearchedItemOption ): WikitItemOption {
+// translate a single multilingual SearchedItemOption to a monolingual MenuItemData
+function searchResultToMonolingualOption( searchResult: SearchedItemOption ): MenuItemData {
 	return {
 		label: searchResult.display.label?.value || searchResult.id,
 		description: searchResult.display.description?.value || '',
@@ -115,44 +130,78 @@ function searchResultToMonolingualOption( searchResult: SearchedItemOption ): Wi
 	};
 }
 
-const wikitMenuItems = computed( () => {
+// translate multilingual SearchedItemOptions to monolingual MenuItemData array
+const codexMenuItems: ComputedRef<MenuItemData[]> = computed( () => {
 	return menuItems.value.map( searchResultToMonolingualOption );
 } );
 
-const wikitValue = computed( () => {
-	if ( props.value === null ) {
-		return null;
+const messages = useMessages();
+
+const menuConfig = {
+	visibleItemLimit: 6,
+};
+
+const fieldStatus = computed( (): ValidationStatusType => {
+	if ( !props.error ) {
+		return 'default';
 	}
-	return searchResultToMonolingualOption( props.value );
+	return props.error.type;
 } );
 
-const onWikitOptionSelected = ( value: unknown ) => {
-	const wikitOption = value as WikitItemOption | null;
-	const searchOption = menuItems.value.find( ( item ) => item.id === wikitOption?.value );
-	return onOptionSelected( searchOption ?? null );
-};
+const errorMessages = computed( (): ValidationMessages => {
+	if ( props.error ) {
+		if ( props.error.type === 'error' ) {
+			return { error: props.error.message };
+		}
+		if ( props.error.type === 'warning' ) {
+			return { warning: props.error.message };
+		}
+	}
+	return {};
+} );
+
+/**
+ * We want to pass the searchInput property from the parent component
+ * to the child component. The searchInput property comes in read-only
+ * and receives updates from the parent (it is a ref / computed value).
+ * Use the `useModelWrapper` helper here to turn the read-only property
+ * into a computed value that emits updates on change.
+ */
+const searchInputWrapper = useModelWrapper(
+	toRef( props, 'searchInput' ),
+	emit,
+	'update:searchInput',
+);
 
-const messages = useMessages();
 </script>
 
 <template>
-	<wikit-lookup
-		:label="label"
-		:placeholder="placeholder"
-		:search-input="props.searchInput"
-		:menu-items="wikitMenuItems"
-		:value="wikitValue"
-		:error="error"
-		:aria-required="ariaRequired"
-		@update:search-input="onSearchInput"
-		@scroll="onScroll"
-		@input="onWikitOptionSelected"
-	>
-		<template #no-results>
-			{{ messages.getUnescaped( 'wikibase-entityselector-notfound' ) }}
+	<cdx-field
+		:status="fieldStatus"
+		:messages="errorMessages">
+		<cdx-lookup
+			v-model:selected="selection"
+			v-model:input-value="searchInputWrapper"
+			:aria-required="ariaRequired"
+			:placeholder="placeholder"
+			:menu-items="codexMenuItems"
+			:menu-config="menuConfig"
+			@load-more="onLoadMore"
+			@input="onInput"
+			@update:selected="onCodexOptionSelected"
+		>
+			<template #no-results>
+				{{ messages.getUnescaped( 'wikibase-entityselector-notfound' ) }}
+			</template>
+		</cdx-lookup>
+		<template #label>
+			{{ label }}<required-asterisk v-if="ariaRequired" />
 		</template>
-		<template #suffix>
-			<slot name="suffix" />
-		</template>
-	</wikit-lookup>
+	</cdx-field>
 </template>
+
+<style scoped lang="scss">
+.wbl-snl-required-asterisk {
+	margin-inline-start: var( --dimension-spacing-xsmall );
+}
+</style>
diff --git a/src/components/LanguageInput.vue b/src/components/LanguageInput.vue
index d632bde5..2db82156 100644
--- a/src/components/LanguageInput.vue
+++ b/src/components/LanguageInput.vue
@@ -5,17 +5,18 @@ import { useMessages } from '@/plugins/MessagesPlugin/Messages';
 import ItemLookup from '@/components/ItemLookup.vue';
 import RequiredAsterisk from '@/components/RequiredAsterisk.vue';
 import { useLanguageItemSearch } from '@/plugins/ItemSearchPlugin/LanguageItemSearch';
-import { computed } from 'vue';
+import { computed, toRef } from 'vue';
 import { useConfig } from '@/plugins/ConfigPlugin/Config';
+import { useModelWrapper } from '@wikimedia/codex';
 
 interface Props {
 	modelValue: SearchedItemOption | null;
 	searchInput: string;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
 
-defineEmits<{
+const emit = defineEmits<{
 	( e: 'update:modelValue', modelValue: Props['modelValue'] ): void;
 	( e: 'update:searchInput', searchInput: Props['searchInput'] ): void;
 }>();
@@ -45,6 +46,19 @@ const error = computed( () => {
 	};
 } );
 const config = useConfig();
+
+/**
+ * We want to pass the searchInput property from the parent component
+ * to the child component. The searchInput property comes in read-only
+ * and receives updates from the parent (it is a ref / computed value).
+ * Use the `useModelWrapper` helper here to turn the read-only property
+ * into a computed value that emits updates on change.
+ */
+const searchInputWrapper = useModelWrapper(
+	toRef( props, 'searchInput' ),
+	emit,
+	'update:searchInput',
+);
 </script>
 
 <script lang="ts">
@@ -58,13 +72,13 @@ export default {
 <template>
 	<div class="wbl-snl-language-lookup">
 		<item-lookup
+			v-model:search-input="searchInputWrapper"
 			:label="messages.getUnescaped( 'wikibaselexeme-newlexeme-language' )"
 			:placeholder="messages.getUnescaped(
 				'wikibaselexeme-newlexeme-language-placeholder-with-example',
 				config.placeholderExampleData.languageLabel
 			)"
 			:value="modelValue"
-			:search-input="searchInput"
 			:search-for-items="searchForItems"
 			:error="error"
 			:aria-required="true"
diff --git a/src/components/NewLexemeForm.vue b/src/components/NewLexemeForm.vue
index d5999e31..e5ff2f3b 100644
--- a/src/components/NewLexemeForm.vue
+++ b/src/components/NewLexemeForm.vue
@@ -85,7 +85,7 @@ const spellingVariant = computed( {
 	get(): string {
 		return store.state.spellingVariant;
 	},
-	set( newSpellingVariant: string | null ): void {
+	set( newSpellingVariant: string | undefined ): void {
 		store.commit( SET_SPELLING_VARIANT, newSpellingVariant );
 		if ( newSpellingVariant ) {
 			store.commit( CLEAR_PER_FIELD_ERRORS, 'spellingVariantErrors' );
diff --git a/src/components/SpellingVariantInput.vue b/src/components/SpellingVariantInput.vue
index d5b8bbf6..1dc8639d 100644
--- a/src/components/SpellingVariantInput.vue
+++ b/src/components/SpellingVariantInput.vue
@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import escapeRegExp from 'lodash/escapeRegExp';
-import WikitLookup from './WikitLookup';
+import {
+	CdxLookup,
+	CdxField,
+	MenuItemData,
+	ValidationMessages,
+	ValidationStatusType,
+} from '@wikimedia/codex';
 import RequiredAsterisk from '@/components/RequiredAsterisk.vue';
 import { useMessages } from '@/plugins/MessagesPlugin/Messages';
 import { useLanguageCodesProvider } from '@/plugins/LanguageCodesProviderPlugin/LanguageCodesProvider';
@@ -9,16 +15,10 @@ import { useConfig } from '@/plugins/ConfigPlugin/Config';
 import { useStore } from 'vuex';
 
 interface Props {
-	modelValue: string | null;
+	modelValue: string | number | undefined;
 	searchInput: string;
 }
 
-interface WikitMenuItem {
-	label: string;
-	description: string;
-	value: string;
-}
-
 const props = withDefaults( defineProps<Props>(), {
 	searchInput: '',
 } );
@@ -26,7 +26,7 @@ const props = withDefaults( defineProps<Props>(), {
 const languageCodesProvider = useLanguageCodesProvider();
 const messages = useMessages();
 
-const wbLexemeTermLanguages: WikitMenuItem[] = [];
+const wbLexemeTermLanguages: MenuItemData[] = [];
 languageCodesProvider.getLanguages().forEach(
 	( name, code ) => {
 		wbLexemeTermLanguages.push( {
@@ -37,16 +37,17 @@ languageCodesProvider.getLanguages().forEach(
 	},
 );
 
-const menuItems = ref( [] as WikitMenuItem[] );
+const menuItems = ref( [] as MenuItemData[] );
 
 const emit = defineEmits( {
 	'update:modelValue': ( selectedLang: Props['modelValue'] ) => {
-		return selectedLang === null || selectedLang.length > 0;
+		return selectedLang === null ||
+			typeof selectedLang === 'string' && selectedLang.length > 0;
 	},
 	'update:searchInput': null,
 } );
 
-const onSearchInput = ( inputValue: string ) => {
+const onInput = ( inputValue: string ) => {
 	emit( 'update:searchInput', inputValue );
 	if ( inputValue.trim() === '' ) {
 		menuItems.value = [];
@@ -56,38 +57,38 @@ const onSearchInput = ( inputValue: string ) => {
 	// eslint-disable-next-line security/detect-non-literal-regexp -- escapeRegExp used
 	const regExp = new RegExp( `\\b${escapeRegExp( inputValue )}`, 'i' );
 	menuItems.value = wbLexemeTermLanguages.filter(
-		( lang ) => regExp.test( lang.label ),
+		( lang ) => lang.label && regExp.test( lang.label ),
 	);
+	onOptionSelected( inputValue );
 };
 
-const selectedOption = computed( () => {
-
-	if ( props.modelValue === null ) {
-		return null;
-	}
-	return menuItems.value.find( ( item ) => item.label === props.modelValue );
-} );
+const selection = ref( null );
 
-const onOptionSelected = ( value: unknown ) => {
-	const selectedValue = value === null ? null : ( value as WikitMenuItem ).value;
-	emit( 'update:modelValue', selectedValue );
+const onOptionSelected = ( selectedItem: string | null ) => {
+	const selectedValue = menuItems.value.find( ( item ) => item.value === selectedItem );
+	emit( 'update:modelValue', selectedValue?.value.toString() || undefined );
 };
 
 const config = useConfig();
 const store = useStore();
-const error = computed( () => {
+const helpUrl = messages.get( 'wikibaselexeme-newlexeme-lemma-language-help-link-target' );
+const helpLinkText = messages.get( 'wikibaselexeme-newlexeme-lemma-language-help-link-text' );
+const fieldStatus = computed( (): ValidationStatusType => {
+	if ( !store.state.perFieldErrors.spellingVariantErrors.length ) {
+		return 'default';
+	}
+	return 'error';
+} );
+
+const errorMessages = computed( (): ValidationMessages => {
 	if ( !store.state.perFieldErrors.spellingVariantErrors.length ) {
-		return null;
+		return {};
 	}
 	return {
-		type: 'error',
-		message: messages.getUnescaped(
+		error: messages.getUnescaped(
 			store.state.perFieldErrors.spellingVariantErrors[ 0 ].messageKey,
-		),
-	};
+		) };
 } );
-const helpUrl = messages.get( 'wikibaselexeme-newlexeme-lemma-language-help-link-target' );
-const helpLinkText = messages.get( 'wikibaselexeme-newlexeme-lemma-language-help-link-text' );
 </script>
 
 <script lang="ts">
@@ -99,31 +100,33 @@ export default {
 </script>
 
 <template>
-	<wikit-lookup
+	<cdx-field
 		class="wbl-snl-spelling-variant-lookup"
-		:label="messages.getUnescaped( 'wikibaselexeme-newlexeme-lemma-language' )"
-		:placeholder="messages.getUnescaped(
-			'wikibaselexeme-newlexeme-lemma-language-placeholder-with-example',
-			config.placeholderExampleData.spellingVariant
-		)"
-		:search-input="searchInput"
-		:menu-items="menuItems"
-		:value="selectedOption"
-		:error="error"
-		:aria-required="true"
-		@update:search-input="onSearchInput"
-		@input="onOptionSelected"
-	>
-		<template #no-results>
-			{{ messages.getUnescaped( 'wikibase-entityselector-notfound' ) }}
-		</template>
-		<template #suffix>
-			<required-asterisk />
+		:status="fieldStatus"
+		:messages="errorMessages">
+		<cdx-lookup
+			v-model:selected="selection"
+			:placeholder="messages.getUnescaped(
+				'wikibaselexeme-newlexeme-lemma-language-placeholder-with-example',
+				config.placeholderExampleData.spellingVariant
+			)"
+			:search-input="searchInput"
+			:menu-items="menuItems"
+			:input-value="props.modelValue"
+			@input="onInput"
+			@update:selected="onOptionSelected"
+		>
+			<template #no-results>
+				{{ messages.getUnescaped( 'wikibase-entityselector-notfound' ) }}
+			</template>
+		</cdx-lookup>
+		<template #label>
+			{{ messages.getUnescaped( 'wikibaselexeme-newlexeme-lemma-language' ) }}<required-asterisk />
 			<span class="wbl-snl-spelling-variant-lookup__help-link">
 				<a :href="helpUrl" target="_blank">{{ helpLinkText }}</a>
 			</span>
 		</template>
-	</wikit-lookup>
+	</cdx-field>
 </template>
 
 <style lang="scss">
@@ -141,4 +144,8 @@ export default {
 		display: inline-block;
 	}
 }
+
+.wbl-snl-required-asterisk {
+	margin-inline-start: var( --dimension-spacing-xsmall );
+}
 </style>
diff --git a/tests/integration/NewLexemeForm.test.ts b/tests/integration/NewLexemeForm.test.ts
index 6c76a850..0a379e6f 100644
--- a/tests/integration/NewLexemeForm.test.ts
+++ b/tests/integration/NewLexemeForm.test.ts
@@ -70,13 +70,13 @@ describe( 'NewLexemeForm', () => {
 	async function selectLanguage( formWrapper: VueWrapper, input = '=Q123' ): Promise<void> {
 		const languageInput = formWrapper.find( '.wbl-snl-language-lookup input' );
 		await languageInput.setValue( input );
-		await formWrapper.find( '.wbl-snl-language-lookup .wikit-OptionsMenu__item' ).trigger( 'click' );
+		await formWrapper.find( '.wbl-snl-language-lookup .cdx-menu-item' ).trigger( 'click' );
 	}
 
 	async function selectLexicalCategory( formWrapper: VueWrapper, input = '=Q456' ): Promise<void> {
 		const lexicalCategoryInput = formWrapper.find( '.wbl-snl-lexical-category-lookup input' );
 		await lexicalCategoryInput.setValue( input );
-		await formWrapper.find( '.wbl-snl-lexical-category-lookup .wikit-OptionsMenu__item' ).trigger( 'click' );
+		await formWrapper.find( '.wbl-snl-lexical-category-lookup .cdx-menu-item' ).trigger( 'click' );
 	}
 
 	it( 'updates the store if something is entered into the lemma input', async () => {
@@ -100,7 +100,7 @@ describe( 'NewLexemeForm', () => {
 		const languageLookup = wrapper.find( '.wbl-snl-language-lookup input' );
 
 		await languageLookup.setValue( '=Q123' );
-		await wrapper.find( '.wbl-snl-language-lookup .wikit-OptionsMenu__item' ).trigger( 'click' );
+		await wrapper.find( '.wbl-snl-language-lookup .cdx-menu-item' ).trigger( 'click' );
 
 		expect( wrapper.find( '.wbl-snl-spelling-variant-lookup' ).exists() ).toBe( false );
 		expect( store.state.language?.id ).toBe( 'Q123' );
@@ -132,7 +132,7 @@ describe( 'NewLexemeForm', () => {
 
 		expect( store.state.languageCodeFromLanguageItem ).toBe( false );
 
-		const warning = wrapper.find( '.wikit-ValidationMessage--warning' );
+		const warning = wrapper.find( '.cdx-message--warning' );
 		expect( warning.exists() ).toBe( true );
 	} );
 
@@ -141,7 +141,7 @@ describe( 'NewLexemeForm', () => {
 		const lexicalCategoryInput = wrapper.find( '.wbl-snl-lexical-category-lookup input' );
 
 		await lexicalCategoryInput.setValue( '=Q456' );
-		await wrapper.find( '.wbl-snl-lexical-category-lookup .wikit-OptionsMenu__item' ).trigger( 'click' );
+		await wrapper.find( '.wbl-snl-lexical-category-lookup .cdx-menu-item' ).trigger( 'click' );
 
 		expect( store.state.lexicalCategory?.id ).toBe( 'Q456' );
 	} );
@@ -169,7 +169,7 @@ describe( 'NewLexemeForm', () => {
 
 		await spellingVariantLookup.setValue( 'de' );
 
-		await wrapper.find( '.wbl-snl-spelling-variant-lookup .wikit-OptionsMenu__item' ).trigger( 'click' );
+		await wrapper.find( '.wbl-snl-spelling-variant-lookup .cdx-menu-item' ).trigger( 'click' );
 
 		expect( store.state.spellingVariant ).toBe( 'de' );
 	} );
@@ -235,7 +235,7 @@ describe( 'NewLexemeForm', () => {
 			// will actually select en-gb, en is not in wikibaseLexemeTermLanguages
 			const spellingVariantInput = wrapper.find( '.wbl-snl-spelling-variant-lookup input' );
 			await spellingVariantInput.setValue( 'en' );
-			await wrapper.find( '.wbl-snl-spelling-variant-lookup .wikit-OptionsMenu__item' ).trigger( 'click' );
+			await wrapper.find( '.wbl-snl-spelling-variant-lookup .cdx-menu-item' ).trigger( 'click' );
 
 			await wrapper.find( 'button' ).trigger( 'click' );
 			await flushPromises();
@@ -339,11 +339,11 @@ describe( 'NewLexemeForm', () => {
 			await wrapper.find( 'button' ).trigger( 'click' );
 
 			const lexicalCategoryInputWrapper = wrapper.get( '.wbl-snl-lexical-category-lookup' );
-			expect( lexicalCategoryInputWrapper.get( '.wikit-ValidationMessage--error' ).text() )
+			expect( lexicalCategoryInputWrapper.get( '.cdx-message--error' ).text() )
 				.toBe( messagesPlugin.get( 'wikibaselexeme-newlexeme-lexicalcategory-empty-error' ) );
 			await lexicalCategoryInputWrapper.get( 'input' ).setValue( '=Q456' );
-			await lexicalCategoryInputWrapper.find( '.wikit-OptionsMenu__item' ).trigger( 'click' );
-			expect( lexicalCategoryInputWrapper.find( '.wikit-ValidationMessage--error' ).exists() ).toBe( false );
+			await lexicalCategoryInputWrapper.find( '.cdx-menu-item' ).trigger( 'click' );
+			expect( lexicalCategoryInputWrapper.find( '.cdx-message--error' ).exists() ).toBe( false );
 
 			expect( createLexeme ).not.toHaveBeenCalled();
 		} );
@@ -369,14 +369,14 @@ describe( 'NewLexemeForm', () => {
 			await wrapper.find( 'button' ).trigger( 'click' );
 
 			const languageInputWrapper = wrapper.get( '.wbl-snl-language-lookup' );
-			expect( languageInputWrapper.get( '.wikit-ValidationMessage--error' ).text() )
+			expect( languageInputWrapper.get( '.cdx-message--error' ).text() )
 				.toBe( messagesPlugin.get( 'wikibaselexeme-newlexeme-language-empty-error' ) );
 			await languageInputWrapper.get( 'input' ).setValue( '=Q123' );
-			await languageInputWrapper.find( '.wikit-OptionsMenu__item' ).trigger( 'click' );
+			await languageInputWrapper.find( '.cdx-menu-item' ).trigger( 'click' );
 
 			await flushPromises();
 
-			expect( languageInputWrapper.find( '.wikit-ValidationMessage--error' ).exists() ).toBe( false );
+			expect( languageInputWrapper.find( '.cdx-message--error' ).exists() ).toBe( false );
 
 			expect( createLexeme ).not.toHaveBeenCalled();
 		} );
@@ -406,13 +406,13 @@ describe( 'NewLexemeForm', () => {
 			await wrapper.find( 'button' ).trigger( 'click' );
 
 			const spellingVariantInputWrapper = wrapper.get( '.wbl-snl-spelling-variant-lookup' );
-			expect( spellingVariantInputWrapper.get( '.wikit-ValidationMessage--error' ).text() )
+			expect( spellingVariantInputWrapper.get( '.cdx-message--error' ).text() )
 				.toBe( messagesPlugin.get( 'wikibaselexeme-newlexeme-lemma-language-empty-error' ) );
 
 			await spellingVariantInputWrapper.get( 'input' ).setValue( 'en' );
-			await spellingVariantInputWrapper.get( '.wikit-OptionsMenu__item' ).trigger( 'click' );
+			await spellingVariantInputWrapper.get( '.cdx-menu-item' ).trigger( 'click' );
 
-			expect( spellingVariantInputWrapper.find( '.wikit-ValidationMessage--error' ).exists() ).toBe( false );
+			expect( spellingVariantInputWrapper.find( '.cdx-message--error' ).exists() ).toBe( false );
 
 			expect( createLexeme ).not.toHaveBeenCalled();
 		} );
diff --git a/tests/unit/components/ItemLookup.test.ts b/tests/unit/components/ItemLookup.test.ts
index 0c24afbf..ccf79ffc 100644
--- a/tests/unit/components/ItemLookup.test.ts
+++ b/tests/unit/components/ItemLookup.test.ts
@@ -3,7 +3,7 @@ import {
 	mount,
 	VueWrapper,
 } from '@vue/test-utils';
-import { Lookup as WikitLookup } from '@wmde/wikit-vue-components';
+import { CdxLookup } from '@wikimedia/codex';
 
 jest.mock( 'lodash/debounce', () => jest.fn( ( fn ) => fn ) );
 
@@ -103,7 +103,7 @@ describe( 'ItemLookup', () => {
 			const lookup = createLookup( { searchForItems } );
 			await setSearchInput( lookup, 'foo' );
 
-			await lookup.findComponent( WikitLookup ).vm.$emit( 'scroll' );
+			await lookup.findComponent( CdxLookup ).vm.$emit( 'load-more' );
 
 			expect( searchForItems ).toHaveBeenCalledTimes( 2 );
 			expect( searchForItems ).toHaveBeenNthCalledWith( 2, 'foo', 4 );
@@ -113,11 +113,11 @@ describe( 'ItemLookup', () => {
 			const searchForItems = jest.fn().mockReturnValue( exampleSearchResults );
 			const lookup = createLookup( { searchForItems } );
 			await setSearchInput( lookup, 'foo' );
-			const selectedItemId = 1;
+			const selectedItemId = 0;
 
-			await lookup.setProps( { value: exampleSearchResults[ selectedItemId ] } );
+			await lookup.setProps( { inputValue: exampleSearchResults[ selectedItemId ] } );
 
-			expect( lookup.findComponent( WikitLookup ).props().value.label )
+			expect( lookup.find( 'div.cdx-text-input' ).get( 'input' ).element.value )
 				.toBe( exampleSearchResults[ selectedItemId ].display.label?.value );
 		} );
 
@@ -134,7 +134,7 @@ describe( 'ItemLookup', () => {
 				searchForItems,
 			} );
 
-			expect( lookup.findComponent( WikitLookup ).props().menuItems )
+			expect( lookup.findComponent( CdxLookup ).props().menuItems )
 				.toStrictEqual( [ {
 					value: 'Q1',
 					label: 'some label',
@@ -143,14 +143,14 @@ describe( 'ItemLookup', () => {
 			expect( searchForItems ).not.toHaveBeenCalled();
 		} );
 
-		it( ':searchForItems - returned suggestions are provided to Wikit Lookup', async () => {
+		it( ':searchForItems - returned suggestions are provided to Codex Lookup', async () => {
 			const searchForItems = jest.fn().mockReturnValue( exampleSearchResults );
 			const lookup = createLookup( { searchForItems } );
 
 			await setSearchInput( lookup, 'foo' );
 
-			const wikitLookup = lookup.getComponent( WikitLookup );
-			expect( wikitLookup.props( 'menuItems' ) ).toStrictEqual( [
+			const codexLookup = lookup.getComponent( CdxLookup );
+			expect( codexLookup.props( 'menuItems' ) ).toStrictEqual( [
 				{
 					description: 'bar',
 					label: 'foo',
@@ -237,8 +237,8 @@ describe( 'ItemLookup', () => {
 
 			await setSearchInput( lookup, 'foo' );
 
-			const wikitLookup = lookup.getComponent( WikitLookup );
-			expect( wikitLookup.props( 'menuItems' ) ).toStrictEqual( [
+			const codexLookup = lookup.getComponent( CdxLookup );
+			expect( codexLookup.props( 'menuItems' ) ).toStrictEqual( [
 				// suggestions
 				{
 					description: '',
@@ -263,16 +263,6 @@ describe( 'ItemLookup', () => {
 				},
 			] );
 		} );
-
-		it.each( [
-			[ false, 'false' ],
-			[ true, 'true' ],
-		] )( ':ariaRequired(%p)', ( propValue, attributeValue ) => {
-			const lookup = createLookup( { ariaRequired: propValue } );
-			const input = lookup.find( 'input' );
-
-			expect( input.attributes( 'aria-required' ) ).toBe( attributeValue );
-		} );
 	} );
 
 	describe( '@events', () => {
@@ -293,13 +283,9 @@ describe( 'ItemLookup', () => {
 			await setSearchInput( lookup, 'foo' );
 			const selectedItemId = 0;
 
-			await lookup.findComponent( WikitLookup ).vm.$emit(
-				'input',
-				{
-					label: exampleSearchResults[ selectedItemId ].display.label?.value,
-					description: exampleSearchResults[ selectedItemId ].display.description.value,
-					value: exampleSearchResults[ selectedItemId ].id,
-				},
+			await lookup.findComponent( CdxLookup ).vm.$emit(
+				'update:selected',
+				exampleSearchResults[ selectedItemId ].id,
 			);
 
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
diff --git a/tests/unit/components/SpellingVariantInput.test.ts b/tests/unit/components/SpellingVariantInput.test.ts
index 507fe3a4..dffe112a 100644
--- a/tests/unit/components/SpellingVariantInput.test.ts
+++ b/tests/unit/components/SpellingVariantInput.test.ts
@@ -1,6 +1,9 @@
-import { mount } from '@vue/test-utils';
+import {
+	mount,
+	VueWrapper,
+} from '@vue/test-utils';
 import SpellingVariantInput from '@/components/SpellingVariantInput.vue';
-import { Lookup as WikitLookup } from '@wmde/wikit-vue-components';
+import { CdxLookup } from '@wikimedia/codex';
 import { LanguageCodesProviderKey } from '@/plugins/LanguageCodesProviderPlugin/LanguageCodesProvider';
 import DevMessagesRepository from '@/plugins/MessagesPlugin/DevMessagesRepository';
 import Messages, { MessagesKey } from '@/plugins/MessagesPlugin/Messages';
@@ -38,26 +41,32 @@ function createLookup( config: Record<string, unknown> = {} ) {
 	} );
 }
 
+async function setSearchInput( lookup: VueWrapper, searchInput: string ): Promise<void> {
+	await lookup.find( 'input' ).setValue( searchInput );
+	await lookup.setProps( { searchInput } );
+}
+
 describe( 'SpellingVariantInput', () => {
 	describe( ':props', () => {
 		it( ':value - selects the selected language', async () => {
 			const lookup = createLookup();
+
 			await lookup.find( 'input' ).setValue( 'en' );
 			await lookup.setProps( {
 				modelValue: 'English (en)',
 			} );
 
-			expect( lookup.findComponent( WikitLookup ).props().value.value )
-				.toStrictEqual( 'en' );
+			expect( lookup.find( 'div.cdx-text-input' ).get( 'input' ).element.value )
+				.toStrictEqual( 'English (en)' );
 		} );
 
-		it( ':menuItems - returned suggestions are provided to Wikit Lookup', async () => {
+		it( ':menuItems - returned suggestions are provided to Codex Lookup', async () => {
 			const lookup = createLookup();
 
-			await lookup.find( 'input' ).setValue( 'en' );
+			await setSearchInput( lookup, 'en' );
 
-			const wikitLookup = lookup.getComponent( WikitLookup );
-			expect( wikitLookup.props( 'menuItems' ) ).toStrictEqual( [
+			const codexLookup = lookup.getComponent( CdxLookup );
+			expect( codexLookup.props( 'menuItems' ) ).toStrictEqual( [
 				{
 					description: '',
 					label: 'English (en)',
@@ -126,11 +135,11 @@ describe( 'SpellingVariantInput', () => {
 				},
 			} );
 
-			await lookup.find( 'input' ).setValue( userInput );
+			await setSearchInput( lookup, userInput );
 
-			const wikitLookup = lookup.getComponent( WikitLookup );
+			const codexLookup = lookup.getComponent( CdxLookup );
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			expect( wikitLookup.props( 'menuItems' ).map( ( option: any ) => option.value ) ).toStrictEqual( expectedOptionValues );
+			expect( codexLookup.props( 'menuItems' ).map( ( option: any ) => option.value ) ).toStrictEqual( expectedOptionValues );
 		} );
 	} );
 
@@ -138,25 +147,18 @@ describe( 'SpellingVariantInput', () => {
 		it( '@update:modelValue - emits null when the input is changed', async () => {
 			const lookup = createLookup();
 
-			await lookup.find( 'input' ).setValue( 'foo' );
+			await setSearchInput( lookup, 'foo' );
 
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
-			expect( lookup.emitted( 'update:modelValue' )[ 0 ][ 0 ] ).toBe( null );
+			expect( lookup.emitted( 'update:modelValue' )[ 0 ][ 0 ] ).toBe( undefined );
 		} );
 
 		it( '@update:modelValue - emits the value of the selected option', async () => {
 			const lookup = createLookup();
-			await lookup.find( 'input' ).setValue( 'en' );
+			await setSearchInput( lookup, 'en' );
 
-			await lookup.findComponent( WikitLookup ).vm.$emit(
-				'input',
-				{
-					label: 'foo',
-					description: '',
-					value: 'en',
-				},
-			);
+			await lookup.findComponent( CdxLookup ).vm.$emit( 'update:selected', 'en' );
 
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
@@ -166,10 +168,4 @@ describe( 'SpellingVariantInput', () => {
 		} );
 	} );
 
-	it( 'input is required', () => {
-		const lookup = createLookup();
-		const input = lookup.find( 'input' );
-
-		expect( input.attributes( 'aria-required' ) ).toBe( 'true' );
-	} );
 } );