From 00941a375632811d32f61088e161bcdf08edcc20 Mon Sep 17 00:00:00 2001
From: albertjcuac <albertjcuac@gmail.com>
Date: Mon, 25 Mar 2024 15:54:34 +0100
Subject: [PATCH 01/41] feat: migrating to vue 2.7 sintax and using
 hybridInject

---
 .../scroll/components/main-scroll-item.vue    | 171 ++++++++++--------
 1 file changed, 93 insertions(+), 78 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index 9f67b2e50f..77aa4f846e 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -1,15 +1,14 @@
 <template>
-  <component :is="tag" v-on="$listeners" :data-scroll="item.id">
+  <component :is="tag" ref="el" v-on="$listeners" :data-scroll="item.id">
     <slot />
   </component>
 </template>
 <script lang="ts">
   import { Identifiable } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { NoElement, State, xComponentMixin } from '../../../components';
-  import { XInject } from '../../../components/decorators/injection.decorators';
+  import Vue, { defineComponent, nextTick, PropType, ref } from 'vue';
+  import { NoElement } from '../../../components';
   import { scrollXModule } from '../x-module';
+  import { useState, useHybridInject, useRegisterXModule, use$x } from '../../../composables';
   import { ScrollObserverKey } from './scroll.const';
   import { ScrollVisibilityObserver } from './scroll.types';
 
@@ -19,50 +18,84 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(scrollXModule)]
-  })
-  export default class MainScrollItem extends Vue {
-    /**
-     * Rendered HTML node.
-     *
-     * @public
-     */
-    public $el!: HTMLElement;
-
-    /**
-     * The item data. Used to set the scroll identifier.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    public item!: Identifiable;
-
-    /**
-     * The tag to render.
-     *
-     * @public
-     */
-    @Prop({ default: () => NoElement })
-    public tag!: string | typeof Vue;
-
-    /**
-     * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}
-     * `id` property, this component should be scrolled into view.
-     *
-     * @internal
-     */
-    @State('scroll', 'pendingScrollTo')
-    public pendingScrollTo!: string;
-
-    /**
-     * Observer to detect the first visible element.
-     *
-     * @internal
-     */
-    @XInject(ScrollObserverKey)
-    public firstVisibleItemObserver!: ScrollVisibilityObserver | null;
-
+  export default defineComponent({
+    name: 'MainScrollItem',
+    props: {
+      /**
+       * The item data. Used to set the scroll identifier.
+       *
+       * @public
+       */
+      item: {
+        type: Object as PropType<Identifiable>,
+        required: true
+      },
+      /**
+       * The tag to render.
+       *
+       * @public
+       */
+      tag: {
+        type: [String, Object] as PropType<string | typeof Vue>,
+        default: () => NoElement
+      }
+    },
+
+    setup(props) {
+      useRegisterXModule(scrollXModule);
+      const $x = use$x();
+      /**
+       * Rendered HTML node.
+       *
+       * @public
+       */
+      const el = ref<HTMLElement | null>(null);
+
+      /**
+       * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}
+       * `id` property, this component should be scrolled into view.
+       *
+       * @internal
+       */
+      const pendingScrollTo: string = useState('scroll', ['pendingScrollTo']).pendingScrollTo.value;
+
+      /**
+       * Observer to detect the first visible element.
+       *
+       * @internal
+       */
+      const firstVisibleItemObserver = useHybridInject<ScrollVisibilityObserver>(
+        ScrollObserverKey as string
+      ) as ScrollVisibilityObserver;
+
+      /**
+       * Initialises the element visibility observation, stopping the previous one if it has.
+       *
+       * @param newObserver - The new observer for the HTML element.
+       * @param oldObserver - The old observer for the HTML element.
+       */
+      const observeItem = (
+        newObserver: ScrollVisibilityObserver | null,
+        oldObserver: ScrollVisibilityObserver | null
+      ): void => {
+        {
+          if (el.value !== null && el.value instanceof HTMLElement) {
+            oldObserver?.unobserve(el.value);
+            newObserver?.observe(el.value);
+            if (pendingScrollTo === props.item.id) {
+              Vue.nextTick(() => {
+                el.value?.scrollIntoView({
+                  block: 'center'
+                });
+              });
+              $x.emit('ScrollRestoreSucceeded');
+            }
+          }
+        }
+      };
+
+      return { el, firstVisibleItemObserver, observeItem };
+    },
     /**
      * Initialise scroll behavior.
      * - Observes the rendered element to detect if it is the first visible item.
@@ -71,43 +104,25 @@
      *
      * @internal
      */
-    async mounted(): Promise<void> {
-      await this.$nextTick(); // Mounted does not guarantee that child components are mounted too
-      // eslint-disable-next-line @typescript-eslint/unbound-method
-      this.$watch('firstVisibleItemObserver', this.observeItem, { immediate: true });
-    }
+    mounted() {
+      nextTick(() => {
+        // Mounted does not guarantee that child components are mounted too
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        this.$watch('firstVisibleItemObserver', this.observeItem, { immediate: true });
+      });
+    },
 
     /**
      * Detaches the observer from the rendered element to prevent memory leaks.
      *
      * @internal
      */
-    beforeDestroy(): void {
-      this.firstVisibleItemObserver?.unobserve(this.$el);
-    }
-
-    /**
-     * Initialises the element visibility observation, stopping the previous one if it has.
-     *
-     * @param newObserver - The new observer for the HTML element.
-     * @param oldObserver - The old observer for the HTML element.
-     */
-    observeItem(
-      newObserver: ScrollVisibilityObserver | null,
-      oldObserver: ScrollVisibilityObserver | null
-    ): void {
-      oldObserver?.unobserve(this.$el);
-      newObserver?.observe(this.$el);
-      if (this.pendingScrollTo === this.item.id) {
-        Vue.nextTick(() => {
-          this.$el.scrollIntoView({
-            block: 'center'
-          });
-        });
-        this.$x.emit('ScrollRestoreSucceeded');
+    beforeDestroy() {
+      if (this.el !== null && this.el instanceof HTMLElement) {
+        this.firstVisibleItemObserver?.unobserve(this.el);
       }
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">

From 561408c745b5f71cb9719534bbea5bdfb5d459db Mon Sep 17 00:00:00 2001
From: albertjcuac <albertjcuac@gmail.com>
Date: Tue, 26 Mar 2024 09:13:56 +0100
Subject: [PATCH 02/41] chore: add space between doc comments and precious code
 lines

---
 .../src/x-modules/scroll/components/main-scroll-item.vue       | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index 77aa4f846e..894cfb87e4 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -30,6 +30,7 @@
         type: Object as PropType<Identifiable>,
         required: true
       },
+
       /**
        * The tag to render.
        *
@@ -44,6 +45,7 @@
     setup(props) {
       useRegisterXModule(scrollXModule);
       const $x = use$x();
+
       /**
        * Rendered HTML node.
        *
@@ -96,6 +98,7 @@
 
       return { el, firstVisibleItemObserver, observeItem };
     },
+
     /**
      * Initialise scroll behavior.
      * - Observes the rendered element to detect if it is the first visible item.

From 37a33d6e390f0d4bbf6ba800d8ede2a6351c0566 Mon Sep 17 00:00:00 2001
From: albertjcuac <albertjcuac@gmail.com>
Date: Tue, 26 Mar 2024 09:51:05 +0100
Subject: [PATCH 03/41] chore: change @link comment to point to props.item
 correctly

---
 .../src/x-modules/scroll/components/main-scroll-item.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index 894cfb87e4..c1d529db5f 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -54,7 +54,7 @@
       const el = ref<HTMLElement | null>(null);
 
       /**
-       * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}
+       * Pending identifier scroll position to restore. If it matches the {@link props.item}
        * `id` property, this component should be scrolled into view.
        *
        * @internal

From b725dcddcdf707823bf6e07ad14b244c9a109037 Mon Sep 17 00:00:00 2001
From: albertjcuac <albertjcuac@gmail.com>
Date: Tue, 26 Mar 2024 10:07:00 +0100
Subject: [PATCH 04/41] chore: removing @link in docs comment

---
 .../src/x-modules/scroll/components/main-scroll-item.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index c1d529db5f..82eeb0748b 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -54,7 +54,7 @@
       const el = ref<HTMLElement | null>(null);
 
       /**
-       * Pending identifier scroll position to restore. If it matches the {@link props.item}
+       * Pending identifier scroll position to restore. If it matches the item
        * `id` property, this component should be scrolled into view.
        *
        * @internal

From bf7e95ae32e2cb44d6505a8960473928eb42664b Mon Sep 17 00:00:00 2001
From: albertjcuac <albertjcuac@gmail.com>
Date: Tue, 26 Mar 2024 11:23:10 +0100
Subject: [PATCH 05/41] feat: use useXBus composable instead of use and fix
 docs warning

---
 .../src/x-modules/scroll/components/main-scroll-item.vue | 9 +++++----
 .../src/x-modules/scroll/components/main-scroll.vue      | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index 82eeb0748b..9af8cd4f32 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -8,9 +8,10 @@
   import Vue, { defineComponent, nextTick, PropType, ref } from 'vue';
   import { NoElement } from '../../../components';
   import { scrollXModule } from '../x-module';
-  import { useState, useHybridInject, useRegisterXModule, use$x } from '../../../composables';
+  import { useState, useHybridInject, useRegisterXModule } from '../../../composables';
   import { ScrollObserverKey } from './scroll.const';
   import { ScrollVisibilityObserver } from './scroll.types';
+  import { useXBus } from '../../../composables/use-x-bus';
 
   /**
    * Wrapper for elements contained in the {@link MainScroll} that should store/restore its
@@ -44,7 +45,7 @@
 
     setup(props) {
       useRegisterXModule(scrollXModule);
-      const $x = use$x();
+      const xBus = useXBus();
 
       /**
        * Rendered HTML node.
@@ -54,7 +55,7 @@
       const el = ref<HTMLElement | null>(null);
 
       /**
-       * Pending identifier scroll position to restore. If it matches the item
+       * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
        * `id` property, this component should be scrolled into view.
        *
        * @internal
@@ -90,7 +91,7 @@
                   block: 'center'
                 });
               });
-              $x.emit('ScrollRestoreSucceeded');
+              xBus.emit('ScrollRestoreSucceeded');
             }
           }
         }
diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
index 9c9f970eb5..2cca410fff 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
@@ -90,7 +90,7 @@
     protected restoreScrollFailTimeoutId?: number;
 
     /**
-     * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem.item}
+     * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
      * `id` property, this component should be scrolled into view.
      *
      * @internal

From 6504b4b3bb8bf3b96a56bdde97a3fa1e1c09043d Mon Sep 17 00:00:00 2001
From: albertjcuac <albertjcuac@gmail.com>
Date: Wed, 27 Mar 2024 08:44:54 +0100
Subject: [PATCH 06/41] feat: change import order to avoid lint error

---
 .../src/x-modules/scroll/components/main-scroll-item.vue        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index 9af8cd4f32..4159da6f81 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -9,9 +9,9 @@
   import { NoElement } from '../../../components';
   import { scrollXModule } from '../x-module';
   import { useState, useHybridInject, useRegisterXModule } from '../../../composables';
+  import { useXBus } from '../../../composables/use-x-bus';
   import { ScrollObserverKey } from './scroll.const';
   import { ScrollVisibilityObserver } from './scroll.types';
-  import { useXBus } from '../../../composables/use-x-bus';
 
   /**
    * Wrapper for elements contained in the {@link MainScroll} that should store/restore its

From 86a9c529de479b0669283e5bb491a2b8b53634ba Mon Sep 17 00:00:00 2001
From: albertjcuac <albertjcuac@gmail.com>
Date: Wed, 27 Mar 2024 16:04:27 +0100
Subject: [PATCH 07/41] feat: getting correctly  value and provisional use of
 any type

---
 .../scroll/components/main-scroll-item.vue         | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index 4159da6f81..d02d56a590 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -52,7 +52,7 @@
        *
        * @public
        */
-      const el = ref<HTMLElement | null>(null);
+      const el = ref<any>(null);
 
       /**
        * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
@@ -82,12 +82,12 @@
         oldObserver: ScrollVisibilityObserver | null
       ): void => {
         {
-          if (el.value !== null && el.value instanceof HTMLElement) {
-            oldObserver?.unobserve(el.value);
-            newObserver?.observe(el.value);
+          if (el.value !== null) {
+            oldObserver?.unobserve(el.value.$el);
+            newObserver?.observe(el.value.$el);
             if (pendingScrollTo === props.item.id) {
               Vue.nextTick(() => {
-                el.value?.scrollIntoView({
+                el.value?.$el.scrollIntoView({
                   block: 'center'
                 });
               });
@@ -122,8 +122,8 @@
      * @internal
      */
     beforeDestroy() {
-      if (this.el !== null && this.el instanceof HTMLElement) {
-        this.firstVisibleItemObserver?.unobserve(this.el);
+      if (this.el !== null) {
+        this.firstVisibleItemObserver?.unobserve(this.el.$el);
       }
     }
   });

From cd76aa35100661a8e3998aad175e7f2f555b26be Mon Sep 17 00:00:00 2001
From: albertjcuac <albertjcuac@gmail.com>
Date: Thu, 28 Mar 2024 10:20:59 +0100
Subject: [PATCH 08/41] feat: create ElementRef interface to avoid use of any

---
 .../src/x-modules/scroll/components/main-scroll-item.vue     | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index d02d56a590..3ea689bed4 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -44,6 +44,9 @@
     },
 
     setup(props) {
+      interface ElementRef {
+        $el: HTMLElement;
+      }
       useRegisterXModule(scrollXModule);
       const xBus = useXBus();
 
@@ -52,7 +55,7 @@
        *
        * @public
        */
-      const el = ref<any>(null);
+      const el = ref<ElementRef | null>(null);
 
       /**
        * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item

From 3d55c2ac22fe89ecbc33fd1e6582a7e02ddec3a8 Mon Sep 17 00:00:00 2001
From: albertjcuac <albertjcuac@gmail.com>
Date: Tue, 2 Apr 2024 13:38:32 +0200
Subject: [PATCH 09/41] feat: use of native inject instead of hybrid inject

---
 .../scroll/components/main-scroll-item.vue         | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index 3ea689bed4..2697e861c6 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -5,10 +5,10 @@
 </template>
 <script lang="ts">
   import { Identifiable } from '@empathyco/x-types';
-  import Vue, { defineComponent, nextTick, PropType, ref } from 'vue';
+  import Vue, { defineComponent, inject, nextTick, PropType, ref } from 'vue';
   import { NoElement } from '../../../components';
   import { scrollXModule } from '../x-module';
-  import { useState, useHybridInject, useRegisterXModule } from '../../../composables';
+  import { useState, useRegisterXModule } from '../../../composables';
   import { useXBus } from '../../../composables/use-x-bus';
   import { ScrollObserverKey } from './scroll.const';
   import { ScrollVisibilityObserver } from './scroll.types';
@@ -47,6 +47,10 @@
       interface ElementRef {
         $el: HTMLElement;
       }
+      interface InjectedScrollVisibilityObserver {
+        value: ScrollVisibilityObserver;
+      }
+
       useRegisterXModule(scrollXModule);
       const xBus = useXBus();
 
@@ -70,9 +74,9 @@
        *
        * @internal
        */
-      const firstVisibleItemObserver = useHybridInject<ScrollVisibilityObserver>(
-        ScrollObserverKey as string
-      ) as ScrollVisibilityObserver;
+      const firstVisibleItemObserver = (
+        inject(ScrollObserverKey as string) as InjectedScrollVisibilityObserver
+      ).value;
 
       /**
        * Initialises the element visibility observation, stopping the previous one if it has.

From 4eaab8376bf070747322d91fc6aaa2c3be1571a2 Mon Sep 17 00:00:00 2001
From: albertjcuac <albertjcuac@gmail.com>
Date: Mon, 8 Apr 2024 14:29:15 +0200
Subject: [PATCH 10/41] feat: implementing conditional to take into account 
 that the item can be a dom element

---
 .../scroll/components/main-scroll-item.vue    | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index 2697e861c6..e39a6ab3d8 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -44,9 +44,9 @@
     },
 
     setup(props) {
-      interface ElementRef {
+      type ElementRef = {
         $el: HTMLElement;
-      }
+      };
       interface InjectedScrollVisibilityObserver {
         value: ScrollVisibilityObserver;
       }
@@ -59,7 +59,7 @@
        *
        * @public
        */
-      const el = ref<ElementRef | null>(null);
+      const el = ref<ElementRef | HTMLElement | null>(null);
 
       /**
        * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
@@ -78,6 +78,17 @@
         inject(ScrollObserverKey as string) as InjectedScrollVisibilityObserver
       ).value;
 
+      /**
+       * 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;
+      };
       /**
        * Initialises the element visibility observation, stopping the previous one if it has.
        *
@@ -90,11 +101,13 @@
       ): void => {
         {
           if (el.value !== null) {
-            oldObserver?.unobserve(el.value.$el);
-            newObserver?.observe(el.value.$el);
+            const htmlElement = isElementRef(el.value) ? el.value.$el : el.value;
+
+            oldObserver?.unobserve(htmlElement);
+            newObserver?.observe(htmlElement);
             if (pendingScrollTo === props.item.id) {
               Vue.nextTick(() => {
-                el.value?.$el.scrollIntoView({
+                htmlElement.scrollIntoView({
                   block: 'center'
                 });
               });
@@ -104,7 +117,7 @@
         }
       };
 
-      return { el, firstVisibleItemObserver, observeItem };
+      return { el, firstVisibleItemObserver, observeItem, isElementRef };
     },
 
     /**
@@ -130,7 +143,8 @@
      */
     beforeDestroy() {
       if (this.el !== null) {
-        this.firstVisibleItemObserver?.unobserve(this.el.$el);
+        const htmlElement = this.isElementRef(this.el) ? this.el.$el : this.el;
+        this.firstVisibleItemObserver?.unobserve(htmlElement);
       }
     }
   });

From e9602a492b07f7960b1a46ac31b478ae4d42c798 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Tue, 9 Apr 2024 11:50:16 +0200
Subject: [PATCH 11/41] feat: move lifecycle hooks into the setup method

---
 .../scroll/components/main-scroll-item.vue    | 76 ++++++++++---------
 1 file changed, 41 insertions(+), 35 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index e39a6ab3d8..f163254b34 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -5,7 +5,18 @@
 </template>
 <script lang="ts">
   import { Identifiable } from '@empathyco/x-types';
-  import Vue, { defineComponent, inject, nextTick, PropType, ref } from 'vue';
+  import Vue, {
+    defineComponent,
+    inject,
+    nextTick,
+    onBeforeUnmount,
+    onMounted,
+    PropType,
+    ref,
+    watch,
+    Ref,
+    WatchCallback
+  } from 'vue';
   import { NoElement } from '../../../components';
   import { scrollXModule } from '../x-module';
   import { useState, useRegisterXModule } from '../../../composables';
@@ -47,9 +58,6 @@
       type ElementRef = {
         $el: HTMLElement;
       };
-      interface InjectedScrollVisibilityObserver {
-        value: ScrollVisibilityObserver;
-      }
 
       useRegisterXModule(scrollXModule);
       const xBus = useXBus();
@@ -74,10 +82,9 @@
        *
        * @internal
        */
-      const firstVisibleItemObserver = (
-        inject(ScrollObserverKey as string) as InjectedScrollVisibilityObserver
-      ).value;
-
+      const firstVisibleItemObserver: Ref<ScrollVisibilityObserver> = inject<
+        Ref<ScrollVisibilityObserver>
+      >(ScrollObserverKey as string) as Ref<ScrollVisibilityObserver>;
       /**
        * Checks if a given value is an `ElementRef` object.
        *
@@ -95,7 +102,7 @@
        * @param newObserver - The new observer for the HTML element.
        * @param oldObserver - The old observer for the HTML element.
        */
-      const observeItem = (
+      const observeItem: WatchCallback<ScrollVisibilityObserver> = (
         newObserver: ScrollVisibilityObserver | null,
         oldObserver: ScrollVisibilityObserver | null
       ): void => {
@@ -117,35 +124,34 @@
         }
       };
 
-      return { el, firstVisibleItemObserver, observeItem, isElementRef };
-    },
+      /**
+       * Detaches the observer from the rendered element to prevent memory leaks.
+       *
+       * @internal
+       */
+      onBeforeUnmount(() => {
+        if (el.value !== null) {
+          const htmlElement = isElementRef(el.value) ? el.value.$el : el.value;
+          firstVisibleItemObserver?.value.unobserve(htmlElement);
+        }
+      });
 
-    /**
-     * Initialise scroll behavior.
-     * - Observes the rendered element to detect if it is the first visible item.
-     * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the
-     * element into the first position of the view.
-     *
-     * @internal
-     */
-    mounted() {
-      nextTick(() => {
-        // Mounted does not guarantee that child components are mounted too
-        // eslint-disable-next-line @typescript-eslint/unbound-method
-        this.$watch('firstVisibleItemObserver', this.observeItem, { immediate: true });
+      /**
+       * Initialise scroll behavior.
+       * - Observes the rendered element to detect if it is the first visible item.
+       * - If the rendered element matches the {@link MainScrollItem.pendingScrollTo}, scrolls the
+       * element into the first position of the view.
+       *
+       * @internal
+       */
+      onMounted(() => {
+        nextTick(() => {
+          // Mounted does not guarantee that child components are mounted too
+          watch(ref(firstVisibleItemObserver.value), observeItem, { immediate: true });
+        });
       });
-    },
 
-    /**
-     * Detaches the observer from the rendered element to prevent memory leaks.
-     *
-     * @internal
-     */
-    beforeDestroy() {
-      if (this.el !== null) {
-        const htmlElement = this.isElementRef(this.el) ? this.el.$el : this.el;
-        this.firstVisibleItemObserver?.unobserve(htmlElement);
-      }
+      return { el, firstVisibleItemObserver, observeItem, isElementRef };
     }
   });
 </script>

From 23781731eaa71f8f0c8d552449c0e9e692445233 Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Wed, 10 Apr 2024 15:34:47 +0200
Subject: [PATCH 12/41] feat: migrate main-scroll to composition api syntax

---
 .../scroll/components/main-scroll.vue         | 474 ++++++++++--------
 .../tests/unit/main-scroll.spec.ts            |   5 +-
 2 files changed, 260 insertions(+), 219 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
index 2cca410fff..91602d6222 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
@@ -1,19 +1,26 @@
 <template>
-  <NoElement :class="dynamicClasses">
+  <NoElement ref="el" :class="dynamicClasses">
     <slot />
   </NoElement>
 </template>
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop, Watch } from 'vue-property-decorator';
-  import { XEmit } from '../../../components/decorators/bus.decorators';
-  import { XProvide } from '../../../components/decorators/injection.decorators';
-  import { State } from '../../../components/decorators/store.decorators';
+  import {
+    computed,
+    ComputedRef,
+    defineComponent,
+    onBeforeUnmount,
+    onMounted,
+    provide,
+    ref,
+    watch
+  } from 'vue';
+  import { Dictionary } from '@empathyco/x-utils';
   import { NoElement } from '../../../components/no-element';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
   import { VueCSSClasses } from '../../../utils/index';
   import { scrollXModule } from '../x-module';
   import { DISABLE_ANIMATIONS_KEY } from '../../../components/decorators/injection.consts';
+  import { useRegisterXModule, useState } from '../../../composables/index';
+  import { useXBus } from '../../../composables/use-x-bus';
   import { ScrollObserverKey } from './scroll.const';
   import { ScrollVisibilityObserver } from './scroll.types';
 
@@ -26,234 +33,267 @@
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'MainScroll',
     components: { NoElement },
-    mixins: [xComponentMixin(scrollXModule)]
-  })
-  /* eslint-disable @typescript-eslint/unbound-method */
-  export default class MainScroll extends Vue {
-    /**
-     * If `true`, sets this scroll instance to the main of the application. Being the main
-     * scroll implies that features like restoring the scroll when the query changes, or storing
-     * the scroll position in the URL will be enabled for this container.
-     *
-     * @public
-     */
-    @Prop({ default: false, type: Boolean })
-    public useWindow!: boolean;
-
-    /**
-     * Timeout in milliseconds to abort trying to restore the scroll position to the target
-     * element.
-     *
-     * @public
-     */
-    @Prop({ default: 5000 })
-    public restoreScrollTimeoutMs!: number;
-
-    /**
-     * Intersection percentage to consider an element visible.
-     *
-     * @public
-     */
-    @Prop({ default: 0.3 })
-    public threshold!: number;
-
-    /**
-     * Adjusts the size of the scroll container bounds.
-     *
-     * @public
-     */
-    @Prop({ default: '0px' })
-    public margin!: string;
-
-    /**
-     * The elements that are currently considered visible.
-     *
-     * @internal
-     */
-    protected intersectingElements: HTMLElement[] = [];
-
-    /**
-     * Intersection observer to determine visibility of the elements.
-     *
-     * @returns An intersection observer to detect elements visibility.
-     * @internal
-     */
-    protected intersectionObserver: IntersectionObserver | null = null;
-
-    /**
-     * Stores the identifier of the timeout that will consider the scroll failed to restore.
-     *
-     * @internal
-     */
-    protected restoreScrollFailTimeoutId?: number;
-
-    /**
-     * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
-     * `id` property, this component should be scrolled into view.
-     *
-     * @internal
-     */
-    @State('scroll', 'pendingScrollTo')
-    public pendingScrollTo!: string;
-
-    /**
-     * Disables the animations.
-     *
-     * @returns A boolean to disable the animations.
-     * @internal
-     */
-    @XProvide(DISABLE_ANIMATIONS_KEY)
-    public get disableAnimations(): boolean {
-      return !!this.pendingScrollTo;
-    }
+    props: {
+      /**
+       * If `true`, sets this scroll instance to the main of the application. Being the main
+       * scroll implies that features like restoring the scroll when the query changes, or storing
+       * the scroll position in the URL will be enabled for this container.
+       *
+       * @public
+       */
+      useWindow: {
+        type: Boolean,
+        default: false
+      },
+      /**
+       * Timeout in milliseconds to abort trying to restore the scroll position to the target
+       * element.
+       *
+       * @public
+       */
+      restoreScrollTimeoutMs: {
+        type: Number,
+        default: 5000
+      },
+      /**
+       * Intersection percentage to consider an element visible.
+       *
+       * @public
+       */
+      threshold: {
+        type: Number,
+        default: 0.3
+      },
+      /**
+       * Adjusts the size of the scroll container bounds.
+       *
+       * @public
+       */
+      margin: {
+        type: String,
+        default: '0px'
+      }
+    },
+    setup(props) {
+      type ElementRef = {
+        $el: HTMLElement;
+      };
+
+      useRegisterXModule(scrollXModule);
+
+      const xBus = useXBus();
+
+      const el = ref<HTMLElement | null>(null);
+
+      /**
+       * The elements that are currently considered visible.
+       *
+       * @internal
+       */
+      const intersectingElements = ref<HTMLElement[]>([]);
+
+      /**
+       * Intersection observer to determine visibility of the elements.
+       *
+       * @returns An intersection observer to detect elements visibility.
+       * @internal
+       */
+      let intersectionObserver = ref<IntersectionObserver | null>(null);
+
+      /**
+       * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
+       * `id` property, this component should be scrolled into view.
+       *
+       * @internal
+       */
+      const pendingScrollTo = useState('scroll', ['pendingScrollTo']);
+
+      /**
+       * Disables the animations.
+       *
+       * @returns A boolean to disable the animations.
+       * @internal
+       */
+      const disableAnimations = computed((): boolean => !!pendingScrollTo.pendingScrollTo.value);
+      provide(DISABLE_ANIMATIONS_KEY as string, disableAnimations);
+
+      /**
+       * Removes an element from the {@link MainScroll.intersectingElements} list.
+       *
+       * @param element - The element to remove from the visible elements.
+       * @internal
+       */
+      const removeVisibleElement = (element: HTMLElement): void => {
+        const index = intersectingElements.value.indexOf(element);
+        if (index !== -1) {
+          intersectingElements.value.splice(index, 1);
+        }
+      };
 
-    /**
-     * Creates an `IntersectionObserver` to detect the first visible elements. Children of this
-     * component should register themselves if they want to be observed.
-     *
-     * @returns The intersection observer.
-     * @public
-     */
-    @XProvide(ScrollObserverKey)
-    public get visibleElementsObserver(): ScrollVisibilityObserver | null {
-      const observer = this.intersectionObserver;
-      return observer
-        ? {
-            observe: observer.observe.bind(observer),
-            unobserve: element => {
-              this.removeVisibleElement(element);
-              observer.unobserve(element);
+      /**
+       * Creates an `IntersectionObserver` to detect the first visible elements. Children of this
+       * component should register themselves if they want to be observed.
+       *
+       * @returns The intersection observer.
+       * @public
+       */
+      const visibleElementsObserver = computed((): ScrollVisibilityObserver | null => {
+        const observer = intersectionObserver.value;
+        return observer
+          ? {
+              observe: observer.observe.bind(observer),
+              unobserve: element => {
+                removeVisibleElement(element);
+                observer.unobserve(element);
+              }
             }
+          : null;
+      });
+      provide(ScrollObserverKey as string, visibleElementsObserver);
+
+      /**
+       * Updates the visible elements given a list of intersection observer entries.
+       *
+       * @param entries - The entries from whom update the visibility.
+       * @internal
+       */
+      const updateVisibleElements = (entries: IntersectionObserverEntry[]): void => {
+        entries.forEach(entry => {
+          const target = entry.target as HTMLElement;
+          if (entry.isIntersecting) {
+            intersectingElements.value.push(target);
+          } else {
+            removeVisibleElement(target);
           }
-        : null;
-    }
-
-    /**
-     * The first visible element contained in this component.
-     *
-     * @returns The first visible element in this component.
-     * @internal
-     */
-    @XEmit('UserScrolledToElement')
-    public get firstVisibleElement(): string | '' {
-      if (this.intersectingElements.length === 0) {
-        return '';
-      }
-      const firstVisibleElement = this.intersectingElements.reduce(
-        (firstVisibleElement, anotherElement) => {
-          // FIXME: This algorithm only takes into account LTR layouts
-          const firstVisibleElementBounds = firstVisibleElement.getBoundingClientRect();
-          const anotherElementBounds = anotherElement.getBoundingClientRect();
-          return anotherElementBounds.left <= firstVisibleElementBounds.left &&
-            anotherElementBounds.top <= firstVisibleElementBounds.top
-            ? anotherElement
-            : firstVisibleElement;
-        }
-      );
+        });
+      };
 
-      return firstVisibleElement === this.$el.querySelector('[data-scroll]')
-        ? ''
-        : firstVisibleElement.dataset.scroll!;
-    }
+      /**
+       * 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;
+      };
 
-    /**
-     * Initialise the observer after mounting the component.
-     */
-    mounted(): void {
-      this.intersectionObserver = new IntersectionObserver(this.updateVisibleElements, {
-        root: this.useWindow ? document : this.$el,
-        threshold: this.threshold,
-        rootMargin: this.margin
+      /**
+       * Initialise the observer after mounting the component.
+       */
+      onMounted(() => {
+        intersectionObserver.value = new IntersectionObserver(updateVisibleElements, {
+          root: props.useWindow ? document : isElementRef(el.value) ? el.value.$el : el.value,
+          threshold: props.threshold,
+          rootMargin: props.margin
+        });
       });
-    }
 
-    /**
-     * Disconnects the intersection observer.
-     *
-     * @internal
-     */
-    beforeDestroy(): void {
-      this.intersectionObserver?.disconnect();
-      this.$x.emit('UserScrolledToElement', '');
-    }
+      /**
+       * Disconnects the intersection observer.
+       *
+       * @internal
+       */
+      onBeforeUnmount(() => {
+        intersectionObserver.value?.disconnect();
+        xBus.emit('UserScrolledToElement', '');
+      });
 
-    /**
-     * Disconnects the previous observer.
-     *
-     * @param _new - The new `IntersectionObserver`.
-     * @param old - The new `IntersectionObserver`.
-     * @internal
-     */
-    @Watch('intersectionObserver')
-    protected disconnectPreviousObserver(
-      _new: IntersectionObserver | null,
-      old: IntersectionObserver | null
-    ): void {
-      old?.disconnect();
-    }
+      /**
+       * Disconnects the previous observer.
+       *
+       * @param _new - The new `IntersectionObserver`.
+       * @param old - The new `IntersectionObserver`.
+       * @internal
+       */
+      watch(
+        intersectionObserver,
+        (_new: IntersectionObserver | null, old: IntersectionObserver | null) => {
+          old?.disconnect();
+        }
+      );
 
-    /**
-     * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.
-     *
-     * @param pendingScrollTo - The position the scroll should be restored to.
-     * @internal
-     */
-    @Watch('pendingScrollTo')
-    protected failRestoringScroll(pendingScrollTo: string | null): void {
-      // TODO Move this logic to the wiring. A cancelable delay operator is needed
-      clearTimeout(this.restoreScrollFailTimeoutId);
-      if (pendingScrollTo) {
-        this.restoreScrollFailTimeoutId = window.setTimeout(() => {
-          this.$x.emit('ScrollRestoreFailed');
-        }, this.restoreScrollTimeoutMs);
-      }
-    }
+      /**
+       * Stores the identifier of the timeout that will consider the scroll failed to restore.
+       *
+       * @internal
+       */
+      let restoreScrollFailTimeoutId: number;
+
+      /**
+       * If there is a pending scroll, starts a countdown to stop trying to restore the scroll.
+       *
+       * @param pendingScrollTo - The position the scroll should be restored to.
+       * @internal
+       */
+      watch(ref(pendingScrollTo.value), (pendingScrollTo: Dictionary<ComputedRef<any>> | null) => {
+        // TODO Move this logic to the wiring. A cancelable delay operator is needed
+        clearTimeout(restoreScrollFailTimeoutId);
+        if (pendingScrollTo!.pendingScrollTo.value) {
+          restoreScrollFailTimeoutId = window.setTimeout(() => {
+            xBus.emit('ScrollRestoreFailed');
+          }, props.restoreScrollTimeoutMs);
+        }
+      });
 
-    /**
-     * Removes an element from the {@link MainScroll.intersectingElements} list.
-     *
-     * @param element - The element to remove from the visible elements.
-     * @internal
-     */
-    protected removeVisibleElement(element: HTMLElement): void {
-      const index = this.intersectingElements.indexOf(element);
-      if (index !== -1) {
-        this.intersectingElements.splice(index, 1);
-      }
-    }
+      /**
+       * Adds the dynamic css classes to the component.
+       *
+       * @returns The class to be added to the component.
+       *
+       * @internal
+       */
+      const dynamicClasses = computed((): VueCSSClasses => {
+        return {
+          'x-main-scroll--no-transition': !!pendingScrollTo.pendingScrollTo.value
+        };
+      });
 
-    /**
-     * Updates the visible elements given a list of intersection observer entries.
-     *
-     * @param entries - The entries from whom update the visibility.
-     * @internal
-     */
-    protected updateVisibleElements(entries: IntersectionObserverEntry[]): void {
-      entries.forEach(entry => {
-        const target = entry.target as HTMLElement;
-        if (entry.isIntersecting) {
-          this.intersectingElements.push(target);
-        } else {
-          this.removeVisibleElement(target);
+      /**
+       * The first visible element contained in this component.
+       *
+       * @returns The first visible element in this component.
+       * @internal
+       */
+      const firstVisibleElement = computed((): string | '' => {
+        if (intersectingElements.value.length === 0) {
+          return '';
         }
+        const firstVisibleElement = intersectingElements.value.reduce(
+          (firstVisibleElement, anotherElement) => {
+            // FIXME: This algorithm only takes into account LTR layouts
+            const firstVisibleElementBounds = firstVisibleElement.getBoundingClientRect();
+            const anotherElementBounds = anotherElement.getBoundingClientRect();
+            return anotherElementBounds.left <= firstVisibleElementBounds.left &&
+              anotherElementBounds.top <= firstVisibleElementBounds.top
+              ? anotherElement
+              : firstVisibleElement;
+          }
+        );
+        const htmlElement = isElementRef(el.value) ? el.value.$el : el.value;
+        return firstVisibleElement === htmlElement?.querySelector('[data-scroll]')
+          ? ''
+          : firstVisibleElement.dataset.scroll!;
+      });
+      watch(firstVisibleElement, () => {
+        xBus.emit('UserScrolledToElement', firstVisibleElement.value);
       });
-    }
 
-    /**
-     * Adds the dynamic css classes to the component.
-     *
-     * @returns The class to be added to the component.
-     *
-     * @internal
-     */
-    protected get dynamicClasses(): VueCSSClasses {
       return {
-        'x-main-scroll--no-transition': !!this.pendingScrollTo
+        el,
+        dynamicClasses,
+        firstVisibleElement,
+        visibleElementsObserver,
+        isElementRef,
+        intersectingElements
       };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/tests/unit/main-scroll.spec.ts b/packages/x-components/tests/unit/main-scroll.spec.ts
index 802025c260..85782f8a35 100644
--- a/packages/x-components/tests/unit/main-scroll.spec.ts
+++ b/packages/x-components/tests/unit/main-scroll.spec.ts
@@ -8,6 +8,7 @@ import MainScroll from '../../src/x-modules/scroll/components/main-scroll.vue';
 import { scrollXModule } from '../../src/x-modules/scroll/x-module';
 import { e2eAdapter } from '../../src/adapter/e2e-adapter';
 import { XDummyBus } from '../../src/__tests__/bus.dummy';
+import { bus } from '../../src/plugins/x-bus';
 import { loadCss } from './css.utils';
 
 /**
@@ -87,9 +88,9 @@ function renderMainScroll({
         };
       },
       beforeCreate() {
-        XPlugin.bus.on('UserScrolledToElement').subscribe(userScrolledToElementSpy);
+        bus.on('UserScrolledToElement').subscribe(userScrolledToElementSpy);
         if (pendingScroll) {
-          XPlugin.bus.emit('ParamsLoadedFromUrl', <UrlParams>{ scroll: `item-${pendingScroll}` });
+          bus.emit('ParamsLoadedFromUrl', <UrlParams>{ scroll: `item-${pendingScroll}` });
         }
       }
     },

From 19580d7b0deae72113189446d53e95d89c2934fc Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 11 Apr 2024 09:19:26 +0200
Subject: [PATCH 13/41] chore: fix pendingScrollTo watcher

---
 .../x-modules/scroll/components/main-scroll.vue  | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
index 91602d6222..328ff63eb2 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
@@ -4,17 +4,7 @@
   </NoElement>
 </template>
 <script lang="ts">
-  import {
-    computed,
-    ComputedRef,
-    defineComponent,
-    onBeforeUnmount,
-    onMounted,
-    provide,
-    ref,
-    watch
-  } from 'vue';
-  import { Dictionary } from '@empathyco/x-utils';
+  import { computed, defineComponent, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
   import { NoElement } from '../../../components/no-element';
   import { VueCSSClasses } from '../../../utils/index';
   import { scrollXModule } from '../x-module';
@@ -231,10 +221,10 @@
        * @param pendingScrollTo - The position the scroll should be restored to.
        * @internal
        */
-      watch(ref(pendingScrollTo.value), (pendingScrollTo: Dictionary<ComputedRef<any>> | null) => {
+      watch(pendingScrollTo.pendingScrollTo, () => {
         // TODO Move this logic to the wiring. A cancelable delay operator is needed
         clearTimeout(restoreScrollFailTimeoutId);
-        if (pendingScrollTo!.pendingScrollTo.value) {
+        if (pendingScrollTo.pendingScrollTo.value) {
           restoreScrollFailTimeoutId = window.setTimeout(() => {
             xBus.emit('ScrollRestoreFailed');
           }, props.restoreScrollTimeoutMs);

From aab083d5bbe18a42e5b6f6af67e1af5a5a2b645d Mon Sep 17 00:00:00 2001
From: Laura Martinez Garcia <lauram@empathy.co>
Date: Thu, 11 Apr 2024 12:00:20 +0200
Subject: [PATCH 14/41] chore: fix pendingScrollTo reactivity

---
 .../x-modules/scroll/components/main-scroll-item.vue  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index f163254b34..b06110ff20 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -15,7 +15,8 @@
     ref,
     watch,
     Ref,
-    WatchCallback
+    WatchCallback,
+    ComputedRef
   } from 'vue';
   import { NoElement } from '../../../components';
   import { scrollXModule } from '../x-module';
@@ -75,7 +76,9 @@
        *
        * @internal
        */
-      const pendingScrollTo: string = useState('scroll', ['pendingScrollTo']).pendingScrollTo.value;
+      const pendingScrollTo: ComputedRef<string> = useState('scroll', [
+        'pendingScrollTo'
+      ]).pendingScrollTo;
 
       /**
        * Observer to detect the first visible element.
@@ -112,7 +115,7 @@
 
             oldObserver?.unobserve(htmlElement);
             newObserver?.observe(htmlElement);
-            if (pendingScrollTo === props.item.id) {
+            if (pendingScrollTo.value === props.item.id) {
               Vue.nextTick(() => {
                 htmlElement.scrollIntoView({
                   block: 'center'
@@ -147,7 +150,7 @@
       onMounted(() => {
         nextTick(() => {
           // Mounted does not guarantee that child components are mounted too
-          watch(ref(firstVisibleItemObserver.value), observeItem, { immediate: true });
+          watch(firstVisibleItemObserver, observeItem, { immediate: true });
         });
       });
 

From 3c3801c5eda9db114badb43b3e68b0c2de3e6047 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Tue, 16 Apr 2024 16:53:04 +0200
Subject: [PATCH 15/41] fix: scroll restore position

---
 .../src/components/animations/disable-animation.mixin.ts     | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/x-components/src/components/animations/disable-animation.mixin.ts b/packages/x-components/src/components/animations/disable-animation.mixin.ts
index a49e1c46ab..06b87130ea 100644
--- a/packages/x-components/src/components/animations/disable-animation.mixin.ts
+++ b/packages/x-components/src/components/animations/disable-animation.mixin.ts
@@ -1,6 +1,5 @@
 import Vue from 'vue';
-import { Component } from 'vue-property-decorator';
-import { XInject } from '../decorators/injection.decorators';
+import { Component, Inject } from 'vue-property-decorator';
 import { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';
 
 /**
@@ -22,7 +21,7 @@ export default class DisableAnimationMixin extends Vue {
    *
    * @public
    */
-  @XInject(DISABLE_ANIMATIONS_KEY)
+  @Inject(DISABLE_ANIMATIONS_KEY as string)
   public disableAnimation!: boolean;
 
   /**

From 7981136fc628b34e2f6c24cafe945e2d0e5db0c9 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Tue, 16 Apr 2024 16:53:34 +0200
Subject: [PATCH 16/41] fix: emit firstVisibleElement immediate

---
 .../src/x-modules/scroll/components/main-scroll.vue    | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
index 328ff63eb2..120430a0ae 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
@@ -270,9 +270,13 @@
           ? ''
           : firstVisibleElement.dataset.scroll!;
       });
-      watch(firstVisibleElement, () => {
-        xBus.emit('UserScrolledToElement', firstVisibleElement.value);
-      });
+      watch(
+        firstVisibleElement,
+        () => {
+          xBus.emit('UserScrolledToElement', firstVisibleElement.value);
+        },
+        { immediate: true }
+      );
 
       return {
         el,

From 75053b5a5bbec8abf25068b4b00e148de7f090df Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Wed, 17 Apr 2024 09:36:24 +0200
Subject: [PATCH 17/41] test: fix tests

---
 packages/x-components/tests/unit/main-scroll.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-components/tests/unit/main-scroll.spec.ts b/packages/x-components/tests/unit/main-scroll.spec.ts
index 85782f8a35..1c33fd0ba1 100644
--- a/packages/x-components/tests/unit/main-scroll.spec.ts
+++ b/packages/x-components/tests/unit/main-scroll.spec.ts
@@ -90,7 +90,7 @@ function renderMainScroll({
       beforeCreate() {
         bus.on('UserScrolledToElement').subscribe(userScrolledToElementSpy);
         if (pendingScroll) {
-          bus.emit('ParamsLoadedFromUrl', <UrlParams>{ scroll: `item-${pendingScroll}` });
+          XPlugin.bus.emit('ParamsLoadedFromUrl', <UrlParams>{ scroll: `item-${pendingScroll}` });
         }
       }
     },

From c604d8b0197b3e0c983cb59407241ca48a08e775 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Wed, 17 Apr 2024 11:23:29 +0200
Subject: [PATCH 18/41] test: use Provide over XProvide

---
 .../animations/__tests__/disable-animation-mixin.spec.ts     | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts b/packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts
index ba1c7f481a..c3bc5bf904 100644
--- a/packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts
+++ b/packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts
@@ -1,14 +1,13 @@
 import { mount, Wrapper } from '@vue/test-utils';
-import { Component, Prop } from 'vue-property-decorator';
+import { Component, Prop, Provide } from 'vue-property-decorator';
 import Vue, { ComponentOptions, CreateElement, VNode } from 'vue';
 import DisableAnimationMixin from '../disable-animation.mixin';
-import { XProvide } from '../../decorators/injection.decorators';
 import { DISABLE_ANIMATIONS_KEY } from '../../decorators/injection.consts';
 
 @Component
 class Provider extends Vue {
   @Prop()
-  @XProvide(DISABLE_ANIMATIONS_KEY)
+  @Provide(DISABLE_ANIMATIONS_KEY as string)
   public disableAnimation!: boolean;
 
   render(h: CreateElement): VNode {

From 9197b8f400fd1a9e8ac7d8e1e060f9b72e1428d8 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Mon, 22 Apr 2024 14:37:02 +0200
Subject: [PATCH 19/41] test: use the bus from the `XPlugin`

---
 packages/x-components/tests/unit/main-scroll.spec.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/x-components/tests/unit/main-scroll.spec.ts b/packages/x-components/tests/unit/main-scroll.spec.ts
index 1c33fd0ba1..802025c260 100644
--- a/packages/x-components/tests/unit/main-scroll.spec.ts
+++ b/packages/x-components/tests/unit/main-scroll.spec.ts
@@ -8,7 +8,6 @@ import MainScroll from '../../src/x-modules/scroll/components/main-scroll.vue';
 import { scrollXModule } from '../../src/x-modules/scroll/x-module';
 import { e2eAdapter } from '../../src/adapter/e2e-adapter';
 import { XDummyBus } from '../../src/__tests__/bus.dummy';
-import { bus } from '../../src/plugins/x-bus';
 import { loadCss } from './css.utils';
 
 /**
@@ -88,7 +87,7 @@ function renderMainScroll({
         };
       },
       beforeCreate() {
-        bus.on('UserScrolledToElement').subscribe(userScrolledToElementSpy);
+        XPlugin.bus.on('UserScrolledToElement').subscribe(userScrolledToElementSpy);
         if (pendingScroll) {
           XPlugin.bus.emit('ParamsLoadedFromUrl', <UrlParams>{ scroll: `item-${pendingScroll}` });
         }

From d60389e2a430967798d2032689e278d79a2c11b1 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Wed, 24 Apr 2024 11:05:17 +0200
Subject: [PATCH 20/41] add `MainScroll` and `MainScrollItem` to playground

---
 .../src/components/scroll/test-scroll.vue     | 29 +++++++++++++++++++
 packages/_vue3-migration-test/src/router.ts   |  6 ++++
 .../x-components/src/components/no-element.ts |  2 +-
 .../x-components/src/composables/use-state.ts |  2 +-
 .../scroll/components/main-scroll-item.vue    |  5 ++--
 .../scroll/components/main-scroll.vue         |  5 ++--
 6 files changed, 43 insertions(+), 6 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/components/scroll/test-scroll.vue

diff --git a/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue b/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue
new file mode 100644
index 0000000000..4916f166b2
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import MainScroll from '../../../../x-components/src/x-modules/scroll/components/main-scroll.vue';
+  // eslint-disable-next-line max-len
+  import MainScrollItem from '../../../../x-components/src/x-modules/scroll/components/main-scroll-item.vue';
+  const items = Array.from({ length: 24 }, (_, index) => ({ id: `item-${index}` }));
+</script>
+
+<template>
+  <MainScroll>
+    <ul class="list" data-test="scroll">
+      <MainScrollItem
+        v-for="item in items"
+        :key="item - id"
+        class="item"
+        tag="article"
+        :item="item"
+      >
+        {{ item.id }}
+      </MainScrollItem>
+    </ul>
+  </MainScroll>
+</template>
+
+<style scoped lang="scss">
+  .list {
+    overflow: auto;
+    height: 100px;
+  }
+</style>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 9ec37cfd11..638414a14f 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router';
+import TestScroll from './components/scroll/test-scroll.vue';
 import { TestAnimateWidth, TestFade } from './';
 
 const routes = [
@@ -11,6 +12,11 @@ const routes = [
     path: '/fade',
     name: 'Fade',
     component: TestFade
+  },
+  {
+    path: '/scroll',
+    name: 'Scroll',
+    component: TestScroll
   }
 ];
 
diff --git a/packages/x-components/src/components/no-element.ts b/packages/x-components/src/components/no-element.ts
index f46bb96a6e..ba4daaebb3 100644
--- a/packages/x-components/src/components/no-element.ts
+++ b/packages/x-components/src/components/no-element.ts
@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue';
-import { useNoElementRender } from '../composables/index';
+import { useNoElementRender } from '../composables/use-no-element-render';
 
 /**
  * The purpose of this Component is to use as default value for props that receive a Component that
diff --git a/packages/x-components/src/composables/use-state.ts b/packages/x-components/src/composables/use-state.ts
index 55612eb464..e26c4c47da 100644
--- a/packages/x-components/src/composables/use-state.ts
+++ b/packages/x-components/src/composables/use-state.ts
@@ -19,7 +19,7 @@ export function useState<
   const store = useStore();
 
   return paths.reduce<Dictionary<ComputedRef>>((stateDictionary, path) => {
-    stateDictionary[path] = computed(() => store.state.x[module]?.[path]);
+    stateDictionary[path] = computed(() => store?.state.x[module]?.[path]);
     return stateDictionary;
   }, {});
 }
diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index b06110ff20..50268f59c4 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -18,9 +18,10 @@
     WatchCallback,
     ComputedRef
   } from 'vue';
-  import { NoElement } from '../../../components';
+  import { NoElement } from '../../../components/no-element';
   import { scrollXModule } from '../x-module';
-  import { useState, useRegisterXModule } from '../../../composables';
+  import { useState } from '../../../composables/use-state';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
   import { useXBus } from '../../../composables/use-x-bus';
   import { ScrollObserverKey } from './scroll.const';
   import { ScrollVisibilityObserver } from './scroll.types';
diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
index 120430a0ae..e30bdbf1f1 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
@@ -6,10 +6,11 @@
 <script lang="ts">
   import { computed, defineComponent, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
   import { NoElement } from '../../../components/no-element';
-  import { VueCSSClasses } from '../../../utils/index';
+  import { VueCSSClasses } from '../../../utils/types';
   import { scrollXModule } from '../x-module';
   import { DISABLE_ANIMATIONS_KEY } from '../../../components/decorators/injection.consts';
-  import { useRegisterXModule, useState } from '../../../composables/index';
+  import { useRegisterXModule } from '../../../composables/use-register-x-module';
+  import { useState } from '../../../composables/use-state';
   import { useXBus } from '../../../composables/use-x-bus';
   import { ScrollObserverKey } from './scroll.const';
   import { ScrollVisibilityObserver } from './scroll.types';

From ebb61f7aa76f8c5e42403eac3157780cbf68773e Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Fri, 26 Apr 2024 12:17:27 +0200
Subject: [PATCH 21/41] refactor: use a div as root node for `MainScroll`

---
 .../src/components/scroll/test-scroll.vue     | 12 ++----
 .../layouts/multi-column-max-width-layout.vue |  2 +-
 .../scroll/components/main-scroll.vue         | 40 +++++++------------
 .../tests/unit/main-scroll.spec.ts            | 13 +++---
 4 files changed, 25 insertions(+), 42 deletions(-)

diff --git a/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue b/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue
index 4916f166b2..0bd32a7ab4 100644
--- a/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue
+++ b/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue
@@ -6,15 +6,9 @@
 </script>
 
 <template>
-  <MainScroll>
-    <ul class="list" data-test="scroll">
-      <MainScrollItem
-        v-for="item in items"
-        :key="item - id"
-        class="item"
-        tag="article"
-        :item="item"
-      >
+  <MainScroll root-selector="#rootScroll">
+    <ul id="rootScroll" class="list" data-test="scroll">
+      <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
         {{ item.id }}
       </MainScrollItem>
     </ul>
diff --git a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
index 8eadb62fbb..ef50cd6a0a 100644
--- a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
+++ b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
@@ -69,7 +69,7 @@
         </Scroll>
       </BaseIdTogglePanel>
 
-      <MainScroll>
+      <MainScroll :root-selector="'.x-scroll.x-base-scroll'">
         <Scroll v-if="hasContent('main-body')" id="main-scroll" class="x-layout__body-scroll">
           <section class="x-layout__main-body x-list x-list--vertical">
             <!-- @slot Slot that can be used to insert the body content. -->
diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
index e30bdbf1f1..3167194313 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
@@ -1,11 +1,10 @@
 <template>
-  <NoElement ref="el" :class="dynamicClasses">
+  <div :class="dynamicClasses">
     <slot />
-  </NoElement>
+  </div>
 </template>
 <script lang="ts">
   import { computed, defineComponent, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
-  import { NoElement } from '../../../components/no-element';
   import { VueCSSClasses } from '../../../utils/types';
   import { scrollXModule } from '../x-module';
   import { DISABLE_ANIMATIONS_KEY } from '../../../components/decorators/injection.consts';
@@ -26,8 +25,14 @@
    */
   export default defineComponent({
     name: 'MainScroll',
-    components: { NoElement },
     props: {
+      /**
+       * The css selector of the element that will be used as the root of the intersection observer.
+       */
+      rootSelector: {
+        type: String,
+        default: ''
+      },
       /**
        * If `true`, sets this scroll instance to the main of the application. Being the main
        * scroll implies that features like restoring the scroll when the query changes, or storing
@@ -69,16 +74,10 @@
       }
     },
     setup(props) {
-      type ElementRef = {
-        $el: HTMLElement;
-      };
-
       useRegisterXModule(scrollXModule);
 
       const xBus = useXBus();
 
-      const el = ref<HTMLElement | null>(null);
-
       /**
        * The elements that are currently considered visible.
        *
@@ -162,24 +161,15 @@
         });
       };
 
-      /**
-       * 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;
-      };
+      const rootElement = ref<HTMLElement | null>(null);
 
       /**
        * Initialise the observer after mounting the component.
        */
       onMounted(() => {
+        rootElement.value = document.querySelector(props.rootSelector);
         intersectionObserver.value = new IntersectionObserver(updateVisibleElements, {
-          root: props.useWindow ? document : isElementRef(el.value) ? el.value.$el : el.value,
+          root: props.useWindow ? document : rootElement.value,
           threshold: props.threshold,
           rootMargin: props.margin
         });
@@ -266,8 +256,7 @@
               : firstVisibleElement;
           }
         );
-        const htmlElement = isElementRef(el.value) ? el.value.$el : el.value;
-        return firstVisibleElement === htmlElement?.querySelector('[data-scroll]')
+        return firstVisibleElement === rootElement.value?.querySelector('[data-scroll]')
           ? ''
           : firstVisibleElement.dataset.scroll!;
       });
@@ -280,11 +269,10 @@
       );
 
       return {
-        el,
         dynamicClasses,
         firstVisibleElement,
         visibleElementsObserver,
-        isElementRef,
+        rootElement,
         intersectingElements
       };
     }
diff --git a/packages/x-components/tests/unit/main-scroll.spec.ts b/packages/x-components/tests/unit/main-scroll.spec.ts
index 802025c260..16f7d07b94 100644
--- a/packages/x-components/tests/unit/main-scroll.spec.ts
+++ b/packages/x-components/tests/unit/main-scroll.spec.ts
@@ -24,8 +24,9 @@ function renderMainScroll({
   useWindow,
   windowScrollingElement,
   template = `
-      <MainScroll v-bind="{ threshold, margin, useWindow }">
-        <div class="container" ${!useWindow ? `data-test="scroll"` : ''}>
+      <MainScroll v-bind="{ threshold, margin, useWindow }"
+                  root-selector="#rootScroll" class="root-scroll">
+        <div id="rootScroll" class="container" ${!useWindow ? `data-test="scroll"` : ''}>
           <MainScrollItem
             v-for="item in items"
             class="item"
@@ -51,7 +52,7 @@ function renderMainScroll({
     `${windowScrollingElement === 'body' ? 'html { overflow: hidden; }' : ''}
     html,
     body,
-    [data-cy-root] {
+    [data-cy-root], .root-scroll {
       margin: 0;
       height: 100%;
       max-height: 100%;
@@ -165,8 +166,8 @@ describe('testing MainScroll component', () => {
         const { restoreScrollToItem, getItem } = renderMainScroll({
           ...defaultParameters,
           template: `
-            <MainScroll v-bind="{ threshold, margin, useWindow }">
-              <div data-test="main-scroll">
+            <MainScroll v-bind="{ threshold, margin, useWindow }" root-selector="#rootScroll">
+              <div data-test="main-scroll" id="rootScroll">
                 <StaggeredFadeAndSlide>
                   <MainScrollItem
                     v-for="item in items"
@@ -201,7 +202,7 @@ describe('testing MainScroll component', () => {
         userScrolledToElementSpy().should('have.been.calledWith', 'item-5');
         userScrolledToElementSpy().should('not.have.been.calledWith', 'item-6');
         /* By just scrolling 1 px down, as we require the 100% of the element to intersect to be
-         considered visible, the 5th element does no longer meet this condition. Therefore the 6th
+         considered visible, the 5th element does no longer meet this condition. Therefore, the 6th
          element is considered the first one.  */
         scrollBy(1);
         userScrolledToElementSpy().should('have.been.calledWith', 'item-6');

From 7b27e5b636d6115f177140014d22b50e3fad3601 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Fri, 26 Apr 2024 12:50:04 +0200
Subject: [PATCH 22/41] fix build

---
 packages/_vue3-migration-test/src/components/index.ts        | 1 +
 packages/_vue3-migration-test/src/components/scroll/index.ts | 1 +
 packages/_vue3-migration-test/src/router.ts                  | 5 +----
 3 files changed, 3 insertions(+), 4 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/components/scroll/index.ts

diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index de7210842e..156d0c075a 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -1,2 +1,3 @@
 export * from './animations';
 export { default as TestBaseDropdown } from './test-base-dropdown.vue';
+export * from './scroll';
diff --git a/packages/_vue3-migration-test/src/components/scroll/index.ts b/packages/_vue3-migration-test/src/components/scroll/index.ts
new file mode 100644
index 0000000000..805a9501ce
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/scroll/index.ts
@@ -0,0 +1 @@
+export { default as TestScroll } from './test-scroll.vue';
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 8a6b1696d9..6daad0eabd 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -1,7 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import TestScroll from './components/scroll/test-scroll.vue';
-import { TestAnimateWidth, TestBaseDropdown, TestFade } from './';
-
+import { TestAnimateWidth, TestBaseDropdown, TestFade, TestScroll } from './';
 
 const routes = [
   {
@@ -15,7 +13,6 @@ const routes = [
     component: TestFade
   },
   {
-
     path: '/scroll',
     name: 'Scroll',
     component: TestScroll

From fa386d44a8b361d64794cb4b5e94a802ceaa8b6c Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Tue, 30 Apr 2024 16:07:29 +0200
Subject: [PATCH 23/41] fix e2e tests

---
 .../src/components/layouts/multi-column-max-width-layout.vue    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
index ef50cd6a0a..77c17a18ad 100644
--- a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
+++ b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
@@ -69,7 +69,7 @@
         </Scroll>
       </BaseIdTogglePanel>
 
-      <MainScroll :root-selector="'.x-scroll.x-base-scroll'">
+      <MainScroll root-selector="#main-scroll" class="x-flex x-flex-auto">
         <Scroll v-if="hasContent('main-body')" id="main-scroll" class="x-layout__body-scroll">
           <section class="x-layout__main-body x-list x-list--vertical">
             <!-- @slot Slot that can be used to insert the body content. -->

From f687a14a96f1c13333dddbe5a0ce4ead26f0c4a1 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Tue, 30 Apr 2024 16:56:42 +0200
Subject: [PATCH 24/41] rename el into rootRef

---
 .../scroll/components/main-scroll-item.vue         | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index 50268f59c4..9079a957c8 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" ref="el" v-on="$listeners" :data-scroll="item.id">
+  <component :is="tag" ref="rootRef" v-on="$listeners" :data-scroll="item.id">
     <slot />
   </component>
 </template>
@@ -69,7 +69,7 @@
        *
        * @public
        */
-      const el = ref<ElementRef | HTMLElement | null>(null);
+      const rootRef = ref<ElementRef | HTMLElement | null>(null);
 
       /**
        * Pending identifier scroll position to restore. If it matches the {@link MainScrollItem} item
@@ -111,8 +111,8 @@
         oldObserver: ScrollVisibilityObserver | null
       ): void => {
         {
-          if (el.value !== null) {
-            const htmlElement = isElementRef(el.value) ? el.value.$el : el.value;
+          if (rootRef.value !== null) {
+            const htmlElement = isElementRef(rootRef.value) ? rootRef.value.$el : rootRef.value;
 
             oldObserver?.unobserve(htmlElement);
             newObserver?.observe(htmlElement);
@@ -134,8 +134,8 @@
        * @internal
        */
       onBeforeUnmount(() => {
-        if (el.value !== null) {
-          const htmlElement = isElementRef(el.value) ? el.value.$el : el.value;
+        if (rootRef.value !== null) {
+          const htmlElement = isElementRef(rootRef.value) ? rootRef.value.$el : rootRef.value;
           firstVisibleItemObserver?.value.unobserve(htmlElement);
         }
       });
@@ -155,7 +155,7 @@
         });
       });
 
-      return { el, firstVisibleItemObserver, observeItem, isElementRef };
+      return { rootRef, firstVisibleItemObserver, observeItem, isElementRef };
     }
   });
 </script>

From 1cfd2286450c819f99038026cfe67ca30d76b2b5 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Tue, 30 Apr 2024 16:57:35 +0200
Subject: [PATCH 25/41] destructure useState

---
 .../src/x-modules/scroll/components/main-scroll.vue    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
index 3167194313..d6a9986205 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
@@ -99,7 +99,7 @@
        *
        * @internal
        */
-      const pendingScrollTo = useState('scroll', ['pendingScrollTo']);
+      const { pendingScrollTo } = useState('scroll', ['pendingScrollTo']);
 
       /**
        * Disables the animations.
@@ -107,7 +107,7 @@
        * @returns A boolean to disable the animations.
        * @internal
        */
-      const disableAnimations = computed((): boolean => !!pendingScrollTo.pendingScrollTo.value);
+      const disableAnimations = computed((): boolean => !!pendingScrollTo.value);
       provide(DISABLE_ANIMATIONS_KEY as string, disableAnimations);
 
       /**
@@ -212,10 +212,10 @@
        * @param pendingScrollTo - The position the scroll should be restored to.
        * @internal
        */
-      watch(pendingScrollTo.pendingScrollTo, () => {
+      watch(pendingScrollTo, () => {
         // TODO Move this logic to the wiring. A cancelable delay operator is needed
         clearTimeout(restoreScrollFailTimeoutId);
-        if (pendingScrollTo.pendingScrollTo.value) {
+        if (pendingScrollTo.value) {
           restoreScrollFailTimeoutId = window.setTimeout(() => {
             xBus.emit('ScrollRestoreFailed');
           }, props.restoreScrollTimeoutMs);
@@ -231,7 +231,7 @@
        */
       const dynamicClasses = computed((): VueCSSClasses => {
         return {
-          'x-main-scroll--no-transition': !!pendingScrollTo.pendingScrollTo.value
+          'x-main-scroll--no-transition': !!pendingScrollTo.value
         };
       });
 

From ceae18bfc59a43577d097af261cf8928398bae1f Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Tue, 30 Apr 2024 17:14:50 +0200
Subject: [PATCH 26/41] destructure useState

---
 .../src/x-modules/scroll/components/main-scroll-item.vue   | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index 9079a957c8..f87651c7d0 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -15,8 +15,7 @@
     ref,
     watch,
     Ref,
-    WatchCallback,
-    ComputedRef
+    WatchCallback
   } from 'vue';
   import { NoElement } from '../../../components/no-element';
   import { scrollXModule } from '../x-module';
@@ -77,9 +76,7 @@
        *
        * @internal
        */
-      const pendingScrollTo: ComputedRef<string> = useState('scroll', [
-        'pendingScrollTo'
-      ]).pendingScrollTo;
+      const { pendingScrollTo } = useState('scroll', ['pendingScrollTo']);
 
       /**
        * Observer to detect the first visible element.

From 948dab230bf6d16ca53162bf76ae93cffddd2b68 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Wed, 1 May 2024 17:33:09 +0200
Subject: [PATCH 27/41] test: restore the scroll position

---
 packages/_vue3-migration-test/src/main.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index 58fdfd9f62..3f2b31eedf 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -30,5 +30,17 @@ const store = createStore({});
 createApp(App as Component)
   .use(router)
   .use(store)
-  .use(xPlugin, { adapter, store })
+  .use(xPlugin, {
+    adapter,
+    store,
+    __PRIVATE__xModules: {
+      scroll: {
+        storeModule: {
+          state: {
+            pendingScrollTo: 'item-10'
+          }
+        }
+      }
+    }
+  })
   .mount('#app');

From aa02c76335ced7a4c35a8b4d340558f0aafb23a9 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Thu, 2 May 2024 11:34:42 +0200
Subject: [PATCH 28/41] refactor: use root div as root for intersection
 observer

---
 .../scroll/components/main-scroll.vue         | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
index d6a9986205..e18b1f4f42 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="dynamicClasses">
+  <div ref="rootRef" :class="dynamicClasses">
     <slot />
   </div>
 </template>
@@ -26,13 +26,6 @@
   export default defineComponent({
     name: 'MainScroll',
     props: {
-      /**
-       * The css selector of the element that will be used as the root of the intersection observer.
-       */
-      rootSelector: {
-        type: String,
-        default: ''
-      },
       /**
        * If `true`, sets this scroll instance to the main of the application. Being the main
        * scroll implies that features like restoring the scroll when the query changes, or storing
@@ -84,6 +77,12 @@
        * @internal
        */
       const intersectingElements = ref<HTMLElement[]>([]);
+      /**
+       * The reference to the root element of the component.
+       *
+       * @internal
+       */
+      const rootRef = ref<HTMLDivElement | null>(null);
 
       /**
        * Intersection observer to determine visibility of the elements.
@@ -161,15 +160,12 @@
         });
       };
 
-      const rootElement = ref<HTMLElement | null>(null);
-
       /**
        * Initialise the observer after mounting the component.
        */
       onMounted(() => {
-        rootElement.value = document.querySelector(props.rootSelector);
         intersectionObserver.value = new IntersectionObserver(updateVisibleElements, {
-          root: props.useWindow ? document : rootElement.value,
+          root: props.useWindow ? document : rootRef.value,
           threshold: props.threshold,
           rootMargin: props.margin
         });
@@ -256,7 +252,7 @@
               : firstVisibleElement;
           }
         );
-        return firstVisibleElement === rootElement.value?.querySelector('[data-scroll]')
+        return firstVisibleElement === rootRef.value?.querySelector('[data-scroll]')
           ? ''
           : firstVisibleElement.dataset.scroll!;
       });
@@ -269,10 +265,10 @@
       );
 
       return {
+        rootRef,
         dynamicClasses,
         firstVisibleElement,
         visibleElementsObserver,
-        rootElement,
         intersectingElements
       };
     }

From 55a023d6508f0f06d08316c6e2a0beab6c98c397 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Thu, 2 May 2024 11:37:26 +0200
Subject: [PATCH 29/41] fix: use null as default value for ScrollObserverKey

---
 .../x-modules/scroll/components/main-scroll-item.vue  | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index f87651c7d0..7ca66e095c 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -83,9 +83,10 @@
        *
        * @internal
        */
-      const firstVisibleItemObserver: Ref<ScrollVisibilityObserver> = inject<
-        Ref<ScrollVisibilityObserver>
-      >(ScrollObserverKey as string) as Ref<ScrollVisibilityObserver>;
+      const firstVisibleItemObserver = inject<Ref<ScrollVisibilityObserver> | null>(
+        ScrollObserverKey as string,
+        null
+      );
       /**
        * Checks if a given value is an `ElementRef` object.
        *
@@ -148,7 +149,9 @@
       onMounted(() => {
         nextTick(() => {
           // Mounted does not guarantee that child components are mounted too
-          watch(firstVisibleItemObserver, observeItem, { immediate: true });
+          if (firstVisibleItemObserver) {
+            watch(firstVisibleItemObserver, observeItem, { immediate: true });
+          }
         });
       });
 

From 8fd374fc4e97b3009d2740d79886db184388d195 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Thu, 2 May 2024 11:37:47 +0200
Subject: [PATCH 30/41] fix: use false as default value for
 DISABLE_ANIMATIONS_KEY

---
 .../src/components/animations/disable-animation.mixin.ts        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-components/src/components/animations/disable-animation.mixin.ts b/packages/x-components/src/components/animations/disable-animation.mixin.ts
index 06b87130ea..9581fa47cf 100644
--- a/packages/x-components/src/components/animations/disable-animation.mixin.ts
+++ b/packages/x-components/src/components/animations/disable-animation.mixin.ts
@@ -21,7 +21,7 @@ export default class DisableAnimationMixin extends Vue {
    *
    * @public
    */
-  @Inject(DISABLE_ANIMATIONS_KEY as string)
+  @Inject({ from: DISABLE_ANIMATIONS_KEY as string, default: false })
   public disableAnimation!: boolean;
 
   /**

From 8924f18da260a14f4f2138713a5a04d02bcf113d Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Thu, 2 May 2024 11:40:59 +0200
Subject: [PATCH 31/41] fix: set xModule name

---
 .../src/x-modules/scroll/components/main-scroll-item.vue         | 1 +
 .../x-components/src/x-modules/scroll/components/main-scroll.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index 7ca66e095c..a4338b3317 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -33,6 +33,7 @@
    */
   export default defineComponent({
     name: 'MainScrollItem',
+    xModule: scrollXModule.name,
     props: {
       /**
        * The item data. Used to set the scroll identifier.
diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
index e18b1f4f42..710a53b52f 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll.vue
@@ -25,6 +25,7 @@
    */
   export default defineComponent({
     name: 'MainScroll',
+    xModule: scrollXModule.name,
     props: {
       /**
        * If `true`, sets this scroll instance to the main of the application. Being the main

From ca78b79f0ff4fcec5d12f607fbacbf011066b50b Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Thu, 2 May 2024 11:43:19 +0200
Subject: [PATCH 32/41] drop root-selector usage

---
 .../src/components/scroll/test-scroll.vue                     | 2 +-
 .../src/components/layouts/multi-column-max-width-layout.vue  | 2 +-
 packages/x-components/tests/unit/main-scroll.spec.ts          | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue b/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue
index 0bd32a7ab4..5d8d58312d 100644
--- a/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue
+++ b/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue
@@ -6,7 +6,7 @@
 </script>
 
 <template>
-  <MainScroll root-selector="#rootScroll">
+  <MainScroll>
     <ul id="rootScroll" class="list" data-test="scroll">
       <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
         {{ item.id }}
diff --git a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
index 77c17a18ad..9b55ef31c5 100644
--- a/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
+++ b/packages/x-components/src/components/layouts/multi-column-max-width-layout.vue
@@ -69,7 +69,7 @@
         </Scroll>
       </BaseIdTogglePanel>
 
-      <MainScroll root-selector="#main-scroll" class="x-flex x-flex-auto">
+      <MainScroll class="x-flex x-flex-auto">
         <Scroll v-if="hasContent('main-body')" id="main-scroll" class="x-layout__body-scroll">
           <section class="x-layout__main-body x-list x-list--vertical">
             <!-- @slot Slot that can be used to insert the body content. -->
diff --git a/packages/x-components/tests/unit/main-scroll.spec.ts b/packages/x-components/tests/unit/main-scroll.spec.ts
index 16f7d07b94..6affd7a73c 100644
--- a/packages/x-components/tests/unit/main-scroll.spec.ts
+++ b/packages/x-components/tests/unit/main-scroll.spec.ts
@@ -25,7 +25,7 @@ function renderMainScroll({
   windowScrollingElement,
   template = `
       <MainScroll v-bind="{ threshold, margin, useWindow }"
-                  root-selector="#rootScroll" class="root-scroll">
+                  class="root-scroll">
         <div id="rootScroll" class="container" ${!useWindow ? `data-test="scroll"` : ''}>
           <MainScrollItem
             v-for="item in items"
@@ -166,7 +166,7 @@ describe('testing MainScroll component', () => {
         const { restoreScrollToItem, getItem } = renderMainScroll({
           ...defaultParameters,
           template: `
-            <MainScroll v-bind="{ threshold, margin, useWindow }" root-selector="#rootScroll">
+            <MainScroll v-bind="{ threshold, margin, useWindow }">
               <div data-test="main-scroll" id="rootScroll">
                 <StaggeredFadeAndSlide>
                   <MainScrollItem

From cf5ff53cd5e667ddcb306555af82bf8784c4b917 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Mon, 6 May 2024 16:49:06 +0200
Subject: [PATCH 33/41] refactor: remove unnecessary ids

---
 .../_vue3-migration-test/src/components/scroll/test-scroll.vue  | 2 +-
 packages/x-components/tests/unit/main-scroll.spec.ts            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue b/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue
index 5d8d58312d..7e6901700a 100644
--- a/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue
+++ b/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue
@@ -7,7 +7,7 @@
 
 <template>
   <MainScroll>
-    <ul id="rootScroll" class="list" data-test="scroll">
+    <ul class="list" data-test="scroll">
       <MainScrollItem v-for="item in items" :key="item.id" class="item" tag="article" :item="item">
         {{ item.id }}
       </MainScrollItem>
diff --git a/packages/x-components/tests/unit/main-scroll.spec.ts b/packages/x-components/tests/unit/main-scroll.spec.ts
index 6affd7a73c..b3f99e43c7 100644
--- a/packages/x-components/tests/unit/main-scroll.spec.ts
+++ b/packages/x-components/tests/unit/main-scroll.spec.ts
@@ -26,7 +26,7 @@ function renderMainScroll({
   template = `
       <MainScroll v-bind="{ threshold, margin, useWindow }"
                   class="root-scroll">
-        <div id="rootScroll" class="container" ${!useWindow ? `data-test="scroll"` : ''}>
+        <div class="container" ${!useWindow ? `data-test="scroll"` : ''}>
           <MainScrollItem
             v-for="item in items"
             class="item"

From 299bba4577a7318b71f3b98cb7d4c95a7527604e Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Mon, 6 May 2024 16:49:47 +0200
Subject: [PATCH 34/41] refactor: avoid decorator

---
 .../src/components/animations/disable-animation.mixin.ts   | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/x-components/src/components/animations/disable-animation.mixin.ts b/packages/x-components/src/components/animations/disable-animation.mixin.ts
index 9581fa47cf..6d48c14dc7 100644
--- a/packages/x-components/src/components/animations/disable-animation.mixin.ts
+++ b/packages/x-components/src/components/animations/disable-animation.mixin.ts
@@ -1,5 +1,5 @@
-import Vue from 'vue';
-import { Component, Inject } from 'vue-property-decorator';
+import Vue, { inject } from 'vue';
+import { Component } from 'vue-property-decorator';
 import { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';
 
 /**
@@ -21,8 +21,7 @@ export default class DisableAnimationMixin extends Vue {
    *
    * @public
    */
-  @Inject({ from: DISABLE_ANIMATIONS_KEY as string, default: false })
-  public disableAnimation!: boolean;
+  public disableAnimation = inject(DISABLE_ANIMATIONS_KEY as string, false);
 
   /**
    * The animation's name based on the {@link DisableAnimationMixin.disableAnimation} flag.

From 86262c989f0877641199b1547d64e78be728a5ef Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Mon, 6 May 2024 17:46:49 +0200
Subject: [PATCH 35/41] Revert "refactor: avoid decorator"

This reverts commit 299bba4577a7318b71f3b98cb7d4c95a7527604e.
---
 .../src/components/animations/disable-animation.mixin.ts   | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/x-components/src/components/animations/disable-animation.mixin.ts b/packages/x-components/src/components/animations/disable-animation.mixin.ts
index 6d48c14dc7..9581fa47cf 100644
--- a/packages/x-components/src/components/animations/disable-animation.mixin.ts
+++ b/packages/x-components/src/components/animations/disable-animation.mixin.ts
@@ -1,5 +1,5 @@
-import Vue, { inject } from 'vue';
-import { Component } from 'vue-property-decorator';
+import Vue from 'vue';
+import { Component, Inject } from 'vue-property-decorator';
 import { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';
 
 /**
@@ -21,7 +21,8 @@ export default class DisableAnimationMixin extends Vue {
    *
    * @public
    */
-  public disableAnimation = inject(DISABLE_ANIMATIONS_KEY as string, false);
+  @Inject({ from: DISABLE_ANIMATIONS_KEY as string, default: false })
+  public disableAnimation!: boolean;
 
   /**
    * The animation's name based on the {@link DisableAnimationMixin.disableAnimation} flag.

From 9a9237d4ac9f9273b91b344476658a997226466e Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Mon, 6 May 2024 18:00:58 +0200
Subject: [PATCH 36/41] refactor: use a div as default tag prop value

---
 .../src/x-modules/scroll/components/main-scroll-item.vue       | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index a4338b3317..d849bc877c 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -17,7 +17,6 @@
     Ref,
     WatchCallback
   } from 'vue';
-  import { NoElement } from '../../../components/no-element';
   import { scrollXModule } from '../x-module';
   import { useState } from '../../../composables/use-state';
   import { useRegisterXModule } from '../../../composables/use-register-x-module';
@@ -52,7 +51,7 @@
        */
       tag: {
         type: [String, Object] as PropType<string | typeof Vue>,
-        default: () => NoElement
+        default: 'div'
       }
     },
 

From 15b2d09fd82b927e39d9d8ed97be8aad19569f62 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Wed, 8 May 2024 14:12:04 +0200
Subject: [PATCH 37/41] format file

---
 .../src/x-modules/scroll/components/main-scroll-item.vue        | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
index d849bc877c..8c5c330016 100644
--- a/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
+++ b/packages/x-components/src/x-modules/scroll/components/main-scroll-item.vue
@@ -43,7 +43,6 @@
         type: Object as PropType<Identifiable>,
         required: true
       },
-
       /**
        * The tag to render.
        *
@@ -54,7 +53,6 @@
         default: 'div'
       }
     },
-
     setup(props) {
       type ElementRef = {
         $el: HTMLElement;

From 1369156692874e5dab6bc625a6a8c06d68b703c2 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Wed, 8 May 2024 14:13:30 +0200
Subject: [PATCH 38/41] move scroll related config to x-module folder

---
 packages/_vue3-migration-test/src/components/index.ts    | 2 +-
 packages/_vue3-migration-test/src/main.ts                | 9 ++-------
 .../src/{components => x-modules}/scroll/index.ts        | 1 +
 .../src/{components => x-modules}/scroll/test-scroll.vue | 0
 .../src/x-modules/scroll/x-module.ts                     | 7 +++++++
 5 files changed, 11 insertions(+), 8 deletions(-)
 rename packages/_vue3-migration-test/src/{components => x-modules}/scroll/index.ts (67%)
 rename packages/_vue3-migration-test/src/{components => x-modules}/scroll/test-scroll.vue (100%)
 create mode 100644 packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts

diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 42d0a89bbb..6556e1c950 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -2,5 +2,5 @@ export * from './animations';
 export { default as TestBaseColumnPickerDropdown } from './column-picker/test-base-column-picker-dropdown.vue';
 export { default as TestBaseColumnPickerList } from './column-picker/test-base-column-picker-list.vue';
 export { default as TestBaseDropdown } from './test-base-dropdown.vue';
-export * from './scroll';
+export * from '../x-modules/scroll';
 export { default as TestBaseEventButton } from './test-base-event-button.vue';
diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index 3f2b31eedf..bf9c6ba6cb 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -4,6 +4,7 @@ import { createStore } from 'vuex';
 import { xPlugin } from '../../x-components/src/plugins/x-plugin';
 import App from './App.vue';
 import router from './router';
+import { scrollXModule } from './x-modules/scroll/x-module';
 
 // Warnings that cannot be solved in Vue 2 (a.k.a. breaking  changes) are suppressed
 const VUE_COMPAT_MODE = Number(import.meta.env.VITE_VUE_COMPAT_MODE);
@@ -34,13 +35,7 @@ createApp(App as Component)
     adapter,
     store,
     __PRIVATE__xModules: {
-      scroll: {
-        storeModule: {
-          state: {
-            pendingScrollTo: 'item-10'
-          }
-        }
-      }
+      scroll: scrollXModule
     }
   })
   .mount('#app');
diff --git a/packages/_vue3-migration-test/src/components/scroll/index.ts b/packages/_vue3-migration-test/src/x-modules/scroll/index.ts
similarity index 67%
rename from packages/_vue3-migration-test/src/components/scroll/index.ts
rename to packages/_vue3-migration-test/src/x-modules/scroll/index.ts
index 805a9501ce..0a0c301dd9 100644
--- a/packages/_vue3-migration-test/src/components/scroll/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/scroll/index.ts
@@ -1 +1,2 @@
 export { default as TestScroll } from './test-scroll.vue';
+export * from './x-module';
diff --git a/packages/_vue3-migration-test/src/components/scroll/test-scroll.vue b/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
similarity index 100%
rename from packages/_vue3-migration-test/src/components/scroll/test-scroll.vue
rename to packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
diff --git a/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts b/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts
new file mode 100644
index 0000000000..9b55beb8ca
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts
@@ -0,0 +1,7 @@
+export const scrollXModule = {
+  storeModule: {
+    state: {
+      pendingScrollTo: 'item-10'
+    }
+  }
+};

From 8ed688d0b3d177a16f4679ff024d92f6f7664874 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Wed, 8 May 2024 15:53:35 +0200
Subject: [PATCH 39/41] fix export

---
 packages/_vue3-migration-test/src/components/index.ts | 1 -
 packages/_vue3-migration-test/src/x-modules/index.ts  | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 6556e1c950..f07a2bc521 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -2,5 +2,4 @@ export * from './animations';
 export { default as TestBaseColumnPickerDropdown } from './column-picker/test-base-column-picker-dropdown.vue';
 export { default as TestBaseColumnPickerList } from './column-picker/test-base-column-picker-list.vue';
 export { default as TestBaseDropdown } from './test-base-dropdown.vue';
-export * from '../x-modules/scroll';
 export { default as TestBaseEventButton } from './test-base-event-button.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/index.ts b/packages/_vue3-migration-test/src/x-modules/index.ts
index 5a2bdeb5b8..0778e03578 100644
--- a/packages/_vue3-migration-test/src/x-modules/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/index.ts
@@ -1 +1,2 @@
 export * from './search';
+export * from './scroll';

From 022fd061216c21744032f94904f9a79f0bd80439 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Wed, 8 May 2024 15:53:53 +0200
Subject: [PATCH 40/41] remove unnecessary comment

---
 .../_vue3-migration-test/src/x-modules/scroll/test-scroll.vue    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue b/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
index 7e6901700a..8f74707be1 100644
--- a/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
+++ b/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
   import MainScroll from '../../../../x-components/src/x-modules/scroll/components/main-scroll.vue';
-  // eslint-disable-next-line max-len
   import MainScrollItem from '../../../../x-components/src/x-modules/scroll/components/main-scroll-item.vue';
   const items = Array.from({ length: 24 }, (_, index) => ({ id: `item-${index}` }));
 </script>

From 5a78e3bb1c325b7cfd190f4f514e3145fd4df466 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Wed, 8 May 2024 15:54:14 +0200
Subject: [PATCH 41/41] type scrollXModule

---
 .../_vue3-migration-test/src/x-modules/scroll/x-module.ts    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts b/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts
index 9b55beb8ca..8ecf56eab0 100644
--- a/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts
+++ b/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts
@@ -1,4 +1,7 @@
-export const scrollXModule = {
+import { PrivateXModuleOptions } from '../../../../x-components/src/plugins/x-plugin.types';
+import { ScrollXModule } from '../../../../x-components/src/x-modules/scroll/x-module';
+
+export const scrollXModule: PrivateXModuleOptions<ScrollXModule> = {
   storeModule: {
     state: {
       pendingScrollTo: 'item-10'