From 6ceadba06af7e742091ddf248fda24c60d869294 Mon Sep 17 00:00:00 2001
From: connoratrug <47183404+connoratrug@users.noreply.github.com>
Date: Wed, 29 Jan 2025 09:50:05 +0100
Subject: [PATCH] Revert "feat(tw): added new listbox component (#4421)"

This reverts commit c439a85061548bab85810781797559fa809b2887.
---
 apps/metadata-utils/src/types.ts              |   7 -
 apps/tailwind-components/assets/css/main.css  |   9 -
 .../components/form/Field.vue                 |  36 +-
 .../components/form/FieldInput.vue            |   6 +-
 .../components/input/Listbox.vue              | 370 ------------------
 .../components/input/listbox/List.vue         |  34 --
 .../components/input/listbox/ListItem.vue     |  38 --
 .../components/input/listbox/Toggle.vue       |  50 ---
 apps/tailwind-components/pages/Form.story.vue |  15 +-
 .../pages/input/Listbox.story.vue             | 150 -------
 apps/tailwind-components/tailwind.config.js   |  10 -
 apps/tailwind-components/types/listbox.ts     |  11 -
 apps/yarn.lock                                |   1 -
 .../emx2/rdf/ColumnTypeRdfMapperTest.java     |   2 +
 .../tailwind-components/input/listbox.spec.ts | 187 ---------
 15 files changed, 14 insertions(+), 912 deletions(-)
 delete mode 100644 apps/tailwind-components/components/input/Listbox.vue
 delete mode 100644 apps/tailwind-components/components/input/listbox/List.vue
 delete mode 100644 apps/tailwind-components/components/input/listbox/ListItem.vue
 delete mode 100644 apps/tailwind-components/components/input/listbox/Toggle.vue
 delete mode 100644 apps/tailwind-components/pages/input/Listbox.story.vue
 delete mode 100644 apps/tailwind-components/types/listbox.ts
 delete mode 100644 e2e/tests/tailwind-components/input/listbox.spec.ts

diff --git a/apps/metadata-utils/src/types.ts b/apps/metadata-utils/src/types.ts
index 139a9a3bc6..fd225aab24 100644
--- a/apps/metadata-utils/src/types.ts
+++ b/apps/metadata-utils/src/types.ts
@@ -105,10 +105,3 @@ export type columnValue = string | number | boolean | columnValueObject;
 interface columnValueObject {
   [x: string]: columnValue;
 }
-
-export type IInputValue = string | number | boolean;
-
-export type IInputValueLabel = {
-  value: IInputValue | IInputValue[] | null;
-  label?: string;
-};
diff --git a/apps/tailwind-components/assets/css/main.css b/apps/tailwind-components/assets/css/main.css
index c423815896..81f2ffc914 100644
--- a/apps/tailwind-components/assets/css/main.css
+++ b/apps/tailwind-components/assets/css/main.css
@@ -79,9 +79,6 @@
     --background-color-invalid: var(--color-red-200);
     --background-color-input: var(--color-white);
     --background-color-input-checked: var(--color-yellow-500);
-    --background-color-listbox: var(--color-white);
-    --background-color-listbox-hover: var(--color-gray-100);
-    --background-color-listbox-selected: var(--color-blue-500);
     --background-color-table: var(--color-white);
     --background-color-notification: var(--color-red-700);
 
@@ -131,10 +128,6 @@
     --text-color-pagination-input: var(--text-color-title);
     --text-color-pagination-hover: var(--text-color-title);
     --text-color-footer-link: var(--color-yellow-500);
-    --text-color-listbox: var(--color-black);
-    --text-color-listbox-hover: var(--color-black);
-    --text-color-listbox-selected: var(--color-blue-50);
-    --text-color-button-input-toggle: var(--color-black);
     --text-color-table-column-header: var(--color-gray-600);
     --text-color-form-header: var(--color-blue-800);
     --text-color-input-description: var(--color-blue-800);
@@ -164,8 +157,6 @@
     --border-color-pagination: var(--color-transparent);
     --border-color-input: #C0C0C0;
     --border-color-input-inverted: var(--color-gray-600);
-    --border-color-listbox-option: var(--color-gray-100);
-    --border-color-listbox: var(--border-color-input);
 
     --border-radius-3px: 3px;
     --border-radius-50px: 50px;
diff --git a/apps/tailwind-components/components/form/Field.vue b/apps/tailwind-components/components/form/Field.vue
index ed72ccbb49..5f2dacf3cc 100644
--- a/apps/tailwind-components/components/form/Field.vue
+++ b/apps/tailwind-components/components/form/Field.vue
@@ -35,54 +35,30 @@ function validate(value: columnValue) {
 
   formFieldInput.value.validate(value);
 }
-
-const refData = ref();
-
-onMounted(async () => {
-  if (["ONTOLOGY", "ONTOLOGY_ARRAY"].includes(props.column.columnType)) {
-    const response = await fetchTableData(
-      props.column.refSchemaId as string,
-      props.column.refTableId as string
-    );
-    refData.value = response.rows.map((row) => row.name);
-  }
-});
 </script>
 
 <template>
   <div class="flex flex-col gap-1">
     <div>
-      <label
-        :id="`${column.id}-label`"
-        :for="column.id"
-        class="capitalize text-title font-bold"
-        >{{ column.label }}</label
-      >
+      <label :for="column.id" class="capitalize text-title font-bold">{{
+        column.label
+      }}</label>
       <span class="text-disabled text-body-sm ml-3" v-show="column.required"
         >Required</span
       >
     </div>
-    <span
-      :id="`${column.id}-description`"
-      class="text-input-description text-body-sm"
-      v-if="column.description"
-    >
+    <div class="text-input-description text-body-sm" v-if="column.description">
       {{ column.description }}
-    </span>
+    </div>
     <div>
       <FormFieldInput
         :type="column.columnType"
         :id="column.id"
         :label="column.label"
         :data="data"
-        :options="refData ? refData : null"
         :required="!!column.required"
         :aria-invalid="hasError"
-        :aria-desribedBy="
-          column.description
-            ? `${column.id}-description ${column.id}-input-error`
-            : `${column.id}-input-error`
-        "
+        :aria-desribedBy="`${column.id}-input-error`"
         @focus="touched = true"
         @input="pristine = false"
         @update:modelValue="$emit('update:modelValue', $event)"
diff --git a/apps/tailwind-components/components/form/FieldInput.vue b/apps/tailwind-components/components/form/FieldInput.vue
index f7c4fb6e0a..0ae28a15cd 100644
--- a/apps/tailwind-components/components/form/FieldInput.vue
+++ b/apps/tailwind-components/components/form/FieldInput.vue
@@ -8,7 +8,6 @@ import type {
   columnId,
   columnValue,
   CellValueType,
-  IInputValueLabel,
 } from "../../../metadata-utils/src/types";
 
 type inputComponent =
@@ -22,7 +21,6 @@ defineProps<{
   label: string;
   required: boolean;
   data: columnValue;
-  options?: IInputValueLabel[];
 }>();
 
 defineEmits(["focus", "error", "update:modelValue"]);
@@ -49,7 +47,7 @@ function validate(value: columnValue) {
     :id="id"
     :label="label"
     :required="required"
-    :value="(data as string)"
+    :value="data as string"
     @focus="$emit('focus')"
     @update:modelValue="$emit('update:modelValue', $event)"
     @error="$emit('error', $event)"
@@ -60,7 +58,7 @@ function validate(value: columnValue) {
     :id="id"
     :label="label"
     :required="required"
-    :value="(data as string)"
+    :value="data as string"
     @focus="$emit('focus')"
     @update:modelValue="$emit('update:modelValue', $event)"
     @error="$emit('error', $event)"
diff --git a/apps/tailwind-components/components/input/Listbox.vue b/apps/tailwind-components/components/input/Listbox.vue
deleted file mode 100644
index 19faaabe6d..0000000000
--- a/apps/tailwind-components/components/input/Listbox.vue
+++ /dev/null
@@ -1,370 +0,0 @@
-<template>
-  <div class="w-full relative">
-    <InputListboxToggle
-      :id="id"
-      ref="btnElemRef"
-      :aria-controls="`listbox-${id}-options`"
-      :required="required"
-      :disabled="disabled"
-      :aria-labelledby="labelId"
-      :selected-element-id="selectedElementId"
-      @keydown="onListboxButtonKeyDown"
-    >
-      <span class="w-full">
-        {{ displayText }}
-      </span>
-    </InputListboxToggle>
-    <InputListboxList
-      :id="`listbox-${id}-options`"
-      :isExpanded="isExpanded"
-      :hasFixedHeight="listboxOptions.length > 5"
-      @keydown.prevent="onListboxKeyDown"
-    >
-      <InputListboxListItem
-        v-for="option in listboxOptions"
-        ref="listbox-li"
-        :id="option.elemId"
-        :isSelected="option.value === '' || isSelected(option.value as IInputValue)"
-        :label="(option.label as string) || (option.value as string)"
-        @click="onListboxOptionClick(option)"
-        @blur="blurListOption(option)"
-        @keydown="(event: KeyboardEvent) => onListboxOptionKeyDown(event, option)"
-      />
-    </InputListboxList>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, useTemplateRef, nextTick, watch, onMounted } from "vue";
-import type {
-  columnValue,
-  IFieldError,
-  IInputValue,
-  IInputValueLabel,
-} from "../../../metadata-utils/src/types";
-import type {
-  IInternalListboxOption,
-  IListboxLiRef,
-} from "../../types/listbox";
-
-import { InputListboxToggle } from "#components";
-
-const props = withDefaults(
-  defineProps<{
-    id: string;
-    labelId: string;
-    options: IInputValue[] | IInputValueLabel[];
-    value?: IInputValue | IInputValueLabel;
-    required?: boolean;
-    hasError?: boolean;
-    placeholder?: string;
-    disabled?: boolean;
-  }>(),
-  {
-    disabled: false,
-    required: false,
-    hasError: false,
-    placeholder: "Select an option",
-  }
-);
-
-const emit = defineEmits<{
-  (e: "update:modelValue", value: IInputValue | IInputValueLabel): void;
-  (e: "error", value: IFieldError[]): void;
-  (e: "blur", value: null): void;
-  (e: "focus", value: null): void;
-}>();
-
-defineExpose({
-  validate,
-});
-
-const sourceDataType = ref<string>("");
-const sourceData = ref<IInputValueLabel[]>();
-const focusCounter = ref<number>(0);
-const modelValue = defineModel<IInputValue | IInputValueLabel | null>();
-const liElemRefs = useTemplateRef<IListboxLiRef[]>("listbox-li");
-const btnElemRef = ref<InstanceType<typeof InputListboxToggle>>();
-const displayText = ref<string>(props.placeholder);
-const startingCounter = ref<number>(0);
-const selectedElementId = ref<string>("");
-
-const isExpanded = computed<boolean>(() => {
-  return btnElemRef.value?.expanded as boolean;
-});
-
-onMounted(() => {
-  if (props.value && listboxOptions.value) {
-    const initalValue: IInternalListboxOption[] = listboxOptions.value.filter(
-      (row: IInternalListboxOption) => {
-        return (
-          row.value === (props.value as IInputValueLabel).value ||
-          row.value === (props.value as IInputValue)
-        );
-      }
-    );
-    if (initalValue) {
-      updateModelValue(initalValue[0], false);
-    }
-  }
-});
-
-watch(
-  () => props.placeholder,
-  () => (displayText.value = props.placeholder)
-);
-
-function counterIsInRange(value: number) {
-  return value <= listboxOptions.value.length - 1 && value >= 0;
-}
-
-const listboxOptions = computed<IInternalListboxOption[]>(() => {
-  const testDataValue: IInputValue | IInputValueLabel = props.options[0];
-  if (
-    typeof testDataValue === "object" &&
-    Object.hasOwn(testDataValue as IInputValueLabel, "value")
-  ) {
-    sourceDataType.value = "ListboxOptions";
-    sourceData.value = props.options as IInputValueLabel[];
-  } else {
-    sourceDataType.value = "ListboxValue";
-    const inputData = props.options as IInputValue[];
-    const processedData = inputData.map(
-      (value: IInputValue): IInputValueLabel => {
-        return { value: value };
-      }
-    );
-    sourceData.value = processedData as IInputValueLabel[];
-  }
-
-  const defaultOption: IInputValueLabel = {
-    value: null,
-    label: props.placeholder,
-  };
-  const inputData = sourceData.value as IInputValueLabel[];
-  const data: IInputValueLabel[] = [defaultOption, ...inputData];
-
-  return data.map((option: IInputValueLabel, index: number) => {
-    return {
-      ...option,
-      index: index,
-      elemId: `listbox-${props.id}-options-${index}`,
-    };
-  });
-});
-
-function updateCounter(value: number) {
-  if (counterIsInRange(value)) {
-    focusCounter.value = value;
-  } else {
-    if (value > listboxOptions.value.length - 1) {
-      focusCounter.value = listboxOptions.value.length - 1;
-    } else {
-      focusCounter.value = 0;
-    }
-  }
-}
-
-function focusListOption() {
-  nextTick(() => {
-    if (liElemRefs.value) {
-      const targetElem = liElemRefs.value[focusCounter.value].li;
-      targetElem.setAttribute("tabindex", "0");
-      targetElem.focus();
-    }
-  });
-}
-
-function blurListOption(option: IInternalListboxOption) {
-  nextTick(() => {
-    if (liElemRefs.value) {
-      const targetElem = liElemRefs.value[option.index].li;
-      targetElem.setAttribute("tabindex", "-1");
-      targetElem.blur();
-    }
-  });
-}
-
-function updateDisplayText(text: string | undefined | null): string {
-  console.log(text);
-  if (typeof text === "undefined" || text === null) {
-    return props.placeholder;
-  }
-  return text;
-}
-
-function updateModelValue(
-  selection: IInternalListboxOption,
-  enableToggling: boolean = true
-) {
-  focusCounter.value = selection.index;
-  startingCounter.value = selection.index;
-
-  if (sourceDataType.value === "ListboxOptions") {
-    const selectedOption: IInputValueLabel = { value: selection.value };
-    if (Object.hasOwn(selection, "label")) {
-      selectedOption.label = selection.label;
-      displayText.value = updateDisplayText(selectedOption.label);
-    } else {
-      displayText.value = updateDisplayText(selectedOption.value as string);
-    }
-
-    modelValue.value = selectedOption;
-  } else {
-    modelValue.value = selection.value as IInputValue;
-    displayText.value = updateDisplayText(selection.value as string);
-  }
-  selectedElementId.value = selection.elemId;
-  emit("update:modelValue", modelValue.value);
-
-  if (enableToggling) {
-    openCloseListbox();
-  }
-}
-
-function isSelected(value: IInputValue): boolean {
-  if (modelValue.value) {
-    return (
-      value === (modelValue.value as IInputValueLabel).value ||
-      value === (modelValue.value as IInputValue)
-    );
-  } else {
-    return value === null;
-  }
-}
-
-function focusPreviousOption(by: number = 1) {
-  const newCounterValue = focusCounter.value - by;
-  updateCounter(newCounterValue);
-  focusListOption();
-}
-
-function focusNextOption(by: number = 1) {
-  const newCounterValue = focusCounter.value + by;
-  updateCounter(newCounterValue);
-  focusListOption();
-}
-
-function focusListboxButton() {
-  btnElemRef.value?.button?.focus();
-}
-
-function openCloseListbox() {
-  btnElemRef.value!.expanded = !btnElemRef.value!.expanded;
-  if (isExpanded.value) {
-    if (modelValue.value) {
-      updateCounter(startingCounter.value);
-    } else {
-      updateCounter(0);
-    }
-    focusListOption();
-  } else {
-    focusListboxButton();
-  }
-}
-
-function onListboxButtonKeyDown(event: KeyboardEvent) {
-  const key = event.key;
-  switch (key) {
-    case "ArrowUp":
-      openCloseListbox();
-      focusPreviousOption();
-      break;
-
-    case "ArrowDown":
-      openCloseListbox();
-      break;
-
-    case "Enter":
-      openCloseListbox();
-      break;
-
-    case "Space":
-      openCloseListbox();
-      break;
-
-    case "Home":
-      focusCounter.value = 0;
-      focusListOption();
-      break;
-
-    case "End":
-      focusCounter.value = listboxOptions.value.length - 1;
-      focusListOption();
-      break;
-  }
-}
-
-function onListboxKeyDown(event: KeyboardEvent) {
-  const key = event.key;
-  switch (key) {
-    case "ArrowUp":
-      focusPreviousOption();
-      break;
-
-    case "ArrowDown":
-      focusNextOption();
-      break;
-
-    case "PageUp":
-      focusPreviousOption(10);
-      break;
-
-    case "PageDown":
-      focusNextOption(10);
-      break;
-
-    case "Home":
-      focusCounter.value = 0;
-      focusListOption();
-      break;
-
-    case "End":
-      focusCounter.value = listboxOptions.value.length - 1;
-      focusListOption();
-      break;
-  }
-}
-
-function onListboxOptionKeyDown(
-  event: KeyboardEvent,
-  option: IInternalListboxOption
-) {
-  const key: string = event.key;
-  switch (key) {
-    case "Enter":
-      updateModelValue(option);
-      break;
-
-    case "Spacebar":
-      updateModelValue(option);
-      break;
-
-    // spacebar (for older browser support)
-    case " ":
-      updateModelValue(option);
-      break;
-
-    case "Tab":
-      updateModelValue(option);
-      break;
-
-    case "Escape":
-      blurListOption(option);
-      openCloseListbox();
-      break;
-  }
-}
-
-function onListboxOptionClick(option: IInternalListboxOption) {
-  updateModelValue(option);
-}
-
-function validate(value: columnValue) {
-  if (props.required && value === "") {
-    emit("error", [{ message: `${props.id} required to complete the form` }]);
-  } else {
-    emit("error", []);
-  }
-}
-</script>
diff --git a/apps/tailwind-components/components/input/listbox/List.vue b/apps/tailwind-components/components/input/listbox/List.vue
deleted file mode 100644
index a7f28414d9..0000000000
--- a/apps/tailwind-components/components/input/listbox/List.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <ul
-    role="listbox"
-    ref="ul"
-    :aria-expanded="isExpanded"
-    class="absolute b-0 w-full overflow-y-scroll z-10 bg-listbox border"
-    :class="{
-      hidden: !isExpanded,
-      'h-44': isExpanded && hasFixedHeight,
-      'shadow-inner': isExpanded,
-    }"
-    :tabindex="isExpanded ? 1 : 0"
-  >
-    <slot></slot>
-  </ul>
-</template>
-
-<script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    isExpanded: boolean;
-    hasFixedHeight: boolean;
-  }>(),
-  {
-    isExpanded: false,
-    hasFixedHeight: false,
-  }
-);
-
-const ul = useTemplateRef<HTMLUListElement>("ul");
-defineExpose({
-  ul,
-});
-</script>
diff --git a/apps/tailwind-components/components/input/listbox/ListItem.vue b/apps/tailwind-components/components/input/listbox/ListItem.vue
deleted file mode 100644
index dc67261d01..0000000000
--- a/apps/tailwind-components/components/input/listbox/ListItem.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-  <li
-    ref="li"
-    role="option"
-    class="flex justify-start items-center gap-3 pl-3 py-1 bg-listbox text-listbox border-t-[1px] border-t-listbox-option hover:cursor-pointer hover:bg-listbox-hover hover:text-listbox focus:bg-listbox-hover focus:text-listbox focus:ring-blue-300"
-    :class="{
-      '!bg-listbox-selected !text-listbox-selected': isSelected,
-    }"
-    :aria-selected="isSelected"
-  >
-    <BaseIcon
-      name="Check"
-      class="fill-listbox-selected invisible"
-      :class="{
-        '!visible': isSelected,
-      }"
-      :width="18"
-    />
-    <span>{{ label }}</span>
-  </li>
-</template>
-
-<script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    isSelected: boolean;
-    label: string | number | boolean;
-  }>(),
-  {
-    isSelected: false,
-  }
-);
-
-const li = useTemplateRef<HTMLLIElement>("li");
-defineExpose({
-  li,
-});
-</script>
diff --git a/apps/tailwind-components/components/input/listbox/Toggle.vue b/apps/tailwind-components/components/input/listbox/Toggle.vue
deleted file mode 100644
index 7e3229930e..0000000000
--- a/apps/tailwind-components/components/input/listbox/Toggle.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <button
-    role="combobox"
-    ref="button"
-    aria-haspopup="listbox"
-    :aria-required="required"
-    :aria-expanded="isExpanded"
-    :aria-activedescendant="selectedElementId"
-    class="flex justify-start items-center h-10 w-full text-left pl-11 border bg-input rounded-search-input text-button-input-toggle focus:ring-blue-300"
-    :class="{
-      'border-disabled text-disabled bg-disabled': disabled,
-      'border-invalid text-invalid': hasError,
-    }"
-    @click="onClick()"
-  >
-    <slot></slot>
-    <div class="w-[60px] flex flex-col">
-      <BaseIcon :width="18" name="caret-up" class="mx-auto -my-1" />
-      <BaseIcon :width="18" name="caret-down" class="mx-auto -my-1" />
-    </div>
-  </button>
-</template>
-
-<script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    required?: boolean;
-    disabled?: boolean;
-    hasError?: boolean;
-    selectedElementId?: string;
-  }>(),
-  {
-    required: false,
-    disabled: false,
-    hasError: false,
-  }
-);
-
-const isExpanded = ref<boolean>(false);
-
-function onClick() {
-  isExpanded.value = !isExpanded.value;
-}
-
-const button = useTemplateRef<HTMLButtonElement>("button");
-defineExpose({
-  button,
-  expanded: isExpanded,
-});
-</script>
diff --git a/apps/tailwind-components/pages/Form.story.vue b/apps/tailwind-components/pages/Form.story.vue
index a71f339e82..7c3df99dfa 100644
--- a/apps/tailwind-components/pages/Form.story.vue
+++ b/apps/tailwind-components/pages/Form.story.vue
@@ -6,22 +6,16 @@ import type {
   IFieldError,
   ISchemaMetaData,
   ITableMetaData,
-  IInputValueLabel,
 } from "../../metadata-utils/src/types";
 
-const exampleForms: IInputValueLabel[] = [
-  { value: "simple", label: "Simple form example" },
-  { value: "complex", label: "Complex form example" },
-];
-
-const formType = ref<IInputValueLabel>(exampleForms[0]);
+const sampleType = ref("simple");
 
 // just assuming that the table is there for the demo
 const schemaId = computed(() =>
-  formType.value.value === "simple" ? "pet store" : "catalogue-demo"
+  sampleType.value === "simple" ? "pet store" : "catalogue-demo"
 );
 const tableId = computed(() =>
-  formType.value.value === "simple" ? "Pet" : "Resources"
+  sampleType.value === "simple" ? "Pet" : "Resources"
 );
 
 const {
@@ -37,8 +31,7 @@ const tableMeta = computed(
     ) as ITableMetaData
 );
 
-function refetch(value: IInputValueLabel) {
-  formType.value = value;
+function refetch() {
   refetchMetadata();
 }
 
diff --git a/apps/tailwind-components/pages/input/Listbox.story.vue b/apps/tailwind-components/pages/input/Listbox.story.vue
deleted file mode 100644
index 72c5391219..0000000000
--- a/apps/tailwind-components/pages/input/Listbox.story.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<template>
-  <article
-    aria-labelledby="listbox-component-title"
-    class="[&>p]:mt-3 [&_p]:mb-4"
-  >
-    <h2 id="listbox-component-title" class="text-heading-2xl">
-      Listbox component
-    </h2>
-    <p>
-      The <code>InputListbox</code> component an alternative to the
-      <code>InputSelect</code> component. This component functions and behaves
-      in the same manner as the select element, but it allows the component to
-      be styled with greater detail. The component is flexible in that it allows
-      for multiple input types. Options can be generated from an array of values
-      (string, number, boolean) or as an array of objects that follow the
-      <code>IListboxOption</code> type (<code
-        >[{value: "...", label: "..."},...]</code
-      >). The return value will always match the input type. When passing data
-      into the component, you must also supply the listbox type. There are two
-      types to use.
-    </p>
-    <ul class="pl-6 mb-4 list-disc">
-      <li>
-        <code>IListboxValue</code>: an array of values (as strings, or
-        string[]). For now, this component only supports string arrays.
-      </li>
-      <li>
-        <code>IListboxOption</code>: an array of objects that have a value and a
-        label key.(<code>[{value: "...", label: "..."},...]</code>).
-      </li>
-    </ul>
-    <p>
-      The following examples demonstrate the use of the listbox components and
-      the various configurations that area allowed.
-    </p>
-  </article>
-  <form class="mb-6 bg-white rounded p-4">
-    <legend class="mb-2 text-heading-lg">
-      Configure the listbox component
-    </legend>
-    <div class="flex flex-row flex-wrap justify-center items-start gap-4">
-      <div class="p-2 grow">
-        <InputLabel for="listbox-data-type" class="pl-0">
-          <span>Select the input data type</span>
-        </InputLabel>
-        <InputRadioGroup
-          id="listbox-data-type"
-          v-model="listboxDataType"
-          :radio-options="[
-            { value: 'string', label: 'String array' },
-            { value: 'array', label: 'Array of options' },
-          ]"
-        />
-      </div>
-      <div class="p-2 grow">
-        <InputLabel for="listbox-component-state" class="pl-0">
-          Change the component state
-        </InputLabel>
-        <InputRadioGroup
-          id="listbox-component-state"
-          v-model="listboxState"
-          :radioOptions="[
-            {
-              value: 'disabled',
-              label: 'Disabled: disable interactivity with the component',
-            },
-            {
-              value: 'error',
-              label: 'Error: simulate an instance where an error occurred',
-            },
-          ]"
-          :showClearButton="true"
-        />
-      </div>
-      <div class="bg-white p-2 grow">
-        <InputLabel for="listbox-placeholder">
-          Change the default placeholder text
-        </InputLabel>
-        <InputString id="listbox-placeholder" v-model="listboxPlaceholder" />
-      </div>
-    </div>
-  </form>
-  <div class="mb-6 bg-white rounded px-6 py-8">
-    <h3 class="text-heading-lg mb-2">Listbox example</h3>
-    <InputLabel
-      id="listbox-input-label"
-      for="listbox-input"
-      class="block mb-3 pl-0"
-      :disabled="listboxState === 'disabled'"
-      :has-error="listboxState === 'error'"
-    >
-      <span>Select a group assignment</span>
-    </InputLabel>
-    <InputListbox
-      id="listbox-input"
-      labelId="listbox-input-label"
-      :options="listboxData"
-      :hasError="listboxState === 'error'"
-      :disabled="listboxState === 'disabled'"
-      :placeholder="listboxPlaceholder"
-      @update:model-value="(value) => (modelValue = value)"
-    />
-    <output class="block w-full mt-6 bg-gray-100 py-3 px-2 pl-6">
-      <code
-        >Output {{ listboxDataType === "true" ? "Value" : "Object" }}:
-        {{ modelValue }}</code
-      >
-    </output>
-  </div>
-  <div class="mb-2 bg-white rounded p-6">
-    <h3 class="text-heading-lg mb-2">Input data structure</h3>
-    <p>Based on the selection above, the input data is shown below.</p>
-    <output
-      class="block w-full mt-6 bg-gray-100 py-3 px-2 pl-6 h-60 overflow-y-scroll shadow-inner"
-    >
-      <pre class="indent-[-5em]">
-        {{ listboxData }}
-      </pre>
-    </output>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from "vue";
-import type {
-  IInputValue,
-  IInputValueLabel,
-} from "../../../metadata-utils/src/types";
-
-const modelValue = defineModel<IInputValue | IInputValueLabel>();
-const letters: string[] = [...Array(26).keys()].map((num) =>
-  String.fromCharCode(num + 65)
-);
-
-const lettersWithLabels: IInputValueLabel[] = letters.map((letter: string) => {
-  return { value: letter, label: `Group ${letter}` };
-});
-
-const listboxState = ref<string>("");
-const listboxPlaceholder = ref<string>("Select an option");
-const listboxDataType = ref<string>("string");
-
-const listboxData = computed<IInputValue[] | IInputValueLabel[]>(() => {
-  if (listboxDataType.value === "string") {
-    return letters as IInputValue[];
-  } else {
-    return lettersWithLabels as IInputValueLabel[];
-  }
-});
-</script>
diff --git a/apps/tailwind-components/tailwind.config.js b/apps/tailwind-components/tailwind.config.js
index 838007af18..d0c18cb5b0 100644
--- a/apps/tailwind-components/tailwind.config.js
+++ b/apps/tailwind-components/tailwind.config.js
@@ -154,9 +154,6 @@ module.exports = {
         "disabled": "var(--background-color-disabled)",
         "invalid": "var(--background-color-invalid)",
         "input": "var(--background-color-input)",
-        "listbox": "var(--background-color-listbox)",
-        "listbox-hover": "var(--background-color-listbox-hover)",
-        "listbox-selected": "var(--background-color-listbox-selected)",
         "table": "var(--background-color-table)",
         "notification": "var(--background-color-notification)",
       }),
@@ -211,10 +208,6 @@ module.exports = {
         "valid": "var(--text-color-valid)",
         "disabled": "var(--text-color-disabled)",
         "required": "var(--text-color-required)",
-        "listbox": "var(--text-color-listbox)",
-        "listbox-hover": "var(--text-color-listbox-hover)",
-        "listbox-selected": "var(--text-color-listbox-selected)",
-        "button-input-toggle": "var(--text-color-button-input-toggle)",
         "legend-error-count": "var(--text-color-legend-error-count)",
       }),
       borderColor: ({ theme }) => ({
@@ -239,8 +232,6 @@ module.exports = {
         "disabled": "var(--border-color-disabled)",
         "input": "var(--border-color-input)",
         "input-inverted": "var(--border-color-input-inverted)",
-        "listbox": "var(--border-color-search-input)",
-        "listbox-option": "var(--border-color-listbox-option)"
       }),
       stroke: ({ theme }) => ({
         "input": "var(--border-color-input)",
@@ -249,7 +240,6 @@ module.exports = {
       fill: ({ theme }) => ({
         "input": "var(--background-color-input)",
         "input-checked": "var(--background-color-input-checked)",
-        "listbox-selected": "var(--text-color-listbox-selected)",
         "notification": "var(--background-color-notification)",
         "notification-text": "var(--text-color-legend-error-count)",
       }),
diff --git a/apps/tailwind-components/types/listbox.ts b/apps/tailwind-components/types/listbox.ts
deleted file mode 100644
index d7d02e26b3..0000000000
--- a/apps/tailwind-components/types/listbox.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-
-import type { IInputValueLabel } from "../../metadata-utils/src/types"; 
-
-export interface IInternalListboxOption extends IInputValueLabel {
-  index: number;
-  elemId: string;
-}
-
-export interface IListboxLiRef {
-  li: HTMLLIElement;
-}
\ No newline at end of file
diff --git a/apps/yarn.lock b/apps/yarn.lock
index 872b7cf21e..0d98292f35 100644
--- a/apps/yarn.lock
+++ b/apps/yarn.lock
@@ -14248,7 +14248,6 @@ wordwrap@^1.0.0, wordwrap@~1.0.0:
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
-  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
diff --git a/backend/molgenis-emx2-rdf/src/test/java/org/molgenis/emx2/rdf/ColumnTypeRdfMapperTest.java b/backend/molgenis-emx2-rdf/src/test/java/org/molgenis/emx2/rdf/ColumnTypeRdfMapperTest.java
index 2f9cd0b641..0b1021b645 100644
--- a/backend/molgenis-emx2-rdf/src/test/java/org/molgenis/emx2/rdf/ColumnTypeRdfMapperTest.java
+++ b/backend/molgenis-emx2-rdf/src/test/java/org/molgenis/emx2/rdf/ColumnTypeRdfMapperTest.java
@@ -283,6 +283,7 @@ void validateValuesRetrieval() {
                             // Not sure how to retrieve more directly as changes everytime
                             + firstRow.getString(ColumnType.FILE.name()))),
                 retrieveValues(ColumnType.FILE.name())),
+
         // STRING
         () ->
             Assertions.assertEquals(
@@ -377,6 +378,7 @@ void validateValuesRetrieval() {
             Assertions.assertEquals(
                 Set.of(Values.iri(rdfApiUrlPrefix + REFBACK_TABLE + "?id=1")),
                 retrieveValues(ColumnType.REFBACK.name())),
+
         // LAYOUT and other constants -> should return empty sets as they should be excluded
         () -> Assertions.assertEquals(Set.of(), retrieveValues(ColumnType.HEADING.name())),
         // format flavors that extend a baseType
diff --git a/e2e/tests/tailwind-components/input/listbox.spec.ts b/e2e/tests/tailwind-components/input/listbox.spec.ts
deleted file mode 100644
index 3589c0f0fc..0000000000
--- a/e2e/tests/tailwind-components/input/listbox.spec.ts
+++ /dev/null
@@ -1,187 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-
-test.describe("Listbox component", {
-  tag: "@tw-components @tw-forms @tw-listbox"
-}, () => {
-  
-  test(
-    "toggle has correct aria attributes",
-    async({ page }) => {
-      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
-      const combobox = await page.getByRole("combobox");
-      await expect(combobox).toHaveAttribute("aria-required");
-      await expect(combobox).toHaveAttribute("aria-expanded");
-      await expect(combobox).toHaveAttribute("aria-labelledby");
-      await expect(combobox).toHaveAttribute("role", "combobox");
-      await expect(combobox).toHaveAttribute("aria-haspopup", "listbox");
-    }
-  );
-  
-  test(
-    "options list is properly linked to the listbox",
-    async ({ page }) => {
-      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
-      const combobox = await page.getByRole("combobox");
-      const listbox = await page.getByRole("listbox");
-      await combobox.click();
-      
-      const comboxId = await combobox.getAttribute("aria-controls");
-      const listboxId = await listbox.getAttribute("id");
-      await expect(comboxId).toEqual(listboxId);   
-    }
-  )
-  
-  test(
-    "listbox is properly labelled",
-    async ({ page }) => {
-      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
-      const combobox = await page.getByRole("combobox");
-      const comboxId = await combobox.getAttribute("aria-labelledby");
-      await page.locator(`label[for='${comboxId}']`);
-    }
-  )
-  
-  test(
-    "aria expand properties correctly update when opened",
-    async({ page }) => {
-      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
-      const combobox = await page.getByRole("combobox");
-      await expect(combobox).toHaveAttribute("aria-expanded", "false");
-    }
-  );
-  
-  test(
-    "placeholder is always the first element in the list",
-    async ({ page }) => {
-      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
-      const combobox = await page.getByRole("combobox");
-      await combobox.click();
-      const option = await page.getByRole("option").first();
-      await expect(option).toHaveText("Select an option");
-    }
-  );
-  
-  test(
-    "list items have the proper attributes",
-    async ({ page }) => {
-      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
-      const combobox = await page.getByRole("combobox");
-      await combobox.click();
-      await expect(combobox).toHaveAttribute("aria-expanded", "true");
-      for (const option of await page.getByRole("option").all()) { 
-        if (await option.innerText() === "Select an option") {
-          await expect(option).toHaveAttribute("aria-selected", "true");
-        } else {
-          await expect(option).toHaveAttribute("aria-selected", "false");
-        }
-      }
-    }
-  );
-  
-  test(
-    "down key opens listbox",
-    {
-      tag: '@keyboard-events'
-    },
-    async ({ page }) => {
-      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
-      const combobox = await page.getByRole("combobox");
-      const listbox = await page.getByRole("listbox");
-
-      await combobox.focus();
-      await page.keyboard.press("ArrowDown");
-      await expect(combobox).toHaveAttribute("aria-expanded", "true");
-      await expect(listbox).toHaveAttribute("aria-expanded", "true");
-    }
-  );
-  
-  test(
-    "enter key opens and closes listbox",
-    {
-      tag: '@keyboard-events'
-    },
-    async({ page }) => {
-      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
-      const combobox = await page.getByRole("combobox");
-      const listbox = await page.getByRole("listbox");
-
-      await combobox.focus();
-      await page.keyboard.press("Enter");
-      await expect(combobox).toHaveAttribute("aria-expanded", "true");
-      await expect(listbox).toHaveAttribute("aria-expanded", "true");
-      
-      await page.keyboard.press("Enter");
-      await expect(combobox).toHaveAttribute("aria-expanded", "false");
-      await expect(listbox).toBeHidden();
-      
-    }
-  );
-  
-  test(
-    "space key opens and closes listbox",
-    {
-      tag: '@keyboard-events'
-    },
-    async({ page }) => {
-      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
-      const combobox = await page.getByRole("combobox");
-      const listbox = await page.getByRole("listbox");
-
-      await combobox.focus();
-      await page.keyboard.press("Space");
-      await expect(combobox).toHaveAttribute("aria-expanded", "true");
-      await expect(listbox).toHaveAttribute("aria-expanded", "true");
-      
-      await page.keyboard.press("Space");
-      await expect(combobox).toHaveAttribute("aria-expanded", "false");
-      await expect(listbox).toBeHidden();
-      
-    }
-  );
-  
-  test(
-    "End and home buttons focuses the last and first options",
-    {
-      tag: '@keyboard-events'
-    },
-    async({ page }) => {
-      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
-      const combobox = await page.getByRole("combobox");
-
-      await combobox.focus();
-      await page.keyboard.press("Enter");
-      await page.keyboard.press("End");
-      
-      const lastOption = await page.getByRole("option").last();
-      await expect(lastOption).toBeFocused();
-      
-      await page.keyboard.press("Home");
-      const firstOption = await page.getByRole("option").first();
-      await expect(firstOption).toBeFocused();
-    }
-  );
-  
-  test(
-    "When opened, arrow keys properly focus and select items",
-    {
-      tag: '@keyboard-events'
-    },
-    async({ page }) => {
-      await page.goto("/apps/tailwind-components/#/input/Listbox.story");
-      const combobox = await page.getByRole("combobox");
-
-      await combobox.focus();
-      await page.keyboard.press("Enter");
-      await page.keyboard.press("ArrowDown");
-      const secondOption = await page.getByRole("option").nth(1);
-      await expect(secondOption).toBeFocused();
-    }
-  )
-  
-})
-
-
-
-
-