From d869f1886c11f74af8a6350033d7567385ad629d Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Mon, 24 Jun 2024 12:24:31 +0200
Subject: [PATCH 1/4] feat(extra-params): migrate extra params and snippet
 config extra params (#1531)

---
 .../extra-params/test-extra-params.vue        |  13 ++
 .../src/components/index.ts                   |   1 +
 packages/_vue3-migration-test/src/main.ts     |  44 ++++---
 packages/_vue3-migration-test/src/router.ts   |   8 +-
 .../x-modules/identifier-results/x-module.ts  |   3 +-
 .../components/__tests__/extra-params.spec.ts |   4 +-
 .../extra-params/components/extra-params.vue  |  62 ++++-----
 .../snippet-config-extra-params.vue           | 120 +++++++-----------
 .../src/x-modules/extra-params/x-module.ts    |   3 +
 9 files changed, 128 insertions(+), 130 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/components/extra-params/test-extra-params.vue

diff --git a/packages/_vue3-migration-test/src/components/extra-params/test-extra-params.vue b/packages/_vue3-migration-test/src/components/extra-params/test-extra-params.vue
new file mode 100644
index 0000000000..a7638946e6
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/extra-params/test-extra-params.vue
@@ -0,0 +1,13 @@
+<template>
+  <SnippetConfigExtraParams :values="{ catalog: 'empathy' }" />
+  {{ params }}
+</template>
+<script setup lang="ts">
+  import { provide } from 'vue';
+  import SnippetConfigExtraParams from '../../../../x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue';
+  import { useState } from '../../../../x-components/src/composables/use-state';
+  const snippetConfig = window.InterfaceX?.getSnippetConfig();
+  provide('snippetConfig', snippetConfig);
+  const { params } = useState('extraParams', ['params']);
+  window.InterfaceX?.setSnippetConfig({ store: 'demo', lang: 'es', warehouse: 1234 });
+</script>
diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 45c4690d74..66a0cf6ff6 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -14,3 +14,4 @@ export { default as TestBasePanel } from './panels/test-base-panel.vue';
 export { default as TestBaseKeyboardNavigation } from './test-base-keyboard-navigation.vue';
 export { default as TestBaseEventsModal } from './modals/test-base-events-modal.vue';
 export { default as TestBaseIdModal } from './modals/test-base-id-modal.vue';
+export { default as TestExtraParams } from './extra-params/test-extra-params.vue';
diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index 703dc7b3ad..80f0c05f47 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -1,15 +1,16 @@
 import { QuerySuggestionsRequest, XComponentsAdapter } from '@empathyco/x-types';
 import { Component, configureCompat, createApp } from 'vue';
 import { createStore } from 'vuex';
-import { xPlugin } from '../../x-components/src/plugins/x-plugin';
 import { getRelatedTagsStub } from '../../x-components/src/__stubs__/related-tags-stubs.factory';
 import { getQuerySuggestionsStub } from '../../x-components/src/__stubs__/query-suggestions-stubs.factory';
 import {
+  createResultStub,
   getBannersStub,
   getNextQueriesStub,
   getPromotedsStub,
   getResultsStub
 } from '../../x-components/src/__stubs__/index';
+import { XInstaller } from '../../x-components/src/x-installer/x-installer/x-installer';
 import App from './App.vue';
 import router from './router';
 import {
@@ -77,7 +78,11 @@ const adapter = {
         promoteds: getPromotedsStub(),
         banners: getBannersStub()
       });
-    })
+    }),
+  identifierResults: () =>
+    new Promise(resolve =>
+      resolve({ results: ['123A', '123B', '123C', '123D'].map(id => createResultStub(id)) })
+    )
 } as unknown as XComponentsAdapter;
 
 const store = createStore({});
@@ -85,19 +90,24 @@ const store = createStore({});
 createApp(App as Component)
   .use(router)
   .use(store)
-  .use(xPlugin, {
-    adapter,
-    store,
-    __PRIVATE__xModules: {
-      facets: facetsXModule,
-      nextQueries: nextQueriesXModule,
-      scroll: scrollXModule,
-      search: searchXModule,
-      queriesPreview: queriesPreviewXModule,
-      semanticQueries: semanticQueriesXModule,
-      recommendations: recommendationsXModule,
-      popularSearches: popularSearchesXModule,
-      identifierResults: identifierResultsXModule
-    }
-  })
   .mount('#app');
+
+window.initX = {
+  instance: 'empathy',
+  lang: 'en'
+};
+new XInstaller({
+  adapter,
+  store,
+  __PRIVATE__xModules: {
+    facets: facetsXModule,
+    nextQueries: nextQueriesXModule,
+    scroll: scrollXModule,
+    search: searchXModule,
+    queriesPreview: queriesPreviewXModule,
+    semanticQueries: semanticQueriesXModule,
+    recommendations: recommendationsXModule,
+    identifierResults: identifierResultsXModule,
+    popularSearches: popularSearchesXModule
+  }
+}).init();
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index 1e07419e15..da58d80ff3 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -39,7 +39,8 @@ import {
   TestRecommendations,
   TestPopularSearches,
   TestNextQueries,
-  TestIdentifierResults
+  TestIdentifierResults,
+  TestExtraParams
 } from './';
 
 const routes = [
@@ -242,6 +243,11 @@ const routes = [
     path: '/identifier-results',
     name: 'IdentifierResults',
     component: TestIdentifierResults
+  },
+  {
+    path: '/snippet-config-extraparams',
+    name: 'SnippetConfigExtraparams',
+    component: TestExtraParams
   }
 ];
 
diff --git a/packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts b/packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts
index 70ba15093a..d801729f7f 100644
--- a/packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts
+++ b/packages/_vue3-migration-test/src/x-modules/identifier-results/x-module.ts
@@ -1,6 +1,5 @@
 import { PrivateXModuleOptions } from '../../../../x-components/src/plugins/x-plugin.types';
 import { IdentifierResultsXModule } from '../../../../x-components/src/x-modules/identifier-results/x-module';
-import { createResultStub } from '../../../../x-components/src/__stubs__/results-stubs.factory';
 
 export const identifierResultsXModule: PrivateXModuleOptions<IdentifierResultsXModule> = {
   storeModule: {
@@ -11,7 +10,7 @@ export const identifierResultsXModule: PrivateXModuleOptions<IdentifierResultsXM
         identifierDetectionRegexp: '^[0-9]{2,}$',
         separatorChars: '-/ '
       },
-      identifierResults: ['123A', '123B', '123C', '123D'].map(id => createResultStub(id)),
+      identifierResults: [],
       origin: null,
       query: 'test',
       params: {},
diff --git a/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts b/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts
index 5376cdff4c..a226e19003 100644
--- a/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts
+++ b/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts
@@ -40,7 +40,7 @@ describe('testing extra params component', () => {
 
     expect(extraParamsProvidedCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>({
       eventPayload: { warehouse: 1234 },
-      metadata: { moduleName: 'extraParams', location: undefined, replaceable: true }
+      metadata: { moduleName: 'extraParams', location: 'none', replaceable: true }
     });
     expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(1);
 
@@ -48,7 +48,7 @@ describe('testing extra params component', () => {
 
     expect(extraParamsProvidedCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>({
       eventPayload: { warehouse: 5678 },
-      metadata: { moduleName: 'extraParams', location: undefined, replaceable: true }
+      metadata: { moduleName: 'extraParams', location: 'none', replaceable: true }
     });
     expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(2);
   });
diff --git a/packages/x-components/src/x-modules/extra-params/components/extra-params.vue b/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
index d24dc6301e..4d96cddc97 100644
--- a/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
+++ b/packages/x-components/src/x-modules/extra-params/components/extra-params.vue
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { Dictionary } from '@empathyco/x-utils';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { State, xComponentMixin, XEmit } from '../../../components';
+  import { defineComponent, PropType, watch } from 'vue';
   import { extraParamsXModule } from '../x-module';
+  import { use$x } from '../../../composables/use-$x';
+  import { useState } from '../../../composables/use-state';
 
   /**
    * It emits a {@link ExtraParamsXEvents.ExtraParamsProvided} with the values
@@ -11,40 +11,34 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(extraParamsXModule)]
-  })
-  export default class ExtraParams extends Vue {
-    /**
-     * Emits the initial extra params, overriding with the state extra params, just in case, those
-     * values were already set by XComponents initialization (url, plugin config, etc.).
-     */
-    created(): void {
-      this.$x.emit('ExtraParamsInitialized', { ...this.values });
-      this.$x.emit('ExtraParamsProvided', { ...this.values, ...this.storeExtraParams });
-    }
 
-    /**
-     * (Required) A Dictionary where the keys are the extra param names and its values.
-     *
-     * @remarks Emits the {@link ExtraParamsXEvents.ExtraParamsProvided} when the
-     * component is rendered or the values changed.
-     *
-     * @public
-     */
-    @XEmit('ExtraParamsProvided', { immediate: false, deep: true })
-    @Prop({ required: true })
-    public values!: Dictionary<unknown>;
+  export default defineComponent({
+    name: 'ExtraParams',
+    xModule: extraParamsXModule.name,
+    props: {
+      values: {
+        type: Object as PropType<Dictionary<unknown>>,
+        required: true
+      }
+    },
+    setup(props) {
+      const { params } = useState('extraParams', ['params']);
+      const $x = use$x();
 
-    /**
-     * State extra params. Used to override the initial extra params.
-     */
-    @State('extraParams', 'params')
-    public storeExtraParams!: Dictionary<unknown>;
+      $x.emit('ExtraParamsInitialized', { ...props.values });
+      $x.emit('ExtraParamsProvided', { ...props.values, ...params.value });
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    render(): void {}
-  }
+      watch(
+        () => props.values,
+        values => {
+          $x.emit('ExtraParamsProvided', { ...values });
+        },
+        { deep: true }
+      );
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      return () => {};
+    }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue b/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue
index a6e86d798c..b62ed09319 100644
--- a/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue
+++ b/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue
@@ -4,87 +4,59 @@
 
 <script lang="ts">
   import { forEach, Dictionary } from '@empathyco/x-utils';
-  import Vue from 'vue';
-  import { Component, Inject, Prop, Watch } from 'vue-property-decorator';
-  import { xComponentMixin } from '../../../components/x-component.mixin';
+  import { defineComponent, inject, PropType, ref, watch } from 'vue';
   import { SnippetConfig } from '../../../x-installer/api/api.types';
   import { extraParamsXModule } from '../x-module';
   import ExtraParams from './extra-params.vue';
 
-  /**
-   * Extracts the extra parameters from the {@link SnippetConfig} and syncs it with the request
-   * objects of every x-module.
-   *
-   * @public
-   */
-  @Component({
-    components: { ExtraParams },
-    mixins: [xComponentMixin(extraParamsXModule)]
-  })
-  export default class SnippetConfigExtraParams extends Vue {
-    /**
-     * It injects {@link SnippetConfig} provided by an ancestor as snippetConfig.
-     *
-     * @internal
-     */
-    @Inject('snippetConfig')
-    public snippetConfig!: SnippetConfig;
-
-    /**
-     * A Dictionary where the keys are the extra param names and its values.
-     *
-     * @public
-     */
-    @Prop()
-    protected values?: Dictionary<unknown>;
-
-    /**
-     * Custom object containing the extra params from the snippet config and the values prop.
-     *
-     * @remarks This object keeps manually the desired snippet config properties to avoid
-     * unnecessary re-renders.
-     *
-     * @returns A dictionary with the extra params.
-     *
-     * @internal
-     */
-    protected extraParams: Dictionary<unknown> = {};
+  export default defineComponent({
+    name: 'SnippetConfigExtraParams',
+    xModule: extraParamsXModule.name,
+    components: {
+      ExtraParams
+    },
+    props: {
+      values: {
+        type: Object as PropType<Dictionary<unknown>>
+      },
+      excludedExtraParams: {
+        type: Array as PropType<Array<keyof SnippetConfig>>,
+        default: (): Array<keyof SnippetConfig> => [
+          'callbacks',
+          'productId',
+          'uiLang',
+          'consent',
+          'documentDirection',
+          'filters',
+          'isSpa',
+          'queriesPreview'
+        ]
+      }
+    },
+    setup(props) {
+      const snippetConfig = inject('snippetConfig') as SnippetConfig;
+      const extraParams = ref({});
 
-    /**
-     * Updates the extraParams object when the snippet config or the values prop changes.
-     *
-     * @internal
-     */
-    @Watch('snippetConfig', { deep: true, immediate: true })
-    @Watch('values', { deep: true, immediate: true })
-    syncExtraParams(): void {
-      forEach({ ...this.values, ...this.snippetConfig }, (name, value) => {
-        if (!this.excludedExtraParams.includes(name)) {
-          this.$set(this.extraParams, name, value);
+      watch(
+        [() => snippetConfig, () => props.values],
+        () => {
+          forEach({ ...props.values, ...snippetConfig }, (name, value) => {
+            if (!props.excludedExtraParams.includes(name)) {
+              extraParams.value = { ...extraParams.value, [name]: value };
+            }
+          });
+        },
+        {
+          deep: true,
+          immediate: true
         }
-      });
-    }
+      );
 
-    /**
-     * Collection of properties from the snippet config to exclude from the
-     * extra params object.
-     *
-     * @public
-     */
-    @Prop({
-      default: (): Array<keyof SnippetConfig> => [
-        'callbacks',
-        'productId',
-        'uiLang',
-        'consent',
-        'documentDirection',
-        'filters',
-        'isSpa',
-        'queriesPreview'
-      ]
-    })
-    protected excludedExtraParams!: Array<keyof SnippetConfig>;
-  }
+      return {
+        extraParams
+      };
+    }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/extra-params/x-module.ts b/packages/x-components/src/x-modules/extra-params/x-module.ts
index 241efc6bd8..26033bcecc 100644
--- a/packages/x-components/src/x-modules/extra-params/x-module.ts
+++ b/packages/x-components/src/x-modules/extra-params/x-module.ts
@@ -1,4 +1,5 @@
 import { XModule } from '../x-modules.types';
+import { XPlugin } from '../../plugins/index';
 import { extraParamsEmitters } from './store/emitters';
 import { extraParamsXStoreModule } from './store/module';
 import { ExtraParamsXStoreModule } from './store/types';
@@ -23,3 +24,5 @@ export const extraParamsXModule: ExtraParamsXModule = {
   storeEmitters: extraParamsEmitters,
   wiring: extraParamsWiring
 };
+
+XPlugin.registerXModule(extraParamsXModule);

From 042bc99775909735d68a5e62b5197a0e94973823 Mon Sep 17 00:00:00 2001
From: empathy/x <x@empathy.co>
Date: Mon, 24 Jun 2024 10:39:46 +0000
Subject: [PATCH 2/4] chore(release): publish

 - vue3-migration-test@1.0.0-alpha.34
 - @empathyco/x-components@5.0.0-alpha.53
---
 packages/_vue3-migration-test/CHANGELOG.md | 9 +++++++++
 packages/_vue3-migration-test/package.json | 2 +-
 packages/x-components/CHANGELOG.md         | 9 +++++++++
 packages/x-components/package.json         | 2 +-
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
index 8b93d30a7e..ab74c52fca 100644
--- a/packages/_vue3-migration-test/CHANGELOG.md
+++ b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,15 @@
 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.34](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.33...vue3-migration-test@1.0.0-alpha.34) (2024-06-24)
+
+
+### Features
+
+* **extra-params:** migrate extra params and snippet config extra params (#1531) ([d869f18](https://github.com/empathyco/x/commit/d869f1886c11f74af8a6350033d7567385ad629d))
+
+
+
 ## [1.0.0-alpha.33](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.32...vue3-migration-test@1.0.0-alpha.33) (2024-06-19)
 
 
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index 5d08eda105..5a2556c1d6 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.33",
+  "version": "1.0.0-alpha.34",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index 4f1152e099..bec4abbcc5 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,15 @@
 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.53](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.52...@empathyco/x-components@5.0.0-alpha.53) (2024-06-24)
+
+
+### Features
+
+* **extra-params:** migrate extra params and snippet config extra params (#1531) ([d869f18](https://github.com/empathyco/x/commit/d869f1886c11f74af8a6350033d7567385ad629d))
+
+
+
 ## [5.0.0-alpha.52](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.51...@empathyco/x-components@5.0.0-alpha.52) (2024-06-20)
 
 
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index ded2851221..db1c781c94 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.52",
+  "version": "5.0.0-alpha.53",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",

From f498d3fba5d294391dcfca47f9724558e98f50f0 Mon Sep 17 00:00:00 2001
From: alvarodE <72568818+alvarodE@users.noreply.github.com>
Date: Mon, 24 Jun 2024 17:31:33 +0200
Subject: [PATCH 3/4] feat: replace DisableAnimationMixin by
 useDisableAnimation composable (#1469)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Víctor CG <victorcg@empathy.co>
---
 .../src/components/animations/index.ts        |   1 +
 .../animations/test-fade-and-slide.vue        |  11 +
 packages/_vue3-migration-test/src/main.ts     |   3 +-
 packages/_vue3-migration-test/src/router.ts   |   6 +
 ....spec.ts => use-disable-animation.spec.ts} |  48 +-
 .../components/animations/collapse-height.vue |   3 +-
 .../components/animations/collapse-width.vue  |   3 +-
 .../src/components/animations/cross-fade.vue  |   3 +-
 .../animations/disable-animation.mixin.ts     |  36 -
 .../components/animations/fade-and-slide.vue  |  59 +-
 .../src/components/animations/index.ts        |   2 +-
 .../animations/staggered-fade-and-slide.vue   |  64 +-
 .../staggering-transition-group.vue           | 727 +++++++++---------
 .../animations/use-disable-animation.ts       |  26 +
 14 files changed, 484 insertions(+), 508 deletions(-)
 create mode 100644 packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue
 rename packages/x-components/src/components/animations/__tests__/{disable-animation-mixin.spec.ts => use-disable-animation.spec.ts} (60%)
 delete mode 100644 packages/x-components/src/components/animations/disable-animation.mixin.ts
 create mode 100644 packages/x-components/src/components/animations/use-disable-animation.ts

diff --git a/packages/_vue3-migration-test/src/components/animations/index.ts b/packages/_vue3-migration-test/src/components/animations/index.ts
index 4d2c00cf2b..f1ee0800dd 100644
--- a/packages/_vue3-migration-test/src/components/animations/index.ts
+++ b/packages/_vue3-migration-test/src/components/animations/index.ts
@@ -3,3 +3,4 @@ export { default as TestCollapseHeight } from './test-collapse-height.vue';
 export { default as TestCollapseWidth } from './test-collapse-width.vue';
 export { default as TestCrossFade } from './test-cross-fade.vue';
 export { default as TestFade } from './test-fade.vue';
+export { default as TestFadeAndSlide } from './test-fade-and-slide.vue';
diff --git a/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue b/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue
new file mode 100644
index 0000000000..8553f4e244
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/animations/test-fade-and-slide.vue
@@ -0,0 +1,11 @@
+<template>
+  <FadeAndSlide tag="ul">
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+    <li>Element to animate</li>
+  </FadeAndSlide>
+</template>
+
+<script setup lang="ts">
+  import FadeAndSlide from '../../../../x-components/src/components/animations/fade-and-slide.vue';
+</script>
diff --git a/packages/_vue3-migration-test/src/main.ts b/packages/_vue3-migration-test/src/main.ts
index 80f0c05f47..fe773026db 100644
--- a/packages/_vue3-migration-test/src/main.ts
+++ b/packages/_vue3-migration-test/src/main.ts
@@ -40,8 +40,7 @@ if (VUE_COMPAT_MODE === 2) {
     INSTANCE_LISTENERS: 'suppress-warning',
     INSTANCE_ATTRS_CLASS_STYLE: 'suppress-warning',
     RENDER_FUNCTION: false,
-    COMPONENT_V_MODEL: false,
-    WATCH_ARRAY: false
+    COMPONENT_V_MODEL: false
   });
 }
 
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index da58d80ff3..e9a253de77 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -11,6 +11,7 @@ import {
   TestElementsList,
   TestFacets,
   TestFade,
+  TestFadeAndSlide,
   TestScroll,
   TestSortDropdown,
   TestSortList,
@@ -74,6 +75,11 @@ const routes = [
     name: 'BaseModal',
     component: TestBaseModal
   },
+  {
+    path: '/fade-and-slide',
+    name: 'FadeAndSlide',
+    component: TestFadeAndSlide
+  },
   {
     path: '/base-dropdown',
     name: 'BaseDropdown',
diff --git a/packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts b/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
similarity index 60%
rename from packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts
rename to packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
index c3bc5bf904..91a642a215 100644
--- a/packages/x-components/src/components/animations/__tests__/disable-animation-mixin.spec.ts
+++ b/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts
@@ -1,36 +1,33 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import { Component, Prop, Provide } from 'vue-property-decorator';
-import Vue, { ComponentOptions, CreateElement, VNode } from 'vue';
-import DisableAnimationMixin from '../disable-animation.mixin';
+import { mount } from '@vue/test-utils';
+import { defineComponent, provide, ref } from 'vue';
 import { DISABLE_ANIMATIONS_KEY } from '../../decorators/injection.consts';
+import { useDisableAnimation } from '../use-disable-animation';
 
-@Component
-class Provider extends Vue {
-  @Prop()
-  @Provide(DISABLE_ANIMATIONS_KEY as string)
-  public disableAnimation!: boolean;
-
-  render(h: CreateElement): VNode {
+const Provider = defineComponent({
+  props: {
+    disableAnimation: Boolean
+  },
+  setup(props) {
+    provide(DISABLE_ANIMATIONS_KEY as string, ref(props.disableAnimation));
+  },
+  render(h) {
     return this.$slots.default?.[0] ?? h();
   }
-}
+});
 
 /**
  * Animation component.
  */
-const Animation: ComponentOptions<Vue> = {
-  mixins: [DisableAnimationMixin],
+const Animation = defineComponent({
+  setup() {
+    return useDisableAnimation('x-animation');
+  },
   template: `
     <transition-group :name="name">
      <p>Animation</p>
     </transition-group>
-  `,
-  data() {
-    return {
-      animationName: 'x-animation'
-    };
-  }
-};
+  `
+});
 
 /**
  * Function that returns an Animation wrapper.
@@ -38,9 +35,7 @@ const Animation: ComponentOptions<Vue> = {
  * @param disableAnimation - Flag to disable the animation.
  * @returns Animation wrapper.
  */
-function renderDisableAnimation({
-  disableAnimation = true
-}: DisableAnimationOptions = {}): DisableAnimationAPI {
+function renderDisableAnimation({ disableAnimation = true }: DisableAnimationOptions = {}) {
   const wrapper = mount({
     template: `
         <Provider :disableAnimation="disableAnimation">
@@ -78,8 +73,3 @@ interface DisableAnimationOptions {
   /** Flag to disable the animation. */
   disableAnimation?: boolean;
 }
-
-interface DisableAnimationAPI {
-  /** The wrapper of the mounted component. */
-  wrapper: Wrapper<Vue>;
-}
diff --git a/packages/x-components/src/components/animations/collapse-height.vue b/packages/x-components/src/components/animations/collapse-height.vue
index 9ded2cfd63..7c512b4871 100644
--- a/packages/x-components/src/components/animations/collapse-height.vue
+++ b/packages/x-components/src/components/animations/collapse-height.vue
@@ -1,11 +1,12 @@
 <template>
+  <!-- eslint-disable vue/attributes-order -->
   <transition
+    v-bind="$attrs"
     v-on="$listeners"
     @enter="expand"
     @after-enter="cleanUpAnimationStyles"
     @leave="collapse"
     name="x-collapse-height-"
-    v-bind="$attrs"
     :appear="appear"
   >
     <!-- @slot (Required) to add content to the transition -->
diff --git a/packages/x-components/src/components/animations/collapse-width.vue b/packages/x-components/src/components/animations/collapse-width.vue
index 0d9a408d26..ca59254b75 100644
--- a/packages/x-components/src/components/animations/collapse-width.vue
+++ b/packages/x-components/src/components/animations/collapse-width.vue
@@ -1,11 +1,12 @@
 <template>
+  <!-- eslint-disable vue/attributes-order -->
   <transition
+    v-bind="$attrs"
     v-on="$listeners"
     @enter="expand"
     @after-enter="cleanUpAnimationStyles"
     @leave="collapse"
     name="x-collapse-width-"
-    v-bind="$attrs"
     :appear="appear"
   >
     <!-- @slot (Required) to add content to the transition -->
diff --git a/packages/x-components/src/components/animations/cross-fade.vue b/packages/x-components/src/components/animations/cross-fade.vue
index 1bece28416..f61f14c711 100644
--- a/packages/x-components/src/components/animations/cross-fade.vue
+++ b/packages/x-components/src/components/animations/cross-fade.vue
@@ -1,5 +1,6 @@
 <template>
-  <transition v-on="$listeners" name="x-cross-fade-" v-bind="$attrs" :appear="appear">
+  <!-- eslint-disable-next-line vue/attributes-order -->
+  <transition v-bind="$attrs" v-on="$listeners" name="x-cross-fade-" :appear="appear">
     <!-- @slot (Required) to add content to the transition -->
     <slot />
   </transition>
diff --git a/packages/x-components/src/components/animations/disable-animation.mixin.ts b/packages/x-components/src/components/animations/disable-animation.mixin.ts
deleted file mode 100644
index 9581fa47cf..0000000000
--- a/packages/x-components/src/components/animations/disable-animation.mixin.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import Vue from 'vue';
-import { Component, Inject } from 'vue-property-decorator';
-import { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';
-
-/**
- * Mixin to ease disabling animations.
- *
- * @public
- */
-@Component
-export default class DisableAnimationMixin extends Vue {
-  /**
-   * The name of the animation.
-   *
-   * @public
-   */
-  protected animationName!: string;
-
-  /**
-   * Flag to disable the animation.
-   *
-   * @public
-   */
-  @Inject({ from: DISABLE_ANIMATIONS_KEY as string, default: false })
-  public disableAnimation!: boolean;
-
-  /**
-   * The animation's name based on the {@link DisableAnimationMixin.disableAnimation} flag.
-   *
-   * @returns The animation name.
-   * @internal
-   */
-  protected get name(): string {
-    return this.disableAnimation ? '__no-animation__' : this.animationName;
-  }
-}
diff --git a/packages/x-components/src/components/animations/fade-and-slide.vue b/packages/x-components/src/components/animations/fade-and-slide.vue
index 727d14dd87..9dbdb13c21 100644
--- a/packages/x-components/src/components/animations/fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/fade-and-slide.vue
@@ -1,10 +1,11 @@
 <template>
+  <!-- eslint-disable vue/attributes-order -->
   <transition-group
+    v-bind="$attrs"
     v-on="$listeners"
     class="x-fade-and-slide"
     :name="name"
     :tag="tag"
-    v-bind="$attrs"
     :appear="appear"
   >
     <!-- @slot (Required) Transition-group content -->
@@ -13,9 +14,8 @@
 </template>
 
 <script lang="ts">
-  import { mixins } from 'vue-class-component';
-  import { Prop, Component } from 'vue-property-decorator';
-  import DisableAnimationMixin from './disable-animation.mixin';
+  import { defineComponent } from 'vue';
+  import { useDisableAnimation } from './use-disable-animation';
 
   /**
    * Renders a transition group wrapping the elements passed in the default slot and animating
@@ -23,34 +23,33 @@
    *
    * @public
    */
-  @Component({
-    inheritAttrs: false
-  })
-  export default class FadeAndSlide extends mixins(DisableAnimationMixin) {
-    /**
-     * The name of the animation.
-     *
-     * @public
-     */
-    protected animationName = 'x-fade-and-slide-';
+  export default defineComponent({
+    name: 'FadeAndSlide',
+    inheritAttrs: false,
+    props: {
+      /**
+       * HTML Element that the transition-group children will be wrapped in.
+       */
+      tag: String,
+      /**
+       * Indicates if the transition must be applied on the initial render of the node.
+       */
+      appear: {
+        type: Boolean,
+        default: true
+      }
+    },
+    setup: function () {
+      /**
+       * The name of the animation.
+       */
+      const animationName = 'x-fade-and-slide-';
 
-    /**
-     * HTML Element that the transition-group children will be wrapped in.
-     *
-     * @public
-     */
-    @Prop()
-    protected tag!: string;
+      const { name } = useDisableAnimation(animationName);
 
-    /**
-     * Indicates if the transition must be applied on the initial render of the node.
-     */
-    @Prop({
-      type: Boolean,
-      default: true
-    })
-    public appear!: boolean;
-  }
+      return { name };
+    }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/components/animations/index.ts b/packages/x-components/src/components/animations/index.ts
index 7f6d8c69d6..26240a7f04 100644
--- a/packages/x-components/src/components/animations/index.ts
+++ b/packages/x-components/src/components/animations/index.ts
@@ -6,9 +6,9 @@ export { default as Fade } from './fade.vue';
 export { default as FadeAndSlide } from './fade-and-slide.vue';
 export { default as StaggeredFadeAndSlide } from './staggered-fade-and-slide.vue';
 export { default as StaggeringTransitionGroup } from './staggering-transition-group.vue';
-export { default as DisableAnimationMixin } from './disable-animation.mixin';
 export { createDirectionalAnimationFactory } from './create-directional-animation-factory';
 export { animateClipPath } from './animate-clip-path/animate-clip-path.factory';
 export { animateScale } from './animate-scale/animate-scale.factory';
 export { animateTranslate } from './animate-translate/animate-translate.factory';
 export * from './use-collapse-animation';
+export * from './use-disable-animation';
diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
index 17c820d927..033f8ec17e 100644
--- a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
+++ b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -1,48 +1,52 @@
 <template>
-  <staggering-transition-group
+  <!-- eslint-disable vue/attributes-order -->
+  <StaggeringTransitionGroup
+    v-bind="$attrs"
     v-on="$listeners"
     class="x-staggered-fade-and-slide"
     :name="name"
-    v-bind="$attrs"
     :appear="appear"
   >
     <!-- @slot (Required) Transition-group content -->
     <slot />
-  </staggering-transition-group>
+  </StaggeringTransitionGroup>
 </template>
 
 <script lang="ts">
-  import { mixins } from 'vue-class-component';
-  import { Component, Prop } from 'vue-property-decorator';
-  import StaggeringTransitionGroup from '../animations/staggering-transition-group.vue';
-  import DisableAnimationMixin from './disable-animation.mixin';
+  import { defineComponent } from 'vue';
+  import StaggeringTransitionGroup from './staggering-transition-group.vue';
+  import { useDisableAnimation } from './use-disable-animation';
 
   /**
    * Renders a transition group wrapping the elements passed in the default slot and animating
-   * them with an staggered fade and slide animation.
+   * them with a staggered fade and slide animation.
    *
    * @public
    */
-  @Component({
+  export default defineComponent({
+    name: 'StaggeredFadeAndSlide',
     components: { StaggeringTransitionGroup },
-    inheritAttrs: false
-  })
-  export default class StaggeredFadeAndSlide extends mixins(DisableAnimationMixin) {
-    /**
-     * Indicates if the transition must be applied on the initial render of the node.
-     */
-    @Prop({
-      type: Boolean,
-      default: true
-    })
-    public appear!: boolean;
-    /**
-     * The name of the animation.
-     *
-     * @public
-     */
-    protected animationName = 'x-staggered-fade-and-slide-';
-  }
+    inheritAttrs: false,
+    props: {
+      /**
+       * Indicates if the transition must be applied on the initial render of the node.
+       */
+      appear: {
+        type: Boolean,
+        default: true
+      }
+    },
+    setup: function () {
+      /**
+       * The name of the animation.
+       */
+      const animationName = 'x-staggered-fade-and-slide-';
+
+      const { name } = useDisableAnimation(animationName);
+
+      return { name };
+    }
+  });
 </script>
 
 <style lang="scss" scoped>
@@ -91,9 +95,9 @@ or the `stagger` props:
 
 ```vue
 <StaggeredFadeAndSlide tag="ul" :stagger="50">
-  <li>Element to animate</li>
-  <li>Element to animate</li>
-  <li>Element to animate</li>
+  <li key="1">Element to animate</li>
+  <li key="2">Element to animate</li>
+  <li key="3">Element to animate</li>
 </StaggeredFadeAndSlide>
 ```
 </docs>
diff --git a/packages/x-components/src/components/animations/staggering-transition-group.vue b/packages/x-components/src/components/animations/staggering-transition-group.vue
index 13b8b05859..5e84c1b6bd 100644
--- a/packages/x-components/src/components/animations/staggering-transition-group.vue
+++ b/packages/x-components/src/components/animations/staggering-transition-group.vue
@@ -1,7 +1,15 @@
 <script lang="ts">
-  import Vue, { CreateElement, VNode } from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { noOp } from '../../utils';
+  import {
+    computed,
+    defineComponent,
+    h,
+    onBeforeUpdate,
+    onMounted,
+    onUpdated,
+    ref,
+    VNode
+  } from 'vue';
+  import { noOp } from '../../utils/function';
 
   /* eslint-disable @typescript-eslint/unbound-method */
   /**
@@ -10,408 +18,373 @@
    *
    * @public
    */
-  @Component
-  export default class StaggeringTransitionGroup extends Vue {
-    /**
-     * The name of the transition. Used to generate the CSS classes.
-     *
-     * @public
-     */
-    @Prop({ default: 'v' })
-    public name!: string;
-
-    /**
-     * The CSS move class name.
-     *
-     * @public
-     */
-    @Prop()
-    public moveClass!: string;
-
-    /**
-     * The tag of the node to render to the DOM.
-     *
-     * @public
-     */
-    @Prop({ default: 'div' })
-    public tag!: string;
-
-    /**
-     * The time in ms to stagger each item.
-     *
-     * @public
-     */
-    @Prop({ default: 25 })
-    public staggering!: number;
-
-    /**
-     * The CSS class for the moving transitions.
-     *
-     * @returns The move transition name.
-     * @internal
-     */
-    protected get moveClassName(): string {
-      return this.moveClass ?? `${this.name}-move`;
-    }
+  export default defineComponent({
+    name: 'StaggeringTransitionGroup',
+    props: {
+      /**
+       * The name of the transition. Used to generate the CSS classes.
+       */
+      name: {
+        type: String,
+        default: 'v'
+      },
+      /**
+       * The CSS move class name.
+       */
+      moveClass: String,
+      /**
+       * The tag of the node to render to the DOM.
+       */
+      tag: {
+        type: String,
+        default: 'div'
+      },
+      /**
+       * The time in ms to stagger each item.
+       */
+      staggering: {
+        type: Number,
+        default: 25
+      }
+    },
+    setup(props, { attrs, listeners, slots }) {
+      /**
+       * The reference to the element rendered by the component.
+       * Passed to the 'h' render function which will set the ref when the element is created.
+       */
+      const el = ref<HTMLElement>();
+
+      /**
+       * The CSS class for the moving transitions.
+       *
+       * @returns The move transition name.
+       */
+      const moveClassName = computed<string>(() => {
+        return props.moveClass ?? `${props.name}-move`;
+      });
 
-    /**
-     * The transition data contains the needed events and props to perform a transition using Vue
-     * virtual node's API.
-     *
-     * The `beforeLeave` hook is extended to also restore the previous position of the element using
-     * the position absolute.
-     * The `afterEnter` and `afterLeave` hooks are extended to also clean the transition delay
-     * applied by the stagger.
-     *
-     * @returns The transition data for Vue virtual nodes.
-     * @internal
-     */
-    protected get transitionData(): TransitionData {
-      const transitionData: TransitionData = { ...this.$props, ...this.$attrs, ...this.$listeners };
-
-      transitionData.beforeLeave = this.addRestorePositionHook(transitionData.beforeLeave);
-      transitionData.afterEnter = this.addClearStaggeringCall(transitionData.afterEnter);
-      transitionData.afterLeave = this.addClearStaggeringCall(transitionData.afterLeave);
-
-      return transitionData;
-    }
+      /**
+       * The transition data contains the needed events and props to perform a transition using Vue
+       * virtual node's API.
+       *
+       * The `beforeLeave` hook is extended to also restore the previous position of the element using
+       * the position absolute.
+       * The `afterEnter` and `afterLeave` hooks are extended to also clean the transition delay
+       * applied by the stagger.
+       *
+       * @returns The transition data for Vue virtual nodes.
+       */
+      const transitionData = computed<TransitionData>(() => {
+        const transitionData: TransitionData = { ...props, ...attrs, ...listeners };
+
+        transitionData.beforeLeave = addRestorePositionHook(transitionData.beforeLeave);
+        transitionData.afterEnter = addClearStaggeringCall(transitionData.afterEnter);
+        transitionData.afterLeave = addClearStaggeringCall(transitionData.afterLeave);
+
+        return transitionData;
+      });
 
-    /**
-     * The list of old virtual nodes, generated by the previous called render method.
-     *
-     * @internal
-     */
-    protected oldChildren!: TransitionVNode[];
-    /**
-     * The list of new virtual nodes, generated by the last called render method.
-     *
-     * @internal
-     */
-    protected newChildren!: TransitionVNode[];
-    /**
-     * A map containing the previous positions relative to the container, for each item
-     * rendered inside the slot of this component.
-     * This is used together with the `newPositions` to calculate the move transition.
-     *
-     * @internal
-     */
-    protected oldPositions!: WeakMap<Element, Bounds>;
-    /**
-     * A map containing the new positions relative to the container, for each item
-     * rendered inside the slot of this component.
-     * This is used together with the `newPositions` to calculate the move transition.
-     *
-     * @internal
-     */
-    protected newPositions!: WeakMap<Element, Bounds>;
-    /**
-     * A map containing the move cleanup functions pending to have been called. When invoked
-     * this functions remove all the styles and classes associated to the move transition.
-     *
-     * @internal
-     */
-    protected pendingCleanupMoveCallbacks!: WeakMap<Element, () => void>;
-    /**
-     * The counter for the stagger, used to calculate the delay for the transition of each child
-     * element. It is reset every time the render method is triggered.
-     *
-     * @internal
-     */
-    protected staggerCounter!: number;
-    /**
-     * The bounds of the container rendered using the `tag` prop. This is used to calculate the
-     * relative positions of each leaving child, which are then applied with the position absolute.
-     *
-     * @internal
-     */
-    protected wrapperBounds!: DOMRect;
-
-    beforeCreate(): void {
       // Initialize properties here to avoid making them reactive, which would cause infinite loops.
-      this.oldChildren = [];
-      this.newChildren = [];
-      this.oldPositions = new WeakMap();
-      this.newPositions = new WeakMap();
-      this.pendingCleanupMoveCallbacks = new WeakMap<Element, () => void>();
-      this.staggerCounter = 0;
-    }
+      /**
+       * The list of old virtual nodes, generated by the previous called render method.
+       */
+      let oldChildren: TransitionVNode[] = [];
+      /**
+       * The list of new virtual nodes, generated by the last called render method.
+       */
+      let newChildren: TransitionVNode[] = [];
+      /**
+       * A map containing the previous positions relative to the container, for each item
+       * rendered inside the slot of this component.
+       * This is used together with the `newPositions` to calculate the move transition.
+       */
+      const oldPositions: WeakMap<Element, Bounds> = new WeakMap();
+      /**
+       * A map containing the new positions relative to the container, for each item
+       * rendered inside the slot of this component.
+       * This is used together with the `newPositions` to calculate the move transition.
+       */
+      const newPositions: WeakMap<Element, Bounds> = new WeakMap();
+      /**
+       * A map containing the move cleanup functions pending to have been called. When invoked
+       * this functions remove all the styles and classes associated to the move transition.
+       */
+      const pendingCleanupMoveCallbacks: WeakMap<Element, () => void> = new WeakMap<
+        Element,
+        () => void
+      >();
+      /**
+       * The counter for the stagger, used to calculate the delay for the transition of each child
+       * element. It is reset every time the render method is triggered.
+       */
+      let staggerCounter = 0;
+      /**
+       * The bounds of the container rendered using the `tag` prop. This is used to calculate the
+       * relative positions of each leaving child, which are then applied with the position absolute.
+       */
+      let wrapperBounds: DOMRect;
+
+      onMounted(() => {
+        newChildren.forEach(applyStagger);
+      });
 
-    render(createElement: CreateElement): VNode {
-      this.staggerCounter = 0;
-      // New children are now the old ones
-      this.oldChildren = this.newChildren;
-      // Only vnodes with a tag (i.e. no HTML comments) and with a `key` property are valid.
-      this.newChildren = (this.$slots.default ?? []).filter(this.isTransitionValidVNode);
-
-      // Apply transition data to both new and old nodes & store the position of the old nodes.
-      this.newChildren.forEach(this.addTransitionData);
-      this.oldChildren.forEach(this.syncOldNodes);
-
-      return createElement(
-        this.tag,
-        { staticClass: 'x-staggering-transition-group' },
-        this.newChildren
-      );
-    }
+      onBeforeUpdate(() => {
+        wrapperBounds = el.value!.getBoundingClientRect();
+      });
 
-    mounted(): void {
-      this.newChildren.forEach(this.applyStagger);
-    }
+      onUpdated(() => {
+        wrapperBounds = el.value!.getBoundingClientRect();
+        newChildren.forEach(recordNewPosition);
+        const { leavingNodes, stayingNodes, enteringNodes } = getNodesByTransitionType();
 
-    beforeUpdate(): void {
-      this.wrapperBounds = this.$el.getBoundingClientRect();
-    }
+        leavingNodes.forEach(vNode => {
+          applyStagger(vNode);
+          disableClickingEvents(vNode);
+        });
+        const movedChildren = stayingNodes.filter(applyTranslation);
+        const movedStagger = movedChildren.map(getNextTransitionDelay);
+        enteringNodes.forEach(applyStagger);
 
-    updated(): void {
-      this.wrapperBounds = this.$el.getBoundingClientRect();
-      this.newChildren.forEach(this.recordNewPosition);
-      const { leavingNodes, stayingNodes, enteringNodes } = this.getNodesByTransitionType();
+        // force reflow to put everything in position
+        document.body.getBoundingClientRect();
 
-      leavingNodes.forEach(vNode => {
-        this.applyStagger(vNode);
-        this.disableClickingEvents(vNode);
+        movedChildren.forEach(startMoveAnimation(movedStagger));
       });
-      const movedChildren = stayingNodes.filter(this.applyTranslation);
-      const movedStagger = movedChildren.map(this.getNextTransitionDelay);
-      enteringNodes.forEach(this.applyStagger);
-
-      // force reflow to put everything in position
-      document.body.getBoundingClientRect();
-
-      movedChildren.forEach(this.startMoveAnimation(movedStagger));
-    }
 
-    /**
-     * Extends the provided leave transition hook restoring the position of the element with an
-     * absolute position.
-     * Additionally, it removes the element position from the maps of positions.
-     *
-     * @param transitionHook - The leave transition hook to extend.
-     * @returns The new leave transition hook extended.
-     * @internal
-     */
-    protected addRestorePositionHook(transitionHook: TransitionHook = noOp): TransitionHook {
-      return element => {
-        const { top, left, width, height } = this.oldPositions.get(element)!;
-        const { marginTop, marginLeft } = window.getComputedStyle(element);
-        const style = element.style;
-        style.position = 'absolute';
-        style.top = `${top - parseFloat(marginTop)}px`;
-        style.left = `${left - parseFloat(marginLeft)}px`;
-        style.width = `${width}px`;
-        style.height = `${height}px`;
-        this.newPositions.delete(element);
-        this.oldPositions.delete(element);
-        const pendingCallback = this.pendingCleanupMoveCallbacks.get(element);
-        pendingCallback?.();
-        transitionHook(element);
-      };
-    }
+      /**
+       * Extends the provided leave transition hook restoring the position of the element with an
+       * absolute position.
+       * Additionally, it removes the element position from the maps of positions.
+       *
+       * @param transitionHook - The leave transition hook to extend.
+       * @returns The new leave transition hook extended.
+       */
+      function addRestorePositionHook(transitionHook: TransitionHook = noOp): TransitionHook {
+        return element => {
+          const { top, left, width, height } = oldPositions.get(element)!;
+          const { marginTop, marginLeft } = window.getComputedStyle(element);
+          const style = element.style;
+          style.position = 'absolute';
+          style.top = `${top - parseFloat(marginTop)}px`;
+          style.left = `${left - parseFloat(marginLeft)}px`;
+          style.width = `${width}px`;
+          style.height = `${height}px`;
+          newPositions.delete(element);
+          oldPositions.delete(element);
+          const pendingCallback = pendingCleanupMoveCallbacks.get(element);
+          pendingCallback?.();
+          transitionHook(element);
+        };
+      }
 
-    /**
-     * Extends the provided transition hook clearing the transition delay.
-     *
-     * @param transitionHook - The transition hook to extend.
-     * @returns The new transition hook, that also clears the transitionDelay from the element.
-     * @internal
-     */
-    protected addClearStaggeringCall(transitionHook: TransitionHook = noOp): TransitionHook {
-      return element => {
-        element.style.transitionDelay = '';
-        transitionHook(element);
-      };
-    }
+      /**
+       * Extends the provided transition hook clearing the transition delay.
+       *
+       * @param transitionHook - The transition hook to extend.
+       * @returns The new transition hook, that also clears the transitionDelay from the element.
+       */
+      function addClearStaggeringCall(transitionHook: TransitionHook = noOp): TransitionHook {
+        return element => {
+          element.style.transitionDelay = '';
+          transitionHook(element);
+        };
+      }
 
-    /**
-     * Returns if the vNode contains a non empty key, and a non empty tag.
-     *
-     * @param vNode - The VNode to check if it is a valid transition node, containing a `tag` and a
-     * `key` property.
-     * @returns True when the vNode contains a non empty key and a non empty tag. False otherwise.
-     * @internal
-     */
-    protected isTransitionValidVNode(vNode: VNode): vNode is TransitionVNode {
-      // TODO Add warning with logger: <staggering-transition-group> children must be keyed.
-      return !!vNode.key && !!vNode.tag;
-    }
+      /**
+       * Returns if the vNode contains a non empty key, and a non empty tag.
+       *
+       * @param vNode - The VNode to check if it is a valid transition node, containing a `tag` and a
+       * `key` property.
+       * @returns True when the vNode contains a non empty key and a non empty tag. False otherwise.
+       */
+      function isTransitionValidVNode(vNode: VNode): vNode is TransitionVNode {
+        // TODO Add warning with logger: <staggering-transition-group> children must be keyed.
+        return !!vNode.key && !!vNode.tag;
+      }
 
-    /**
-     * Adds the generated transition data to the vNode, creating the `data` property if necessary.
-     *
-     * @param vNode - The VNode to add the transition data to.
-     * @internal
-     */
-    protected addTransitionData(vNode: TransitionVNode): void {
-      if (!vNode.data) {
-        vNode.data = {};
+      /**
+       * Adds the generated transition data to the vNode, creating the `data` property if necessary.
+       *
+       * @param vNode - The VNode to add the transition data to.
+       */
+      function addTransitionData(vNode: TransitionVNode): void {
+        if (!vNode.data) {
+          vNode.data = {};
+        }
+        vNode.data.transition = transitionData.value;
       }
-      vNode.data.transition = this.transitionData;
-    }
 
-    /**
-     * Re-applies the transition data to an old node, just in case it changed from the previous
-     * render call. It also records the position of the node, to then calculate the move
-     * transitions.
-     *
-     * @param vNode - The vNode to add the transition data to, and record his current position as
-     * old.
-     * @internal
-     */
-    protected syncOldNodes(vNode: TransitionVNode): void {
-      // Synchronize transition data, in case it changed in the last frame.
-      // We can trust data to be defined because each new node has the transition applied
-      vNode.data!.transition = this.transitionData;
-      this.recordOldPosition(vNode);
-    }
+      /**
+       * Re-applies the transition data to an old node, just in case it changed from the previous
+       * render call. It also records the position of the node, to then calculate the move
+       * transitions.
+       *
+       * @param vNode - The vNode to add the transition data to, and record his current position as
+       * old.
+       */
+      function syncOldNodes(vNode: TransitionVNode): void {
+        // Synchronize transition data, in case it changed in the last frame.
+        // We can trust data to be defined because each new node has the transition applied
+        vNode.data!.transition = transitionData.value;
+        recordOldPosition(vNode);
+      }
 
-    /**
-     * Saves the position of the vNode in the map of old positions.
-     *
-     * @param vNode - The node to store its position.
-     * @internal
-     */
-    protected recordOldPosition(vNode: TransitionVNode): void {
-      this.oldPositions.set(vNode.elm, this.createRelativeBounds(vNode));
-    }
+      /**
+       * Saves the position of the vNode in the map of old positions.
+       *
+       * @param vNode - The node to store its position.
+       */
+      function recordOldPosition(vNode: TransitionVNode): void {
+        oldPositions.set(vNode.elm, createRelativeBounds(vNode));
+      }
 
-    /**
-     * Saves the position of the vNode in the map of new positions.
-     *
-     * @param vNode - The node to store its position.
-     * @internal
-     */
-    protected recordNewPosition(vNode: TransitionVNode): void {
-      this.newPositions.set(vNode.elm, this.createRelativeBounds(vNode));
-    }
+      /**
+       * Saves the position of the vNode in the map of new positions.
+       *
+       * @param vNode - The node to store its position.
+       */
+      function recordNewPosition(vNode: TransitionVNode): void {
+        newPositions.set(vNode.elm, createRelativeBounds(vNode));
+      }
 
-    /**
-     * Creates an object containing the position of the vNode relative to its container.
-     *
-     * @param vNode - The virtual node to store its relative position.
-     * @returns The relative bounds of the provided virtual node.
-     * @internal
-     */
-    protected createRelativeBounds(vNode: TransitionVNode): Bounds {
-      const { left, top, width, height } = vNode.elm.getBoundingClientRect();
-      const { left: wrapperLeft, top: wrapperTop } = this.wrapperBounds;
-      return {
-        left: left - wrapperLeft,
-        top: top - wrapperTop,
-        width,
-        height
-      };
-    }
+      /**
+       * Creates an object containing the position of the vNode relative to its container.
+       *
+       * @param vNode - The virtual node to store its relative position.
+       * @returns The relative bounds of the provided virtual node.
+       */
+      function createRelativeBounds(vNode: TransitionVNode): Bounds {
+        const { left, top, width, height } = vNode.elm.getBoundingClientRect();
+        const { left: wrapperLeft, top: wrapperTop } = wrapperBounds;
+        return {
+          left: left - wrapperLeft,
+          top: top - wrapperTop,
+          width,
+          height
+        };
+      }
 
-    /**
-     * Splits the children of the component into three groups:
-     * - Nodes that are leaving.
-     * - Nodes that are entering.
-     * - Nodes that stay.
-     *
-     * This is then used to apply the stagger in the correct order: leave -\> move -\> enter.
-     *
-     * @returns The children nodes, divided in different groups depending on if they are leaving,
-     * staying or entering.
-     * @internal
-     */
-    protected getNodesByTransitionType(): TransitionTypeNodes {
-      const leave = this.oldChildren.filter(child => !this.newPositions.has(child.elm));
-      const enter = this.newChildren.filter(child => !this.oldPositions.has(child.elm));
-      const stay = this.oldChildren.filter(child => this.newPositions.has(child.elm));
-      return {
-        leavingNodes: leave,
-        enteringNodes: enter,
-        stayingNodes: stay
-      };
-    }
+      /**
+       * Splits the children of the component into three groups:
+       * - Nodes that are leaving.
+       * - Nodes that are entering.
+       * - Nodes that stay.
+       *
+       * This is then used to apply the stagger in the correct order: leave -\> move -\> enter.
+       *
+       * @returns The children nodes, divided in different groups depending on if they are leaving,
+       * staying or entering.
+       */
+      function getNodesByTransitionType(): TransitionTypeNodes {
+        const leave = oldChildren.filter(child => !newPositions.has(child.elm));
+        const enter = newChildren.filter(child => !oldPositions.has(child.elm));
+        const stay = oldChildren.filter(child => newPositions.has(child.elm));
+        return {
+          leavingNodes: leave,
+          enteringNodes: enter,
+          stayingNodes: stay
+        };
+      }
 
-    /**
-     * Applies an incremental delay to the virtual node element.
-     *
-     * @param vNode - The virtual node to apply the stagger to.
-     * @internal
-     */
-    protected applyStagger(vNode: TransitionVNode): void {
-      vNode.elm.style.transitionDelay = this.getNextTransitionDelay();
-    }
+      /**
+       * Applies an incremental delay to the virtual node element.
+       *
+       * @param vNode - The virtual node to apply the stagger to.
+       */
+      function applyStagger(vNode: TransitionVNode): void {
+        vNode.elm.style.transitionDelay = getNextTransitionDelay();
+      }
 
-    /**
-     * Disables listening to click events in a virtual node element.
-     *
-     * @remarks This is done to avoid letting the user click elements that are performing the moving
-     * animation to leave the DOM but are still rendered.
-     *
-     * @param vNode - The virtual node to disable listening to click events.
-     * @internal
-     */
-    protected disableClickingEvents(vNode: TransitionVNode): void {
-      vNode.elm.style.pointerEvents = 'none';
-    }
+      /**
+       * Disables listening to click events in a virtual node element.
+       *
+       * @remarks This is done to avoid letting the user click elements that are performing the moving
+       * animation to leave the DOM but are still rendered.
+       *
+       * @param vNode - The virtual node to disable listening to click events.
+       */
+      function disableClickingEvents(vNode: TransitionVNode): void {
+        vNode.elm.style.pointerEvents = 'none';
+      }
 
-    /**
-     * Calculates the next transition delay property, incrementing the `staggerCounter` property
-     * each time it is called.
-     *
-     * @returns The value for the next element `style.transitionDelay` property.
-     * @internal
-     */
-    protected getNextTransitionDelay(): string {
-      return `${this.staggerCounter++ * this.staggering}ms`;
-    }
+      /**
+       * Calculates the next transition delay property, incrementing the `staggerCounter` property
+       * each time it is called.
+       *
+       * @returns The value for the next element `style.transitionDelay` property.
+       */
+      function getNextTransitionDelay(): string {
+        return `${staggerCounter++ * props.staggering}ms`;
+      }
 
-    /**
-     * Calculates if the virtual node should have a move transition. If its has it, then it
-     * applies it immediately using the `style.transform`.
-     *
-     * @param vNode - The virtual node to calculate if it should have a move transition.
-     * @returns True when a move transition was applied to the virtual node.
-     * @internal
-     */
-    protected applyTranslation(vNode: TransitionVNode): boolean {
-      const oldPosition = this.oldPositions.get(vNode.elm as Element)!;
-      const newPosition = this.newPositions.get(vNode.elm as Element)!;
-      const dx = oldPosition.left - newPosition.left;
-      const dy = oldPosition.top - newPosition.top;
-      if (dx !== 0 || dy !== 0) {
-        const style = vNode.elm.style;
-        style.transform = `translate3d(${dx}px,${dy}px,0)`;
-        style.transitionDuration = '0s';
-        return true;
+      /**
+       * Calculates if the virtual node should have a move transition. If its has it, then it
+       * applies it immediately using the `style.transform`.
+       *
+       * @param vNode - The virtual node to calculate if it should have a move transition.
+       * @returns True when a move transition was applied to the virtual node.
+       */
+      function applyTranslation(vNode: TransitionVNode): boolean {
+        const oldPosition = oldPositions.get(vNode.elm as Element)!;
+        const newPosition = newPositions.get(vNode.elm as Element)!;
+        const dx = oldPosition.left - newPosition.left;
+        const dy = oldPosition.top - newPosition.top;
+        if (dx !== 0 || dy !== 0) {
+          const style = vNode.elm.style;
+          style.transform = `translate3d(${dx}px,${dy}px,0)`;
+          style.transitionDuration = '0s';
+          return true;
+        }
+        return false;
       }
-      return false;
-    }
 
-    /**
-     * Generates a function to start the moving animations to each node that it needs them with the
-     * provided stagger.
-     *
-     * @param moveStagger - A list containing the delay to add to each node.
-     * @returns A function that starts the moving animation with the provided stagger to a single
-     * virtual node.
-     * @internal
-     */
-    protected startMoveAnimation(
-      moveStagger: string[]
-    ): (vNode: TransitionVNode, index: number) => void {
-      return (vNode, index) => {
-        const element = vNode.elm;
-        const style = element.style;
-        element.classList.add(this.moveClassName);
-        style.transform = style.transitionDuration = '';
-        style.transitionDelay = moveStagger[index];
-        const cleanMoveTransition = (event?: TransitionEvent): void => {
-          if (!event || (event.target === element && /transform$/.test(event.propertyName))) {
-            element.removeEventListener('transitionend', cleanMoveTransition);
-            element.style.transitionDelay = '';
-            element.classList.remove(this.moveClassName);
-            this.pendingCleanupMoveCallbacks.delete(element);
-          }
+      /**
+       * Generates a function to start the moving animations to each node that it needs them with the
+       * provided stagger.
+       *
+       * @param moveStagger - A list containing the delay to add to each node.
+       * @returns A function that starts the moving animation with the provided stagger to a single
+       * virtual node.
+       */
+      function startMoveAnimation(
+        moveStagger: string[]
+      ): (vNode: TransitionVNode, index: number) => void {
+        return (vNode, index) => {
+          const element = vNode.elm;
+          const style = element.style;
+          element.classList.add(moveClassName.value);
+          style.transform = style.transitionDuration = '';
+          style.transitionDelay = moveStagger[index];
+          const cleanMoveTransition = (event?: TransitionEvent): void => {
+            if (!event || (event.target === element && /transform$/.test(event.propertyName))) {
+              element.removeEventListener('transitionend', cleanMoveTransition);
+              element.style.transitionDelay = '';
+              element.classList.remove(moveClassName.value);
+              pendingCleanupMoveCallbacks.delete(element);
+            }
+          };
+          pendingCleanupMoveCallbacks.set(element, cleanMoveTransition);
+          element.addEventListener('transitionend', cleanMoveTransition);
         };
-        this.pendingCleanupMoveCallbacks.set(element, cleanMoveTransition);
-        element.addEventListener('transitionend', cleanMoveTransition);
+      }
+
+      return () => {
+        staggerCounter = 0;
+        // New children are now the old ones
+        oldChildren = newChildren;
+        // Only vnodes with a tag (i.e. no HTML comments) and with a `key` property are valid.
+        newChildren = (
+          (typeof slots.default === 'function' ? slots.default() : slots.default) ?? []
+        ).filter(isTransitionValidVNode);
+
+        // Apply transition data to both new and old nodes & store the position of the old nodes.
+        newChildren.forEach(addTransitionData);
+        oldChildren.forEach(syncOldNodes);
+
+        return h(props.tag, { ref: el, class: 'x-staggering-transition-group' }, newChildren);
       };
     }
-  }
+  });
 
   /**
    * Contains arrays of nodes, splitted by the action they should have.
diff --git a/packages/x-components/src/components/animations/use-disable-animation.ts b/packages/x-components/src/components/animations/use-disable-animation.ts
new file mode 100644
index 0000000000..3699717c98
--- /dev/null
+++ b/packages/x-components/src/components/animations/use-disable-animation.ts
@@ -0,0 +1,26 @@
+import { computed, inject, ref } from 'vue';
+import { DISABLE_ANIMATIONS_KEY } from '../decorators/injection.consts';
+
+/**
+ * Composable to ease disabling animations.
+ *
+ * @param animationName - The name of the animation.
+ * @returns Composable with the computed name of the animation.
+ *
+ * @public
+ */
+export function useDisableAnimation(animationName: string) {
+  /**
+   * Flag to disable the animation.
+   */
+  const disableAnimation = inject(DISABLE_ANIMATIONS_KEY as string, ref(false));
+
+  /**
+   * The animation's name based on the DISABLE_ANIMATIONS_KEY flag.
+   *
+   * @returns The animation name.
+   */
+  const name = computed(() => (disableAnimation.value ? '__no-animation__' : animationName));
+
+  return { name };
+}

From 77241451b5c26e116748ac30a2fd63905f8ca0c4 Mon Sep 17 00:00:00 2001
From: empathy/x <x@empathy.co>
Date: Mon, 24 Jun 2024 15:46:29 +0000
Subject: [PATCH 4/4] chore(release): publish

 - vue3-migration-test@1.0.0-alpha.35
 - @empathyco/x-components@5.0.0-alpha.54
---
 packages/_vue3-migration-test/CHANGELOG.md | 9 +++++++++
 packages/_vue3-migration-test/package.json | 2 +-
 packages/x-components/CHANGELOG.md         | 9 +++++++++
 packages/x-components/package.json         | 2 +-
 4 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
index ab74c52fca..68e242cf04 100644
--- a/packages/_vue3-migration-test/CHANGELOG.md
+++ b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,15 @@
 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.35](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.34...vue3-migration-test@1.0.0-alpha.35) (2024-06-24)
+
+
+### Features
+
+* replace DisableAnimationMixin by useDisableAnimation composable (#1469) ([f498d3f](https://github.com/empathyco/x/commit/f498d3fba5d294391dcfca47f9724558e98f50f0))
+
+
+
 ## [1.0.0-alpha.34](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.33...vue3-migration-test@1.0.0-alpha.34) (2024-06-24)
 
 
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index 5a2556c1d6..042051a216 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.34",
+  "version": "1.0.0-alpha.35",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index bec4abbcc5..659ed5a190 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,15 @@
 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.54](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.53...@empathyco/x-components@5.0.0-alpha.54) (2024-06-24)
+
+
+### Features
+
+* replace DisableAnimationMixin by useDisableAnimation composable (#1469) ([f498d3f](https://github.com/empathyco/x/commit/f498d3fba5d294391dcfca47f9724558e98f50f0))
+
+
+
 ## [5.0.0-alpha.53](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.52...@empathyco/x-components@5.0.0-alpha.53) (2024-06-24)
 
 
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index db1c781c94..96f4814caf 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.53",
+  "version": "5.0.0-alpha.54",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",