@weni/unnnic-system 3.2.9-alpha.6 → 3.2.9-alpha.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.2.9-alpha.6",
+  "version": "3.2.9-alpha.7",
   "type": "module",
   "files": [
     "dist",

package/src/components/Select/SelectOption.vue

@@ -5,6 +5,7 @@
       {
         'unnnic-select-option--disabled': props.disabled,
         'unnnic-select-option--active': props.active,
+        'unnnic-select-option--focused': props.focused,
       },
     ]"
   >
@@ -21,11 +22,13 @@ interface SelectOptionProps {
   label: string;
   disabled?: boolean;
   active?: boolean;
+  focused?: boolean;
 }
 
 const props = withDefaults(defineProps<SelectOptionProps>(), {
   disabled: false,
   active: false,
+  focused: false,
 });
 </script>
 
@@ -43,6 +46,11 @@ const props = withDefaults(defineProps<SelectOptionProps>(), {
   padding: $unnnic-space-2 $unnnic-space-4;
   font: $unnnic-font-emphasis;
 
+  &:hover:not(&--active):not(&--disabled),
+  &--focused {
+    background-color: $unnnic-color-bg-soft;
+  }
+
   &--active {
     background-color: $unnnic-color-bg-active;
     color: $unnnic-color-fg-inverted;

package/src/components/Select/__tests__/Select.spec.js

@@ -237,13 +237,13 @@ describe('UnnnicSelect.vue', () => {
   describe('computed properties', () => {
     test('calculatedMaxHeight returns correct value', () => {
       const maxHeight = wrapper.vm.calculatedMaxHeight;
-      expect(maxHeight).toBe('225px'); // (37 * 5) + 40 = 225
+      expect(maxHeight).toBe('235px');
     });
 
     test('calculatedMaxHeight includes search height when enabled', async () => {
       await wrapper.setProps({ enableSearch: true });
       const maxHeight = wrapper.vm.calculatedMaxHeight;
-      expect(maxHeight).toBe('275px'); // (37 * 5) + 40 + 50 = 275
+      expect(maxHeight).toBe('289px');
     });
 
     test('calculatedMaxHeight returns unset when no options', async () => {

package/src/components/Select/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="unnnic-select">
+  <div
+    class="unnnic-select"
+    @keydown="handleKeyDown"
+  >
     <UnnnicPopover
       v-model="openPopover"
       :popoverBalloonProps="{ maxHeight: calculatedMaxHeight }"
@@ -30,12 +33,14 @@
             @update:modelValue="handleSearch"
           />
           <UnnnicSelectOption
-            v-for="option in filteredOptions"
+            v-for="(option, index) in filteredOptions"
             :key="option[props.itemValue]"
+            :data-option-index="index"
             :label="option[props.itemLabel]"
             :active="
               option[props.itemValue] === selectedItem?.[props.itemValue]
             "
+            :focused="focusedOptionIndex === index"
             :disabled="option.disabled"
             @click="handleSelectOption(option)"
           />
@@ -46,7 +51,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import { computed, ref, watch, nextTick } from 'vue';
 import UnnnicInput from '../Input/Input.vue';
 import UnnnicPopover from '../Popover/index.vue';
 import UnnnicSelectOption from './SelectOption.vue';
@@ -102,13 +107,64 @@ const openPopover = ref(false);
 watch(openPopover, () => {
   if (!openPopover.value) {
     handleSearch('');
+  } else {
+    focusedOptionIndex.value = -1;
+  }
+
+  if (openPopover.value && props.modelValue) {
+    const selectedOptionIndex = props.options.findIndex(
+      (option) =>
+        option[props.itemValue] === selectedItem.value[props.itemValue],
+    );
+    scrollToOption(selectedOptionIndex, 'instant', 'center');
   }
 });
 
+const handleKeyDown = (event) => {
+  const { key } = event;
+  const validKeys = ['ArrowUp', 'ArrowDown', 'Enter'];
+  if (validKeys.includes(key)) {
+    event.preventDefault();
+    if (key === 'ArrowUp') {
+      if (focusedOptionIndex.value === 0) return;
+      focusedOptionIndex.value--;
+      scrollToOption(focusedOptionIndex.value);
+    }
+    if (key === 'ArrowDown') {
+      if (focusedOptionIndex.value === filteredOptions.value.length - 1) return;
+      focusedOptionIndex.value++;
+      scrollToOption(focusedOptionIndex.value);
+    }
+    if (key === 'Enter') {
+      handleSelectOption(filteredOptions.value[focusedOptionIndex.value]);
+    }
+  }
+};
+
+const focusedOptionIndex = ref<number>(-1);
+
+const scrollToOption = (
+  index: number,
+  behavior: 'smooth' | 'instant' = 'smooth',
+  block: 'center' | 'start' | 'end' | 'nearest' = 'center',
+) => {
+  nextTick(() => {
+    const option = document.querySelector(`[data-option-index="${index}"]`);
+    if (option) {
+      option.scrollIntoView({ behavior, block });
+    }
+  });
+};
+
 const calculatedMaxHeight = computed(() => {
   if (!props.options || props.options.length === 0) return 'unset';
-  const fieldsHeight = 37 * props.optionsLines + 40;
-  return `${props.enableSearch ? fieldsHeight + 50 : fieldsHeight}px`;
+  const popoverPadding = 32;
+  const popoverGap = 4;
+  // 37 = 21px (height) + 16px (padding)
+  const fieldsHeight = 37 * props.optionsLines;
+  const size =
+    fieldsHeight + popoverPadding + (popoverGap * props.optionsLines - 2);
+  return `${props.enableSearch ? size + 54 : size}px`;
 });
 
 const selectedItem = computed(() => {