From 4b6fd1ae04bbc56da851ce53285c8b214784e91e Mon Sep 17 00:00:00 2001
From: Joseph Ojoko <entewshi@gmail.com>
Date: Fri, 29 Mar 2024 05:08:26 +0100
Subject: [PATCH] fix(RuiMenuSelect): extend component to work as v-select
 replacement

---
 example/src/views/IconView.vue                |  30 +-
 example/src/views/MenuView.vue                |  98 ++++-
 .../accordions/accordions/Accordions.vue      |   2 +-
 src/components/buttons/button/Button.vue      |   4 +
 .../forms/select/RuiMenuSelect.spec.ts        |   8 +-
 .../forms/select/RuiMenuSelect.stories.ts     |  14 +-
 src/components/forms/select/RuiMenuSelect.vue | 373 ++++++++++++------
 src/components/overlays/Teleport.ts           |   2 +-
 src/components/overlays/menu/Menu.vue         |  38 +-
 src/components/tables/TablePagination.vue     |  10 +-
 src/components/tabs/tabs/Tabs.vue             |   2 +-
 src/composables/dropdown-menu.ts              | 123 ++++++
 tests/stubs/RouterLinkStub.ts                 |   4 +-
 13 files changed, 549 insertions(+), 159 deletions(-)
 create mode 100644 src/composables/dropdown-menu.ts

diff --git a/example/src/views/IconView.vue b/example/src/views/IconView.vue
index 3625882..5ffd34e 100644
--- a/example/src/views/IconView.vue
+++ b/example/src/views/IconView.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RuiIcon } from '@rotki/ui-library-compat';
+import { type LogoProps, RuiIcon, RuiLogo } from '@rotki/ui-library-compat';
 import { ref } from 'vue';
 
 const icons = ref([
@@ -7,6 +7,15 @@ const icons = ref([
   { name: 'sun-line', size: 24 },
   { name: 'arrow-right-line', size: 24 },
 ]);
+
+const logos = ref<(LogoProps & { name: string })[]>([
+  { name: 'Default', customSrc: undefined },
+  { name: 'Custom', customSrc: 'https://raw.githubusercontent.com/rotki/data/hohoho/assets/icons/drawer_logo.png' },
+  { name: 'Custom failed fallback to default', customSrc: 'not-existing-path' },
+  { name: 'Custom failed fallback to default with app name', customSrc: 'not-existing-path', text: true },
+  { name: 'Default with app name', customSrc: undefined, text: true },
+  { name: 'Custom with app name', customSrc: 'https://raw.githubusercontent.com/rotki/data/main/assets/icons/drawer_logo.png', text: true },
+]);
 </script>
 
 <template>
@@ -24,5 +33,24 @@ const icons = ref([
         v-bind="icon"
       />
     </div>
+    <h2
+      class="text-h4 mb-6"
+      data-cy="logos"
+    >
+      rotki Logo
+    </h2>
+    <div class="grid gap-4 grid-rows-2 grid-cols-3">
+      <div
+        v-for="(logo, i) in logos"
+        :key="i"
+      >
+        <RuiLogo
+          v-bind="logo"
+        />
+        <div class="mt-4">
+          {{ logo.name }}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/example/src/views/MenuView.vue b/example/src/views/MenuView.vue
index 20e8d74..75cc24a 100644
--- a/example/src/views/MenuView.vue
+++ b/example/src/views/MenuView.vue
@@ -153,7 +153,7 @@ const menuSelect = ref<MenuSelectProps[]>([
   },
   {
     disabled: false,
-    outlined: true,
+    variant: 'outlined',
     keyAttr: 'id',
     textAttr: 'label',
     value: undefined,
@@ -161,7 +161,7 @@ const menuSelect = ref<MenuSelectProps[]>([
   },
   {
     disabled: true,
-    outlined: true,
+    variant: 'outlined',
     keyAttr: 'id',
     textAttr: 'label',
     value: undefined,
@@ -186,7 +186,7 @@ const menuSelect = ref<MenuSelectProps[]>([
   {
     dense: true,
     disabled: false,
-    outlined: true,
+    variant: 'outlined',
     keyAttr: 'id',
     textAttr: 'label',
     value: undefined,
@@ -195,7 +195,7 @@ const menuSelect = ref<MenuSelectProps[]>([
   {
     dense: true,
     disabled: true,
-    outlined: true,
+    variant: 'outlined',
     keyAttr: 'id',
     textAttr: 'label',
     value: undefined,
@@ -209,36 +209,46 @@ const menuSelectCustom = ref<MenuSelectProps[]>([
     keyAttr: 'id',
     textAttr: 'label',
     value: undefined,
+    label: 'Menu with very long name to test and see truncate behaviour',
+    hint: 'lorem ipsum dolor',
     options,
   },
   {
-    disabled: true,
     keyAttr: 'id',
     textAttr: 'label',
     value: undefined,
+    dense: true,
+    errorMessages: ['This is required'],
+    hint: 'lorem ipsum dolor',
+    showDetails: true,
     options,
   },
   {
     disabled: false,
-    outlined: true,
+    variant: 'outlined',
     keyAttr: 'id',
     textAttr: 'label',
+    successMessages: ['lgtm!'],
+    showDetails: true,
     value: undefined,
     options,
   },
   {
     disabled: true,
-    outlined: true,
+    variant: 'outlined',
     keyAttr: 'id',
     textAttr: 'label',
     value: undefined,
     options,
   },
 ]);
+
+const test = ref(null);
 </script>
 
 <template>
   <div>
+    <slot ref="test" />
     <h2
       class="text-h4 mb-6"
       data-cy="menus"
@@ -249,7 +259,7 @@ const menuSelectCustom = ref<MenuSelectProps[]>([
       <div
         v-for="(menu, i) in menus"
         :key="i"
-        class="p-4"
+        class="py-4"
       >
         <RuiMenu
           v-bind="objectOmit(menu, ['buttonColor'])"
@@ -280,7 +290,7 @@ const menuSelectCustom = ref<MenuSelectProps[]>([
       <div
         v-for="(menu, i) in menuSelect"
         :key="i"
-        class="p-4"
+        class="py-4"
       >
         <RuiMenuSelect
           v-model="menu.value"
@@ -293,32 +303,35 @@ const menuSelectCustom = ref<MenuSelectProps[]>([
       class="text-h6 mt-6"
       data-cy="select-menus-custom"
     >
-      Select Menus: custom activator
+      Select Menus: custom activator content
     </h4>
     <div class="grid gap-6 grid-cols-4">
       <div
         v-for="(menu, i) in menuSelectCustom"
         :key="i"
-        class="p-4"
+        class="py-4"
       >
         <RuiMenuSelect
           v-model="menu.value"
           v-bind="objectOmit(menu, ['value'])"
           :data-cy="`select-menu-custom-${i}`"
+          wrappe-classr="w-full"
         >
-          <template #activator="{ on, disabled, open }">
+          <template #activator="{ on, disabled, open, value }">
             <RuiButton
+              class="!rounded-md border"
               data-cy="activator"
+              variant="list"
               :disabled="disabled"
               v-on="on"
             >
-              Menu
+              {{ value ? value.label : 'Choose option' }}
               <template #append>
                 <RuiIcon
                   class="transition"
                   :class="[{ 'rotate-180': open }]"
                   name="arrow-drop-down-fill"
-                  size="24"
+                  size="32"
                 />
               </template>
             </RuiButton>
@@ -326,5 +339,62 @@ const menuSelectCustom = ref<MenuSelectProps[]>([
         </RuiMenuSelect>
       </div>
     </div>
+    <h4
+      class="text-h6 mt-6"
+      data-cy="select-menus-custom-inner"
+    >
+      Select Menus: custom activator inner content
+    </h4>
+    <div class="grid gap-6 grid-cols-4">
+      <div
+        v-for="(menu, i) in menuSelectCustom"
+        :key="i"
+        class="py-4"
+      >
+        <RuiMenuSelect
+          v-model="menu.value"
+          v-bind="objectOmit(menu, ['value'])"
+          :data-cy="`select-menu-custom-inner-${i}`"
+          full-width
+          float-label
+          clearable
+          variant="outlined"
+        >
+          <template #activator.text="{ value }">
+            {{ value.id }} | {{ value.label }}
+          </template>
+        </RuiMenuSelect>
+      </div>
+    </div>
+    <h4
+      class="text-h6 mt-6"
+      data-cy="select-menus-custom-options"
+    >
+      Select Menus: custom options
+    </h4>
+    <div class="grid gap-6 grid-cols-4">
+      <div
+        v-for="(menu, i) in menuSelectCustom"
+        :key="i"
+        class="py-4"
+      >
+        <RuiMenuSelect
+          v-model="menu.value"
+          v-bind="objectOmit(menu, ['value'])"
+          :append-width="1.5"
+          :data-cy="`select-menu-custom-options-${i}`"
+          full-width
+        >
+          <template #item.append="{ active }">
+            <RuiIcon
+              v-if="active"
+              class="transition"
+              name="check-line"
+              size="24"
+            />
+          </template>
+        </RuiMenuSelect>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/src/components/accordions/accordions/Accordions.vue b/src/components/accordions/accordions/Accordions.vue
index e86436e..d756a38 100644
--- a/src/components/accordions/accordions/Accordions.vue
+++ b/src/components/accordions/accordions/Accordions.vue
@@ -31,7 +31,7 @@ const children = computed(() => {
   const multipleVal = get(multiple);
 
   return accordions.map((accordion, index) => {
-    // @ts-expect-error
+    // @ts-expect-error the typings throw a false error
     // The componentOptions.propsData is messed when combined with props from the parent.
     // So use `initialPropsData`, the original `propsData` that haven't touched by the code below.
     const propsData = (accordion.componentOptions?.initialPropsData
diff --git a/src/components/buttons/button/Button.vue b/src/components/buttons/button/Button.vue
index a6ab990..32392ff 100644
--- a/src/components/buttons/button/Button.vue
+++ b/src/components/buttons/button/Button.vue
@@ -284,6 +284,10 @@ const slots = useSlots();
     &.sm {
       @apply px-3 py-1;
     }
+
+    .label {
+      @apply w-full;
+    }
   }
 
   &.icon {
diff --git a/src/components/forms/select/RuiMenuSelect.spec.ts b/src/components/forms/select/RuiMenuSelect.spec.ts
index 21372b6..201159c 100644
--- a/src/components/forms/select/RuiMenuSelect.spec.ts
+++ b/src/components/forms/select/RuiMenuSelect.spec.ts
@@ -34,8 +34,8 @@ describe('menu select', () => {
       },
     });
 
-    expect(wrapper.get('label').classes()).toMatch(/_activator_/);
-    expect(wrapper.find('label span[class*=label]').exists()).toBeTruthy();
+    expect(wrapper.get('div[data-id="activator"]').classes()).toMatch(/_activator_/);
+    expect(wrapper.find('div[data-id="activator"] span[class*=label]').exists()).toBeTruthy();
     expect(wrapper.find('span > svg').exists()).toBeTruthy();
   });
 
@@ -49,7 +49,7 @@ describe('menu select', () => {
         value: options[4],
       },
     });
-    expect(wrapper.find('label[aria-disabled]').exists()).toBeTruthy();
-    expect(wrapper.find('label[aria-disabled]').text()).toMatch('Spain');
+    expect(wrapper.find('div[aria-disabled]').exists()).toBeTruthy();
+    expect(wrapper.find('div[aria-disabled]').text()).toMatch('Spain');
   });
 });
diff --git a/src/components/forms/select/RuiMenuSelect.stories.ts b/src/components/forms/select/RuiMenuSelect.stories.ts
index 9a55f4a..945bb2f 100644
--- a/src/components/forms/select/RuiMenuSelect.stories.ts
+++ b/src/components/forms/select/RuiMenuSelect.stories.ts
@@ -48,8 +48,12 @@ const meta: Meta<Props> = {
     dense: { control: 'boolean' },
     disabled: { control: 'boolean' },
     options: { control: 'array', defaultValue: [] },
-    outlined: { control: 'boolean' },
     value: { control: 'string' },
+    variant: {
+      control: 'select',
+      defaultValue: 'default',
+      options: ['default', 'outlined', 'filled'],
+    },
   },
   component: RuiMenuSelect as any,
   parameters: {
@@ -84,9 +88,9 @@ export const DefaultDisabled: Story = {
 export const Outlined: Story = {
   args: {
     keyAttr: 'id',
-    outlined: true,
     textAttr: 'label',
     value: null,
+    variant: 'outlined',
   },
 };
 
@@ -94,9 +98,9 @@ export const OutlinedDisabled: Story = {
   args: {
     disabled: true,
     keyAttr: 'id',
-    outlined: true,
     textAttr: 'label',
     value: null,
+    variant: 'outlined',
   },
 };
 
@@ -105,9 +109,9 @@ export const OutlinedDense: Story = {
     dense: false,
     disabled: true,
     keyAttr: 'id',
-    outlined: true,
     textAttr: 'label',
     value: null,
+    variant: 'outlined',
   },
 };
 
@@ -116,9 +120,9 @@ export const OutlinedDisabledDense: Story = {
     dense: true,
     disabled: true,
     keyAttr: 'id',
-    outlined: true,
     textAttr: 'label',
     value: null,
+    variant: 'outlined',
   },
 };
 
diff --git a/src/components/forms/select/RuiMenuSelect.vue b/src/components/forms/select/RuiMenuSelect.vue
index d91209b..7931fbd 100644
--- a/src/components/forms/select/RuiMenuSelect.vue
+++ b/src/components/forms/select/RuiMenuSelect.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { objectOmit } from '@vueuse/shared';
 import RuiButton from '@/components/buttons/button/Button.vue';
-import RuiMenu, { type MenuProps } from '@/components/overlays/menu/Menu.vue';
 import RuiIcon from '@/components/icons/Icon.vue';
+import RuiMenu, { type MenuProps } from '@/components/overlays/menu/Menu.vue';
+import { useDropdownMenu } from '@/composables/dropdown-menu';
 
 export type T = any;
 
@@ -15,11 +15,21 @@ export interface Props {
   value?: T | null;
   disabled?: boolean;
   dense?: boolean;
-  outlined?: boolean;
+  fullWidth?: boolean;
+  floatLabel?: boolean;
+  clearable?: boolean;
   label?: string;
   menuOptions?: MenuProps;
   labelClass?: string;
   menuClass?: string;
+  optionClass?: string;
+  prependWidth?: number; // in rem
+  appendWidth?: number; // in rem
+  variant?: 'default' | 'filled' | 'outlined';
+  hint?: string;
+  errorMessages?: string | string[];
+  successMessages?: string | string[];
+  showDetails?: boolean;
 }
 
 defineOptions({
@@ -29,12 +39,20 @@ defineOptions({
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   dense: false,
-  outlined: false,
+  floatLabel: false,
+  clearable: false,
+  showDetails: false,
   label: 'Select',
   menuOptions: () => ({
     popper: { placement: 'bottom-start' },
     closeOnContentClick: true,
   }),
+  prependWidth: 0,
+  appendWidth: 0,
+  variant: 'default',
+  hint: undefined,
+  errorMessages: () => [],
+  successMessages: () => [],
 });
 
 const emit = defineEmits<{
@@ -43,192 +61,301 @@ const emit = defineEmits<{
 
 const css = useCssModule();
 
-const { list, containerProps, wrapperProps, scrollTo } = useVirtualList<T>(
-  toRef(props, 'options'),
-  {
-    itemHeight: props.dense ? 30 : 48,
-    overscan: 1,
-  },
-);
-
-const renderedData: ComputedRef<T[]> = useArrayMap(list, ({ data }) => data);
-
-const isOpen = ref(false);
+const { options, dense } = toRefs(props);
 
 const value = computed({
   get: () => props.value,
-  set: value => emit('input', value),
+  set: selected => emit('input', selected),
 });
 
-const valueKey = computed(() => props.value ? props.value[props.keyAttr] : undefined);
-
-const menuWidth = computed(() => {
-  const widths = { min: 0, max: 0 };
-  const maxWidth = 30;
-  const paddingX = 1.5;
-  const fontMultiplier = props.dense ? 12 : 13;
-
-  props.options.forEach((option) => {
-    const length = getText(option)?.toString()?.length ?? 0;
-    if (widths.min === 0 && widths.max === 0) {
-      widths.min = length;
-      widths.max = length;
-    }
-    else if (length < widths.min) {
-      widths.min = length;
-    }
-    else if (length > widths.max) {
-      widths.max = length;
-    }
-  });
-
-  const difference = widths.max - widths.min;
+const labelWithQuote = computed(() => {
+  if (!props.label)
+    return '"\\200B"';
 
-  function computeValue(width: number) {
-    return `${Math.min((width * fontMultiplier) / 16 + paddingX, maxWidth)}rem`;
-  }
-
-  if (difference <= 5)
-    return computeValue(widths.max);
-
-  return computeValue(widths.min + difference / 2);
+  return `'  ${props.label}  '`;
 });
 
-function getText(item: T): T[K] {
-  return item[props.textAttr];
-}
-
-function getIdentifier(item: T): T[K] {
-  return item[props.keyAttr];
-}
-
-function isActiveItem(item: T): boolean {
-  if (!props.value)
-    return false;
-
-  return item[props.keyAttr] === props.value[props.keyAttr];
-}
+const {
+  containerProps,
+  wrapperProps,
+  renderedData,
+  isOpen,
+  valueKey,
+  menuWidth,
+  getText,
+  getIdentifier,
+  isActiveItem,
+} = useDropdownMenu<T, K>({
+  itemHeight: props.dense ? 30 : 48,
+  keyAttr: props.keyAttr,
+  textAttr: props.textAttr,
+  options,
+  dense,
+  value,
+});
 
-function updateOpen(open: boolean) {
-  const value = props.value;
-  if (open && value) {
-    nextTick(() => {
-      scrollTo(get(props.options).findIndex(isActiveItem));
-    });
-  }
-}
+const float = computed(() => (get(isOpen) || !!get(value)) && props.floatLabel);
 
-watch(isOpen, updateOpen);
+const virtualContainerProps = computed(() => ({
+  style: containerProps.style as any,
+  ref: containerProps.ref as any,
+}));
 </script>
 
 <template>
   <RuiMenu
     v-model="isOpen"
     :class="css.wrapper"
-    v-bind="menuOptions"
+    v-bind="{ ...menuOptions, errorMessages, successMessages, hint, dense, fullWidth, showDetails }"
   >
-    <template #activator="{ on, open }">
+    <template #activator="{ on, open, hasError, hasSuccess }">
       <slot
         name="activator"
-        v-bind="{ disabled, value, outlined, on, open }"
+        v-bind="{ disabled, value, variant, on, open, hasError, hasSuccess }"
       >
-        <label
+        <div
+          :aria-disabled="disabled"
           :class="[
             css.activator,
             labelClass,
             {
               [css.disabled]: disabled,
-              [css.outlined]: outlined,
+              [css.outlined]: variant === 'outlined',
               [css.dense]: dense,
+              [css.float]: float,
+              [css['with-error']]: hasError,
+              [css['with-success']]: hasSuccess && !hasError,
+              'w-full': fullWidth,
             },
           ]"
-          :aria-disabled="disabled"
+          data-id="activator"
           v-on="disabled ? {} : on"
         >
-          <span :class="css.label">
-            {{ value ? getText(value) : label }}
+          <span
+            v-if="floatLabel || !value"
+            :class="[
+              css.label,
+              {
+                'absolute right-4': floatLabel,
+                'pr-2': !value && !open && floatLabel,
+                'left-4': floatLabel && !dense,
+                'left-2': floatLabel && dense,
+              },
+            ]"
+          >
+            <slot
+              name="activator.label"
+              v-bind="{ value }"
+            >
+              {{ label }}
+            </slot>
+          </span>
+          <span
+            v-if="value"
+            :class="css.value"
+          >
+            <slot
+              name="activator.prepend"
+              v-bind="{ value }"
+            />
+            <slot
+              name="activator.text"
+              v-bind="{ value }"
+            >
+              {{ getText(value) }}
+            </slot>
+          </span>
+
+          <span
+            v-if="clearable && value && !disabled"
+            :class="css.clear"
+            @click.stop.prevent="emit('input', null)"
+          >
+            <RuiIcon
+              color="error"
+              name="close-line"
+              size="18"
+            />
           </span>
 
           <span :class="css.icon__wrapper">
             <RuiIcon
               :class="[css.icon, { 'rotate-180': open }]"
+              :size="dense ? 24 : 32"
               name="arrow-drop-down-fill"
-              size="24"
             />
           </span>
-        </label>
+        </div>
+        <fieldset
+          v-if="floatLabel"
+          :class="css.fieldset"
+        >
+          <legend :class="{ 'px-2': float }" />
+        </fieldset>
       </slot>
       <input
+        :value="valueKey"
         class="hidden"
         type="hidden"
-        :value="valueKey"
       />
     </template>
-    <div
-      v-bind="objectOmit(containerProps, ['onScroll'])"
-      :class="[css.menu, menuClass]"
-      :style="{ width: menuWidth }"
-      @scroll="containerProps.onScroll"
-    >
-      <div v-bind="wrapperProps">
-        <RuiButton
-          v-for="(option, i) in renderedData"
-          :key="i"
-          :value="getIdentifier(option)"
-          :active="isActiveItem(option)"
-          :size="dense ? 'sm' : undefined"
-          variant="list"
-          @input="value = option"
-        >
-          <slot
-            name="item.text"
-            v-bind="{ disabled, value }"
+    <template #default="{ width }">
+      <div
+        :class="[css.menu, menuClass]"
+        :style="{ width: fullWidth ? `${width / 16}rem` : menuWidth }"
+        v-bind="virtualContainerProps"
+        @scroll="containerProps.onScroll"
+      >
+        <div v-bind="wrapperProps">
+          <RuiButton
+            v-for="(option, i) in renderedData"
+            :key="i"
+            :active="isActiveItem(option)"
+            :size="dense ? 'sm' : undefined"
+            :value="getIdentifier(option)"
+            variant="list"
+            @input="value = option"
           >
-            {{ getText(option) }}
-          </slot>
-        </RuiButton>
+            <template #prepend>
+              <slot
+                name="item.prepend"
+                v-bind="{ disabled, option, active: isActiveItem(option) }"
+              />
+            </template>
+            <slot
+              name="item.text"
+              v-bind="{ disabled, option, active: isActiveItem(option) }"
+            >
+              {{ getText(option) }}
+            </slot>
+            <template #append>
+              <slot
+                name="item.append"
+                v-bind="{ disabled, option, active: isActiveItem(option) }"
+              />
+            </template>
+          </RuiButton>
+        </div>
       </div>
-    </div>
+    </template>
   </RuiMenu>
 </template>
 
-<style module lang="scss">
+<style lang="scss" module>
 .wrapper {
-  @apply max-w-full;
+  @apply max-w-full w-full;
 
   .activator {
-    @apply relative inline-flex items-center overflow-hidden;
-    @apply outline-none focus:outline-none cursor-pointer h-9 pl-4 py-2 pr-8 rounded;
-    @apply m-0 bg-white hover:bg-gray-50 transition text-caption;
+    @apply relative inline-flex items-center max-w-full;
+    @apply outline-none focus:outline-none cursor-pointer min-h-12 pl-4 py-2 pr-8 rounded;
+    @apply m-0 bg-white hover:bg-gray-50 transition text-body-1;
 
     &.dense {
-      @apply h-7 pl-2 py-1;
+      @apply pl-2 py-1 min-h-8 text-sm;
+
+      ~ .fieldset {
+        @apply px-1;
+      }
     }
 
     &.disabled {
-      @apply bg-black/[.12] text-rui-text-disabled active:text-rui-text-disabled cursor-default;
+      @apply opacity-65 text-rui-text-disabled active:text-rui-text-disabled cursor-default;
     }
 
     &.outlined {
       @apply border border-rui-text-disabled;
 
       &.disabled {
-        @apply border-transparent;
+        @apply border-dotted;
+      }
+
+      &.with-success {
+        @apply border-rui-success #{!important};
+
+        .label {
+          @apply text-rui-success #{!important};
+        }
+
+        ~ .fieldset {
+          @apply border-rui-success #{!important};
+        }
+      }
+
+      &.with-error {
+        @apply border-rui-error #{!important};
+
+        .label {
+          @apply text-rui-error #{!important};
+        }
+
+        ~ .fieldset {
+          @apply border-rui-error #{!important};
+        }
       }
     }
 
-    .label {
-      @apply block truncate;
+    .label,
+    .value {
+      @apply block truncate transition-all duration-75;
+    }
+
+    .clear {
+      @apply ml-auto shrink-0;
     }
 
     .icon {
-      @apply text-rui-text-disabled transition;
+      @apply text-rui-text transition;
 
       &__wrapper {
         @apply flex items-center justify-end;
         @apply absolute right-1 top-px bottom-0;
       }
     }
+
+    &.float {
+      &.outlined {
+        @apply border-t-transparent;
+
+        &.with-success {
+          @apply border-t-transparent #{!important};
+        }
+
+        &.with-error {
+          @apply border-t-transparent #{!important};
+        }
+      }
+
+      .label {
+        @apply -translate-y-2 top-0 text-xs;
+      }
+
+      ~ .fieldset {
+        @apply border border-rui-text;
+
+        legend {
+          &:after {
+            content: v-bind(labelWithQuote);
+          }
+        }
+      }
+    }
+  }
+
+  .fieldset {
+    @apply absolute w-full min-w-0 h-[calc(100%+0.5rem)] top-0 left-0 rounded pointer-events-none px-2 -mt-2;
+
+    legend {
+      @apply opacity-0 text-xs max-w-full truncate;
+
+      &:before {
+        content: ' ';
+      }
+
+      &:after {
+        @apply truncate max-w-full leading-[0];
+        content: '\200B';
+      }
+    }
   }
 }
 
@@ -239,14 +366,20 @@ watch(isOpen, updateOpen);
 :global(.dark) {
   .wrapper {
     .activator {
-      @apply bg-transparent hover:bg-white/10 text-rui-text-disabled;
+      @apply bg-transparent hover:bg-white/10 text-rui-text;
 
-      &.disabled {
-        @apply bg-white/10;
+      &.outlined {
+        @apply border border-rui-text hover:bg-white/[0.02];
       }
 
-      &.outlined {
-        @apply border border-rui-text-disabled;
+      &.float {
+        &.outlined {
+          @apply border-t-transparent;
+        }
+
+        ~ .fieldset {
+          @apply border-white;
+        }
       }
     }
   }
diff --git a/src/components/overlays/Teleport.ts b/src/components/overlays/Teleport.ts
index 48c7309..0d2c5e6 100644
--- a/src/components/overlays/Teleport.ts
+++ b/src/components/overlays/Teleport.ts
@@ -15,7 +15,7 @@ export default defineComponent({
     const getTeleportContainer = () => {
       const proxy = getCurrentInstance()?.proxy;
       assert(proxy);
-      return proxy.$teleport;
+      return proxy?.$teleport;
     };
 
     onUpdated(() => {
diff --git a/src/components/overlays/menu/Menu.vue b/src/components/overlays/menu/Menu.vue
index 9c53db1..5300090 100644
--- a/src/components/overlays/menu/Menu.vue
+++ b/src/components/overlays/menu/Menu.vue
@@ -1,16 +1,24 @@
 <script setup lang="ts">
+import RuiFormTextDetail from '@/components/helpers/FormTextDetail.vue';
 import { type PopperOptions, usePopper } from '@/composables/popper';
 import RuiTeleport from '@/components/overlays/Teleport';
 
 export interface MenuProps {
   value?: boolean;
   openOnHover?: boolean;
+  fullWidth?: boolean;
   disabled?: boolean;
   openDelay?: number;
   closeDelay?: number;
   popper?: PopperOptions;
+  wrapperClass?: string;
   menuClass?: string;
   closeOnContentClick?: boolean;
+  hint?: string;
+  errorMessages?: string | string[];
+  successMessages?: string | string[];
+  showDetails?: boolean;
+  dense?: boolean;
 }
 
 defineOptions({
@@ -21,11 +29,16 @@ const props = withDefaults(defineProps<MenuProps>(), {
   value: false,
   openOnHover: false,
   disabled: false,
+  fullWidth: false,
   openDelay: 0,
   closeDelay: 0,
   popper: () => ({}),
+  wrapperClass: '',
   menuClass: '',
   closeOnContentClick: false,
+  hint: undefined,
+  errorMessages: () => [],
+  successMessages: () => [],
 });
 
 const emit = defineEmits<{
@@ -34,7 +47,7 @@ const emit = defineEmits<{
 
 const css = useCssModule();
 
-const { value, closeDelay, openDelay, popper, disabled, closeOnContentClick, openOnHover } = toRefs(props);
+const { value, closeDelay, openDelay, popper, disabled, closeOnContentClick, openOnHover, errorMessages, successMessages } = toRefs(props);
 
 const {
   reference: activator,
@@ -47,6 +60,8 @@ const {
   updatePopper,
 } = usePopper(popper, disabled, openDelay, closeDelay);
 
+const { width } = useElementSize(activator);
+
 const click: Ref<boolean> = ref(false);
 
 function onLeave() {
@@ -105,20 +120,23 @@ const on = computed(() => {
     click: checkClick,
   };
 });
+
+const { hasError, hasSuccess } = useFormTextDetail(
+  errorMessages,
+  successMessages,
+);
 </script>
 
 <template>
   <div>
     <div
       ref="activator"
-      :class="css.wrapper"
+      :class="[css.wrapper, wrapperClass, { 'w-full': fullWidth }]"
       :data-menu-disabled="disabled"
     >
       <slot
         name="activator"
-        :on="on"
-        :open="open"
-        :disabled="disabled"
+        v-bind="{ on, open, disabled, hasError, hasSuccess }"
       />
     </div>
     <RuiTeleport v-if="!disabled">
@@ -148,11 +166,19 @@ const on = computed(() => {
             :class="css.base"
             role="menu-content"
           >
-            <slot />
+            <slot v-bind="{ width }" />
           </div>
         </Transition>
       </div>
     </RuiTeleport>
+    <RuiFormTextDetail
+      v-if="showDetails"
+      class="pt-1"
+      :class="[dense ? 'px-2' : 'px-4']"
+      :error-messages="errorMessages"
+      :success-messages="successMessages"
+      :hint="hint"
+    />
   </div>
 </template>
 
diff --git a/src/components/tables/TablePagination.vue b/src/components/tables/TablePagination.vue
index 857cfc9..4495775 100644
--- a/src/components/tables/TablePagination.vue
+++ b/src/components/tables/TablePagination.vue
@@ -90,7 +90,7 @@ function goToPage(page: number) {
 
 function pageRangeText(page: number) {
   const { limit, total } = get(value);
-  return `${formatInteger((page - 1) * limit + 1)}-${formatInteger(
+  return `${formatInteger((page - 1) * limit + 1)} - ${formatInteger(
     Math.min(page * limit, total),
   )}`;
 }
@@ -136,10 +136,11 @@ function onLast() {
         v-model="currentLimit"
         :options="limits"
         :disabled="loading || disablePerPage"
-        :dense="dense"
+        label-class="!text-xs"
         name="limit"
         key-attr="limit"
         text-attr="limit"
+        dense
       />
     </div>
     <div :class="css.ranges">
@@ -149,10 +150,11 @@ function onLast() {
         v-model="currentRange"
         :options="ranges"
         :disabled="loading"
-        :dense="dense"
+        label-class="!text-xs"
         name="ranges"
         key-attr="page"
         text-attr="text"
+        dense
       />
       <span :class="css.indicator">
         {{ indicatorText }}
@@ -220,7 +222,7 @@ function onLast() {
   }
 
   .indicator {
-    @apply text-rui-text text-caption;
+    @apply text-rui-text text-caption whitespace-nowrap;
   }
 
   .navigation {
diff --git a/src/components/tabs/tabs/Tabs.vue b/src/components/tabs/tabs/Tabs.vue
index 98ee743..7648eab 100644
--- a/src/components/tabs/tabs/Tabs.vue
+++ b/src/components/tabs/tabs/Tabs.vue
@@ -52,7 +52,7 @@ const children = computed(() => {
   return tabs
     .filter(tab => !!tab.tag)
     .map((tab, index) => {
-      // @ts-expect-error
+      // @ts-expect-error the typings throw a false error
       // The componentOptions.propsData is messed when combined with props from the parent.
       // So use `initialPropsData`, the original `propsData` that haven't touched by the code below.
       const propsData = (tab.componentOptions?.initialPropsData
diff --git a/src/composables/dropdown-menu.ts b/src/composables/dropdown-menu.ts
new file mode 100644
index 0000000..ee90d01
--- /dev/null
+++ b/src/composables/dropdown-menu.ts
@@ -0,0 +1,123 @@
+import type { Ref } from 'vue';
+import type { MaybeElement } from '@vueuse/core';
+
+export interface DropdownOptions<T, K> {
+  options: Ref<T[]>;
+  dense?: Ref<boolean>;
+  value: Ref<T | null | undefined>;
+  keyAttr: K;
+  textAttr: K;
+  appendWidth?: number;
+  prependWidth?: number;
+  itemHeight?: number;
+  overscan?: number;
+}
+
+export function useDropdownMenu<T, K extends keyof T>({
+  appendWidth,
+  dense,
+  itemHeight = 48,
+  keyAttr,
+  options,
+  overscan = 1,
+  prependWidth,
+  textAttr,
+  value,
+}: DropdownOptions<T, K>) {
+  const reference: Ref<MaybeElement | null> = ref(null);
+
+  const { containerProps, list, scrollTo, wrapperProps } = useVirtualList<T>(
+    options,
+    {
+      itemHeight,
+      overscan,
+    },
+  );
+
+  const renderedData: ComputedRef<T[]> = useArrayMap(list, ({ data }) => data);
+
+  const isOpen = ref(false);
+
+  const valueKey = computed(() => {
+    const selected = get(value);
+    return selected ? selected[keyAttr] : undefined;
+  });
+
+  const menuWidth = computed(() => {
+    const widths = { max: 0, min: 0 };
+    const maxWidth = 30;
+    const paddingX = 1.5;
+    const fontMultiplier = get(dense) ? 12 : 13;
+
+    get(options).forEach((option) => {
+      const length = getText(option)?.toString()?.length ?? 0;
+      if (widths.min === 0 && widths.max === 0) {
+        widths.min = length;
+        widths.max = length;
+      }
+      else if (length < widths.min) {
+        widths.min = length;
+      }
+      else if (length > widths.max) {
+        widths.max = length;
+      }
+    });
+
+    const difference = widths.max - widths.min;
+
+    function computeValue(width: number) {
+      const additionalWidths = (prependWidth ? prependWidth + 0.5 : 0) + (appendWidth ? appendWidth + 0.5 : 0);
+      return `${Math.min((width * fontMultiplier) / 16 + paddingX + additionalWidths, maxWidth)}rem`;
+    }
+
+    if (difference <= 5)
+      return computeValue(widths.max);
+
+    return computeValue(widths.min + difference / 2);
+  });
+
+  function toggle(state: boolean = false) {
+    set(isOpen, state);
+  }
+
+  function getText(item: T): T[K] {
+    return item[textAttr];
+  }
+
+  function getIdentifier(item: T): T[K] {
+    return item[keyAttr];
+  }
+
+  function isActiveItem(item: T): boolean {
+    const selected = get(value);
+    if (!selected)
+      return false;
+
+    return item[keyAttr] === selected[keyAttr];
+  }
+
+  function updateOpen(open: boolean) {
+    if (open && get(value)) {
+      nextTick(() => {
+        scrollTo(get(options).findIndex(isActiveItem));
+      });
+    }
+  }
+
+  watch(isOpen, updateOpen);
+
+  return {
+    containerProps,
+    getIdentifier,
+    getText,
+    isActiveItem,
+    isOpen,
+    menuWidth,
+    reference,
+    renderedData,
+    scrollTo,
+    toggle,
+    valueKey,
+    wrapperProps,
+  };
+}
diff --git a/tests/stubs/RouterLinkStub.ts b/tests/stubs/RouterLinkStub.ts
index 1412739..4dde410 100644
--- a/tests/stubs/RouterLinkStub.ts
+++ b/tests/stubs/RouterLinkStub.ts
@@ -18,7 +18,7 @@ const defaultRoute = {
 
 // TODO: Borrow typings from vue-router-next
 export const RouterLinkStub = defineComponent({
-  // @ts-expect-error
+  // @ts-expect-error the typings throw a false error
   name: 'RouterLinkStub',
 
   props: {
@@ -42,7 +42,7 @@ export const RouterLinkStub = defineComponent({
       isExactActive: computed(() => false),
       navigate: async () => {},
     });
-    // @ts-expect-error
+    // @ts-expect-error the typings throw a false error
     return this.custom ? children : h('a', undefined, children);
   },
 });