From b7201322bbf1f5696e80e00622d21d653228177c Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Wed, 8 May 2024 16:20:31 +0200
Subject: [PATCH 1/2] feat: migrate `MainScroll` and `MainScrollItem`
 components (#1456)

BREAKING CHANGE:
`MainScroll` drops the usage of `NoElement` as root element and uses a div instead. This extra div could break the style of an application that relies on `MainScroll` rendering their content directly.
`MainScrollItem` drops the usage of `NoElement` if no `tag` prop is passed and uses a div as fallback.
---
 packages/_vue3-migration-test/src/main.ts     |   9 +-
 packages/_vue3-migration-test/src/router.ts   |   6 +
 .../src/x-modules/index.ts                    |   1 +
 .../src/x-modules/scroll/index.ts             |   2 +
 .../src/x-modules/scroll/test-scroll.vue      |  22 +
 .../src/x-modules/scroll/x-module.ts          |  10 +
 .../__tests__/disable-animation-mixin.spec.ts |   5 +-
 .../animations/disable-animation.mixin.ts     |   5 +-
 .../layouts/multi-column-max-width-layout.vue |   2 +-
 .../x-components/src/composables/use-state.ts |   2 +-
 .../scroll/components/main-scroll-item.vue    | 232 +++++----
 .../scroll/components/main-scroll.vue         | 464 +++++++++---------
 .../tests/unit/main-scroll.spec.ts            |   9 +-
 13 files changed, 442 insertions(+), 327 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/x-modules/scroll/index.ts
 create mode 100644 packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
 create mode 100644 packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts

diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index 58fdfd9f62..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);
@@ -30,5 +31,11 @@ const store = createStore({});
 createApp(App as Component)
   .use(router)
   .use(store)
-  .use(xPlugin, { adapter, store })
+  .use(xPlugin, {
+    adapter,
+    store,
+    __PRIVATE__xModules: {
+      scroll: scrollXModule
+    }
+  })
   .mount('#app');
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 436788fafc..a19f19f3a4 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -8,6 +8,7 @@ import {
   TestSortDropdown,
   TestSortList,
   TestSortPickerList,
+  TestScroll,
   TestBaseColumnPickerDropdown
 } from './';
 
@@ -22,6 +23,11 @@ const routes = [
     name: 'Fade',
     component: TestFade
   },
+  {
+    path: '/scroll',
+    name: 'Scroll',
+    component: TestScroll
+  },
   {
     path: '/base-dropdown',
     name: 'BaseDropdown',
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';
diff --git a/packages/_vue3-migration-test/src/x-modules/scroll/index.ts b/packages/_vue3-migration-test/src/x-modules/scroll/index.ts
new file mode 100644
index 0000000000..0a0c301dd9
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/scroll/index.ts
@@ -0,0 +1,2 @@
+export { default as TestScroll } from './test-scroll.vue';
+export * from './x-module';
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
new file mode 100644
index 0000000000..8f74707be1
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/scroll/test-scroll.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+  import MainScroll from '../../../../x-components/src/x-modules/scroll/components/main-scroll.vue';
+  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/x-modules/scroll/x-module.ts b/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts
new file mode 100644
index 0000000000..8ecf56eab0
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/scroll/x-module.ts
@@ -0,0 +1,10 @@
+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'
+    }
+  }
+};
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 {
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..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,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({ from: DISABLE_ANIMATIONS_KEY as string, default: false })
   public disableAnimation!: boolean;
 
   /**
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..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>
+      <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/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 9f67b2e50f..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
@@ -1,15 +1,26 @@
 <template>
-  <component :is="tag" v-on="$listeners" :data-scroll="item.id">
+  <component :is="tag" ref="rootRef" 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,
+    inject,
+    nextTick,
+    onBeforeUnmount,
+    onMounted,
+    PropType,
+    ref,
+    watch,
+    Ref,
+    WatchCallback
+  } from 'vue';
   import { scrollXModule } from '../x-module';
+  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';
 
@@ -19,95 +30,132 @@
    *
    * @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;
-
-    /**
-     * 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
-     */
-    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 });
-    }
-
-    /**
-     * 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');
+  export default defineComponent({
+    name: 'MainScrollItem',
+    xModule: scrollXModule.name,
+    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: 'div'
       }
+    },
+    setup(props) {
+      type ElementRef = {
+        $el: HTMLElement;
+      };
+
+      useRegisterXModule(scrollXModule);
+      const xBus = useXBus();
+
+      /**
+       * Rendered HTML node.
+       *
+       * @public
+       */
+      const rootRef = ref<ElementRef | 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 } = useState('scroll', ['pendingScrollTo']);
+
+      /**
+       * Observer to detect the first visible element.
+       *
+       * @internal
+       */
+      const firstVisibleItemObserver = inject<Ref<ScrollVisibilityObserver> | null>(
+        ScrollObserverKey as string,
+        null
+      );
+      /**
+       * 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.
+       *
+       * @param newObserver - The new observer for the HTML element.
+       * @param oldObserver - The old observer for the HTML element.
+       */
+      const observeItem: WatchCallback<ScrollVisibilityObserver> = (
+        newObserver: ScrollVisibilityObserver | null,
+        oldObserver: ScrollVisibilityObserver | null
+      ): void => {
+        {
+          if (rootRef.value !== null) {
+            const htmlElement = isElementRef(rootRef.value) ? rootRef.value.$el : rootRef.value;
+
+            oldObserver?.unobserve(htmlElement);
+            newObserver?.observe(htmlElement);
+            if (pendingScrollTo.value === props.item.id) {
+              Vue.nextTick(() => {
+                htmlElement.scrollIntoView({
+                  block: 'center'
+                });
+              });
+              xBus.emit('ScrollRestoreSucceeded');
+            }
+          }
+        }
+      };
+
+      /**
+       * Detaches the observer from the rendered element to prevent memory leaks.
+       *
+       * @internal
+       */
+      onBeforeUnmount(() => {
+        if (rootRef.value !== null) {
+          const htmlElement = isElementRef(rootRef.value) ? rootRef.value.$el : rootRef.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
+       */
+      onMounted(() => {
+        nextTick(() => {
+          // Mounted does not guarantee that child components are mounted too
+          if (firstVisibleItemObserver) {
+            watch(firstVisibleItemObserver, observeItem, { immediate: true });
+          }
+        });
+      });
+
+      return { rootRef, firstVisibleItemObserver, observeItem, isElementRef };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
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..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
@@ -1,19 +1,16 @@
 <template>
-  <NoElement :class="dynamicClasses">
+  <div ref="rootRef" :class="dynamicClasses">
     <slot />
-  </NoElement>
+  </div>
 </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 { NoElement } from '../../../components/no-element';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
-  import { VueCSSClasses } from '../../../utils/index';
+  import { computed, defineComponent, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
+  import { VueCSSClasses } from '../../../utils/types';
   import { scrollXModule } from '../x-module';
   import { DISABLE_ANIMATIONS_KEY } from '../../../components/decorators/injection.consts';
+  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';
 
@@ -26,234 +23,257 @@
    *
    * @public
    */
-  @Component({
-    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;
-    }
-
-    /**
-     * 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);
-            }
-          }
-        : 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 '';
+  export default defineComponent({
+    name: 'MainScroll',
+    xModule: scrollXModule.name,
+    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'
       }
-      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;
+    },
+    setup(props) {
+      useRegisterXModule(scrollXModule);
+
+      const xBus = useXBus();
+
+      /**
+       * The elements that are currently considered visible.
+       *
+       * @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.
+       *
+       * @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.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);
         }
-      );
+      };
 
-      return firstVisibleElement === this.$el.querySelector('[data-scroll]')
-        ? ''
-        : firstVisibleElement.dataset.scroll!;
-    }
+      /**
+       * 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);
+          }
+        });
+      };
 
-    /**
-     * 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 : rootRef.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(pendingScrollTo, () => {
+        // TODO Move this logic to the wiring. A cancelable delay operator is needed
+        clearTimeout(restoreScrollFailTimeoutId);
+        if (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.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;
+          }
+        );
+        return firstVisibleElement === rootRef.value?.querySelector('[data-scroll]')
+          ? ''
+          : firstVisibleElement.dataset.scroll!;
       });
-    }
+      watch(
+        firstVisibleElement,
+        () => {
+          xBus.emit('UserScrolledToElement', firstVisibleElement.value);
+        },
+        { immediate: true }
+      );
 
-    /**
-     * 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
+        rootRef,
+        dynamicClasses,
+        firstVisibleElement,
+        visibleElementsObserver,
+        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..b3f99e43c7 100644
--- a/packages/x-components/tests/unit/main-scroll.spec.ts
+++ b/packages/x-components/tests/unit/main-scroll.spec.ts
@@ -24,7 +24,8 @@ function renderMainScroll({
   useWindow,
   windowScrollingElement,
   template = `
-      <MainScroll v-bind="{ threshold, margin, useWindow }">
+      <MainScroll v-bind="{ threshold, margin, useWindow }"
+                  class="root-scroll">
         <div class="container" ${!useWindow ? `data-test="scroll"` : ''}>
           <MainScrollItem
             v-for="item in items"
@@ -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%;
@@ -166,7 +167,7 @@ describe('testing MainScroll component', () => {
           ...defaultParameters,
           template: `
             <MainScroll v-bind="{ threshold, margin, useWindow }">
-              <div data-test="main-scroll">
+              <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 5c345dbd7d4f8841da124b36515fcb871d9c0a76 Mon Sep 17 00:00:00 2001
From: empathy/x <x@empathy.co>
Date: Wed, 8 May 2024 14:35:29 +0000
Subject: [PATCH 2/2] chore(release): publish

 - vue3-migration-test@1.0.0-alpha.5
 - @empathyco/x-components@5.0.0-alpha.8
---
 packages/_vue3-migration-test/CHANGELOG.md | 14 ++++++++++++++
 packages/_vue3-migration-test/package.json |  2 +-
 packages/x-components/CHANGELOG.md         | 14 ++++++++++++++
 packages/x-components/package.json         |  2 +-
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
index ed6684f43c..2a1f99fbf1 100644
--- a/packages/_vue3-migration-test/CHANGELOG.md
+++ b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.5](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.4...vue3-migration-test@1.0.0-alpha.5) (2024-05-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* `MainScroll` drops the usage of `NoElement` as root element and uses a div instead. This extra div could break the style of an application that relies on `MainScroll` rendering their content directly.
+`MainScrollItem` drops the usage of `NoElement` if no `tag` prop is passed and uses a div as fallback.
+
+### Features
+
+* migrate `MainScroll` and `MainScrollItem` components (#1456) ([b720132](https://github.com/empathyco/x/commit/b7201322bbf1f5696e80e00622d21d653228177c))
+
+
+
 ## [1.0.0-alpha.4](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.3...vue3-migration-test@1.0.0-alpha.4) (2024-05-06)
 
 
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index 3a69593937..524ba70571 100644
--- a/packages/_vue3-migration-test/package.json
+++ b/packages/_vue3-migration-test/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.5",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index 26f48ceeb2..c1942a65d2 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.8](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.7...@empathyco/x-components@5.0.0-alpha.8) (2024-05-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* `MainScroll` drops the usage of `NoElement` as root element and uses a div instead. This extra div could break the style of an application that relies on `MainScroll` rendering their content directly.
+`MainScrollItem` drops the usage of `NoElement` if no `tag` prop is passed and uses a div as fallback.
+
+### Features
+
+* migrate `MainScroll` and `MainScrollItem` components (#1456) ([b720132](https://github.com/empathyco/x/commit/b7201322bbf1f5696e80e00622d21d653228177c))
+
+
+
 ## [5.0.0-alpha.7](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.6...@empathyco/x-components@5.0.0-alpha.7) (2024-05-06)
 
 
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index a1db541388..24c765013f 100644
--- a/packages/x-components/package.json
+++ b/packages/x-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.8",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",