From cbe522e006e2c30509406451765e3963858e6561 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Mon, 29 Jul 2024 12:57:08 +0200
Subject: [PATCH 01/11] refactor(staggered-fade-and-slide): use Vue native
 staggered transition

---
 .../src/components/animations/index.ts        |   1 +
 .../test-staggered-fade-and-slide.vue         |  68 +++
 packages/_vue3-migration-test/src/router.ts   |   8 +-
 .../staggering-transition-group.spec.ts       | 204 --------
 .../src/components/animations/index.ts        |   1 -
 .../animations/staggered-fade-and-slide.vue   |  95 +++-
 .../staggering-transition-group.vue           | 472 ------------------
 .../x-components/src/components/base-grid.vue |  74 ++-
 packages/x-components/src/views/home/Home.vue |   7 +-
 9 files changed, 194 insertions(+), 736 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
 delete mode 100644 packages/x-components/src/components/animations/__tests__/staggering-transition-group.spec.ts
 delete mode 100644 packages/x-components/src/components/animations/staggering-transition-group.vue

diff --git a/packages/_vue3-migration-test/src/components/animations/index.ts b/packages/_vue3-migration-test/src/components/animations/index.ts
index b951da74a4..ca0d8338a1 100644
--- a/packages/_vue3-migration-test/src/components/animations/index.ts
+++ b/packages/_vue3-migration-test/src/components/animations/index.ts
@@ -5,3 +5,4 @@ export { default as TestCrossFade } from './test-cross-fade.vue';
 export { default as TestFade } from './test-fade.vue';
 export { default as TestFadeAndSlide } from './test-fade-and-slide.vue';
 export { default as TestAnimationFactory } from './test-animation-factory.vue';
+export { default as TestStaggeredFadeAndSlide } from './test-staggered-fade-and-slide.vue';
diff --git a/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
new file mode 100644
index 0000000000..dadcd355f5
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
@@ -0,0 +1,68 @@
+<template>
+  <h1>Dinamic content:</h1>
+  <button @click="insert">Insert at random index</button>
+  <button @click="reset">Reset</button>
+
+  <StaggeredFadeAndSlide :stagger="500">
+    <li v-for="item in items" :key="item.id">
+      {{ item.id }} - {{ item.name }}
+      <button @click="remove(item)">x</button>
+    </li>
+  </StaggeredFadeAndSlide>
+
+  <br />
+  <h1>Animation as prop</h1>
+  <BaseSuggestions :suggestions="suggestions" :animation="StaggeredFadeAndSlide" :stagger="50">
+    <template #default="{ suggestion }">
+      <span>{{ suggestion.query }}</span>
+    </template>
+  </BaseSuggestions>
+
+  <br />
+  <h1>Static content:</h1>
+  <StaggeredFadeAndSlide :stagger="50">
+    <li key="1">Element to animate</li>
+    <li key="2">Element to animate</li>
+    <li key="3">Element to animate</li>
+  </StaggeredFadeAndSlide>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import StaggeredFadeAndSlide from '../../../../x-components/src/components/animations/staggered-fade-and-slide.vue';
+  import BaseSuggestions from '../../../../x-components/src/components/suggestions/base-suggestions.vue';
+  import {
+    getQuerySuggestionsStub,
+    createResultStub,
+    getResultsStub
+  } from '../../../../x-components/src/__stubs__';
+  const suggestions = getQuerySuggestionsStub('chip', 5);
+  const getInitialItems = () => getResultsStub(5);
+  const items = ref(getInitialItems());
+  let id = items.value.length + 1;
+  /**
+   * Insert a new item at a random index.
+   */
+  function insert() {
+    const i = Math.round(Math.random() * items.value.length);
+    items.value.splice(i, 0, createResultStub(`Product ${id++}`));
+  }
+  /**
+   * Reset the list of items.
+   */
+  function reset() {
+    items.value = getInitialItems();
+    id = items.value.length + 1;
+  }
+  /**
+   * Remove an item from the list.
+   *
+   * @param item - The item to remove.
+   */
+  function remove(item: any) {
+    const i = items.value.indexOf(item);
+    if (i > -1) {
+      items.value.splice(i, 1);
+    }
+  }
+</script>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index d08a611bd9..9dd876ef80 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -50,7 +50,8 @@ import {
   TestAnimationFactory,
   TestIcons,
   TestDisplayEmitter,
-  TestBaseSwitch
+  TestBaseSwitch,
+  TestStaggeredFadeAndSlide
 } from './';
 
 const routes = [
@@ -308,6 +309,11 @@ const routes = [
     path: '/base-switch',
     name: 'BaseSwitch',
     component: TestBaseSwitch
+  },
+  {
+    path: '/staggered-fade-and-slide',
+    name: 'StaggeredFadeAndSlide',
+    component: TestStaggeredFadeAndSlide
   }
 ];
 
diff --git a/packages/x-components/src/components/animations/__tests__/staggering-transition-group.spec.ts b/packages/x-components/src/components/animations/__tests__/staggering-transition-group.spec.ts
deleted file mode 100644
index 28b8ff9ed9..0000000000
--- a/packages/x-components/src/components/animations/__tests__/staggering-transition-group.spec.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-import { mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue, { ComponentOptions } from 'vue';
-import { getDataTestSelector } from '../../../__tests__/utils';
-import StaggeringTransitionGroup from '../staggering-transition-group.vue';
-
-describe('testing Staggering Transition Group component', () => {
-  const wrapper: ComponentOptions<Vue> = {
-    components: {
-      StaggeringTransitionGroup
-    },
-    template: `
-       <StaggeringTransitionGroup name="staggering-test" :appear="appear" :staggering="staggering">
-          <div v-for="index in children"
-               :key="index"
-               data-test="children">
-            Child {{ index }}
-          </div>
-       </StaggeringTransitionGroup>`,
-    props: {
-      children: Array,
-      appear: Boolean,
-      staggering: Number
-    }
-  };
-
-  function renderStaggeringTransitionGroup(
-    propsData: StaggeringTransitionGroupWrapper
-  ): StaggeringTransitionGroupAPI {
-    const component = mount(wrapper, {
-      propsData
-    });
-
-    return {
-      component,
-      getChildren() {
-        return component.findAll(getDataTestSelector('children'));
-      },
-      setChildren(children) {
-        component.setProps({ children });
-      }
-    };
-  }
-
-  it('applies enter classes when appear is set to true', () => {
-    const staggering = 100;
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const { getChildren } = renderStaggeringTransitionGroup({
-      appear: true,
-      children: [1, 2, 3],
-      staggering
-    });
-    const childrenWrapper = getChildren();
-    expect(childrenWrapper).toHaveLength(3);
-    childrenWrapper.wrappers.forEach((child, index) => {
-      expect(child.classes()).toContain('staggering-test-enter-active');
-      expect(child.element.style.transitionDelay).toEqual(`${staggering * index}ms`);
-    });
-  });
-
-  it('applies enter classes when a new element enters.', async () => {
-    const staggering = 100;
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const { getChildren, setChildren } = renderStaggeringTransitionGroup({
-      appear: false,
-      children: [],
-      staggering
-    });
-    setChildren([1, 2, 3]);
-    await Vue.nextTick();
-    const childrenWrapper = getChildren();
-    expect(childrenWrapper).toHaveLength(3);
-    childrenWrapper.wrappers.forEach((child, index) => {
-      expect(child.classes()).toContain('staggering-test-enter-active');
-      expect(child.element.style.transitionDelay).toEqual(`${staggering * index}ms`);
-    });
-  });
-
-  it('applies move classes if child nodes change position', async () => {
-    const staggering = 100;
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const { getChildren, setChildren } = renderStaggeringTransitionGroup({
-      appear: false,
-      children: [3],
-      staggering
-    });
-    const childrenToMove = getChildren().at(0);
-    fakeIncrementalMovement(childrenToMove.element);
-    setChildren([1, 2, 3]);
-    await Vue.nextTick();
-    const childrenWrapper = getChildren();
-    expect(childrenWrapper).toHaveLength(3);
-
-    childrenWrapper.wrappers.forEach((child, index) => {
-      if (index < 2) {
-        expect(child.classes()).toContain('staggering-test-enter-active');
-        expect(child.element.style.transitionDelay).toEqual(`${staggering * (index + 1)}ms`);
-      }
-    });
-    expect(childrenWrapper.at(2).classes()).toContain('staggering-test-move');
-  });
-
-  it('applies leave classes when a node leaves.', async () => {
-    const staggering = 100;
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const { getChildren, setChildren } = renderStaggeringTransitionGroup({
-      appear: false,
-      children: [1, 2, 3],
-      staggering
-    });
-    setChildren([]);
-    await Vue.nextTick();
-    const childrenWrapper = getChildren();
-    expect(childrenWrapper).toHaveLength(3);
-    childrenWrapper.wrappers.forEach((child, index) => {
-      expect(child.classes()).toContain('staggering-test-leave-active');
-      expect(child.element.style.transitionDelay).toEqual(`${staggering * index}ms`);
-    });
-  });
-
-  it('disables pointer-events when a node leaves.', async () => {
-    const staggering = 100;
-    // eslint-disable-next-line @typescript-eslint/unbound-method
-    const { getChildren, setChildren } = renderStaggeringTransitionGroup({
-      appear: false,
-      children: [1, 2, 3],
-      staggering
-    });
-    setChildren([]);
-    await Vue.nextTick();
-    const childrenWrapper = getChildren();
-    expect(childrenWrapper).toHaveLength(3);
-    childrenWrapper.wrappers.forEach(child => {
-      expect(child.element.style.pointerEvents).toEqual('none');
-    });
-  });
-
-  it(
-    'applies enter classes when a new element enters and one element stay in ' +
-      'same position after doing a search',
-    async () => {
-      const staggering = 100;
-      // eslint-disable-next-line @typescript-eslint/unbound-method
-      const { getChildren, setChildren } = renderStaggeringTransitionGroup({
-        appear: true,
-        children: ['stay', 'move', 'leave0', 'leave1'],
-        staggering
-      });
-
-      // eslint-disable-next-line max-len
-      // Wait to `after` hooks to be executed. As there are 4 nodes, then after 4 times the staggering
-      // time they should have finished executing.
-      await waitFor(4 * staggering);
-
-      const childrenToMove = getChildren().at(1);
-      fakeIncrementalMovement(childrenToMove.element);
-      setChildren(['stay', 'enter0', 'move', 'enter1', 'enter2']);
-
-      await Vue.nextTick();
-      const childrenWrapper = getChildren();
-      expect(childrenWrapper).toHaveLength(5);
-      const [stay, enter0, move, enter1, enter2] = childrenWrapper.wrappers;
-      // Note that leave nodes can't be retrieved. That's why the transitionDelay starts at 200ms
-      // instead of 0ms.
-      expect(stay.element.style.transitionDelay).toEqual('');
-      expect(enter0.element.style.transitionDelay).toEqual(`${staggering * 3}ms`);
-      expect(move.element.style.transitionDelay).toEqual(`${staggering * 2}ms`);
-      expect(enter1.element.style.transitionDelay).toEqual(`${staggering * 4}ms`);
-      expect(enter2.element.style.transitionDelay).toEqual(`${staggering * 5}ms`);
-
-      expect(stay.classes()).toHaveLength(0);
-      expect(enter0.classes()).toContain('staggering-test-enter-active');
-      expect(move.classes()).toContain('staggering-test-move');
-      expect(enter1.classes()).toContain('staggering-test-enter-active');
-      expect(enter2.classes()).toContain('staggering-test-enter-active');
-    }
-  );
-});
-
-// For fake move position and enter in applyTranslation and get new position
-function fakeIncrementalMovement(element: HTMLElement): void {
-  let position = 0;
-  element.getBoundingClientRect = () =>
-    ({
-      left: position++,
-      top: position++
-    } as DOMRect);
-}
-
-// Method for enter in hooks of component afterEnter
-function waitFor(ms: number): Promise<void> {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-interface StaggeringTransitionGroupWrapper {
-  appear: boolean;
-  children: (string | number)[];
-  staggering: number;
-}
-
-interface StaggeringTransitionGroupAPI {
-  component: Wrapper<Vue>;
-  getChildren(): WrapperArray<Vue>;
-  setChildren(children: (string | number)[]): void;
-}
diff --git a/packages/x-components/src/components/animations/index.ts b/packages/x-components/src/components/animations/index.ts
index 2c4fb0a84c..b095f0e128 100644
--- a/packages/x-components/src/components/animations/index.ts
+++ b/packages/x-components/src/components/animations/index.ts
@@ -6,7 +6,6 @@ export { default as Fade } from './fade.vue';
 export { default as FadeAndSlide } from './fade-and-slide.vue';
 export { default as NoAnimation } from './no-animation.vue';
 export { default as StaggeredFadeAndSlide } from './staggered-fade-and-slide.vue';
-export { default as StaggeringTransitionGroup } from './staggering-transition-group.vue';
 export { createDirectionalAnimationFactory } from './create-directional-animation-factory';
 export { animateClipPath } from './animate-clip-path/animate-clip-path.factory';
 export { animateScale } from './animate-scale/animate-scale.factory';
diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index ab61530a8f..42b7c25364 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -1,15 +1,19 @@
 <template>
-  <StaggeringTransitionGroup class="x-staggered-fade-and-slide" :name="name" :appear="appear">
-    <!-- @slot (Required) Transition-group content -->
+  <TransitionGroup
+    @enter="enter"
+    @after-enter="afterEnter"
+    v-bind="$attrs"
+    :appear="appear"
+    :name="name"
+    :tag="tag"
+  >
     <slot />
-  </StaggeringTransitionGroup>
+  </TransitionGroup>
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import StaggeringTransitionGroup from './staggering-transition-group.vue';
+  import { defineComponent, ref } from 'vue';
   import { useDisableAnimation } from './use-disable-animation';
-
   /**
    * Renders a transition group wrapping the elements passed in the default slot and animating
    * them with a staggered fade and slide animation.
@@ -18,7 +22,7 @@
    */
   export default defineComponent({
     name: 'StaggeredFadeAndSlide',
-    components: { StaggeringTransitionGroup },
+    inheritAttrs: false,
     props: {
       /**
        * Indicates if the transition must be applied on the initial render of the node.
@@ -26,17 +30,82 @@
       appear: {
         type: Boolean,
         default: true
+      },
+      /**
+       * The tag of the node to render to the DOM.
+       */
+      tag: {
+        type: String,
+        default: 'div'
+      },
+      /**
+       * The time in ms to stagger each item.
+       */
+      stagger: {
+        type: Number,
+        default: 25
       }
     },
-    setup: function () {
+    setup(props) {
+      /**
+       * The duration of the transition in ms.
+       */
+      const transitionDuration = 250;
+      /**
+       * The counter to keep track of the staggered delay.
+       */
+      const staggerCounter = ref(0);
+      /**
+       * The counter to keep track of the animations.
+       */
+      const animationList = ref<HTMLElement[]>([]);
       /**
        * The name of the animation.
        */
-      const animationName = 'x-staggered-fade-and-slide-';
-
-      const { name } = useDisableAnimation(animationName);
-
-      return { name };
+      const animationName = ref('x-staggered-fade-and-slide');
+      /**
+       * The name of the animation.
+       */
+      const { name } = useDisableAnimation(animationName.value);
+      /**
+       * Calculate the delay for the next element.
+       *
+       * @returns The delay in ms.
+       */
+      function getNextTransitionDelay(): number {
+        return staggerCounter.value++ * props.stagger;
+      }
+      /**
+       * The enter transition.
+       *
+       * @param el
+       * @param done
+       */
+      function enter(el: HTMLElement, done: () => void) {
+        animationList.value.push(el);
+        const delay = getNextTransitionDelay();
+        el.style.transitionDelay = `${delay}ms`;
+        setTimeout(() => {
+          el.style.transitionDelay = '0ms';
+          done();
+        }, transitionDuration + delay);
+      }
+      /**
+       * The after enter transition.
+       *
+       * @param el
+       */
+      function afterEnter(el: HTMLElement) {
+        animationList.value = animationList.value.filter(item => item !== el);
+        if (animationList.value.length === 0) {
+          staggerCounter.value = 0;
+        }
+      }
+      return {
+        name,
+        enter,
+        afterEnter
+      };
     }
   });
 </script>
diff --git a/packages/x-components/src/components/animations/staggering-transition-group.vue b/packages/x-components/src/components/animations/staggering-transition-group.vue
deleted file mode 100644
index 5e84c1b6bd..0000000000
--- a/packages/x-components/src/components/animations/staggering-transition-group.vue
+++ /dev/null
@@ -1,472 +0,0 @@
-<script lang="ts">
-  import {
-    computed,
-    defineComponent,
-    h,
-    onBeforeUpdate,
-    onMounted,
-    onUpdated,
-    ref,
-    VNode
-  } from 'vue';
-  import { noOp } from '../../utils/function';
-
-  /* eslint-disable @typescript-eslint/unbound-method */
-  /**
-   * A replacement component for Vue's transition-group, that also adds the option to stagger
-   * the animations.
-   *
-   * @public
-   */
-  export default defineComponent({
-    name: 'StaggeringTransitionGroup',
-    props: {
-      /**
-       * The name of the transition. Used to generate the CSS classes.
-       */
-      name: {
-        type: String,
-        default: 'v'
-      },
-      /**
-       * The CSS move class name.
-       */
-      moveClass: String,
-      /**
-       * The tag of the node to render to the DOM.
-       */
-      tag: {
-        type: String,
-        default: 'div'
-      },
-      /**
-       * The time in ms to stagger each item.
-       */
-      staggering: {
-        type: Number,
-        default: 25
-      }
-    },
-    setup(props, { attrs, listeners, slots }) {
-      /**
-       * The reference to the element rendered by the component.
-       * Passed to the 'h' render function which will set the ref when the element is created.
-       */
-      const el = ref<HTMLElement>();
-
-      /**
-       * The CSS class for the moving transitions.
-       *
-       * @returns The move transition name.
-       */
-      const moveClassName = computed<string>(() => {
-        return props.moveClass ?? `${props.name}-move`;
-      });
-
-      /**
-       * The transition data contains the needed events and props to perform a transition using Vue
-       * virtual node's API.
-       *
-       * The `beforeLeave` hook is extended to also restore the previous position of the element using
-       * the position absolute.
-       * The `afterEnter` and `afterLeave` hooks are extended to also clean the transition delay
-       * applied by the stagger.
-       *
-       * @returns The transition data for Vue virtual nodes.
-       */
-      const transitionData = computed<TransitionData>(() => {
-        const transitionData: TransitionData = { ...props, ...attrs, ...listeners };
-
-        transitionData.beforeLeave = addRestorePositionHook(transitionData.beforeLeave);
-        transitionData.afterEnter = addClearStaggeringCall(transitionData.afterEnter);
-        transitionData.afterLeave = addClearStaggeringCall(transitionData.afterLeave);
-
-        return transitionData;
-      });
-
-      // Initialize properties here to avoid making them reactive, which would cause infinite loops.
-      /**
-       * The list of old virtual nodes, generated by the previous called render method.
-       */
-      let oldChildren: TransitionVNode[] = [];
-      /**
-       * The list of new virtual nodes, generated by the last called render method.
-       */
-      let newChildren: TransitionVNode[] = [];
-      /**
-       * A map containing the previous positions relative to the container, for each item
-       * rendered inside the slot of this component.
-       * This is used together with the `newPositions` to calculate the move transition.
-       */
-      const oldPositions: WeakMap<Element, Bounds> = new WeakMap();
-      /**
-       * A map containing the new positions relative to the container, for each item
-       * rendered inside the slot of this component.
-       * This is used together with the `newPositions` to calculate the move transition.
-       */
-      const newPositions: WeakMap<Element, Bounds> = new WeakMap();
-      /**
-       * A map containing the move cleanup functions pending to have been called. When invoked
-       * this functions remove all the styles and classes associated to the move transition.
-       */
-      const pendingCleanupMoveCallbacks: WeakMap<Element, () => void> = new WeakMap<
-        Element,
-        () => void
-      >();
-      /**
-       * The counter for the stagger, used to calculate the delay for the transition of each child
-       * element. It is reset every time the render method is triggered.
-       */
-      let staggerCounter = 0;
-      /**
-       * The bounds of the container rendered using the `tag` prop. This is used to calculate the
-       * relative positions of each leaving child, which are then applied with the position absolute.
-       */
-      let wrapperBounds: DOMRect;
-
-      onMounted(() => {
-        newChildren.forEach(applyStagger);
-      });
-
-      onBeforeUpdate(() => {
-        wrapperBounds = el.value!.getBoundingClientRect();
-      });
-
-      onUpdated(() => {
-        wrapperBounds = el.value!.getBoundingClientRect();
-        newChildren.forEach(recordNewPosition);
-        const { leavingNodes, stayingNodes, enteringNodes } = getNodesByTransitionType();
-
-        leavingNodes.forEach(vNode => {
-          applyStagger(vNode);
-          disableClickingEvents(vNode);
-        });
-        const movedChildren = stayingNodes.filter(applyTranslation);
-        const movedStagger = movedChildren.map(getNextTransitionDelay);
-        enteringNodes.forEach(applyStagger);
-
-        // force reflow to put everything in position
-        document.body.getBoundingClientRect();
-
-        movedChildren.forEach(startMoveAnimation(movedStagger));
-      });
-
-      /**
-       * Extends the provided leave transition hook restoring the position of the element with an
-       * absolute position.
-       * Additionally, it removes the element position from the maps of positions.
-       *
-       * @param transitionHook - The leave transition hook to extend.
-       * @returns The new leave transition hook extended.
-       */
-      function addRestorePositionHook(transitionHook: TransitionHook = noOp): TransitionHook {
-        return element => {
-          const { top, left, width, height } = oldPositions.get(element)!;
-          const { marginTop, marginLeft } = window.getComputedStyle(element);
-          const style = element.style;
-          style.position = 'absolute';
-          style.top = `${top - parseFloat(marginTop)}px`;
-          style.left = `${left - parseFloat(marginLeft)}px`;
-          style.width = `${width}px`;
-          style.height = `${height}px`;
-          newPositions.delete(element);
-          oldPositions.delete(element);
-          const pendingCallback = pendingCleanupMoveCallbacks.get(element);
-          pendingCallback?.();
-          transitionHook(element);
-        };
-      }
-
-      /**
-       * Extends the provided transition hook clearing the transition delay.
-       *
-       * @param transitionHook - The transition hook to extend.
-       * @returns The new transition hook, that also clears the transitionDelay from the element.
-       */
-      function addClearStaggeringCall(transitionHook: TransitionHook = noOp): TransitionHook {
-        return element => {
-          element.style.transitionDelay = '';
-          transitionHook(element);
-        };
-      }
-
-      /**
-       * Returns if the vNode contains a non empty key, and a non empty tag.
-       *
-       * @param vNode - The VNode to check if it is a valid transition node, containing a `tag` and a
-       * `key` property.
-       * @returns True when the vNode contains a non empty key and a non empty tag. False otherwise.
-       */
-      function isTransitionValidVNode(vNode: VNode): vNode is TransitionVNode {
-        // TODO Add warning with logger: <staggering-transition-group> children must be keyed.
-        return !!vNode.key && !!vNode.tag;
-      }
-
-      /**
-       * Adds the generated transition data to the vNode, creating the `data` property if necessary.
-       *
-       * @param vNode - The VNode to add the transition data to.
-       */
-      function addTransitionData(vNode: TransitionVNode): void {
-        if (!vNode.data) {
-          vNode.data = {};
-        }
-        vNode.data.transition = transitionData.value;
-      }
-
-      /**
-       * Re-applies the transition data to an old node, just in case it changed from the previous
-       * render call. It also records the position of the node, to then calculate the move
-       * transitions.
-       *
-       * @param vNode - The vNode to add the transition data to, and record his current position as
-       * old.
-       */
-      function syncOldNodes(vNode: TransitionVNode): void {
-        // Synchronize transition data, in case it changed in the last frame.
-        // We can trust data to be defined because each new node has the transition applied
-        vNode.data!.transition = transitionData.value;
-        recordOldPosition(vNode);
-      }
-
-      /**
-       * Saves the position of the vNode in the map of old positions.
-       *
-       * @param vNode - The node to store its position.
-       */
-      function recordOldPosition(vNode: TransitionVNode): void {
-        oldPositions.set(vNode.elm, createRelativeBounds(vNode));
-      }
-
-      /**
-       * Saves the position of the vNode in the map of new positions.
-       *
-       * @param vNode - The node to store its position.
-       */
-      function recordNewPosition(vNode: TransitionVNode): void {
-        newPositions.set(vNode.elm, createRelativeBounds(vNode));
-      }
-
-      /**
-       * Creates an object containing the position of the vNode relative to its container.
-       *
-       * @param vNode - The virtual node to store its relative position.
-       * @returns The relative bounds of the provided virtual node.
-       */
-      function createRelativeBounds(vNode: TransitionVNode): Bounds {
-        const { left, top, width, height } = vNode.elm.getBoundingClientRect();
-        const { left: wrapperLeft, top: wrapperTop } = wrapperBounds;
-        return {
-          left: left - wrapperLeft,
-          top: top - wrapperTop,
-          width,
-          height
-        };
-      }
-
-      /**
-       * Splits the children of the component into three groups:
-       * - Nodes that are leaving.
-       * - Nodes that are entering.
-       * - Nodes that stay.
-       *
-       * This is then used to apply the stagger in the correct order: leave -\> move -\> enter.
-       *
-       * @returns The children nodes, divided in different groups depending on if they are leaving,
-       * staying or entering.
-       */
-      function getNodesByTransitionType(): TransitionTypeNodes {
-        const leave = oldChildren.filter(child => !newPositions.has(child.elm));
-        const enter = newChildren.filter(child => !oldPositions.has(child.elm));
-        const stay = oldChildren.filter(child => newPositions.has(child.elm));
-        return {
-          leavingNodes: leave,
-          enteringNodes: enter,
-          stayingNodes: stay
-        };
-      }
-
-      /**
-       * Applies an incremental delay to the virtual node element.
-       *
-       * @param vNode - The virtual node to apply the stagger to.
-       */
-      function applyStagger(vNode: TransitionVNode): void {
-        vNode.elm.style.transitionDelay = getNextTransitionDelay();
-      }
-
-      /**
-       * Disables listening to click events in a virtual node element.
-       *
-       * @remarks This is done to avoid letting the user click elements that are performing the moving
-       * animation to leave the DOM but are still rendered.
-       *
-       * @param vNode - The virtual node to disable listening to click events.
-       */
-      function disableClickingEvents(vNode: TransitionVNode): void {
-        vNode.elm.style.pointerEvents = 'none';
-      }
-
-      /**
-       * Calculates the next transition delay property, incrementing the `staggerCounter` property
-       * each time it is called.
-       *
-       * @returns The value for the next element `style.transitionDelay` property.
-       */
-      function getNextTransitionDelay(): string {
-        return `${staggerCounter++ * props.staggering}ms`;
-      }
-
-      /**
-       * Calculates if the virtual node should have a move transition. If its has it, then it
-       * applies it immediately using the `style.transform`.
-       *
-       * @param vNode - The virtual node to calculate if it should have a move transition.
-       * @returns True when a move transition was applied to the virtual node.
-       */
-      function applyTranslation(vNode: TransitionVNode): boolean {
-        const oldPosition = oldPositions.get(vNode.elm as Element)!;
-        const newPosition = newPositions.get(vNode.elm as Element)!;
-        const dx = oldPosition.left - newPosition.left;
-        const dy = oldPosition.top - newPosition.top;
-        if (dx !== 0 || dy !== 0) {
-          const style = vNode.elm.style;
-          style.transform = `translate3d(${dx}px,${dy}px,0)`;
-          style.transitionDuration = '0s';
-          return true;
-        }
-        return false;
-      }
-
-      /**
-       * Generates a function to start the moving animations to each node that it needs them with the
-       * provided stagger.
-       *
-       * @param moveStagger - A list containing the delay to add to each node.
-       * @returns A function that starts the moving animation with the provided stagger to a single
-       * virtual node.
-       */
-      function startMoveAnimation(
-        moveStagger: string[]
-      ): (vNode: TransitionVNode, index: number) => void {
-        return (vNode, index) => {
-          const element = vNode.elm;
-          const style = element.style;
-          element.classList.add(moveClassName.value);
-          style.transform = style.transitionDuration = '';
-          style.transitionDelay = moveStagger[index];
-          const cleanMoveTransition = (event?: TransitionEvent): void => {
-            if (!event || (event.target === element && /transform$/.test(event.propertyName))) {
-              element.removeEventListener('transitionend', cleanMoveTransition);
-              element.style.transitionDelay = '';
-              element.classList.remove(moveClassName.value);
-              pendingCleanupMoveCallbacks.delete(element);
-            }
-          };
-          pendingCleanupMoveCallbacks.set(element, cleanMoveTransition);
-          element.addEventListener('transitionend', cleanMoveTransition);
-        };
-      }
-
-      return () => {
-        staggerCounter = 0;
-        // New children are now the old ones
-        oldChildren = newChildren;
-        // Only vnodes with a tag (i.e. no HTML comments) and with a `key` property are valid.
-        newChildren = (
-          (typeof slots.default === 'function' ? slots.default() : slots.default) ?? []
-        ).filter(isTransitionValidVNode);
-
-        // Apply transition data to both new and old nodes & store the position of the old nodes.
-        newChildren.forEach(addTransitionData);
-        oldChildren.forEach(syncOldNodes);
-
-        return h(props.tag, { ref: el, class: 'x-staggering-transition-group' }, newChildren);
-      };
-    }
-  });
-
-  /**
-   * Contains arrays of nodes, splitted by the action they should have.
-   */
-  interface TransitionTypeNodes {
-    leavingNodes: TransitionVNode[];
-    stayingNodes: TransitionVNode[];
-    enteringNodes: TransitionVNode[];
-  }
-
-  /**
-   * Safe transition version of the VNode type, with the required non optional properties.
-   */
-  interface TransitionVNode extends VNode {
-    elm: HTMLElement;
-    tag: string;
-    key: string;
-  }
-
-  /**
-   * Vue's VNode {@link https://vuejs.org/v2/api/#transition} data props and events.
-   */
-  interface TransitionData {
-    name?: string;
-    appear?: boolean;
-    css?: boolean;
-    type?: 'transition' | 'animation'; // Unused
-    mode?: 'out-in' | 'in-out'; // Unused
-    duration?: number;
-    enterClass?: string;
-    leaveClass?: string;
-    appearClass?: string;
-    enterToClass?: string;
-    leaveToClass?: string;
-    appearToClass?: string;
-    enterActiveClass?: string;
-    leaveActiveClass?: string;
-    appearActiveClass?: string;
-    beforeEnter?: TransitionHook;
-    enter?: TransitionHook;
-    afterEnter?: TransitionHook;
-    beforeLeave?: TransitionHook;
-    leave?: TransitionHook;
-    afterLeave?: TransitionHook;
-  }
-
-  /**
-   * A function that receives an HTMLElement. Used to perform actions when the different phases
-   * of Vue transitions happens.
-   */
-  type TransitionHook = (element: HTMLElement) => void;
-
-  /**
-   * Represents the dimensions and positions of an element.
-   */
-  interface Bounds {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-  }
-</script>
-
-<style lang="scss" scoped>
-  .x-staggering-transition-group {
-    position: relative;
-  }
-</style>
-
-<docs lang="mdx">
-## Examples
-
-### Basic example
-
-Apart from all the props and events that the classic transition group has, the staggering transition
-group also exposes a new `staggering` property, which allows to configure the delay for each one of
-the nodes when animating.
-
-```vue
-<staggering-transition-group appear :staggering="50" name="staggered-fade-slide-">
-  <!-- @slot (Required) Transition-group content -->
-  <slot />
-</staggering-transition-group>
-```
-</docs>
diff --git a/packages/x-components/src/components/base-grid.vue b/packages/x-components/src/components/base-grid.vue
index 86ed995de2..c89abc01ea 100644
--- a/packages/x-components/src/components/base-grid.vue
+++ b/packages/x-components/src/components/base-grid.vue
@@ -1,7 +1,6 @@
 <template>
   <component
     :is="animation"
-    ref="gridEl"
     :style="style"
     class="x-base-grid"
     :class="cssClasses"
@@ -34,6 +33,7 @@
   import {
     computed,
     defineComponent,
+    getCurrentInstance,
     inject,
     onBeforeUnmount,
     onMounted,
@@ -42,11 +42,7 @@
     ref,
     watch
   } from 'vue';
-  import {
-    MaybeComputedElementRef,
-    useResizeObserver,
-    UseResizeObserverReturn
-  } from '@vueuse/core';
+  import { MaybeComputedElementRef, useResizeObserver } from '@vueuse/core';
   import { toKebabCase } from '../utils/string';
   import { ListItem, VueCSSClasses } from '../utils/types';
   import { AnimationProp } from '../types/animation-prop';
@@ -109,11 +105,21 @@
       }
     },
     setup(props, { slots }) {
-      type ElementRef = {
-        $el: HTMLElement;
-      };
-
       const xBus = useXBus();
+
+      /**
+       * Number of columns rendered inside the grid.
+       */
+      const renderedColumnsNumber = ref(0);
+      /**
+       * Reference to the root element of the grid.
+       */
+      const rootEl = ref<HTMLElement | undefined>();
+      /**
+       * ResizeObserver instance to keep track of the number of columns rendered inside the grid.
+       */
+      let resizeObserver: { stop: () => void };
+
       /**
        * It injects {@link ListItem} provided by an ancestor.
        *
@@ -124,9 +130,6 @@
         undefined
       );
 
-      const gridEl = ref<ElementRef | HTMLElement | null>(null);
-
-      let renderedColumnsNumber = ref(0);
       /**
        * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged}
        * event whenever the number of columns rendered inside the grid changes.
@@ -136,9 +139,7 @@
       watch(
         renderedColumnsNumber,
         () => xBus.emit('RenderedColumnsNumberChanged', renderedColumnsNumber.value),
-        {
-          immediate: false
-        }
+        { immediate: false }
       );
 
       /**
@@ -205,49 +206,38 @@
         })
       );
 
-      /**
-       * Checks if a given value is an `ElementRef` object.
-       *
-       * @param value - The value to check.
-       * @returns `true` if the value is an `ElementRef` object, `false` otherwise.
-       *
-       * @internal
-       */
-      const isElementRef = (value: any): value is ElementRef => {
-        return value && value.$el instanceof HTMLElement;
-      };
-
       /**
        * Updates the number of columns rendered inside the grid.
-       *
-       * @internal
        */
       const updateRenderedColumnsNumber = (): void => {
-        const { gridTemplateColumns } = getComputedStyle(
-          isElementRef(gridEl.value) ? gridEl.value.$el : (gridEl.value as Element)
-        );
-        renderedColumnsNumber.value = gridTemplateColumns.split(' ').length;
+        if (rootEl.value) {
+          const { gridTemplateColumns } = getComputedStyle(rootEl.value);
+          renderedColumnsNumber.value = gridTemplateColumns.split(' ').length;
+        }
       };
 
       /**
        * Initialises the rendered columns number and sets a ResizeObserver to keep it updated.
-       *
-       * @internal
        */
-      let resizeObserver: UseResizeObserverReturn;
       onMounted(() => {
-        resizeObserver = useResizeObserver(
-          gridEl as MaybeComputedElementRef,
-          updateRenderedColumnsNumber
-        );
+        rootEl.value = getCurrentInstance()?.proxy?.$el as HTMLElement | undefined;
+        if (rootEl.value) {
+          resizeObserver = useResizeObserver(
+            rootEl as MaybeComputedElementRef,
+            updateRenderedColumnsNumber
+          );
+        }
       });
+
+      /**
+       * Stops the ResizeObserver when the component is unmounted.
+       */
       onBeforeUnmount(() => resizeObserver?.stop());
 
       return {
         gridItems,
         cssClasses,
         style,
-        gridEl,
         slots
       };
     }
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index d6cdb4af04..d0b31b0ff0 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -463,7 +463,7 @@
   /* eslint-disable max-len */
   import { computed, ComputedRef, defineComponent, provide } from 'vue';
   import { animateClipPath } from '../../components/animations/animate-clip-path/animate-clip-path.factory';
-  // import StaggeredFadeAndSlide from '../../components/animations/staggered-fade-and-slide.vue';
+  import StaggeredFadeAndSlide from '../../components/animations/staggered-fade-and-slide.vue';
   import AutoProgressBar from '../../components/auto-progress-bar.vue';
   import BaseDropdown from '../../components/base-dropdown.vue';
   import BaseGrid from '../../components/base-grid.vue';
@@ -590,6 +590,7 @@
       SortPickerList,
       Spellcheck,
       SpellcheckButton,
+      StaggeredFadeAndSlide,
       Tagging,
       UrlHandler
     },
@@ -604,7 +605,7 @@
         'Find sunglasses'
       ];
       const columnPickerValues = [0, 2, 4];
-      // const resultsAnimation = StaggeredFadeAndSlide;
+      const resultsAnimation = StaggeredFadeAndSlide;
       const modalAnimation = animateClipPath();
       const selectedColumns = 4;
       const sortValues = ['', 'price asc', 'price desc'];
@@ -666,7 +667,7 @@
         adapterConfig.e2e = !adapterConfig.e2e;
       };
       return {
-        resultsAnimation: undefined,
+        resultsAnimation,
         modalAnimation,
         queriesPreviewInfo,
         stores,

From 8f2ec031016bdda3d9133986be7c7c316d7269d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Mon, 5 Aug 2024 16:19:47 +0200
Subject: [PATCH 02/11] refactor(staggered-fade-and-slide): remove default
 attrs inheritance

---
 .../src/components/animations/staggered-fade-and-slide.vue      | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index 42b7c25364..66f3d82527 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -2,7 +2,6 @@
   <TransitionGroup
     @enter="enter"
     @after-enter="afterEnter"
-    v-bind="$attrs"
     :appear="appear"
     :name="name"
     :tag="tag"
@@ -22,7 +21,6 @@
    */
   export default defineComponent({
     name: 'StaggeredFadeAndSlide',
-    inheritAttrs: false,
     props: {
       /**
        * Indicates if the transition must be applied on the initial render of the node.

From 14f103eaa862b108a6cd5dd630397acb0d5ca9c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Tue, 6 Aug 2024 16:11:53 +0200
Subject: [PATCH 03/11] fix(staggered-fade-and-slide): restore lost styles on
 merge

---
 .../animations/staggered-fade-and-slide.vue   | 39 ++++++++++---------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index 66f3d82527..17ba3c8743 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -110,28 +110,29 @@
 
 <style lang="scss">
   $transition-duration: 0.25s;
+  /* 1. Declare transitions */
+  .x-staggered-fade-and-slide-enter-active,
+  .x-staggered-fade-and-slide-leave-active {
+    transition: $transition-duration ease-out;
+    transition-property: opacity, transform;
+  }
 
-  .x-staggered-fade-and-slide {
-    z-index: 0;
-
-    &.x-staggered-fade-and-slide {
-      &--enter-active,
-      &--leave-active {
-        transition: $transition-duration ease-out;
-        transition-property: opacity, transform;
-      }
+  .x-staggered-fade-and-slide-move {
+    transition: transform $transition-duration ease-out;
+  }
 
-      &--move {
-        transition: transform $transition-duration ease-out;
-      }
+  /* 2. declare enter from and leave to state */
+  .x-staggered-fade-and-slide-enter,
+  .x-staggered-fade-and-slide-enter-from,
+  .x-staggered-fade-and-slide-leave-to {
+    opacity: 0;
+    transform: translate3d(0, 50%, 0);
+  }
 
-      &--enter-from,
-      &--leave-to {
-        transform: translate3d(0, 50%, 0);
-        opacity: 0;
-        z-index: -1;
-      }
-    }
+  /* 3. ensure leaving items are taken out of layout flow so that moving
+      animations can be calculated correctly. */
+  .x-staggered-fade-and-slide-leave-active {
+    position: absolute;
   }
 </style>
 

From 260b5e820f78c64d092446245a64e12a2f2ca932 Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Thu, 8 Aug 2024 12:18:35 +0200
Subject: [PATCH 04/11] fix(staggered-fade-and-slide): add element index in
 base-grid to retrieve in animation to animate reliably

---
 .../animations/staggered-fade-and-slide.vue   | 106 +++++++--------
 .../x-components/src/components/base-grid.vue | 127 +++++++-----------
 packages/x-components/src/views/home/Home.vue |   1 -
 3 files changed, 96 insertions(+), 138 deletions(-)

diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index 17ba3c8743..ffed12e1f0 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -1,7 +1,8 @@
 <template>
   <TransitionGroup
-    @enter="enter"
-    @after-enter="afterEnter"
+    @enter="onEnter"
+    @afterEnter="onAfterEnter"
+    @leave="onLeave"
     :appear="appear"
     :name="name"
     :tag="tag"
@@ -13,6 +14,7 @@
 <script lang="ts">
   import { defineComponent, ref } from 'vue';
   import { useDisableAnimation } from './use-disable-animation';
+
   /**
    * Renders a transition group wrapping the elements passed in the default slot and animating
    * them with a staggered fade and slide animation.
@@ -22,94 +24,84 @@
   export default defineComponent({
     name: 'StaggeredFadeAndSlide',
     props: {
-      /**
-       * Indicates if the transition must be applied on the initial render of the node.
-       */
+      /** Indicates if the transition must be applied on the initial render of the node. */
       appear: {
         type: Boolean,
         default: true
       },
-      /**
-       * The tag of the node to render to the DOM.
-       */
+      /** The tag of the node to render to the DOM. */
       tag: {
         type: String,
         default: 'div'
       },
-      /**
-       * The time in ms to stagger each item.
-       */
+      /** The time in ms to stagger each item. */
       stagger: {
         type: Number,
         default: 25
       }
     },
     setup(props) {
-      /**
-       * The duration of the transition in ms.
-       */
+      /** The duration of the transition in ms. */
       const transitionDuration = 250;
-      /**
-       * The counter to keep track of the staggered delay.
-       */
+
+      /** The counter to keep track of the staggered delay. */
       const staggerCounter = ref(0);
+      /** The name of the animation. */
+      const { name } = useDisableAnimation('x-staggered-fade-and-slide');
+
       /**
-       * The counter to keep track of the animations.
-       */
-      const animationList = ref<HTMLElement[]>([]);
-      /**
-       * The name of the animation.
-       */
-      const animationName = ref('x-staggered-fade-and-slide');
-      /**
-       * The name of the animation.
-       */
-      const { name } = useDisableAnimation(animationName.value);
-      /**
-       * Calculate the delay for the next element.
+       * Listener called when one frame the element is inserted.
+       * This calculates the stagger delay to be used as `transitionDelay` and finally resolve
+       * the transition end after the CSS transition duration plus stagger delay.
        *
-       * @returns The delay in ms.
+       * @param el - Element inserted.
+       * @param done - Callback to indicate the transition end.
        */
-      function getNextTransitionDelay(): number {
-        return staggerCounter.value++ * props.stagger;
+      function onEnter(el: Element, done: () => void) {
+        const elIndex = +((el as HTMLElement).dataset.index ?? 0);
+        const staggerIndex = elIndex - staggerCounter.value;
+        const staggerDelay = staggerIndex * props.stagger;
+
+        (el as HTMLElement).style.transitionDelay = `${staggerDelay}ms`;
+        setTimeout(done, transitionDuration + staggerDelay);
       }
+
       /**
-       * The enter transition.
+       * Listener called when the enter transition has finished.
+       * This resets the `transitionDelay` and add one to the stagger counter.
        *
-       * @param el
-       * @param done
+       * @param el - Element inserted.
        */
-      function enter(el: HTMLElement, done: () => void) {
-        animationList.value.push(el);
-        const delay = getNextTransitionDelay();
-        el.style.transitionDelay = `${delay}ms`;
-        setTimeout(() => {
-          el.style.transitionDelay = '0ms';
-          done();
-        }, transitionDuration + delay);
+      function onAfterEnter(el: Element) {
+        (el as HTMLElement).style.transitionDelay = '0ms';
+        staggerCounter.value++;
       }
+
       /**
-       * The after enter transition.
+       * Listener called when the leave transition starts.
+       * This resets the stagger counter to 0 to init the staggered animation.
        *
-       * @param el
+       * @param _ - Element inserted.
+       * @param done - Callback to indicate the transition end.
        */
-      function afterEnter(el: HTMLElement) {
-        animationList.value = animationList.value.filter(item => item !== el);
-        if (animationList.value.length === 0) {
-          staggerCounter.value = 0;
-        }
+      function onLeave(_: Element, done: () => void) {
+        staggerCounter.value = 0;
+        done();
       }
+
       return {
         name,
-        enter,
-        afterEnter
+        onEnter,
+        onAfterEnter,
+        onLeave
       };
     }
   });
 </script>
 
 <style lang="scss">
-  $transition-duration: 0.25s;
+  $transition-duration: 250ms;
+
   /* 1. Declare transitions */
   .x-staggered-fade-and-slide-enter-active,
   .x-staggered-fade-and-slide-leave-active {
@@ -121,7 +113,7 @@
     transition: transform $transition-duration ease-out;
   }
 
-  /* 2. declare enter from and leave to state */
+  /* 2. Declare enter, from and leave to state */
   .x-staggered-fade-and-slide-enter,
   .x-staggered-fade-and-slide-enter-from,
   .x-staggered-fade-and-slide-leave-to {
@@ -129,8 +121,8 @@
     transform: translate3d(0, 50%, 0);
   }
 
-  /* 3. ensure leaving items are taken out of layout flow so that moving
-      animations can be calculated correctly. */
+  /* 3. Ensure leaving items are taken out of layout flow so that moving animations can be
+        calculated correctly. */
   .x-staggered-fade-and-slide-leave-active {
     position: absolute;
   }
diff --git a/packages/x-components/src/components/base-grid.vue b/packages/x-components/src/components/base-grid.vue
index c89abc01ea..7bc621710f 100644
--- a/packages/x-components/src/components/base-grid.vue
+++ b/packages/x-components/src/components/base-grid.vue
@@ -1,6 +1,7 @@
 <template>
   <component
     :is="animation"
+    ref="gridEl"
     :style="style"
     class="x-base-grid"
     :class="cssClasses"
@@ -8,8 +9,9 @@
     data-test="grid"
   >
     <li
-      v-for="{ slotName, item, cssClass } in gridItems"
+      v-for="({ item, cssClass, slotName }, index) in gridItems"
       :key="item.id"
+      :data-index="index"
       :class="cssClass"
       class="x-base-grid__item"
     >
@@ -33,7 +35,6 @@
   import {
     computed,
     defineComponent,
-    getCurrentInstance,
     inject,
     onBeforeUnmount,
     onMounted,
@@ -42,7 +43,11 @@
     ref,
     watch
   } from 'vue';
-  import { MaybeComputedElementRef, useResizeObserver } from '@vueuse/core';
+  import {
+    MaybeComputedElementRef,
+    useResizeObserver,
+    UseResizeObserverReturn
+  } from '@vueuse/core';
   import { toKebabCase } from '../utils/string';
   import { ListItem, VueCSSClasses } from '../utils/types';
   import { AnimationProp } from '../types/animation-prop';
@@ -52,8 +57,6 @@
   /**
    * The type returned by the gridItems function. Basically it's a list of items with its CSS
    * classes and a slotName.
-   *
-   * @internal
    */
   interface GridItem {
     slotName: string;
@@ -74,11 +77,7 @@
   export default defineComponent({
     name: 'BaseGrid',
     props: {
-      /**
-       * Animation component that will be used to animate the base grid.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the base grid. */
       animation: {
         type: AnimationProp,
         default: 'ul'
@@ -86,8 +85,6 @@
       /**
        * Number of columns the grid is divided into. By default, its value is 0, setting the grid
        * columns mode to auto-fill.
-       *
-       * @public
        */
       columns: {
         type: Number,
@@ -96,45 +93,27 @@
       /**
        * The list of items to be rendered.
        *
-       * @remarks The items must have an id property.
-       *
-       * @public
+       * @remarks The items must have an ID property.
        */
       items: {
         type: Array as PropType<ListItem[]>
       }
     },
     setup(props, { slots }) {
+      type ElementRef = {
+        $el: HTMLElement;
+      };
+
       const xBus = useXBus();
 
-      /**
-       * Number of columns rendered inside the grid.
-       */
-      const renderedColumnsNumber = ref(0);
-      /**
-       * Reference to the root element of the grid.
-       */
-      const rootEl = ref<HTMLElement | undefined>();
-      /**
-       * ResizeObserver instance to keep track of the number of columns rendered inside the grid.
-       */
-      let resizeObserver: { stop: () => void };
-
-      /**
-       * It injects {@link ListItem} provided by an ancestor.
-       *
-       * @internal
-       */
-      const injectedListItems = inject<Ref<ListItem[]> | undefined>(
-        LIST_ITEMS_KEY as string,
-        undefined
-      );
+      /** It injects {@link ListItem} provided by an ancestor. */
+      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
+      const gridEl = ref<ElementRef | HTMLElement>();
+      let renderedColumnsNumber = ref(0);
 
       /**
        * Emits the {@link XEventsTypes.RenderedColumnsNumberChanged}
        * event whenever the number of columns rendered inside the grid changes.
-       *
-       * @internal
        */
       watch(
         renderedColumnsNumber,
@@ -146,10 +125,8 @@
        * It returns the items passed as props or the injected ones.
        *
        * @returns List of grid items.
-       *
-       * @public
        */
-      const computedItems = computed((): ListItem[] | void => {
+      const computedItems = computed<ListItem[] | void>(() => {
         return (
           props.items ??
           injectedListItems?.value ??
@@ -164,38 +141,27 @@
        * amount of columns or rows based on how many columns the grid is divided into.
        *
        * @returns CSS class with the column property value.
-       *
-       * @internal
        */
-      const cssClasses = computed(
-        (): VueCSSClasses =>
-          props.columns ? `x-base-grid--cols-${props.columns}` : 'x-base-grid--cols-auto'
-      );
+      const cssClasses = computed(() => `x-base-grid--cols-${props.columns || 'auto'}`);
 
       /**
        * CSSStyleDeclaration object specifying the number of columns the grid is divided into based on
        * the column property value.
        *
        * @returns A CSSStyleDeclaration to use as the style attribute.
-       *
-       * @internal
        */
-      const style = computed((): Partial<CSSStyleDeclaration> => {
-        return {
-          gridTemplateColumns: props.columns
-            ? `repeat(${props.columns}, minmax(0, 1fr))`
-            : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'
-        };
-      });
+      const style = computed<Partial<CSSStyleDeclaration>>(() => ({
+        gridTemplateColumns: props.columns
+          ? `repeat(${props.columns}, minmax(0, 1fr))`
+          : 'repeat(auto-fill, minmax(var(--x-size-min-width-grid-item, 150px), 1fr))'
+      }));
 
       /**
        * Maps the item to an object containing: the `item`, its `CSS class` and its slot name.
        *
        * @returns An array of objects containing the item and its CSS class.
-       *
-       * @internal
        */
-      const gridItems = computed((): GridItem[] =>
+      const gridItems = computed<GridItem[]>(() =>
         (computedItems.value as ListItem[]).map(item => {
           const slotName = toKebabCase(item.modelName);
           return {
@@ -207,37 +173,38 @@
       );
 
       /**
-       * Updates the number of columns rendered inside the grid.
+       * Checks if a given value is an `ElementRef` object.
+       *
+       * @param value - The value to check.
+       * @returns `true` if the value is an `ElementRef` object, `false` otherwise.
        */
-      const updateRenderedColumnsNumber = (): void => {
-        if (rootEl.value) {
-          const { gridTemplateColumns } = getComputedStyle(rootEl.value);
-          renderedColumnsNumber.value = gridTemplateColumns.split(' ').length;
-        }
+      const isElementRef = (value: any): value is ElementRef => {
+        return value && value.$el instanceof HTMLElement;
       };
 
-      /**
-       * Initialises the rendered columns number and sets a ResizeObserver to keep it updated.
-       */
+      /** Updates the number of columns rendered inside the grid. */
+      function updateRenderedColumnsNumber() {
+        const { gridTemplateColumns } = getComputedStyle(
+          isElementRef(gridEl.value) ? gridEl.value.$el : (gridEl.value as Element)
+        );
+        renderedColumnsNumber.value = gridTemplateColumns.split(' ').length;
+      }
+
+      /** Initialises the rendered columns number and sets a ResizeObserver to keep it updated. */
+      let resizeObserver: UseResizeObserverReturn;
       onMounted(() => {
-        rootEl.value = getCurrentInstance()?.proxy?.$el as HTMLElement | undefined;
-        if (rootEl.value) {
-          resizeObserver = useResizeObserver(
-            rootEl as MaybeComputedElementRef,
-            updateRenderedColumnsNumber
-          );
-        }
+        resizeObserver = useResizeObserver(
+          gridEl as MaybeComputedElementRef,
+          updateRenderedColumnsNumber
+        );
       });
-
-      /**
-       * Stops the ResizeObserver when the component is unmounted.
-       */
       onBeforeUnmount(() => resizeObserver?.stop());
 
       return {
         gridItems,
         cssClasses,
         style,
+        gridEl,
         slots
       };
     }
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index d0b31b0ff0..5e97b3c6e9 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -590,7 +590,6 @@
       SortPickerList,
       Spellcheck,
       SpellcheckButton,
-      StaggeredFadeAndSlide,
       Tagging,
       UrlHandler
     },

From e915a31b370501b2958335f92740ecc7cd83d80a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Mon, 12 Aug 2024 15:15:44 +0200
Subject: [PATCH 05/11] fix(staggered-fade-and-slide): add data-index attr to
 animation components

---
 .../animations/test-staggered-fade-and-slide.vue          | 8 ++++----
 .../components/animations/staggered-fade-and-slide.vue    | 6 +++---
 packages/x-components/src/components/base-dropdown.vue    | 7 ++++++-
 packages/x-components/src/components/items-list.vue       | 3 ++-
 .../src/components/suggestions/base-suggestions.vue       | 1 +
 .../src/x-modules/facets/components/facets/facets.vue     | 3 ++-
 .../x-modules/facets/components/lists/filters-list.vue    | 3 ++-
 .../facets/components/lists/selected-filters-list.vue     | 3 ++-
 .../x-modules/history-queries/components/my-history.vue   | 3 ++-
 .../identifier-results/components/identifier-results.vue  | 3 ++-
 .../queries-preview/components/query-preview-list.vue     | 1 +
 .../recommendations/components/recommendations.vue        | 3 ++-
 .../x-modules/related-tags/components/related-tags.vue    | 3 ++-
 .../x-modules/search/components/partial-results-list.vue  | 1 +
 .../src/x-modules/search/components/sort-list.vue         | 3 ++-
 .../src/x-modules/search/components/sort-picker-list.vue  | 3 ++-
 16 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
index dadcd355f5..b6ba642c13 100644
--- a/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
+++ b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
@@ -4,7 +4,7 @@
   <button @click="reset">Reset</button>
 
   <StaggeredFadeAndSlide :stagger="500">
-    <li v-for="item in items" :key="item.id">
+    <li v-for="(item, index) in items" :key="item.id" :data-index="index">
       {{ item.id }} - {{ item.name }}
       <button @click="remove(item)">x</button>
     </li>
@@ -21,9 +21,9 @@
   <br />
   <h1>Static content:</h1>
   <StaggeredFadeAndSlide :stagger="50">
-    <li key="1">Element to animate</li>
-    <li key="2">Element to animate</li>
-    <li key="3">Element to animate</li>
+    <li key="1" data-index="0">Element to animate</li>
+    <li key="2" data-index="1">Element to animate</li>
+    <li key="3" data-index="2">Element to animate</li>
   </StaggeredFadeAndSlide>
 </template>
 
diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index ffed12e1f0..37110b031f 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -147,9 +147,9 @@ or the `stagger` props:
 
 ```vue
 <StaggeredFadeAndSlide tag="ul" :stagger="50">
-  <li key="1">Element to animate</li>
-  <li key="2">Element to animate</li>
-  <li key="3">Element to animate</li>
+  <li key="1" data-index="0">Element to animate</li>
+  <li key="2" data-index="1">Element to animate</li>
+  <li key="3" data-index="2">Element to animate</li>
 </StaggeredFadeAndSlide>
 ```
 </docs>
diff --git a/packages/x-components/src/components/base-dropdown.vue b/packages/x-components/src/components/base-dropdown.vue
index 4bacbb459c..f0600e6655 100644
--- a/packages/x-components/src/components/base-dropdown.vue
+++ b/packages/x-components/src/components/base-dropdown.vue
@@ -44,7 +44,12 @@
         role="listbox"
         tabindex="-1"
       >
-        <li v-for="(item, index) in items" :key="item.id || item" class="x-dropdown__list-item">
+        <li
+          v-for="(item, index) in items"
+          :key="item.id || item"
+          :data-index="index"
+          class="x-dropdown__list-item"
+        >
           <button
             :ref="el => (itemsButtonRefs[index] = el)"
             @click="emitSelectedItemChanged(item)"
diff --git a/packages/x-components/src/components/items-list.vue b/packages/x-components/src/components/items-list.vue
index 206beb7fa2..781521cb76 100644
--- a/packages/x-components/src/components/items-list.vue
+++ b/packages/x-components/src/components/items-list.vue
@@ -7,8 +7,9 @@
     data-test="items-list"
   >
     <li
-      v-for="item in computedItems"
+      v-for="(item, index) in computedItems"
       :key="item.id"
+      :data-index="index"
       class="x-items-list__item"
       :class="item.class"
       :data-test="item.dataTest"
diff --git a/packages/x-components/src/components/suggestions/base-suggestions.vue b/packages/x-components/src/components/suggestions/base-suggestions.vue
index f7138f3f67..f9ebb6e788 100644
--- a/packages/x-components/src/components/suggestions/base-suggestions.vue
+++ b/packages/x-components/src/components/suggestions/base-suggestions.vue
@@ -3,6 +3,7 @@
     <li
       v-for="(suggestion, index) in suggestionsToRender"
       :key="suggestionsKeys[index]"
+      :data-index="index"
       class="x-suggestions__item"
       :class="suggestionItemClass"
       data-test="suggestion-item"
diff --git a/packages/x-components/src/x-modules/facets/components/facets/facets.vue b/packages/x-components/src/x-modules/facets/components/facets/facets.vue
index 7cb66653b1..1df04f4578 100644
--- a/packages/x-components/src/x-modules/facets/components/facets/facets.vue
+++ b/packages/x-components/src/x-modules/facets/components/facets/facets.vue
@@ -1,8 +1,9 @@
 <template>
   <component :is="animation" v-if="hasFacets" class="x-facets-list" data-test="facets" tag="ul">
     <li
-      v-for="({ facet, slotNameById, slotNameByModelName }, facetId) in mappedFacets"
+      v-for="({ facet, slotNameById, slotNameByModelName }, facetId, index) in mappedFacets"
       :key="facetId"
+      :data-index="index"
       class="x-facets-list__item"
       data-test="facets-facet"
     >
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
index 41b7be589a..653200edaf 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
@@ -8,8 +8,9 @@
     data-test="base-filters"
   >
     <li
-      v-for="filter in renderedFilters"
+      v-for="(filter, index) in renderedFilters"
       :key="filter.id"
+      :data-index="index"
       class="x-filters__item"
       data-test="base-filters-item"
     >
diff --git a/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue b/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue
index 98f123fb14..a6f61deeee 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue
@@ -11,8 +11,9 @@
       tag="ul"
     >
       <li
-        v-for="{ slotName, selectedFilter } in mapSlot(selectedFilters)"
+        v-for="({ slotName, selectedFilter }, index) in mapSlot(selectedFilters)"
         :key="selectedFilter.id"
+        :data-index="index"
         class="x-selected-filters-list__item"
         data-test="selected-filters-list-item"
       >
diff --git a/packages/x-components/src/x-modules/history-queries/components/my-history.vue b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
index c789d4a3bd..75504de86d 100644
--- a/packages/x-components/src/x-modules/history-queries/components/my-history.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
@@ -1,8 +1,9 @@
 <template>
   <component :is="animation" v-if="hasHistoryQueries" class="x-my-history" tag="ul">
     <li
-      v-for="(historyQueries, date) in groupByDate"
+      v-for="(historyQueries, date, index) in groupByDate"
       :key="date"
+      :data-index="index"
       class="x-my-history-item"
       data-test="my-history-item"
     >
diff --git a/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue b/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue
index dd3ea1f051..eafed3231a 100644
--- a/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue
+++ b/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue
@@ -1,8 +1,9 @@
 <template>
   <component :is="animation" v-if="identifierResults.length" tag="ul" class="x-identifier-results">
     <li
-      v-for="identifierResult in identifierResultsToRender"
+      v-for="(identifierResult, index) in identifierResultsToRender"
       :key="identifierResult.id"
+      :data-index="index"
       class="x-identifier-results__item"
       data-test="identifier-results-item"
     >
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
index 2c4ba1a512..697aec8ed4 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
@@ -3,6 +3,7 @@
     <li
       v-for="(queryPreview, index) in renderedQueryPreviews"
       :key="index"
+      :data-index="index"
       data-test="query-preview-item"
     >
       <QueryPreview
diff --git a/packages/x-components/src/x-modules/recommendations/components/recommendations.vue b/packages/x-components/src/x-modules/recommendations/components/recommendations.vue
index 4104077b2c..9befb6d5d3 100644
--- a/packages/x-components/src/x-modules/recommendations/components/recommendations.vue
+++ b/packages/x-components/src/x-modules/recommendations/components/recommendations.vue
@@ -7,8 +7,9 @@
     class="x-recommendations"
   >
     <li
-      v-for="recommendation in recommendations"
+      v-for="(recommendation, index) in recommendations"
       :key="recommendation.id"
+      :data-index="index"
       class="x-recommendations__item"
       data-test="recommendation-item"
     >
diff --git a/packages/x-components/src/x-modules/related-tags/components/related-tags.vue b/packages/x-components/src/x-modules/related-tags/components/related-tags.vue
index 42c473fddd..bdedeffc62 100644
--- a/packages/x-components/src/x-modules/related-tags/components/related-tags.vue
+++ b/packages/x-components/src/x-modules/related-tags/components/related-tags.vue
@@ -7,8 +7,9 @@
     data-test="related-tags"
   >
     <li
-      v-for="relatedTag in relatedTags"
+      v-for="(relatedTag, index) in relatedTags"
       :key="relatedTag.query"
+      :data-index="index"
       class="x-related-tags__item"
       data-test="related-tag-item"
     >
diff --git a/packages/x-components/src/x-modules/search/components/partial-results-list.vue b/packages/x-components/src/x-modules/search/components/partial-results-list.vue
index 7af1027b26..f0e5f88ff7 100644
--- a/packages/x-components/src/x-modules/search/components/partial-results-list.vue
+++ b/packages/x-components/src/x-modules/search/components/partial-results-list.vue
@@ -9,6 +9,7 @@
     <li
       v-for="(partialResult, index) in partialResults"
       :key="`${partialResult.query}-${index}`"
+      :data-index="index"
       class="x-partial-result"
       data-test="partial-result"
     >
diff --git a/packages/x-components/src/x-modules/search/components/sort-list.vue b/packages/x-components/src/x-modules/search/components/sort-list.vue
index 7591acf891..04094c9a1c 100644
--- a/packages/x-components/src/x-modules/search/components/sort-list.vue
+++ b/packages/x-components/src/x-modules/search/components/sort-list.vue
@@ -1,8 +1,9 @@
 <template>
   <component :is="animation" tag="ul" class="x-option-list x-sort-list" data-test="sort-list">
     <li
-      v-for="{ item, cssClasses, event } in listItems"
+      v-for="({ item, cssClasses, event }, index) in listItems"
       :key="item"
+      :data-index="index"
       :class="cssClasses"
       class="x-option-list__item x-sort-list__item"
     >
diff --git a/packages/x-components/src/x-modules/search/components/sort-picker-list.vue b/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
index 9239222fee..dd244c075a 100644
--- a/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
+++ b/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
@@ -7,8 +7,9 @@
     role="list"
   >
     <BaseEventButton
-      v-for="{ item, cssClasses, event } in listItems"
+      v-for="({ item, cssClasses, event }, index) in listItems"
       :key="item"
+      :data-index="index"
       :class="[cssClasses, buttonClass]"
       data-test="sort-picker-button"
       :events="event"

From ef9d1cea3ea88f8ba26ebd0c45c13990068874ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Thu, 15 Aug 2024 11:44:54 +0200
Subject: [PATCH 06/11] fix(staggered-fade-and-slide): use a DOM el filter to
 calculate stagger delay

---
 .../animations/staggered-fade-and-slide.vue   | 44 +++++++++----------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index 37110b031f..2e5ec7cc2f 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -2,7 +2,6 @@
   <TransitionGroup
     @enter="onEnter"
     @afterEnter="onAfterEnter"
-    @leave="onLeave"
     :appear="appear"
     :name="name"
     :tag="tag"
@@ -44,8 +43,6 @@
       /** The duration of the transition in ms. */
       const transitionDuration = 250;
 
-      /** The counter to keep track of the staggered delay. */
-      const staggerCounter = ref(0);
       /** The name of the animation. */
       const { name } = useDisableAnimation('x-staggered-fade-and-slide');
 
@@ -57,43 +54,44 @@
        * @param el - Element inserted.
        * @param done - Callback to indicate the transition end.
        */
-      function onEnter(el: Element, done: () => void) {
-        const elIndex = +((el as HTMLElement).dataset.index ?? 0);
-        const staggerIndex = elIndex - staggerCounter.value;
-        const staggerDelay = staggerIndex * props.stagger;
+      function onEnter(el: HTMLElement, done: () => void) {
+        const elIndex = findAnimationIndex(el);
+        const staggerDelay = elIndex > 0 ? elIndex * props.stagger : 0;
 
-        (el as HTMLElement).style.transitionDelay = `${staggerDelay}ms`;
+        el.style.transitionDelay = `${staggerDelay}ms`;
         setTimeout(done, transitionDuration + staggerDelay);
       }
 
       /**
-       * Listener called when the enter transition has finished.
-       * This resets the `transitionDelay` and add one to the stagger counter.
+       * Finds the index of the element in the parent children subset of new elements entering the DOM.
+       * This is achived by filtering out the elements that are already animated,
+       * which are those marked with the `data-animated` attribute.
        *
-       * @param el - Element inserted.
+       * @param el - Element to find.
+       * @returns The index of the element in the parent children subset of new elements.
        */
-      function onAfterEnter(el: Element) {
-        (el as HTMLElement).style.transitionDelay = '0ms';
-        staggerCounter.value++;
+      function findAnimationIndex(el: HTMLElement) {
+        return [...el.parentElement!.children]
+          .filter(c => (c as HTMLElement).dataset.animated !== 'true')
+          .indexOf(el);
       }
 
       /**
-       * Listener called when the leave transition starts.
-       * This resets the stagger counter to 0 to init the staggered animation.
+       * Listener called when the enter transition has finished.
+       * This resets the `transitionDelay` and add mark the element as animated,
+       * setting the `data-animated` attribute to `true`.
        *
-       * @param _ - Element inserted.
-       * @param done - Callback to indicate the transition end.
+       * @param el - Element inserted.
        */
-      function onLeave(_: Element, done: () => void) {
-        staggerCounter.value = 0;
-        done();
+      function onAfterEnter(el: HTMLElement) {
+        el.style.transitionDelay = '0ms';
+        el.dataset.animated = 'true';
       }
 
       return {
         name,
         onEnter,
-        onAfterEnter,
-        onLeave
+        onAfterEnter
       };
     }
   });

From 4e36f7d5a7872c1916a3b9cd529f1b0c25e7b1ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Thu, 15 Aug 2024 17:05:14 +0200
Subject: [PATCH 07/11] fix(staggered-fade-and-slide): add unit test

---
 .../staggered-fade-and-slide.spec.ts          | 99 +++++++++++++++++++
 .../animations/staggered-fade-and-slide.vue   |  2 +-
 2 files changed, 100 insertions(+), 1 deletion(-)
 create mode 100644 packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts

diff --git a/packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts b/packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts
new file mode 100644
index 0000000000..70d2c19dbe
--- /dev/null
+++ b/packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts
@@ -0,0 +1,99 @@
+import { mount } from '@vue/test-utils';
+import { ref, TransitionGroup } from 'vue';
+import StaggeredFadeAndSlide from '../staggered-fade-and-slide.vue';
+import { DISABLE_ANIMATIONS_KEY } from '../../decorators/injection.consts';
+
+function render({ appear = true, tag = 'div', stagger = 25, disableAnimation = false } = {}) {
+  const wrapper = mount(StaggeredFadeAndSlide, {
+    props: { appear, tag, stagger },
+    global: {
+      provide: {
+        [DISABLE_ANIMATIONS_KEY as string]: ref(disableAnimation)
+      },
+      stubs: {
+        'transition-group': false
+      }
+    },
+    slots: {
+      default: `
+        <p key="1">Fist paragraph</p>
+        <p key="2">Second paragraph</p>
+        <p key="3">Third paragraph</p>
+      `
+    }
+  });
+
+  return {
+    wrapper,
+    transitionGroup: wrapper.findComponent(TransitionGroup)
+  };
+}
+
+describe('testing StaggeredFadeAndSlide component', () => {
+  beforeAll(jest.useFakeTimers);
+  afterEach(jest.clearAllTimers);
+
+  it('renders the TransitionGroup with correct props', () => {
+    const appear = false;
+    const tag = 'ul';
+
+    const { transitionGroup } = render({ appear, tag });
+
+    expect(transitionGroup.exists()).toBeTruthy();
+    expect(transitionGroup.props('appear')).toBe(appear);
+    expect(transitionGroup.props('tag')).toBe(tag);
+    expect(transitionGroup.props('name')).toBe('x-staggered-fade-and-slide');
+  });
+
+  it('disables the animation when required', () => {
+    const { transitionGroup } = render({ disableAnimation: true });
+
+    expect(transitionGroup.props('name')).toBe('__no-animation__');
+  });
+
+  it('renders the animation component with the expected tag wrapping all slotted elements', () => {
+    const { wrapper } = render();
+
+    expect(wrapper.find('div')).toBeTruthy();
+    expect(wrapper.findAll('p')).toHaveLength(3);
+  });
+
+  it('renders each element with the expected delay', () => {
+    const transitionDuration = 250;
+    const stagger = 75;
+    const { wrapper } = render({ stagger });
+    const elements = wrapper.findAll('p');
+
+    for (const [i, el] of elements.entries()) {
+      expect(el.element.style.transitionDelay).toBe(`${i * stagger}ms`);
+    }
+
+    // Wait for the first transition to finish
+    jest.advanceTimersByTime(transitionDuration);
+
+    expect(elements[0].element.style.transitionDelay).toBe('0ms');
+    expect(elements[1].element.style.transitionDelay).not.toBe('0ms');
+    expect(elements[2].element.style.transitionDelay).not.toBe('0ms');
+
+    expect(elements[0].element.dataset.animated).toBe('true');
+    expect(elements[1].element.dataset.animated).toBeUndefined();
+    expect(elements[2].element.dataset.animated).toBeUndefined();
+
+    // Once the previous transition is finished wait for the stagger delay
+    jest.advanceTimersByTime(stagger);
+
+    expect(elements[1].element.style.transitionDelay).toBe('0ms');
+    expect(elements[2].element.style.transitionDelay).not.toBe('0ms');
+
+    expect(elements[1].element.dataset.animated).toBe('true');
+    expect(elements[2].element.dataset.animated).toBeUndefined();
+
+    // Once the previous transition is finished wait for the stagger delay
+    jest.advanceTimersByTime(stagger);
+
+    for (const el of elements) {
+      expect(el.element.style.transitionDelay).toBe('0ms');
+      expect(el.element.dataset.animated).toBe('true');
+    }
+  });
+});
diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index 2e5ec7cc2f..fa2aab7248 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent } from 'vue';
   import { useDisableAnimation } from './use-disable-animation';
 
   /**

From b75e5c6f412d21363ccb7711e95b4093196fe199 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Thu, 15 Aug 2024 17:06:11 +0200
Subject: [PATCH 08/11] Revert "fix(staggered-fade-and-slide): add data-index
 attr to animation components"

This reverts commit e915a31b370501b2958335f92740ecc7cd83d80a.
---
 .../animations/test-staggered-fade-and-slide.vue          | 8 ++++----
 .../components/animations/staggered-fade-and-slide.vue    | 6 +++---
 packages/x-components/src/components/base-dropdown.vue    | 7 +------
 packages/x-components/src/components/items-list.vue       | 3 +--
 .../src/components/suggestions/base-suggestions.vue       | 1 -
 .../src/x-modules/facets/components/facets/facets.vue     | 3 +--
 .../x-modules/facets/components/lists/filters-list.vue    | 3 +--
 .../facets/components/lists/selected-filters-list.vue     | 3 +--
 .../x-modules/history-queries/components/my-history.vue   | 3 +--
 .../identifier-results/components/identifier-results.vue  | 3 +--
 .../queries-preview/components/query-preview-list.vue     | 1 -
 .../recommendations/components/recommendations.vue        | 3 +--
 .../x-modules/related-tags/components/related-tags.vue    | 3 +--
 .../x-modules/search/components/partial-results-list.vue  | 1 -
 .../src/x-modules/search/components/sort-list.vue         | 3 +--
 .../src/x-modules/search/components/sort-picker-list.vue  | 3 +--
 16 files changed, 18 insertions(+), 36 deletions(-)

diff --git a/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
index b6ba642c13..dadcd355f5 100644
--- a/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
+++ b/packages/_vue3-migration-test/src/components/animations/test-staggered-fade-and-slide.vue
@@ -4,7 +4,7 @@
   <button @click="reset">Reset</button>
 
   <StaggeredFadeAndSlide :stagger="500">
-    <li v-for="(item, index) in items" :key="item.id" :data-index="index">
+    <li v-for="item in items" :key="item.id">
       {{ item.id }} - {{ item.name }}
       <button @click="remove(item)">x</button>
     </li>
@@ -21,9 +21,9 @@
   <br />
   <h1>Static content:</h1>
   <StaggeredFadeAndSlide :stagger="50">
-    <li key="1" data-index="0">Element to animate</li>
-    <li key="2" data-index="1">Element to animate</li>
-    <li key="3" data-index="2">Element to animate</li>
+    <li key="1">Element to animate</li>
+    <li key="2">Element to animate</li>
+    <li key="3">Element to animate</li>
   </StaggeredFadeAndSlide>
 </template>
 
diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index fa2aab7248..b085b63231 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -145,9 +145,9 @@ or the `stagger` props:
 
 ```vue
 <StaggeredFadeAndSlide tag="ul" :stagger="50">
-  <li key="1" data-index="0">Element to animate</li>
-  <li key="2" data-index="1">Element to animate</li>
-  <li key="3" data-index="2">Element to animate</li>
+  <li key="1">Element to animate</li>
+  <li key="2">Element to animate</li>
+  <li key="3">Element to animate</li>
 </StaggeredFadeAndSlide>
 ```
 </docs>
diff --git a/packages/x-components/src/components/base-dropdown.vue b/packages/x-components/src/components/base-dropdown.vue
index f0600e6655..4bacbb459c 100644
--- a/packages/x-components/src/components/base-dropdown.vue
+++ b/packages/x-components/src/components/base-dropdown.vue
@@ -44,12 +44,7 @@
         role="listbox"
         tabindex="-1"
       >
-        <li
-          v-for="(item, index) in items"
-          :key="item.id || item"
-          :data-index="index"
-          class="x-dropdown__list-item"
-        >
+        <li v-for="(item, index) in items" :key="item.id || item" class="x-dropdown__list-item">
           <button
             :ref="el => (itemsButtonRefs[index] = el)"
             @click="emitSelectedItemChanged(item)"
diff --git a/packages/x-components/src/components/items-list.vue b/packages/x-components/src/components/items-list.vue
index 781521cb76..206beb7fa2 100644
--- a/packages/x-components/src/components/items-list.vue
+++ b/packages/x-components/src/components/items-list.vue
@@ -7,9 +7,8 @@
     data-test="items-list"
   >
     <li
-      v-for="(item, index) in computedItems"
+      v-for="item in computedItems"
       :key="item.id"
-      :data-index="index"
       class="x-items-list__item"
       :class="item.class"
       :data-test="item.dataTest"
diff --git a/packages/x-components/src/components/suggestions/base-suggestions.vue b/packages/x-components/src/components/suggestions/base-suggestions.vue
index f9ebb6e788..f7138f3f67 100644
--- a/packages/x-components/src/components/suggestions/base-suggestions.vue
+++ b/packages/x-components/src/components/suggestions/base-suggestions.vue
@@ -3,7 +3,6 @@
     <li
       v-for="(suggestion, index) in suggestionsToRender"
       :key="suggestionsKeys[index]"
-      :data-index="index"
       class="x-suggestions__item"
       :class="suggestionItemClass"
       data-test="suggestion-item"
diff --git a/packages/x-components/src/x-modules/facets/components/facets/facets.vue b/packages/x-components/src/x-modules/facets/components/facets/facets.vue
index 1df04f4578..7cb66653b1 100644
--- a/packages/x-components/src/x-modules/facets/components/facets/facets.vue
+++ b/packages/x-components/src/x-modules/facets/components/facets/facets.vue
@@ -1,9 +1,8 @@
 <template>
   <component :is="animation" v-if="hasFacets" class="x-facets-list" data-test="facets" tag="ul">
     <li
-      v-for="({ facet, slotNameById, slotNameByModelName }, facetId, index) in mappedFacets"
+      v-for="({ facet, slotNameById, slotNameByModelName }, facetId) in mappedFacets"
       :key="facetId"
-      :data-index="index"
       class="x-facets-list__item"
       data-test="facets-facet"
     >
diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
index 653200edaf..41b7be589a 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/filters-list.vue
@@ -8,9 +8,8 @@
     data-test="base-filters"
   >
     <li
-      v-for="(filter, index) in renderedFilters"
+      v-for="filter in renderedFilters"
       :key="filter.id"
-      :data-index="index"
       class="x-filters__item"
       data-test="base-filters-item"
     >
diff --git a/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue b/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue
index a6f61deeee..98f123fb14 100644
--- a/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue
+++ b/packages/x-components/src/x-modules/facets/components/lists/selected-filters-list.vue
@@ -11,9 +11,8 @@
       tag="ul"
     >
       <li
-        v-for="({ slotName, selectedFilter }, index) in mapSlot(selectedFilters)"
+        v-for="{ slotName, selectedFilter } in mapSlot(selectedFilters)"
         :key="selectedFilter.id"
-        :data-index="index"
         class="x-selected-filters-list__item"
         data-test="selected-filters-list-item"
       >
diff --git a/packages/x-components/src/x-modules/history-queries/components/my-history.vue b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
index 75504de86d..c789d4a3bd 100644
--- a/packages/x-components/src/x-modules/history-queries/components/my-history.vue
+++ b/packages/x-components/src/x-modules/history-queries/components/my-history.vue
@@ -1,9 +1,8 @@
 <template>
   <component :is="animation" v-if="hasHistoryQueries" class="x-my-history" tag="ul">
     <li
-      v-for="(historyQueries, date, index) in groupByDate"
+      v-for="(historyQueries, date) in groupByDate"
       :key="date"
-      :data-index="index"
       class="x-my-history-item"
       data-test="my-history-item"
     >
diff --git a/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue b/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue
index eafed3231a..dd3ea1f051 100644
--- a/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue
+++ b/packages/x-components/src/x-modules/identifier-results/components/identifier-results.vue
@@ -1,9 +1,8 @@
 <template>
   <component :is="animation" v-if="identifierResults.length" tag="ul" class="x-identifier-results">
     <li
-      v-for="(identifierResult, index) in identifierResultsToRender"
+      v-for="identifierResult in identifierResultsToRender"
       :key="identifierResult.id"
-      :data-index="index"
       class="x-identifier-results__item"
       data-test="identifier-results-item"
     >
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
index 697aec8ed4..2c4ba1a512 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
@@ -3,7 +3,6 @@
     <li
       v-for="(queryPreview, index) in renderedQueryPreviews"
       :key="index"
-      :data-index="index"
       data-test="query-preview-item"
     >
       <QueryPreview
diff --git a/packages/x-components/src/x-modules/recommendations/components/recommendations.vue b/packages/x-components/src/x-modules/recommendations/components/recommendations.vue
index 9befb6d5d3..4104077b2c 100644
--- a/packages/x-components/src/x-modules/recommendations/components/recommendations.vue
+++ b/packages/x-components/src/x-modules/recommendations/components/recommendations.vue
@@ -7,9 +7,8 @@
     class="x-recommendations"
   >
     <li
-      v-for="(recommendation, index) in recommendations"
+      v-for="recommendation in recommendations"
       :key="recommendation.id"
-      :data-index="index"
       class="x-recommendations__item"
       data-test="recommendation-item"
     >
diff --git a/packages/x-components/src/x-modules/related-tags/components/related-tags.vue b/packages/x-components/src/x-modules/related-tags/components/related-tags.vue
index bdedeffc62..42c473fddd 100644
--- a/packages/x-components/src/x-modules/related-tags/components/related-tags.vue
+++ b/packages/x-components/src/x-modules/related-tags/components/related-tags.vue
@@ -7,9 +7,8 @@
     data-test="related-tags"
   >
     <li
-      v-for="(relatedTag, index) in relatedTags"
+      v-for="relatedTag in relatedTags"
       :key="relatedTag.query"
-      :data-index="index"
       class="x-related-tags__item"
       data-test="related-tag-item"
     >
diff --git a/packages/x-components/src/x-modules/search/components/partial-results-list.vue b/packages/x-components/src/x-modules/search/components/partial-results-list.vue
index f0e5f88ff7..7af1027b26 100644
--- a/packages/x-components/src/x-modules/search/components/partial-results-list.vue
+++ b/packages/x-components/src/x-modules/search/components/partial-results-list.vue
@@ -9,7 +9,6 @@
     <li
       v-for="(partialResult, index) in partialResults"
       :key="`${partialResult.query}-${index}`"
-      :data-index="index"
       class="x-partial-result"
       data-test="partial-result"
     >
diff --git a/packages/x-components/src/x-modules/search/components/sort-list.vue b/packages/x-components/src/x-modules/search/components/sort-list.vue
index 04094c9a1c..7591acf891 100644
--- a/packages/x-components/src/x-modules/search/components/sort-list.vue
+++ b/packages/x-components/src/x-modules/search/components/sort-list.vue
@@ -1,9 +1,8 @@
 <template>
   <component :is="animation" tag="ul" class="x-option-list x-sort-list" data-test="sort-list">
     <li
-      v-for="({ item, cssClasses, event }, index) in listItems"
+      v-for="{ item, cssClasses, event } in listItems"
       :key="item"
-      :data-index="index"
       :class="cssClasses"
       class="x-option-list__item x-sort-list__item"
     >
diff --git a/packages/x-components/src/x-modules/search/components/sort-picker-list.vue b/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
index dd244c075a..9239222fee 100644
--- a/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
+++ b/packages/x-components/src/x-modules/search/components/sort-picker-list.vue
@@ -7,9 +7,8 @@
     role="list"
   >
     <BaseEventButton
-      v-for="({ item, cssClasses, event }, index) in listItems"
+      v-for="{ item, cssClasses, event } in listItems"
       :key="item"
-      :data-index="index"
       :class="[cssClasses, buttonClass]"
       data-test="sort-picker-button"
       :events="event"

From fb7a2df76654d1833852a2263f0085f51e80b694 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Thu, 15 Aug 2024 17:13:17 +0200
Subject: [PATCH 09/11] fix(staggered-fade-and-slide): remove useless
 data-index

---
 packages/x-components/src/components/base-grid.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/x-components/src/components/base-grid.vue b/packages/x-components/src/components/base-grid.vue
index 7bc621710f..4306a12f05 100644
--- a/packages/x-components/src/components/base-grid.vue
+++ b/packages/x-components/src/components/base-grid.vue
@@ -9,9 +9,8 @@
     data-test="grid"
   >
     <li
-      v-for="({ item, cssClass, slotName }, index) in gridItems"
+      v-for="{ item, cssClass, slotName } in gridItems"
       :key="item.id"
-      :data-index="index"
       :class="cssClass"
       class="x-base-grid__item"
     >

From b6e60c749751f9410b9d171f21827f06985004b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Mon, 19 Aug 2024 10:49:48 +0200
Subject: [PATCH 10/11] fix(staggered-fade-and-slide): filter already animated
 elements

---
 .../staggered-fade-and-slide.spec.ts          |  8 ---
 .../animations/staggered-fade-and-slide.vue   | 51 ++++++++++++-------
 packages/x-components/src/views/home/Home.vue |  6 ++-
 3 files changed, 39 insertions(+), 26 deletions(-)

diff --git a/packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts b/packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts
index 70d2c19dbe..08285a229f 100644
--- a/packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts
+++ b/packages/x-components/src/components/animations/__tests__/staggered-fade-and-slide.spec.ts
@@ -75,25 +75,17 @@ describe('testing StaggeredFadeAndSlide component', () => {
     expect(elements[1].element.style.transitionDelay).not.toBe('0ms');
     expect(elements[2].element.style.transitionDelay).not.toBe('0ms');
 
-    expect(elements[0].element.dataset.animated).toBe('true');
-    expect(elements[1].element.dataset.animated).toBeUndefined();
-    expect(elements[2].element.dataset.animated).toBeUndefined();
-
     // Once the previous transition is finished wait for the stagger delay
     jest.advanceTimersByTime(stagger);
 
     expect(elements[1].element.style.transitionDelay).toBe('0ms');
     expect(elements[2].element.style.transitionDelay).not.toBe('0ms');
 
-    expect(elements[1].element.dataset.animated).toBe('true');
-    expect(elements[2].element.dataset.animated).toBeUndefined();
-
     // Once the previous transition is finished wait for the stagger delay
     jest.advanceTimersByTime(stagger);
 
     for (const el of elements) {
       expect(el.element.style.transitionDelay).toBe('0ms');
-      expect(el.element.dataset.animated).toBe('true');
     }
   });
 });
diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index b085b63231..bb4e27c5b4 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, onUpdated } from 'vue';
   import { useDisableAnimation } from './use-disable-animation';
 
   /**
@@ -42,10 +42,22 @@
     setup(props) {
       /** The duration of the transition in ms. */
       const transitionDuration = 250;
-
+      /** Indicates if there are new elements to animate. */
+      let isNewSet = true;
+      /** The new elements to animate. */
+      let elementsToAnimate: Element[] = [];
       /** The name of the animation. */
       const { name } = useDisableAnimation('x-staggered-fade-and-slide');
 
+      /**
+       * When the component is updated, we are considering that
+       * a new set of elements is being inserted, so we need
+       * to refresh the elements to animate.
+       */
+      onUpdated(() => {
+        isNewSet = true;
+      });
+
       /**
        * Listener called when one frame the element is inserted.
        * This calculates the stagger delay to be used as `transitionDelay` and finally resolve
@@ -54,26 +66,32 @@
        * @param el - Element inserted.
        * @param done - Callback to indicate the transition end.
        */
-      function onEnter(el: HTMLElement, done: () => void) {
-        const elIndex = findAnimationIndex(el);
+      function onEnter(el: Element, done: () => void) {
+        if (isNewSet) {
+          refreshElementsToAnimate(el);
+        }
+
+        const elIndex = elementsToAnimate.indexOf(el);
         const staggerDelay = elIndex > 0 ? elIndex * props.stagger : 0;
 
-        el.style.transitionDelay = `${staggerDelay}ms`;
+        (el as HTMLElement).style.transitionDelay = `${staggerDelay}ms`;
         setTimeout(done, transitionDuration + staggerDelay);
       }
 
       /**
-       * Finds the index of the element in the parent children subset of new elements entering the DOM.
-       * This is achived by filtering out the elements that are already animated,
-       * which are those marked with the `data-animated` attribute.
+       * Finds he parent children subset of new elements entering the DOM.
+       * This is achieved by filtering out the elements that are already animated.
+       * Those with 'transition-delay' equal to '0ms' are considered already animated.
+       *
+       * Also marks isNewSet as false as the elements are already updated.
        *
-       * @param el - Element to find.
-       * @returns The index of the element in the parent children subset of new elements.
+       * @param el - Current element.
        */
-      function findAnimationIndex(el: HTMLElement) {
-        return [...el.parentElement!.children]
-          .filter(c => (c as HTMLElement).dataset.animated !== 'true')
-          .indexOf(el);
+      function refreshElementsToAnimate(el: Element) {
+        elementsToAnimate = [...el.parentElement!.children].filter(
+          c => (c as HTMLElement).style.transitionDelay !== '0ms'
+        );
+        isNewSet = false;
       }
 
       /**
@@ -83,9 +101,8 @@
        *
        * @param el - Element inserted.
        */
-      function onAfterEnter(el: HTMLElement) {
-        el.style.transitionDelay = '0ms';
-        el.dataset.animated = 'true';
+      function onAfterEnter(el: Element) {
+        (el as HTMLElement).style.transitionDelay = '0ms';
       }
 
       return {
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index 5e97b3c6e9..d7cdf47c11 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -136,7 +136,11 @@
               <template #sliding-panel-left-button>
                 <ChevronLeft />
               </template>
-              <RelatedTags class="x-gap-8" itemClass="x-tag-outlined" />
+              <RelatedTags
+                :animation="resultsAnimation"
+                class="x-gap-8"
+                itemClass="x-tag-outlined"
+              />
               <template #sliding-panel-right-button>
                 <ChevronRight />
               </template>

From a44f3c1d21d164755d336539ec61bca360e8e536 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vi=CC=81ctor=20CG?= <victorcg@empathy.co>
Date: Mon, 19 Aug 2024 13:40:13 +0200
Subject: [PATCH 11/11] feat(staggered-fade-and-slide): update documentation

---
 .../src/components/animations/staggered-fade-and-slide.vue   | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index bb4e27c5b4..4842d30f7b 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -79,7 +79,7 @@
       }
 
       /**
-       * Finds he parent children subset of new elements entering the DOM.
+       * Finds he parent's children subset of new elements entering the DOM.
        * This is achieved by filtering out the elements that are already animated.
        * Those with 'transition-delay' equal to '0ms' are considered already animated.
        *
@@ -96,8 +96,7 @@
 
       /**
        * Listener called when the enter transition has finished.
-       * This resets the `transitionDelay` and add mark the element as animated,
-       * setting the `data-animated` attribute to `true`.
+       * This resets the `transitionDelay`.
        *
        * @param el - Element inserted.
        */