@weni/unnnic-system 3.14.0 → 3.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "type": "commonjs",
   "files": [
     "dist",

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

@@ -399,6 +399,72 @@ describe('UnnnicSelect.vue', () => {
     });
   });
 
+  describe('infinite scroll functionality', () => {
+    test('infinite scroll is disabled by default', () => {
+      expect(wrapper.vm.infiniteScroll).toBe(false);
+    });
+
+    test('applies infinite scroll props correctly', async () => {
+      await wrapper.setProps({
+        infiniteScroll: true,
+        infiniteScrollDistance: 20,
+        infiniteScrollCanLoadMore: () => false,
+      });
+
+      expect(wrapper.vm.infiniteScroll).toBe(true);
+      expect(wrapper.vm.infiniteScrollDistance).toBe(20);
+      expect(wrapper.vm.infiniteScrollCanLoadMore()).toBe(false);
+    });
+
+    test('does not render loading when infiniteScrollLoading is false', async () => {
+      await wrapper.setProps({ infiniteScroll: true });
+      wrapper.vm.openPopover = true;
+      await wrapper.vm.$nextTick();
+
+      const loading = wrapper.find('.unnnic-select__infinite-loading');
+      expect(loading.exists()).toBe(false);
+    });
+
+    test('sets infiniteScrollLoading to true and verifies state', async () => {
+      await wrapper.setProps({
+        infiniteScroll: true,
+        options: [
+          { label: 'Option 1', value: 'option1' },
+          { label: 'Option 2', value: 'option2' },
+        ],
+      });
+
+      wrapper.vm.openPopover = true;
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.infiniteScrollLoading).toBe(false);
+
+      wrapper.vm.infiniteScrollLoading = true;
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.infiniteScrollLoading).toBe(true);
+      expect(wrapper.vm.infiniteScroll).toBe(true);
+    });
+
+    test('finishInfiniteScroll sets loading to false', async () => {
+      await wrapper.setProps({ infiniteScroll: true });
+      wrapper.vm.infiniteScrollLoading = true;
+      expect(wrapper.vm.infiniteScrollLoading).toBe(true);
+
+      wrapper.vm.finishInfiniteScroll();
+      expect(wrapper.vm.infiniteScrollLoading).toBe(false);
+    });
+
+    test('resetInfiniteScroll sets loading to false', async () => {
+      await wrapper.setProps({ infiniteScroll: true });
+      wrapper.vm.infiniteScrollLoading = true;
+      expect(wrapper.vm.infiniteScrollLoading).toBe(true);
+
+      wrapper.vm.resetInfiniteScroll();
+      expect(wrapper.vm.infiniteScrollLoading).toBe(false);
+    });
+  });
+
   describe('snapshot testing', () => {
     test('matches snapshot with default props', () => {
       expect(wrapper.html()).toMatchSnapshot();
@@ -418,5 +484,13 @@ describe('UnnnicSelect.vue', () => {
       await wrapper.setProps({ disabled: true });
       expect(wrapper.html()).toMatchSnapshot();
     });
+
+    test('matches snapshot with infinite scroll enabled', async () => {
+      await wrapper.setProps({ infiniteScroll: true });
+      wrapper.vm.openPopover = true;
+      wrapper.vm.infiniteScrollLoading = true;
+      await wrapper.vm.$nextTick();
+      expect(wrapper.html()).toMatchSnapshot();
+    });
   });
 });

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

@@ -36,6 +36,24 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with disabled st
 </div>"
 `;
 
+exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with infinite scroll enabled 1`] = `
+"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="true" aria-controls="reka-popover-content-v-1" data-state="open">
+    <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form md unnnic-select__input" data-testid="form-element">
+      <!--v-if-->
+      <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right focus use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_up" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
+        <!--v-if-->
+        <section data-v-a0d36167="" class="icon-right-container">
+          <!--v-if--><span data-v-26446d8e="" data-v-a0d36167="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--fg-base unnnic-icon-size--ant unnnic-icon__size--ant icon-right" data-testid="material-icon" translate="no">keyboard_arrow_up</span>
+        </section>
+      </div>
+      <!--v-if-->
+    </section>
+  </button>
+  <!--teleport start-->
+  <!--teleport end-->
+</div>"
+`;
+
 exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with search enabled 1`] = `
 "<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form md unnnic-select__input" data-testid="form-element">

package/src/components/Select/index.vue

@@ -32,7 +32,10 @@
         :style="popoverContentCustomStyles"
         :width="inputWidthString"
       >
-        <div class="unnnic-select__content">
+        <div
+          ref="contentRef"
+          class="unnnic-select__content"
+        >
           <UnnnicInput
             v-if="props.enableSearch"
             class="unnnic-select__input-search"
@@ -47,20 +50,30 @@
           >
             {{ $t('without_results') }}
           </p>
-          <PopoverOption
-            v-for="(option, index) in filteredOptions"
-            v-else
-            :key="option[props.itemValue]"
-            :data-option-index="index"
-            data-testid="select-option"
-            :label="option[props.itemLabel]"
-            :active="
-              option[props.itemValue] === selectedItem?.[props.itemValue]
-            "
-            :focused="focusedOptionIndex === index"
-            :disabled="option.disabled"
-            @click="handleSelectOption(option)"
-          />
+          <template v-else>
+            <PopoverOption
+              v-for="(option, index) in filteredOptions"
+              :key="option[props.itemValue]"
+              :data-option-index="index"
+              data-testid="select-option"
+              :label="option[props.itemLabel]"
+              :active="
+                option[props.itemValue] === selectedItem?.[props.itemValue]
+              "
+              :focused="focusedOptionIndex === index"
+              :disabled="option.disabled"
+              @click="handleSelectOption(option)"
+            />
+            <div
+              v-if="props.infiniteScroll && infiniteScrollLoading"
+              class="unnnic-select__infinite-loading"
+            >
+              <UnnnicIconLoading
+                scheme="neutral-dark"
+                size="sm"
+              />
+            </div>
+          </template>
         </div>
       </PopoverContent>
     </Popover>
@@ -68,10 +81,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, nextTick } from 'vue';
-import { useElementSize } from '@vueuse/core';
+import { computed, ref, watch, nextTick, onBeforeUnmount } from 'vue';
+import { useElementSize, useInfiniteScroll } from '@vueuse/core';
 
 import UnnnicInput from '../Input/Input.vue';
+import UnnnicIconLoading from '../IconLoading/IconLoading.vue';
 
 import {
   Popover,
@@ -106,6 +120,9 @@ interface SelectProps {
   search?: string;
   locale?: string;
   disabled?: boolean;
+  infiniteScroll?: boolean;
+  infiniteScrollDistance?: number;
+  infiniteScrollCanLoadMore?: () => boolean;
 }
 
 const props = withDefaults(defineProps<SelectProps>(), {
@@ -123,17 +140,24 @@ const props = withDefaults(defineProps<SelectProps>(), {
   errors: '',
   message: '',
   search: '',
+  infiniteScroll: false,
+  infiniteScrollDistance: 10,
+  infiniteScrollCanLoadMore: () => true,
 });
 
 const emit = defineEmits<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   'update:modelValue': [value: any];
   'update:search': [value: string];
+  'scroll-end': [];
 }>();
 
 const openPopover = ref(false);
 const selectInputRef = ref<HTMLInputElement | null>(null);
 const { width: inputWidth } = useElementSize(selectInputRef);
+const contentRef = ref<HTMLDivElement | null>(null);
+const infiniteScrollReset = ref<(() => void) | null>(null);
+const infiniteScrollLoading = ref(false);
 
 const inputWidthString = computed(() => {
   return `${inputWidth.value}px`;
@@ -153,6 +177,12 @@ watch(openPopover, () => {
     );
     scrollToOption(selectedOptionIndex, 'instant', 'center');
   }
+
+  if (openPopover.value && props.infiniteScroll) {
+    nextTick(() => {
+      setupInfiniteScroll();
+    });
+  }
 });
 
 const handleKeyDown = (event) => {
@@ -263,6 +293,79 @@ const filteredOptions = computed(() => {
         .includes(props.search?.toLowerCase()),
   );
 });
+
+const setupInfiniteScroll = () => {
+  if (!props.infiniteScroll) {
+    return;
+  }
+
+  if (infiniteScrollReset.value) {
+    infiniteScrollReset.value();
+    infiniteScrollReset.value = null;
+  }
+
+  nextTick(() => {
+    const scrollElement = contentRef.value;
+
+    if (!scrollElement) {
+      return;
+    }
+
+    const { reset } = useInfiniteScroll(
+      scrollElement,
+      () => {
+        if (!infiniteScrollLoading.value) {
+          infiniteScrollLoading.value = true;
+          emit('scroll-end');
+        }
+      },
+      {
+        distance: props.infiniteScrollDistance,
+        canLoadMore: () => {
+          return (
+            props.infiniteScrollCanLoadMore() && !infiniteScrollLoading.value
+          );
+        },
+      },
+    );
+
+    infiniteScrollReset.value = reset;
+  });
+};
+
+const finishInfiniteScroll = () => {
+  infiniteScrollLoading.value = false;
+
+  if (openPopover.value && props.infiniteScroll) {
+    nextTick(() => {
+      setupInfiniteScroll();
+    });
+  }
+};
+
+const resetInfiniteScroll = () => {
+  infiniteScrollLoading.value = false;
+  if (infiniteScrollReset.value) {
+    infiniteScrollReset.value();
+  }
+
+  if (openPopover.value && props.infiniteScroll) {
+    nextTick(() => {
+      setupInfiniteScroll();
+    });
+  }
+};
+
+onBeforeUnmount(() => {
+  if (infiniteScrollReset.value) {
+    infiniteScrollReset.value();
+  }
+});
+
+defineExpose({
+  finishInfiniteScroll,
+  resetInfiniteScroll,
+});
 </script>
 
 <style lang="scss" scoped>
@@ -270,16 +373,14 @@ const filteredOptions = computed(() => {
 
 :deep(.unnnic-select__input) {
   cursor: pointer;
-}
 
-:deep(.unnnic-select__input-search) {
-  > .icon-left {
+  > .icon-right {
     color: $unnnic-color-fg-base;
   }
 }
 
-:deep(.unnnic-select__input) {
-  > .icon-right {
+:deep(.unnnic-select__input-search) {
+  > .icon-left {
     color: $unnnic-color-fg-base;
   }
 }
@@ -304,5 +405,13 @@ const filteredOptions = computed(() => {
       color: $unnnic-color-fg-muted;
     }
   }
+
+  &__infinite-loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: $unnnic-space-2 0;
+    min-height: 40px;
+  }
 }
 </style>

package/src/stories/Select.stories.js

@@ -82,6 +82,18 @@ export default {
     disabled: {
       description: 'Disable the select.',
     },
+    infiniteScroll: {
+      description:
+        'Enable infinite scroll functionality. When enabled, the component will emit a `scroll-end` event when the user scrolls near the bottom of the options list.',
+    },
+    infiniteScrollDistance: {
+      description:
+        'Distance in pixels from the bottom of the scroll area to trigger the `scroll-end` event. Default is 10.',
+    },
+    infiniteScrollCanLoadMore: {
+      description:
+        'Function that returns a boolean indicating whether more items can be loaded. Used to prevent unnecessary scroll-end events.',
+    },
   },
   render: (args) => ({
     components: { UnnnicSelect },
@@ -159,3 +171,77 @@ export const WithSearch = {
     search: '',
   },
 };
+
+export const WithInfiniteScroll = {
+  render: () => ({
+    components: { UnnnicSelect },
+    data() {
+      return {
+        selectedValue: null,
+        loadedOptions: [],
+        currentPage: 1,
+        totalPages: 10,
+        isLoading: false,
+      };
+    },
+    mounted() {
+      this.loadInitialOptions();
+    },
+    methods: {
+      loadInitialOptions() {
+        this.loadedOptions = this.generateOptions(1);
+      },
+      generateOptions(page) {
+        const startIndex = (page - 1) * 10 + 1;
+        return Array.from({ length: 10 }, (_, i) => ({
+          label: `Option ${startIndex + i}`,
+          value: `option${startIndex + i}`,
+        }));
+      },
+      async handleScrollEnd() {
+        if (this.currentPage >= this.totalPages || this.isLoading) {
+          return;
+        }
+
+        this.isLoading = true;
+
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+
+        this.currentPage++;
+        const newOptions = this.generateOptions(this.currentPage);
+        this.loadedOptions = [...this.loadedOptions, ...newOptions];
+
+        this.isLoading = false;
+
+        this.$refs.selectRef.finishInfiniteScroll();
+      },
+      canLoadMore() {
+        return this.currentPage < this.totalPages && !this.isLoading;
+      },
+    },
+    template: `
+      <div style="width: 300px;">
+        <h3>Infinite Scroll Example</h3>
+        <p style="color: #666; font-size: 14px;">
+          Scroll down in the options list to load more items.
+          <br />
+          Page: {{ currentPage }} / {{ totalPages }}
+          <br />
+          Total options: {{ loadedOptions.length }}
+        </p>
+        <p>Selected: {{ selectedValue }}</p>
+        <unnnic-select
+          ref="selectRef"
+          v-model="selectedValue"
+          :options="loadedOptions"
+          placeholder="Select an option"
+          label="Infinite Scroll Select"
+          :infinite-scroll="true"
+          :infinite-scroll-distance="10"
+          :infinite-scroll-can-load-more="canLoadMore"
+          @scroll-end="handleScrollEnd"
+        />
+      </div>
+    `,
+  }),
+};