From f1f7112b1295e8deb1951cf4dca75bd71a5d219a Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Tue, 23 Jul 2024 17:11:34 +0200
Subject: [PATCH 1/6] refactor: use listeners prop for GlobalXBus

---
 .../src/components/global-x-bus.vue           | 19 ++++++++++++-------
 .../src/components/snippet-callbacks.vue      |  2 +-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/x-components/src/components/global-x-bus.vue b/packages/x-components/src/components/global-x-bus.vue
index b816054fb5..836a7ab31e 100644
--- a/packages/x-components/src/components/global-x-bus.vue
+++ b/packages/x-components/src/components/global-x-bus.vue
@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, PropType } from 'vue';
   import { XEventListeners } from '../x-installer/api/api.types';
   import { XEvent } from '../wiring/events.types';
-  import { useNoElementRender } from '../composables/use-no-element-render';
   import { useXBus } from '../composables/use-x-bus';
 
   /**
@@ -13,20 +12,26 @@
    */
   export default defineComponent({
     name: 'GlobalXBus',
-    setup(_, { listeners, slots }) {
+    props: {
+      listeners: {
+        type: Object as PropType<XEventListeners>,
+        required: true
+      }
+    },
+    setup(props) {
       const xBus = useXBus();
 
       /**
        * Handles a subscription to all the events provided in the listeners with the function that
        * will execute the callback.
        */
-      Object.entries(listeners as XEventListeners).forEach(([eventName, callback]) => {
+      Object.entries(props.listeners as XEventListeners).forEach(([eventName, callback]) => {
         xBus.on(eventName as XEvent, true).subscribe(({ eventPayload, metadata }) => {
           callback(eventPayload as never, metadata);
         });
       });
 
-      return () => useNoElementRender(slots);
+      return {};
     }
   });
 </script>
@@ -39,11 +44,11 @@ This component emits no own events, but you can subscribe to any X Event using V
 ## See it in action
 
 This component does not render anything. Its only responsibility is to facilitate listening to any X
-Event by using Vue component listeners.
+Event by using the prop `listeners`
 
 ```vue
 <template>
-  <GlobalXBus @UserAcceptedAQuery="printQuery" />
+  <GlobalXBus :listeners="{ UserAcceptedAQuery: printQuery }" />
 </template>
 
 <script>
diff --git a/packages/x-components/src/components/snippet-callbacks.vue b/packages/x-components/src/components/snippet-callbacks.vue
index e6f7913602..c8dea2811b 100644
--- a/packages/x-components/src/components/snippet-callbacks.vue
+++ b/packages/x-components/src/components/snippet-callbacks.vue
@@ -1,5 +1,5 @@
 <template>
-  <GlobalXBus v-on="eventListeners" />
+  <GlobalXBus :listeners="eventListeners" />
 </template>
 
 <script lang="ts">

From 65c36411a7b7d8749c6d9a9f93da64ff46f66074 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Tue, 23 Jul 2024 18:32:53 +0200
Subject: [PATCH 2/6] use onMounted to create resizeObserver

---
 .../x-components/src/components/base-grid.vue | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/x-components/src/components/base-grid.vue b/packages/x-components/src/components/base-grid.vue
index 1d4a096948..86ed995de2 100644
--- a/packages/x-components/src/components/base-grid.vue
+++ b/packages/x-components/src/components/base-grid.vue
@@ -36,12 +36,17 @@
     defineComponent,
     inject,
     onBeforeUnmount,
+    onMounted,
     PropType,
     Ref,
     ref,
     watch
   } from 'vue';
-  import { MaybeComputedElementRef, useResizeObserver } from '@vueuse/core';
+  import {
+    MaybeComputedElementRef,
+    useResizeObserver,
+    UseResizeObserverReturn
+  } from '@vueuse/core';
   import { toKebabCase } from '../utils/string';
   import { ListItem, VueCSSClasses } from '../utils/types';
   import { AnimationProp } from '../types/animation-prop';
@@ -229,11 +234,14 @@
        *
        * @internal
        */
-      const resizeObserver = useResizeObserver(
-        gridEl as MaybeComputedElementRef,
-        updateRenderedColumnsNumber
-      );
-      onBeforeUnmount(() => resizeObserver.stop());
+      let resizeObserver: UseResizeObserverReturn;
+      onMounted(() => {
+        resizeObserver = useResizeObserver(
+          gridEl as MaybeComputedElementRef,
+          updateRenderedColumnsNumber
+        );
+      });
+      onBeforeUnmount(() => resizeObserver?.stop());
 
       return {
         gridItems,

From 7fd037410d63a9de3bb0f4d4995e65616a959d82 Mon Sep 17 00:00:00 2001
From: Diego Pascual <diegopf@users.noreply.github.com>
Date: Tue, 23 Jul 2024 18:37:23 +0200
Subject: [PATCH 3/6] get rid of deprecated `MultiColumnMaxWidthLayout`

---
 packages/x-components/src/views/home/Home.vue | 596 +++++++++---------
 1 file changed, 296 insertions(+), 300 deletions(-)

diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index 8737328e43..6e0671c345 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -99,11 +99,11 @@
         </label>
       </li>
     </ul>
-    <MainModal :animation="modalAnimation">
-      <MultiColumnMaxWidthLayout class="x-bg-neutral-0">
-        <template #header-middle>
-          <div class="x-flex x-flex-col x-gap-16 x-items-stretch x-flex-auto">
-            <div class="x-input-group x-input-group-lead x-rounded-sm">
+    <MainModal>
+      <div class="x-layout-container x-layout-max-width-md x-layout-min-margin-48 x-bg-neutral-0">
+        <div id="header-middle" class="x-layout-item x-py-8">
+          <div class="x-flex x-gap-16 x-justify-between x-flex-auto">
+            <div class="x-input-group x-input-group-lead x-rounded-sm x-flex-auto">
               <div class="x-input x-search-input-placeholder-container x-flex">
                 <SearchInputPlaceholder :messages="searchInputPlaceholderMessages" />
                 <SearchInput
@@ -122,329 +122,326 @@
                 <SearchIcon />
               </SearchButton>
             </div>
-
-            <!-- Spellcheck -->
-            <Spellcheck>
-              <template #default="{ query }">
-                No results found for '{{ query }}'. We show you results for
-                <SpellcheckButton />
-              </template>
-            </Spellcheck>
-
-            <SlidingPanel v-if="$x.relatedTags.length">
-              <template #sliding-panel-left-button>
-                <ChevronLeft />
-              </template>
-              <RelatedTags class="x-gap-8" itemClass="x-tag-outlined" />
-              <template #sliding-panel-right-button>
-                <ChevronRight />
-              </template>
-            </SlidingPanel>
+            <div id="header-end">
+              <CloseMainModal class="x-button--ghost x-button">
+                <CrossIcon />
+              </CloseMainModal>
+            </div>
           </div>
-        </template>
-
-        <template #header-end>
-          <CloseMainModal class="x-button--ghost x-button">
-            <CrossIcon />
-          </CloseMainModal>
-        </template>
+        </div>
 
-        <template #sub-header>
+        <div id="sub-header" class="x-layout-item x-py-8">
           <PredictiveLayer :controls="controls" />
-        </template>
-
-        <template #toolbar-aside>
-          <BaseIdTogglePanelButton
-            v-if="$x.totalResults > 0"
-            class="x-button--ghost x-button"
-            panelId="aside-panel"
-          >
-            Toggle Aside
-          </BaseIdTogglePanelButton>
-        </template>
+          <!-- Spellcheck -->
+          <Spellcheck>
+            <template #default="{ query }">
+              No results found for '{{ query }}'. We show you results for
+              <SpellcheckButton />
+            </template>
+          </Spellcheck>
 
-        <template #toolbar-body>
-          <div v-if="$x.totalResults > 0" class="x-flex x-items-center x-gap-12">
-            <span class="x-text1">{{ $x.totalResults }} Results</span>
-            <BaseColumnPickerList
-              @update:modelValue="col => (selectedColumns = col)"
-              :modelValue="selectedColumns"
-              class="x-gap-4"
-              :columns="columnPickerValues"
-            >
-              <template #default="{ column }">
-                <span v-if="column === 0">Auto</span>
-                <Grid2Col v-else-if="column === 2" />
-                <Grid4Col v-else-if="column === 4" />
-              </template>
+          <SlidingPanel v-if="x.relatedTags.length">
+            <template #sliding-panel-left-button>
+              <ChevronLeft />
+            </template>
+            <RelatedTags class="x-gap-8" itemClass="x-tag-outlined" />
+            <template #sliding-panel-right-button>
+              <ChevronRight />
+            </template>
+          </SlidingPanel>
+          <div id="toolbar-body">
+            <div v-if="x.totalResults > 0" class="x-flex x-items-center x-gap-12">
+              <span class="x-text1">{{ x.totalResults }} Results</span>
+              <BaseColumnPickerList
+                @update:modelValue="col => (selectedColumns = col)"
+                :modelValue="selectedColumns"
+                class="x-gap-4"
+                :columns="columnPickerValues"
+              >
+                <template #default="{ column }">
+                  <span v-if="column === 0">Auto</span>
+                  <Grid2Col v-else-if="column === 2" />
+                  <Grid4Col v-else-if="column === 4" />
+                </template>
 
-              <template #divider>
-                <span class="x-button-group-divider"></span>
-              </template>
-            </BaseColumnPickerList>
-            <SortPickerList
-              :items="sortValues"
-              class="x-button-group"
-              buttonClass="x-button x-button-outlined"
-              #default="{ item }"
-            >
-              {{ item || 'default' }}
-            </SortPickerList>
+                <template #divider>
+                  <span class="x-button-group-divider"></span>
+                </template>
+              </BaseColumnPickerList>
+              <SortPickerList
+                :items="sortValues"
+                class="x-button-group"
+                buttonClass="x-button x-button-outlined"
+                #default="{ item }"
+              >
+                {{ item || 'default' }}
+              </SortPickerList>
 
-            <RenderlessExtraParams #default="{ value, updateValue }" name="store">
-              <BaseDropdown
-                @update:modelValue="updateValue"
-                :modelValue="value"
-                :items="stores"
-                class="x-dropdown x-dropdown--round x-dropdown--right x-dropdown--l"
-                data-test="store-selector"
-              />
-            </RenderlessExtraParams>
+              <RenderlessExtraParams #default="{ value, updateValue }" name="store">
+                <BaseDropdown
+                  @update:modelValue="updateValue"
+                  :modelValue="value"
+                  :items="stores"
+                  class="x-dropdown x-dropdown--round x-dropdown--right x-dropdown--l"
+                  data-test="store-selector"
+                />
+              </RenderlessExtraParams>
+            </div>
           </div>
-        </template>
-
-        <template #main-aside>
-          <Aside v-if="$x.totalResults > 0" />
-        </template>
+        </div>
 
-        <template #main-body>
-          <!--  Redirection  -->
-          <Redirection
-            #default="{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }"
-            class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
-            :delayInSeconds="5"
-          >
-            <p>Your search matches a special place in our website. You are being redirected to:</p>
-            <a @click="redirect" :href="redirection.url" data-test="redirection-link">
-              {{ redirection.url }}
-            </a>
-            <div class="x-flex x-gap-32">
-              <button @click="abortRedirect" class="x-button--ghost x-button x-text-neutral-25">
-                No, I'll stay here
-              </button>
-              <button @click="redirect" class="x-button--ghost x-button x-text-neutral-90">
-                Yes, redirect me
-              </button>
+        <div
+          id="main-body"
+          class="x-layout-item x-layout-no-margin-right x-layout-expand x-mt-16 x-mb-16"
+        >
+          <div class="x-flex x-layout-expand x-gap-24">
+            <div id="main-aside" class="x-scroll x-w-320">
+              <Aside v-if="x.totalResults > 0" />
             </div>
-            <AutoProgressBar :isLoading="isRedirecting" :durationInSeconds="delayInSeconds" />
-          </Redirection>
-
-          <template v-if="!$x.redirections.length">
-            <FallbackDisclaimer class="x-message" />
+            <!--  Redirection  -->
+            <div class="x-scroll x-layout-expand">
+              <div class="x-layout-item x-layout-no-margin-left">
+                <Redirection
+                  #default="{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }"
+                  class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
+                  :delayInSeconds="5"
+                >
+                  <p>
+                    Your search matches a special place in our website. You are being redirected to:
+                  </p>
+                  <a @click="redirect" :href="redirection.url" data-test="redirection-link">
+                    {{ redirection.url }}
+                  </a>
+                  <div class="x-flex x-gap-32">
+                    <button
+                      @click="abortRedirect"
+                      class="x-button--ghost x-button x-text-neutral-25"
+                    >
+                      No, I'll stay here
+                    </button>
+                    <button @click="redirect" class="x-button--ghost x-button x-text-neutral-90">
+                      Yes, redirect me
+                    </button>
+                  </div>
+                  <AutoProgressBar :isLoading="isRedirecting" :durationInSeconds="delayInSeconds" />
+                </Redirection>
 
-            <!--  No Results Message  -->
-            <div
-              v-if="$x.noResults && !$x.fromNoResultsWithFilters"
-              class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
-              data-test="no-results-message"
-            >
-              <p>
-                There are no results for
-                <span class="x-font-bold">{{ $x.query.search }}</span>
-              </p>
-              <p>You may be interested in these:</p>
-            </div>
+                <template v-if="!x.redirections.length">
+                  <FallbackDisclaimer class="x-message" />
 
-            <template v-if="!$x.query.searchBox">
-              <h1 class="x-mb-16 x-title1">Brand Recommendations</h1>
-              <LocationProvider location="no_results">
-                <QueryPreviewList
-                  :debounceTimeMs="250"
-                  :queriesPreviewInfo="queriesPreviewInfo"
-                  data-wysiwyg="query-preview-list"
-                  #default="{
-                    queryPreviewInfo,
-                    totalResults,
-                    results,
-                    displayTagging,
-                    queryTagging
-                  }"
-                  data-test="brand-recommendations-list"
-                  :persistInCache="true"
-                >
-                  <DisplayEmitter
-                    :payload="displayTagging"
-                    :eventMetadata="{ feature: 'customer' }"
+                  <!--  No Results Message  -->
+                  <div
+                    v-if="x.noResults && !x.fromNoResultsWithFilters"
+                    class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
+                    data-test="no-results-message"
                   >
-                    <div class="x-flex x-flex-col x-gap-8 x-mb-16">
-                      <QueryPreviewButton
-                        class="x-w-fit x-button-xl x-button-ghost"
-                        :queryPreviewInfo="queryPreviewInfo"
+                    <p>
+                      There are no results for
+                      <span class="x-font-bold">{{ x.query.search }}</span>
+                    </p>
+                    <p>You may be interested in these:</p>
+                  </div>
+
+                  <template v-if="!x.query.searchBox">
+                    <h1 class="x-mb-16 x-title1">Brand Recommendations</h1>
+                    <LocationProvider location="no_results">
+                      <QueryPreviewList
+                        :debounceTimeMs="250"
+                        :queriesPreviewInfo="queriesPreviewInfo"
+                        data-wysiwyg="query-preview-list"
+                        #default="{
+                          queryPreviewInfo,
+                          totalResults,
+                          results,
+                          displayTagging,
+                          queryTagging
+                        }"
+                        data-test="brand-recommendations-list"
+                        :persistInCache="true"
                       >
-                        {{ `${queryPreviewInfo.query} (${totalResults})` }}
-                      </QueryPreviewButton>
-                      <DisplayResultProvider :queryTagging="queryTagging">
-                        <SlidingPanel :resetOnContentChange="false">
-                          <div class="x-flex x-gap-8">
-                            <Result
-                              v-for="result in results"
-                              :key="result.id"
-                              :result="result"
-                              style="max-width: 180px"
-                            />
+                        <DisplayEmitter
+                          :payload="displayTagging"
+                          :eventMetadata="{ feature: 'customer' }"
+                        >
+                          <div class="x-flex x-flex-col x-gap-8 x-mb-16">
+                            <QueryPreviewButton
+                              class="x-w-fit x-button-xl x-button-ghost"
+                              :queryPreviewInfo="queryPreviewInfo"
+                            >
+                              {{ `${queryPreviewInfo.query} (${totalResults})` }}
+                            </QueryPreviewButton>
+                            <DisplayResultProvider :queryTagging="queryTagging">
+                              <SlidingPanel :resetOnContentChange="false">
+                                <div class="x-flex x-gap-8">
+                                  <Result
+                                    v-for="result in results"
+                                    :key="result.id"
+                                    :result="result"
+                                    style="max-width: 180px"
+                                  />
+                                </div>
+                              </SlidingPanel>
+                            </DisplayResultProvider>
                           </div>
-                        </SlidingPanel>
-                      </DisplayResultProvider>
-                    </div>
-                  </DisplayEmitter>
-                </QueryPreviewList>
-              </LocationProvider>
-            </template>
+                        </DisplayEmitter>
+                      </QueryPreviewList>
+                    </LocationProvider>
+                  </template>
 
-            <!-- Results -->
-            <LocationProvider location="results">
-              <ResultsList v-infinite-scroll:main-scroll>
-                <PromotedsList>
-                  <BannersList>
-                    <NextQueriesList
-                      :show-only-after-offset="controls.nextQueriesList.showOnlyAfterOffset"
-                    >
-                      <BaseVariableColumnGrid
-                        style="--x-size-min-width-grid-item: 150px"
-                        class="x-gap-12"
-                        :animation="resultsAnimation"
-                        :columns="$x.device === 'mobile' ? 2 : 4"
-                      >
-                        <template #result="{ item: result }">
-                          <MainScrollItem :item="result">
-                            <Result :result="result" data-test="search-result" />
-                          </MainScrollItem>
-                        </template>
+                  <!-- Results -->
+                  <LocationProvider location="results">
+                    <ResultsList v-infinite-scroll:main-scroll>
+                      <PromotedsList>
+                        <BannersList>
+                          <NextQueriesList
+                            :show-only-after-offset="controls.nextQueriesList.showOnlyAfterOffset"
+                          >
+                            <BaseVariableColumnGrid
+                              style="--x-size-min-width-grid-item: 150px"
+                              class="x-gap-12"
+                              :columns="x.device === 'mobile' ? 2 : 4"
+                            >
+                              <template #result="{ item: result }">
+                                <MainScrollItem :item="result">
+                                  <Result :result="result" data-test="search-result" />
+                                </MainScrollItem>
+                              </template>
+
+                              <template #banner="{ item: banner }">
+                                <Banner :banner="banner" />
+                              </template>
 
-                        <template #banner="{ item: banner }">
-                          <Banner :banner="banner" />
-                        </template>
+                              <template #promoted="{ item: promoted }">
+                                <Promoted :promoted="promoted" />
+                              </template>
 
-                        <template #promoted="{ item: promoted }">
-                          <Promoted :promoted="promoted" />
-                        </template>
+                              <template #next-queries-group="{ item: { nextQueries } }">
+                                <NextQueryPreview
+                                  :suggestion="nextQueries[0]"
+                                  :max-items-to-render="
+                                    controls.nextQueriesPreview.maxItemsToRender
+                                  "
+                                  #default="{ results }"
+                                  class="x-pt-24"
+                                >
+                                  <h1 class="x-title2">Others clients have searched</h1>
+                                  <NextQuery
+                                    class="x-suggestion x-text1 x-text1-lg"
+                                    :suggestion="nextQueries[0]"
+                                    data-test="next-query-preview-name"
+                                  >
+                                    <span class="x-font-bold">{{ nextQueries[0].query }}</span>
+                                  </NextQuery>
+                                  <div class="x-mb-24">
+                                    <SlidingPanel :resetOnContentChange="false">
+                                      <div class="x-flex x-flex-row x-gap-8">
+                                        <Result
+                                          v-for="result in results"
+                                          :key="result.id"
+                                          :result="result"
+                                          style="max-width: 180px"
+                                          data-test="next-query-preview-result"
+                                        />
+                                      </div>
+                                    </SlidingPanel>
+                                  </div>
+                                  <NextQuery
+                                    :suggestion="nextQueries[0]"
+                                    data-test="view-all-results"
+                                    class="x-button x-button-outlined x-rounded-full x-mx-auto x-mt-8 x-mb-24"
+                                  >
+                                    {{ 'View all results' }}
+                                  </NextQuery>
+                                </NextQueryPreview>
+                              </template>
+                            </BaseVariableColumnGrid>
+                          </NextQueriesList>
+                        </BannersList>
+                      </PromotedsList>
+                    </ResultsList>
+                  </LocationProvider>
 
-                        <template #next-queries-group="{ item: { nextQueries } }">
-                          <NextQueryPreview
-                            :suggestion="nextQueries[0]"
-                            :max-items-to-render="controls.nextQueriesPreview.maxItemsToRender"
-                            #default="{ results }"
-                            class="x-pt-24"
+                  <SemanticQueries #default="{ queries, findSemanticQuery }">
+                    <section class="x-mt-28">
+                      <h1 v-if="isAnyQueryLoadedInPreview(queries)" class="x-title1">
+                        Similar Semantic Queries
+                      </h1>
+                      <LocationProvider :location="x.noResults ? 'no_results' : 'low_results'">
+                        <QueryPreviewList
+                          :queries-preview-info="queries.map(q => ({ query: q }))"
+                          #default="{ queryPreviewInfo: { query }, results, queryTagging }"
+                          queryFeature="semantics"
+                        >
+                          <div
+                            class="x-flex x-flex-col x-gap-8 x-mb-16"
+                            data-test="semantic-query-preview"
+                            :data-query="query"
                           >
-                            <h1 class="x-title2">Others clients have searched</h1>
-                            <NextQuery
-                              class="x-suggestion x-text1 x-text1-lg"
-                              :suggestion="nextQueries[0]"
-                              data-test="next-query-preview-name"
+                            <SemanticQuery
+                              class="x-suggestion x-title2 x-title2-md"
+                              :suggestion="findSemanticQuery(query)"
+                              #default="{ suggestion: { query } }"
                             >
-                              <span class="x-font-bold">{{ nextQueries[0].query }}</span>
-                            </NextQuery>
-                            <div class="x-mb-24">
+                              <span data-test="semantic-queries-query">{{ query }}</span>
+                            </SemanticQuery>
+                            <DisplayResultProvider :queryTagging="queryTagging">
                               <SlidingPanel :resetOnContentChange="false">
-                                <div class="x-flex x-flex-row x-gap-8">
+                                <div class="x-flex x-gap-8">
                                   <Result
                                     v-for="result in results"
                                     :key="result.id"
                                     :result="result"
                                     style="max-width: 180px"
-                                    data-test="next-query-preview-result"
+                                    data-test="semantic-query-result"
                                   />
                                 </div>
                               </SlidingPanel>
-                            </div>
-                            <NextQuery
-                              :suggestion="nextQueries[0]"
-                              data-test="view-all-results"
-                              class="x-button x-button-outlined x-rounded-full x-mx-auto x-mt-8 x-mb-24"
-                            >
-                              {{ 'View all results' }}
-                            </NextQuery>
-                          </NextQueryPreview>
-                        </template>
-                      </BaseVariableColumnGrid>
-                    </NextQueriesList>
-                  </BannersList>
-                </PromotedsList>
-              </ResultsList>
-            </LocationProvider>
+                            </DisplayResultProvider>
+                          </div>
+                        </QueryPreviewList>
+                      </LocationProvider>
+                    </section>
+                  </SemanticQueries>
 
-            <SemanticQueries #default="{ queries, findSemanticQuery }">
-              <section class="x-mt-28">
-                <h1 v-if="isAnyQueryLoadedInPreview(queries)" class="x-title1">
-                  Similar Semantic Queries
-                </h1>
-                <LocationProvider :location="$x.noResults ? 'no_results' : 'low_results'">
-                  <QueryPreviewList
-                    :queries-preview-info="queries.map(q => ({ query: q }))"
-                    #default="{ queryPreviewInfo: { query }, results, queryTagging }"
-                    queryFeature="semantics"
+                  <!-- Partials -->
+                  <PartialResultsList
+                    v-if="!x.fromNoResultsWithFilters && (x.totalResults <= 4 || x.noResults)"
                   >
-                    <div
-                      class="x-flex x-flex-col x-gap-8 x-mb-16"
-                      data-test="semantic-query-preview"
-                      :data-query="query"
-                    >
-                      <SemanticQuery
-                        class="x-suggestion x-title2 x-title2-md"
-                        :suggestion="findSemanticQuery(query)"
-                        #default="{ suggestion: { query } }"
-                      >
-                        <span data-test="semantic-queries-query">{{ query }}</span>
-                      </SemanticQuery>
-                      <DisplayResultProvider :queryTagging="queryTagging">
-                        <SlidingPanel :resetOnContentChange="false">
-                          <div class="x-flex x-gap-8">
-                            <Result
-                              v-for="result in results"
-                              :key="result.id"
-                              :result="result"
-                              style="max-width: 180px"
-                              data-test="semantic-query-result"
-                            />
-                          </div>
-                        </SlidingPanel>
-                      </DisplayResultProvider>
-                    </div>
-                  </QueryPreviewList>
-                </LocationProvider>
-              </section>
-            </SemanticQueries>
+                    <template #default="{ partialResult }">
+                      <span data-test="partial-query">{{ partialResult.query }}</span>
+                      <BaseGrid #result="{ item }" :columns="4" :items="partialResult.results">
+                        <Result :result="item" data-test="partial-result-item" />
+                      </BaseGrid>
+                      <PartialQueryButton :query="partialResult.query">
+                        <template #default="{ query }">Ver todos {{ query }}</template>
+                      </PartialQueryButton>
+                    </template>
+                  </PartialResultsList>
 
-            <!-- Partials -->
-            <PartialResultsList
-              v-if="!$x.fromNoResultsWithFilters && ($x.totalResults <= 4 || $x.noResults)"
-              :animation="resultsAnimation"
+                  <!-- Recommendations -->
+                  <Recommendations
+                    v-if="!x.query.search || x.noResults"
+                    #layout="{ recommendations }"
+                  >
+                    <BaseVariableColumnGrid #default="{ item: result }" :items="recommendations">
+                      <Result :result="result" data-test="recommendation-item" />
+                    </BaseVariableColumnGrid>
+                  </Recommendations>
+                </template>
+              </div>
+            </div>
+          </div>
+          <div id="scroll-to-top" class="x-layout-item x-layout-overlap">
+            <ScrollToTop
+              :threshold-px="500"
+              class="x-button--round x-layout-on-margin-right"
+              scroll-id="main-scroll"
             >
-              <template #default="{ partialResult }">
-                <span data-test="partial-query">{{ partialResult.query }}</span>
-                <BaseGrid
-                  #result="{ item }"
-                  :animation="resultsAnimation"
-                  :columns="4"
-                  :items="partialResult.results"
-                >
-                  <Result :result="item" data-test="partial-result-item" />
-                </BaseGrid>
-                <PartialQueryButton :query="partialResult.query">
-                  <template #default="{ query }">Ver todos {{ query }}</template>
-                </PartialQueryButton>
-              </template>
-            </PartialResultsList>
-
-            <!-- Recommendations -->
-            <Recommendations v-if="!$x.query.search || $x.noResults" #layout="{ recommendations }">
-              <BaseVariableColumnGrid
-                #default="{ item: result }"
-                :animation="resultsAnimation"
-                :items="recommendations"
-              >
-                <Result :result="result" data-test="recommendation-item" />
-              </BaseVariableColumnGrid>
-            </Recommendations>
-          </template>
-        </template>
-
-        <template #scroll-to-top>
-          <ScrollToTop :threshold-px="500" class="x-button--round" scroll-id="main-scroll">
-            <ChevronUp />
-          </ScrollToTop>
-        </template>
-      </MultiColumnMaxWidthLayout>
+              <ChevronUp />
+            </ScrollToTop>
+          </div>
+        </div>
+      </div>
     </MainModal>
   </div>
 </template>
@@ -467,9 +464,7 @@
   import Grid2Col from '../../components/icons/grid-2-col.vue';
   import Grid4Col from '../../components/icons/grid-4-col.vue';
   import SearchIcon from '../../components/icons/search.vue';
-  import MultiColumnMaxWidthLayout from '../../components/layouts/multi-column-max-width-layout.vue';
   import LocationProvider from '../../components/location-provider.vue';
-  import BaseIdTogglePanelButton from '../../components/panels/base-id-toggle-panel-button.vue';
   import PreselectedFilters from '../../x-modules/facets/components/preselected-filters.vue';
   import SlidingPanel from '../../components/sliding-panel.vue';
   import SnippetCallbacks from '../../components/snippet-callbacks.vue';
@@ -512,6 +507,7 @@
   import { QueryPreviewInfo } from '../../x-modules/queries-preview/store/types';
   import QueryPreviewButton from '../../x-modules/queries-preview/components/query-preview-button.vue';
   import DisplayEmitter from '../../components/display-emitter.vue';
+  import { use$x } from '../../composables/use-$x';
   import Aside from './aside.vue';
   import PredictiveLayer from './predictive-layer.vue';
   import Result from './result.vue';
@@ -535,7 +531,6 @@
       BaseColumnPickerList,
       BaseDropdown,
       BaseGrid,
-      BaseIdTogglePanelButton,
       BaseVariableColumnGrid,
       ChevronLeft,
       ChevronRight,
@@ -548,7 +543,6 @@
       Grid4Col,
       LocationProvider,
       MainScrollItem,
-      MultiColumnMaxWidthLayout,
       NextQueriesList,
       NextQueryPreview,
       NextQuery,
@@ -583,6 +577,7 @@
       MainModal
     },
     setup() {
+      const x = use$x();
       const stores = ['Spain', 'Portugal', 'Italy'];
       const initialExtraParams = { store: 'Portugal' };
       const searchInputPlaceholderMessages = [
@@ -667,7 +662,8 @@
         isAnyQueryLoadedInPreview,
         queries,
         toggleE2EAdapter,
-        controls
+        controls,
+        x
       };
     }
   });

From 092b0abe48bc34cfd04a29e4894b1f7cc9466326 Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Wed, 24 Jul 2024 19:57:36 +0200
Subject: [PATCH 4/6] Revert "get rid of deprecated
 `MultiColumnMaxWidthLayout`"

This reverts commit 7fd037410d63a9de3bb0f4d4995e65616a959d82.
---
 packages/x-components/src/views/home/Home.vue | 596 +++++++++---------
 1 file changed, 300 insertions(+), 296 deletions(-)

diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index 6e0671c345..8737328e43 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -99,11 +99,11 @@
         </label>
       </li>
     </ul>
-    <MainModal>
-      <div class="x-layout-container x-layout-max-width-md x-layout-min-margin-48 x-bg-neutral-0">
-        <div id="header-middle" class="x-layout-item x-py-8">
-          <div class="x-flex x-gap-16 x-justify-between x-flex-auto">
-            <div class="x-input-group x-input-group-lead x-rounded-sm x-flex-auto">
+    <MainModal :animation="modalAnimation">
+      <MultiColumnMaxWidthLayout class="x-bg-neutral-0">
+        <template #header-middle>
+          <div class="x-flex x-flex-col x-gap-16 x-items-stretch x-flex-auto">
+            <div class="x-input-group x-input-group-lead x-rounded-sm">
               <div class="x-input x-search-input-placeholder-container x-flex">
                 <SearchInputPlaceholder :messages="searchInputPlaceholderMessages" />
                 <SearchInput
@@ -122,326 +122,329 @@
                 <SearchIcon />
               </SearchButton>
             </div>
-            <div id="header-end">
-              <CloseMainModal class="x-button--ghost x-button">
-                <CrossIcon />
-              </CloseMainModal>
-            </div>
+
+            <!-- Spellcheck -->
+            <Spellcheck>
+              <template #default="{ query }">
+                No results found for '{{ query }}'. We show you results for
+                <SpellcheckButton />
+              </template>
+            </Spellcheck>
+
+            <SlidingPanel v-if="$x.relatedTags.length">
+              <template #sliding-panel-left-button>
+                <ChevronLeft />
+              </template>
+              <RelatedTags class="x-gap-8" itemClass="x-tag-outlined" />
+              <template #sliding-panel-right-button>
+                <ChevronRight />
+              </template>
+            </SlidingPanel>
           </div>
-        </div>
+        </template>
+
+        <template #header-end>
+          <CloseMainModal class="x-button--ghost x-button">
+            <CrossIcon />
+          </CloseMainModal>
+        </template>
 
-        <div id="sub-header" class="x-layout-item x-py-8">
+        <template #sub-header>
           <PredictiveLayer :controls="controls" />
-          <!-- Spellcheck -->
-          <Spellcheck>
-            <template #default="{ query }">
-              No results found for '{{ query }}'. We show you results for
-              <SpellcheckButton />
-            </template>
-          </Spellcheck>
+        </template>
 
-          <SlidingPanel v-if="x.relatedTags.length">
-            <template #sliding-panel-left-button>
-              <ChevronLeft />
-            </template>
-            <RelatedTags class="x-gap-8" itemClass="x-tag-outlined" />
-            <template #sliding-panel-right-button>
-              <ChevronRight />
-            </template>
-          </SlidingPanel>
-          <div id="toolbar-body">
-            <div v-if="x.totalResults > 0" class="x-flex x-items-center x-gap-12">
-              <span class="x-text1">{{ x.totalResults }} Results</span>
-              <BaseColumnPickerList
-                @update:modelValue="col => (selectedColumns = col)"
-                :modelValue="selectedColumns"
-                class="x-gap-4"
-                :columns="columnPickerValues"
-              >
-                <template #default="{ column }">
-                  <span v-if="column === 0">Auto</span>
-                  <Grid2Col v-else-if="column === 2" />
-                  <Grid4Col v-else-if="column === 4" />
-                </template>
+        <template #toolbar-aside>
+          <BaseIdTogglePanelButton
+            v-if="$x.totalResults > 0"
+            class="x-button--ghost x-button"
+            panelId="aside-panel"
+          >
+            Toggle Aside
+          </BaseIdTogglePanelButton>
+        </template>
 
-                <template #divider>
-                  <span class="x-button-group-divider"></span>
-                </template>
-              </BaseColumnPickerList>
-              <SortPickerList
-                :items="sortValues"
-                class="x-button-group"
-                buttonClass="x-button x-button-outlined"
-                #default="{ item }"
-              >
-                {{ item || 'default' }}
-              </SortPickerList>
+        <template #toolbar-body>
+          <div v-if="$x.totalResults > 0" class="x-flex x-items-center x-gap-12">
+            <span class="x-text1">{{ $x.totalResults }} Results</span>
+            <BaseColumnPickerList
+              @update:modelValue="col => (selectedColumns = col)"
+              :modelValue="selectedColumns"
+              class="x-gap-4"
+              :columns="columnPickerValues"
+            >
+              <template #default="{ column }">
+                <span v-if="column === 0">Auto</span>
+                <Grid2Col v-else-if="column === 2" />
+                <Grid4Col v-else-if="column === 4" />
+              </template>
 
-              <RenderlessExtraParams #default="{ value, updateValue }" name="store">
-                <BaseDropdown
-                  @update:modelValue="updateValue"
-                  :modelValue="value"
-                  :items="stores"
-                  class="x-dropdown x-dropdown--round x-dropdown--right x-dropdown--l"
-                  data-test="store-selector"
-                />
-              </RenderlessExtraParams>
-            </div>
+              <template #divider>
+                <span class="x-button-group-divider"></span>
+              </template>
+            </BaseColumnPickerList>
+            <SortPickerList
+              :items="sortValues"
+              class="x-button-group"
+              buttonClass="x-button x-button-outlined"
+              #default="{ item }"
+            >
+              {{ item || 'default' }}
+            </SortPickerList>
+
+            <RenderlessExtraParams #default="{ value, updateValue }" name="store">
+              <BaseDropdown
+                @update:modelValue="updateValue"
+                :modelValue="value"
+                :items="stores"
+                class="x-dropdown x-dropdown--round x-dropdown--right x-dropdown--l"
+                data-test="store-selector"
+              />
+            </RenderlessExtraParams>
           </div>
-        </div>
+        </template>
+
+        <template #main-aside>
+          <Aside v-if="$x.totalResults > 0" />
+        </template>
 
-        <div
-          id="main-body"
-          class="x-layout-item x-layout-no-margin-right x-layout-expand x-mt-16 x-mb-16"
-        >
-          <div class="x-flex x-layout-expand x-gap-24">
-            <div id="main-aside" class="x-scroll x-w-320">
-              <Aside v-if="x.totalResults > 0" />
+        <template #main-body>
+          <!--  Redirection  -->
+          <Redirection
+            #default="{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }"
+            class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
+            :delayInSeconds="5"
+          >
+            <p>Your search matches a special place in our website. You are being redirected to:</p>
+            <a @click="redirect" :href="redirection.url" data-test="redirection-link">
+              {{ redirection.url }}
+            </a>
+            <div class="x-flex x-gap-32">
+              <button @click="abortRedirect" class="x-button--ghost x-button x-text-neutral-25">
+                No, I'll stay here
+              </button>
+              <button @click="redirect" class="x-button--ghost x-button x-text-neutral-90">
+                Yes, redirect me
+              </button>
             </div>
-            <!--  Redirection  -->
-            <div class="x-scroll x-layout-expand">
-              <div class="x-layout-item x-layout-no-margin-left">
-                <Redirection
-                  #default="{ redirection, redirect, abortRedirect, isRedirecting, delayInSeconds }"
-                  class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
-                  :delayInSeconds="5"
-                >
-                  <p>
-                    Your search matches a special place in our website. You are being redirected to:
-                  </p>
-                  <a @click="redirect" :href="redirection.url" data-test="redirection-link">
-                    {{ redirection.url }}
-                  </a>
-                  <div class="x-flex x-gap-32">
-                    <button
-                      @click="abortRedirect"
-                      class="x-button--ghost x-button x-text-neutral-25"
-                    >
-                      No, I'll stay here
-                    </button>
-                    <button @click="redirect" class="x-button--ghost x-button x-text-neutral-90">
-                      Yes, redirect me
-                    </button>
-                  </div>
-                  <AutoProgressBar :isLoading="isRedirecting" :durationInSeconds="delayInSeconds" />
-                </Redirection>
+            <AutoProgressBar :isLoading="isRedirecting" :durationInSeconds="delayInSeconds" />
+          </Redirection>
 
-                <template v-if="!x.redirections.length">
-                  <FallbackDisclaimer class="x-message" />
+          <template v-if="!$x.redirections.length">
+            <FallbackDisclaimer class="x-message" />
 
-                  <!--  No Results Message  -->
-                  <div
-                    v-if="x.noResults && !x.fromNoResultsWithFilters"
-                    class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
-                    data-test="no-results-message"
-                  >
-                    <p>
-                      There are no results for
-                      <span class="x-font-bold">{{ x.query.search }}</span>
-                    </p>
-                    <p>You may be interested in these:</p>
-                  </div>
+            <!--  No Results Message  -->
+            <div
+              v-if="$x.noResults && !$x.fromNoResultsWithFilters"
+              class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
+              data-test="no-results-message"
+            >
+              <p>
+                There are no results for
+                <span class="x-font-bold">{{ $x.query.search }}</span>
+              </p>
+              <p>You may be interested in these:</p>
+            </div>
 
-                  <template v-if="!x.query.searchBox">
-                    <h1 class="x-mb-16 x-title1">Brand Recommendations</h1>
-                    <LocationProvider location="no_results">
-                      <QueryPreviewList
-                        :debounceTimeMs="250"
-                        :queriesPreviewInfo="queriesPreviewInfo"
-                        data-wysiwyg="query-preview-list"
-                        #default="{
-                          queryPreviewInfo,
-                          totalResults,
-                          results,
-                          displayTagging,
-                          queryTagging
-                        }"
-                        data-test="brand-recommendations-list"
-                        :persistInCache="true"
+            <template v-if="!$x.query.searchBox">
+              <h1 class="x-mb-16 x-title1">Brand Recommendations</h1>
+              <LocationProvider location="no_results">
+                <QueryPreviewList
+                  :debounceTimeMs="250"
+                  :queriesPreviewInfo="queriesPreviewInfo"
+                  data-wysiwyg="query-preview-list"
+                  #default="{
+                    queryPreviewInfo,
+                    totalResults,
+                    results,
+                    displayTagging,
+                    queryTagging
+                  }"
+                  data-test="brand-recommendations-list"
+                  :persistInCache="true"
+                >
+                  <DisplayEmitter
+                    :payload="displayTagging"
+                    :eventMetadata="{ feature: 'customer' }"
+                  >
+                    <div class="x-flex x-flex-col x-gap-8 x-mb-16">
+                      <QueryPreviewButton
+                        class="x-w-fit x-button-xl x-button-ghost"
+                        :queryPreviewInfo="queryPreviewInfo"
                       >
-                        <DisplayEmitter
-                          :payload="displayTagging"
-                          :eventMetadata="{ feature: 'customer' }"
-                        >
-                          <div class="x-flex x-flex-col x-gap-8 x-mb-16">
-                            <QueryPreviewButton
-                              class="x-w-fit x-button-xl x-button-ghost"
-                              :queryPreviewInfo="queryPreviewInfo"
-                            >
-                              {{ `${queryPreviewInfo.query} (${totalResults})` }}
-                            </QueryPreviewButton>
-                            <DisplayResultProvider :queryTagging="queryTagging">
-                              <SlidingPanel :resetOnContentChange="false">
-                                <div class="x-flex x-gap-8">
-                                  <Result
-                                    v-for="result in results"
-                                    :key="result.id"
-                                    :result="result"
-                                    style="max-width: 180px"
-                                  />
-                                </div>
-                              </SlidingPanel>
-                            </DisplayResultProvider>
+                        {{ `${queryPreviewInfo.query} (${totalResults})` }}
+                      </QueryPreviewButton>
+                      <DisplayResultProvider :queryTagging="queryTagging">
+                        <SlidingPanel :resetOnContentChange="false">
+                          <div class="x-flex x-gap-8">
+                            <Result
+                              v-for="result in results"
+                              :key="result.id"
+                              :result="result"
+                              style="max-width: 180px"
+                            />
                           </div>
-                        </DisplayEmitter>
-                      </QueryPreviewList>
-                    </LocationProvider>
-                  </template>
-
-                  <!-- Results -->
-                  <LocationProvider location="results">
-                    <ResultsList v-infinite-scroll:main-scroll>
-                      <PromotedsList>
-                        <BannersList>
-                          <NextQueriesList
-                            :show-only-after-offset="controls.nextQueriesList.showOnlyAfterOffset"
-                          >
-                            <BaseVariableColumnGrid
-                              style="--x-size-min-width-grid-item: 150px"
-                              class="x-gap-12"
-                              :columns="x.device === 'mobile' ? 2 : 4"
-                            >
-                              <template #result="{ item: result }">
-                                <MainScrollItem :item="result">
-                                  <Result :result="result" data-test="search-result" />
-                                </MainScrollItem>
-                              </template>
+                        </SlidingPanel>
+                      </DisplayResultProvider>
+                    </div>
+                  </DisplayEmitter>
+                </QueryPreviewList>
+              </LocationProvider>
+            </template>
 
-                              <template #banner="{ item: banner }">
-                                <Banner :banner="banner" />
-                              </template>
+            <!-- Results -->
+            <LocationProvider location="results">
+              <ResultsList v-infinite-scroll:main-scroll>
+                <PromotedsList>
+                  <BannersList>
+                    <NextQueriesList
+                      :show-only-after-offset="controls.nextQueriesList.showOnlyAfterOffset"
+                    >
+                      <BaseVariableColumnGrid
+                        style="--x-size-min-width-grid-item: 150px"
+                        class="x-gap-12"
+                        :animation="resultsAnimation"
+                        :columns="$x.device === 'mobile' ? 2 : 4"
+                      >
+                        <template #result="{ item: result }">
+                          <MainScrollItem :item="result">
+                            <Result :result="result" data-test="search-result" />
+                          </MainScrollItem>
+                        </template>
 
-                              <template #promoted="{ item: promoted }">
-                                <Promoted :promoted="promoted" />
-                              </template>
+                        <template #banner="{ item: banner }">
+                          <Banner :banner="banner" />
+                        </template>
 
-                              <template #next-queries-group="{ item: { nextQueries } }">
-                                <NextQueryPreview
-                                  :suggestion="nextQueries[0]"
-                                  :max-items-to-render="
-                                    controls.nextQueriesPreview.maxItemsToRender
-                                  "
-                                  #default="{ results }"
-                                  class="x-pt-24"
-                                >
-                                  <h1 class="x-title2">Others clients have searched</h1>
-                                  <NextQuery
-                                    class="x-suggestion x-text1 x-text1-lg"
-                                    :suggestion="nextQueries[0]"
-                                    data-test="next-query-preview-name"
-                                  >
-                                    <span class="x-font-bold">{{ nextQueries[0].query }}</span>
-                                  </NextQuery>
-                                  <div class="x-mb-24">
-                                    <SlidingPanel :resetOnContentChange="false">
-                                      <div class="x-flex x-flex-row x-gap-8">
-                                        <Result
-                                          v-for="result in results"
-                                          :key="result.id"
-                                          :result="result"
-                                          style="max-width: 180px"
-                                          data-test="next-query-preview-result"
-                                        />
-                                      </div>
-                                    </SlidingPanel>
-                                  </div>
-                                  <NextQuery
-                                    :suggestion="nextQueries[0]"
-                                    data-test="view-all-results"
-                                    class="x-button x-button-outlined x-rounded-full x-mx-auto x-mt-8 x-mb-24"
-                                  >
-                                    {{ 'View all results' }}
-                                  </NextQuery>
-                                </NextQueryPreview>
-                              </template>
-                            </BaseVariableColumnGrid>
-                          </NextQueriesList>
-                        </BannersList>
-                      </PromotedsList>
-                    </ResultsList>
-                  </LocationProvider>
+                        <template #promoted="{ item: promoted }">
+                          <Promoted :promoted="promoted" />
+                        </template>
 
-                  <SemanticQueries #default="{ queries, findSemanticQuery }">
-                    <section class="x-mt-28">
-                      <h1 v-if="isAnyQueryLoadedInPreview(queries)" class="x-title1">
-                        Similar Semantic Queries
-                      </h1>
-                      <LocationProvider :location="x.noResults ? 'no_results' : 'low_results'">
-                        <QueryPreviewList
-                          :queries-preview-info="queries.map(q => ({ query: q }))"
-                          #default="{ queryPreviewInfo: { query }, results, queryTagging }"
-                          queryFeature="semantics"
-                        >
-                          <div
-                            class="x-flex x-flex-col x-gap-8 x-mb-16"
-                            data-test="semantic-query-preview"
-                            :data-query="query"
+                        <template #next-queries-group="{ item: { nextQueries } }">
+                          <NextQueryPreview
+                            :suggestion="nextQueries[0]"
+                            :max-items-to-render="controls.nextQueriesPreview.maxItemsToRender"
+                            #default="{ results }"
+                            class="x-pt-24"
                           >
-                            <SemanticQuery
-                              class="x-suggestion x-title2 x-title2-md"
-                              :suggestion="findSemanticQuery(query)"
-                              #default="{ suggestion: { query } }"
+                            <h1 class="x-title2">Others clients have searched</h1>
+                            <NextQuery
+                              class="x-suggestion x-text1 x-text1-lg"
+                              :suggestion="nextQueries[0]"
+                              data-test="next-query-preview-name"
                             >
-                              <span data-test="semantic-queries-query">{{ query }}</span>
-                            </SemanticQuery>
-                            <DisplayResultProvider :queryTagging="queryTagging">
+                              <span class="x-font-bold">{{ nextQueries[0].query }}</span>
+                            </NextQuery>
+                            <div class="x-mb-24">
                               <SlidingPanel :resetOnContentChange="false">
-                                <div class="x-flex x-gap-8">
+                                <div class="x-flex x-flex-row x-gap-8">
                                   <Result
                                     v-for="result in results"
                                     :key="result.id"
                                     :result="result"
                                     style="max-width: 180px"
-                                    data-test="semantic-query-result"
+                                    data-test="next-query-preview-result"
                                   />
                                 </div>
                               </SlidingPanel>
-                            </DisplayResultProvider>
-                          </div>
-                        </QueryPreviewList>
-                      </LocationProvider>
-                    </section>
-                  </SemanticQueries>
+                            </div>
+                            <NextQuery
+                              :suggestion="nextQueries[0]"
+                              data-test="view-all-results"
+                              class="x-button x-button-outlined x-rounded-full x-mx-auto x-mt-8 x-mb-24"
+                            >
+                              {{ 'View all results' }}
+                            </NextQuery>
+                          </NextQueryPreview>
+                        </template>
+                      </BaseVariableColumnGrid>
+                    </NextQueriesList>
+                  </BannersList>
+                </PromotedsList>
+              </ResultsList>
+            </LocationProvider>
 
-                  <!-- Partials -->
-                  <PartialResultsList
-                    v-if="!x.fromNoResultsWithFilters && (x.totalResults <= 4 || x.noResults)"
+            <SemanticQueries #default="{ queries, findSemanticQuery }">
+              <section class="x-mt-28">
+                <h1 v-if="isAnyQueryLoadedInPreview(queries)" class="x-title1">
+                  Similar Semantic Queries
+                </h1>
+                <LocationProvider :location="$x.noResults ? 'no_results' : 'low_results'">
+                  <QueryPreviewList
+                    :queries-preview-info="queries.map(q => ({ query: q }))"
+                    #default="{ queryPreviewInfo: { query }, results, queryTagging }"
+                    queryFeature="semantics"
                   >
-                    <template #default="{ partialResult }">
-                      <span data-test="partial-query">{{ partialResult.query }}</span>
-                      <BaseGrid #result="{ item }" :columns="4" :items="partialResult.results">
-                        <Result :result="item" data-test="partial-result-item" />
-                      </BaseGrid>
-                      <PartialQueryButton :query="partialResult.query">
-                        <template #default="{ query }">Ver todos {{ query }}</template>
-                      </PartialQueryButton>
-                    </template>
-                  </PartialResultsList>
+                    <div
+                      class="x-flex x-flex-col x-gap-8 x-mb-16"
+                      data-test="semantic-query-preview"
+                      :data-query="query"
+                    >
+                      <SemanticQuery
+                        class="x-suggestion x-title2 x-title2-md"
+                        :suggestion="findSemanticQuery(query)"
+                        #default="{ suggestion: { query } }"
+                      >
+                        <span data-test="semantic-queries-query">{{ query }}</span>
+                      </SemanticQuery>
+                      <DisplayResultProvider :queryTagging="queryTagging">
+                        <SlidingPanel :resetOnContentChange="false">
+                          <div class="x-flex x-gap-8">
+                            <Result
+                              v-for="result in results"
+                              :key="result.id"
+                              :result="result"
+                              style="max-width: 180px"
+                              data-test="semantic-query-result"
+                            />
+                          </div>
+                        </SlidingPanel>
+                      </DisplayResultProvider>
+                    </div>
+                  </QueryPreviewList>
+                </LocationProvider>
+              </section>
+            </SemanticQueries>
 
-                  <!-- Recommendations -->
-                  <Recommendations
-                    v-if="!x.query.search || x.noResults"
-                    #layout="{ recommendations }"
-                  >
-                    <BaseVariableColumnGrid #default="{ item: result }" :items="recommendations">
-                      <Result :result="result" data-test="recommendation-item" />
-                    </BaseVariableColumnGrid>
-                  </Recommendations>
-                </template>
-              </div>
-            </div>
-          </div>
-          <div id="scroll-to-top" class="x-layout-item x-layout-overlap">
-            <ScrollToTop
-              :threshold-px="500"
-              class="x-button--round x-layout-on-margin-right"
-              scroll-id="main-scroll"
+            <!-- Partials -->
+            <PartialResultsList
+              v-if="!$x.fromNoResultsWithFilters && ($x.totalResults <= 4 || $x.noResults)"
+              :animation="resultsAnimation"
             >
-              <ChevronUp />
-            </ScrollToTop>
-          </div>
-        </div>
-      </div>
+              <template #default="{ partialResult }">
+                <span data-test="partial-query">{{ partialResult.query }}</span>
+                <BaseGrid
+                  #result="{ item }"
+                  :animation="resultsAnimation"
+                  :columns="4"
+                  :items="partialResult.results"
+                >
+                  <Result :result="item" data-test="partial-result-item" />
+                </BaseGrid>
+                <PartialQueryButton :query="partialResult.query">
+                  <template #default="{ query }">Ver todos {{ query }}</template>
+                </PartialQueryButton>
+              </template>
+            </PartialResultsList>
+
+            <!-- Recommendations -->
+            <Recommendations v-if="!$x.query.search || $x.noResults" #layout="{ recommendations }">
+              <BaseVariableColumnGrid
+                #default="{ item: result }"
+                :animation="resultsAnimation"
+                :items="recommendations"
+              >
+                <Result :result="result" data-test="recommendation-item" />
+              </BaseVariableColumnGrid>
+            </Recommendations>
+          </template>
+        </template>
+
+        <template #scroll-to-top>
+          <ScrollToTop :threshold-px="500" class="x-button--round" scroll-id="main-scroll">
+            <ChevronUp />
+          </ScrollToTop>
+        </template>
+      </MultiColumnMaxWidthLayout>
     </MainModal>
   </div>
 </template>
@@ -464,7 +467,9 @@
   import Grid2Col from '../../components/icons/grid-2-col.vue';
   import Grid4Col from '../../components/icons/grid-4-col.vue';
   import SearchIcon from '../../components/icons/search.vue';
+  import MultiColumnMaxWidthLayout from '../../components/layouts/multi-column-max-width-layout.vue';
   import LocationProvider from '../../components/location-provider.vue';
+  import BaseIdTogglePanelButton from '../../components/panels/base-id-toggle-panel-button.vue';
   import PreselectedFilters from '../../x-modules/facets/components/preselected-filters.vue';
   import SlidingPanel from '../../components/sliding-panel.vue';
   import SnippetCallbacks from '../../components/snippet-callbacks.vue';
@@ -507,7 +512,6 @@
   import { QueryPreviewInfo } from '../../x-modules/queries-preview/store/types';
   import QueryPreviewButton from '../../x-modules/queries-preview/components/query-preview-button.vue';
   import DisplayEmitter from '../../components/display-emitter.vue';
-  import { use$x } from '../../composables/use-$x';
   import Aside from './aside.vue';
   import PredictiveLayer from './predictive-layer.vue';
   import Result from './result.vue';
@@ -531,6 +535,7 @@
       BaseColumnPickerList,
       BaseDropdown,
       BaseGrid,
+      BaseIdTogglePanelButton,
       BaseVariableColumnGrid,
       ChevronLeft,
       ChevronRight,
@@ -543,6 +548,7 @@
       Grid4Col,
       LocationProvider,
       MainScrollItem,
+      MultiColumnMaxWidthLayout,
       NextQueriesList,
       NextQueryPreview,
       NextQuery,
@@ -577,7 +583,6 @@
       MainModal
     },
     setup() {
-      const x = use$x();
       const stores = ['Spain', 'Portugal', 'Italy'];
       const initialExtraParams = { store: 'Portugal' };
       const searchInputPlaceholderMessages = [
@@ -662,8 +667,7 @@
         isAnyQueryLoadedInPreview,
         queries,
         toggleE2EAdapter,
-        controls,
-        x
+        controls
       };
     }
   });

From 942130b9e65f91c6b1bb1385f2529b533bbf4c19 Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Thu, 25 Jul 2024 14:06:39 +0200
Subject: [PATCH 5/6] fix(list-components): fix list components, migrate
 infinite-scroll directive and deprecated layouts

---
 .../src/components/index.ts                   |   1 -
 .../src/components/test-use-layouts.vue       |  36 ------
 packages/_vue3-migration-test/src/router.ts   |   6 -
 .../src/components/items-list.vue             |  51 +++-----
 .../fixed-header-and-asides-layout.vue        |  50 ++++----
 .../layouts/multi-column-max-width-layout.vue |  51 +++-----
 .../layouts/single-column-layout.vue          |  48 +++----
 .../src/components/layouts/use-layouts.ts     |  32 -----
 .../src/composables/use-no-element-render.ts  |   3 +-
 .../{infinite-scroll => }/infinite-scroll.ts  | 116 +++++++----------
 .../src/directives/infinite-scroll/index.ts   |   2 -
 .../infinite-scroll/infinite-scroll.types.ts  |  26 ----
 packages/x-components/src/views/home/Home.vue |  72 ++++++-----
 .../components/next-queries-list.vue          | 117 +++++-------------
 .../components/query-preview-list.vue         |  11 +-
 .../search/components/banners-list.vue        |  79 +++---------
 .../search/components/promoteds-list.vue      |  66 +++-------
 .../search/components/results-list.vue        |  93 +++-----------
 18 files changed, 241 insertions(+), 619 deletions(-)
 delete mode 100644 packages/_vue3-migration-test/src/components/test-use-layouts.vue
 delete mode 100644 packages/x-components/src/components/layouts/use-layouts.ts
 rename packages/x-components/src/directives/{infinite-scroll => }/infinite-scroll.ts (53%)
 delete mode 100644 packages/x-components/src/directives/infinite-scroll/index.ts
 delete mode 100644 packages/x-components/src/directives/infinite-scroll/infinite-scroll.types.ts

diff --git a/packages/_vue3-migration-test/src/components/index.ts b/packages/_vue3-migration-test/src/components/index.ts
index 77985e8f78..02759c42c3 100644
--- a/packages/_vue3-migration-test/src/components/index.ts
+++ b/packages/_vue3-migration-test/src/components/index.ts
@@ -6,7 +6,6 @@ export { default as TestBaseDropdown } from './test-base-dropdown.vue';
 export { default as TestBaseEventButton } from './test-base-event-button.vue';
 export { default as TestBaseVariableColumnGrid } from './test-base-variable-column-grid.vue';
 export { default as TestSlidingPanel } from './test-sliding-panel.vue';
-export { default as TestUseLayouts } from './test-use-layouts.vue';
 export { default as TestBaseSuggestions } from './suggestions/test-base-suggestions.vue';
 export { default as TestHighlight } from './test-highlight.vue';
 export { default as TestBaseResultImages } from './result/test-base-result-images.vue';
diff --git a/packages/_vue3-migration-test/src/components/test-use-layouts.vue b/packages/_vue3-migration-test/src/components/test-use-layouts.vue
deleted file mode 100644
index c925c8c5eb..0000000000
--- a/packages/_vue3-migration-test/src/components/test-use-layouts.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <button @click="devMode = !devMode">{{ devMode ? 'Hide slots' : 'Show slots' }}</button>
-  <header v-if="hasContent('header')">
-    <!-- @slot Slot that is used to insert content into the Header. -->
-    <slot name="header">
-      <span v-if="devMode">HEADER</span>
-    </slot>
-  </header>
-
-  <div v-if="hasContent('sub-header')">
-    <!-- @slot Slot that can be used to insert content into the Sub Header. -->
-    <slot name="sub-header">
-      <span v-if="devMode">SUB HEADER</span>
-    </slot>
-  </div>
-
-  <main v-if="hasContent('main')" class="x-layout__main">
-    <!-- @slot Slot that can be used to insert content into the Main. -->
-    <slot name="main">
-      <span v-if="devMode">MAIN</span>
-    </slot>
-  </main>
-</template>
-
-<script setup>
-  import { useSlots, ref } from 'vue';
-  import { useLayouts } from '../../../x-components/src/components/layouts/use-layouts';
-
-  const slots = useSlots();
-
-  const devMode = ref(true);
-
-  const { hasContent } = useLayouts(devMode.value, slots);
-</script>
-
-<style scoped></style>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index c040f9f98c..c188737156 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -22,7 +22,6 @@ import {
   TestSearchBox,
   TestBaseVariableColumnGrid,
   TestEmpathize,
-  TestUseLayouts,
   TestSlidingPanel,
   TestBaseSuggestions,
   TestHighlight,
@@ -174,11 +173,6 @@ const routes = [
     name: 'BaseVariableColumnGrid',
     component: TestBaseVariableColumnGrid
   },
-  {
-    path: '/test-use-layouts',
-    name: 'UseLayouts',
-    component: TestUseLayouts
-  },
   {
     path: '/base-suggestions',
     name: 'BaseSuggestions',
diff --git a/packages/x-components/src/components/items-list.vue b/packages/x-components/src/components/items-list.vue
index 4634c4cdd3..206beb7fa2 100644
--- a/packages/x-components/src/components/items-list.vue
+++ b/packages/x-components/src/components/items-list.vue
@@ -37,58 +37,35 @@
   export default defineComponent({
     name: 'ItemsList',
     props: {
-      /**
-       * Animation component that will be used to animate the list.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the list. */
       animation: {
         type: animationProp,
         default: 'ul'
       },
-
-      /**
-       * List of items.
-       *
-       * @public
-       */
+      /** List of items. */
       items: {
         type: Array as PropType<ListItem[]>,
         required: true
       },
-
-      /**
-       * Item's classes.
-       *
-       * @public
-       */
-      itemClass: {
-        type: String
-      }
+      /** Item's classes. */
+      itemClass: String
     },
     setup(props) {
       /**
        * The list of the items with additional properties.
        *
        * @returns A list of items with `dataTest`, `class` and the `slotName` for each item.
-       *
-       * @internal
        */
-      const computedItems = computed(
-        (): {
-          dataTest: string;
-          class: Array<string | undefined>;
-        }[] => {
-          return props.items.map(item => {
-            const modelName = toKebabCase(item.modelName);
-            return {
-              ...item,
-              dataTest: `${modelName}s-list-item`,
-              class: [`x-${modelName}s-list-item`, props.itemClass],
-              slotName: modelName
-            };
-          });
-        }
+      const computedItems = computed(() =>
+        props.items.map(item => {
+          const modelName = toKebabCase(item.modelName);
+          return {
+            ...item,
+            dataTest: `${modelName}s-list-item`,
+            class: [`x-${modelName}s-list-item`, props.itemClass],
+            slotName: modelName
+          };
+        })
       );
 
       return { computedItems };
diff --git a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
index 18737d8819..dcec318d3a 100644
--- a/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
+++ b/packages/x-components/src/components/layouts/fixed-header-and-asides-layout.vue
@@ -13,7 +13,7 @@
       />
 
       <header
-        v-if="hasContent('header')"
+        v-if="devMode || $slots['header']"
         key="header"
         class="x-layout__header x-list x-list--horizontal"
       >
@@ -23,7 +23,7 @@
         </slot>
       </header>
 
-      <div v-if="hasContent('sub-header')" key="sub-header" class="x-layout__sub-header">
+      <div v-if="devMode || $slots['sub-header']" key="sub-header" class="x-layout__sub-header">
         <div class="x-layout__sub-header-content">
           <!-- @slot Slot that can be used to insert content into below the header. -->
           <slot name="sub-header">
@@ -32,14 +32,18 @@
         </div>
       </div>
 
-      <section v-if="hasContent('toolbar')" key="toolbar" class="x-layout__toolbar">
+      <section v-if="devMode || $slots['toolbar']" key="toolbar" class="x-layout__toolbar">
         <slot name="toolbar">
           <!-- @slot Slot that can be used to insert content above the main. -->
           <span v-if="devMode" class="slot-helper">TOOLBAR</span>
         </slot>
       </section>
 
-      <main v-if="hasContent('main')" key="main" class="x-layout__main x-list x-list--vertical">
+      <main
+        v-if="devMode || $slots['main']"
+        key="main"
+        class="x-layout__main x-list x-list--vertical"
+      >
         <!-- @slot Slot that is be used for insert content into the Main. -->
         <slot name="main">
           <span v-if="devMode" class="slot-helper">MAIN</span>
@@ -47,7 +51,7 @@
       </main>
 
       <BaseIdModal
-        v-if="hasContent('left-aside')"
+        v-if="devMode || $slots['left-aside']"
         key="left-aside"
         :animation="leftAsideAnimation"
         modalId="left-aside"
@@ -60,7 +64,7 @@
       </BaseIdModal>
 
       <BaseIdModal
-        v-if="hasContent('right-aside')"
+        v-if="devMode || $slots['right-aside']"
         key="right-aside"
         :animation="rightAsideAnimation"
         modalId="right-aside"
@@ -76,7 +80,11 @@
         <span v-if="devMode" class="slot-helper">EXTRA ASIDE</span>
       </slot>
 
-      <div v-if="hasContent('scroll-to-top')" key="scroll-to-top" class="x-layout__scroll-to-top">
+      <div
+        v-if="devMode || $slots['scroll-to-top']"
+        key="scroll-to-top"
+        class="x-layout__scroll-to-top"
+      >
         <slot name="scroll-to-top">
           <span v-if="devMode" class="slot-helper">SCROLL TO TOP</span>
         </slot>
@@ -86,13 +94,11 @@
 </template>
 
 <script lang="ts">
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  import Vue, { computed, defineComponent, ref } from 'vue';
+  import { computed, defineComponent, ref } from 'vue';
   import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
   import BaseIdModal from '../modals/base-id-modal.vue';
   import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
-  import { useLayouts } from './use-layouts';
 
   /**
    * Component for use as Layout to be filled with the rest of the components.
@@ -103,37 +109,23 @@
    */
   export default defineComponent({
     name: 'FixedHeaderAndAsidesLayout',
-    components: {
-      BaseIdModal,
-      MainScroll,
-      Scroll
-    },
+    components: { BaseIdModal, MainScroll, Scroll },
     props: {
-      /**
-       * Enables the devMode, which shows the available slots to use with its names.
-       *
-       * @public
-       */
-      devMode: {
-        type: Boolean,
-        default: false
-      }
+      /** Enables the devMode, which shows the available slots to use with its names. */
+      devMode: Boolean
     },
-    setup: function (props, { slots }) {
-      const { hasContent } = useLayouts(props.devMode, slots);
-
+    setup() {
       const scrollPosition = ref(0);
 
       const rightAsideAnimation = animateTranslate('right');
       const leftAsideAnimation = animateTranslate('left');
 
-      const setPosition = (position: number): void => {
+      const setPosition = (position: number) => {
         scrollPosition.value = position;
       };
       const isBackdropVisible = computed(() => scrollPosition.value > 0);
 
       return {
-        hasContent,
         rightAsideAnimation,
         leftAsideAnimation,
         setPosition,
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 d8e2e08f9c..f872f3688d 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
@@ -2,24 +2,24 @@
   <div
     class="x-layout x-layout--columns"
     :class="{ 'dev-mode': devMode }"
-    :style="{ height: hasContent('main-body') ? '100%' : 'auto' }"
+    :style="{ height: devMode || $slots['main-body'] ? '100%' : 'auto' }"
   >
     <header class="x-layout__header">
-      <div v-if="hasContent('header-start')" class="x-list x-layout__header-start">
+      <div v-if="devMode || $slots['header-start']" class="x-list x-layout__header-start">
         <!-- @slot Slot that can be used to insert content into the left part of the header. -->
         <slot name="header-start">
           <span v-if="devMode" class="slot-helper">HEADER START</span>
         </slot>
       </div>
 
-      <div v-if="hasContent('header-middle')" class="x-list x-layout__header-middle">
+      <div v-if="devMode || $slots['header-middle']" class="x-list x-layout__header-middle">
         <!-- @slot Slot that can be used to insert content into the center part of the header. -->
         <slot name="header-middle">
           <span v-if="devMode" class="slot-helper">HEADER MIDDLE</span>
         </slot>
       </div>
 
-      <div v-if="hasContent('header-end')" class="x-list x-layout__header-end">
+      <div v-if="devMode || $slots['header-end']" class="x-list x-layout__header-end">
         <!-- @slot Slot that can be used to insert content into the right part of the header. -->
         <slot name="header-end">
           <span v-if="devMode" class="slot-helper">HEADER END</span>
@@ -27,7 +27,7 @@
       </div>
     </header>
 
-    <div v-if="hasContent('sub-header')" class="x-layout__sub-header">
+    <div v-if="devMode || $slots['sub-header']" class="x-layout__sub-header">
       <div class="x-layout__sub-header-content">
         <!-- @slot Slot that can be used to insert content into below the header. -->
         <slot name="sub-header">
@@ -36,7 +36,10 @@
       </div>
     </div>
 
-    <section v-if="hasContent('toolbar-aside', 'toolbar-body')" class="x-layout__toolbar">
+    <section
+      v-if="devMode || $slots['toolbar-aside'] || $slots['toolbar-body']"
+      class="x-layout__toolbar"
+    >
       <aside class="x-list x-layout__toolbar-aside">
         <slot name="toolbar-aside">
           <!-- @slot Slot that can be used to insert content above the left aside. -->
@@ -54,7 +57,7 @@
 
     <main class="x-layout__main">
       <BaseIdTogglePanel
-        v-if="hasContent('main-aside')"
+        v-if="devMode || $slots['main-aside']"
         panelId="aside-panel"
         :animation="asideAnimation"
         class="x-layout__collapse-aside"
@@ -70,7 +73,11 @@
       </BaseIdTogglePanel>
 
       <MainScroll class="x-flex x-flex-auto">
-        <Scroll v-if="hasContent('main-body')" id="main-scroll" class="x-layout__body-scroll">
+        <Scroll
+          v-if="devMode || $slots['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. -->
             <slot name="main-body">
@@ -81,7 +88,7 @@
       </MainScroll>
     </main>
 
-    <div v-if="hasContent('scroll-to-top')" class="x-layout__scroll-to-top">
+    <div v-if="devMode || $slots['scroll-to-top']" class="x-layout__scroll-to-top">
       <div class="x-layout__scroll-to-top-content">
         <slot name="scroll-to-top">
           <span v-if="devMode" class="slot-helper" style="height: 50px">SCROLL TO TOP</span>
@@ -92,14 +99,12 @@
 </template>
 
 <script lang="ts">
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  import Vue, { defineComponent } from 'vue';
+  import { defineComponent } from 'vue';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
   import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
   import AnimateWidth from '../animations/animate-width.vue';
   import BaseIdTogglePanel from '../panels/base-id-toggle-panel.vue';
   import { AnimationProp } from '../../types';
-  import { useLayouts } from './use-layouts';
 
   /**
    * Component for use as Layout to be filled with the rest of the Components.
@@ -112,29 +117,13 @@
     name: 'MultiColumnMaxWidthLayout',
     components: { BaseIdTogglePanel, MainScroll, Scroll },
     props: {
-      /**
-       * The animation used for the Main Aside.
-       *
-       * @public
-       */
+      /** The animation used for the Main Aside. */
       asideAnimation: {
         type: AnimationProp,
         default: () => AnimateWidth
       },
-      /**
-       * Enables the devMode, which shows the available slots to use with its names.
-       *
-       * @public
-       */
-      devMode: {
-        type: Boolean,
-        default: false
-      }
-    },
-    setup: function (props, { slots }) {
-      const { hasContent } = useLayouts(props.devMode, slots);
-
-      return { hasContent };
+      /** Enables the devMode, which shows the available slots to use with its names. */
+      devMode: Boolean
     }
   });
 </script>
diff --git a/packages/x-components/src/components/layouts/single-column-layout.vue b/packages/x-components/src/components/layouts/single-column-layout.vue
index b974f7dbf6..4fdf4d5b7a 100644
--- a/packages/x-components/src/components/layouts/single-column-layout.vue
+++ b/packages/x-components/src/components/layouts/single-column-layout.vue
@@ -1,27 +1,33 @@
 <template>
   <div class="x-layout x-layout--single-column" :class="{ 'dev-mode': devMode }">
-    <header v-if="hasContent('header')" class="x-layout__header x-list x-list--horizontal">
+    <header v-if="devMode || $slots['header']" class="x-layout__header x-list x-list--horizontal">
       <!-- @slot Slot that is used to insert content into the Header. -->
       <slot name="header">
         <span v-if="devMode" class="slot-helper">HEADER</span>
       </slot>
     </header>
 
-    <div v-if="hasContent('sub-header')" class="x-layout__sub-header x-list x-list--horizontal">
+    <div
+      v-if="devMode || $slots['sub-header']"
+      class="x-layout__sub-header x-list x-list--horizontal"
+    >
       <!-- @slot Slot that can be used to insert content into the Sub Header. -->
       <slot name="sub-header">
         <span v-if="devMode" class="slot-helper">SUB HEADER</span>
       </slot>
     </div>
 
-    <div v-if="hasContent('toolbar')" class="x-layout__toolbar x-list x-list--horizontal">
+    <div v-if="devMode || $slots['toolbar']" class="x-layout__toolbar x-list x-list--horizontal">
       <!-- @slot Slot that can be used to insert content into the Toolbar. -->
       <slot name="toolbar">
         <span v-if="devMode" class="slot-helper">TOOLBAR</span>
       </slot>
     </div>
 
-    <div v-if="hasContent('predictive')" class="x-layout__predictive x-list x-list--vertical">
+    <div
+      v-if="devMode || $slots['predictive']"
+      class="x-layout__predictive x-list x-list--vertical"
+    >
       <BaseScroll class="x-layout__predictive-scroll x-list x-list--vertical x-list__item--expand">
         <!-- @slot Slot that can be used to insert content into the Predictive Layer. -->
         <slot name="predictive">
@@ -30,7 +36,7 @@
       </BaseScroll>
     </div>
 
-    <main v-if="hasContent('main')" class="x-layout__main">
+    <main v-if="devMode || $slots['main']" class="x-layout__main">
       <MainScroll>
         <Scroll id="main-scroll" class="x-layout__main-scroll x-list x-list--vertical">
           <!-- @slot Slot that can be used to insert content into the Main. -->
@@ -41,14 +47,14 @@
       </MainScroll>
     </main>
 
-    <div v-if="hasContent('floating')" class="x-layout__floating x-list x-list--horizontal">
+    <div v-if="devMode || $slots['floating']" class="x-layout__floating x-list x-list--horizontal">
       <!-- @slot Slot that can be used to insert content into the Floating. -->
       <slot name="floating">
         <span v-if="devMode" class="slot-helper">FLOATING</span>
       </slot>
     </div>
 
-    <footer v-if="hasContent('footer')" class="x-layout__footer x-list x-list--horizontal">
+    <footer v-if="devMode || $slots['footer']" class="x-layout__footer x-list x-list--horizontal">
       <!-- @slot Slot that can be used to insert content into the Footer. -->
       <slot name="footer">
         <span v-if="devMode" class="slot-helper">FOOTER</span>
@@ -56,7 +62,7 @@
     </footer>
 
     <BaseIdModal
-      v-if="hasContent('aside')"
+      v-if="devMode || $slots['aside']"
       :animation="asideAnimation"
       modalId="aside-modal"
       class="x-layout__aside"
@@ -74,15 +80,13 @@
 </template>
 
 <script lang="ts">
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  import Vue, { defineComponent } from 'vue';
+  import { defineComponent } from 'vue';
   import Scroll from '../../x-modules/scroll/components/scroll.vue';
   import MainScroll from '../../x-modules/scroll/components/main-scroll.vue';
   import { animateTranslate } from '../animations/animate-translate/animate-translate.factory';
   import BaseIdModal from '../modals/base-id-modal.vue';
   import BaseScroll from '../scroll/base-scroll.vue';
   import { AnimationProp } from '../../types';
-  import { useLayouts } from './use-layouts';
 
   /**
    * Component for use as Layout to be filled with the rest of the Components.
@@ -95,29 +99,13 @@
     name: 'SingleColumnLayout',
     components: { BaseIdModal, BaseScroll, MainScroll, Scroll },
     props: {
-      /**
-       * The animation used for the Main Aside.
-       *
-       * @public
-       */
+      /** The animation used for the Main Aside. */
       asideAnimation: {
         type: AnimationProp,
         default: () => animateTranslate('right')
       },
-      /**
-       * Enables the devMode, which shows the available slots to use with its names.
-       *
-       * @public
-       */
-      devMode: {
-        type: Boolean,
-        default: false
-      }
-    },
-    setup: function (props, { slots }) {
-      const { hasContent } = useLayouts(props.devMode, slots);
-
-      return { hasContent };
+      /** Enables the devMode, which shows the available slots to use with its names. */
+      devMode: Boolean
     }
   });
 </script>
diff --git a/packages/x-components/src/components/layouts/use-layouts.ts b/packages/x-components/src/components/layouts/use-layouts.ts
deleted file mode 100644
index 903c7f71f4..0000000000
--- a/packages/x-components/src/components/layouts/use-layouts.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { VNode } from 'vue';
-import { Slots } from 'vue/types/v3-setup-context';
-/**
- * Composable to share Layout logic.
- *
- * @param devMode - Shows the available slots to use with its names if it is enabled.
- * @param slots - Slots to show.
- *
- * @returns True if the slot has rendered content or false otherwise.
- * @public
- */
-export function useLayouts(devMode: boolean, slots: Slots) {
-  /**
-   * Function to check if an slot has rendered content or not.
-   *
-   * @param slotNames - A VNode Array with of each slot.
-   * @returns True if the slot has rendered content or false otherwise.
-   *
-   * @internal
-   */
-  const hasContent = (...slotNames: string[]): boolean => {
-    return (
-      (devMode ||
-        slotNames.some(slotName =>
-          slots[slotName]?.(undefined)?.some((vNode: VNode) => vNode.tag !== undefined)
-        )) ??
-      false
-    );
-  };
-
-  return { hasContent };
-}
diff --git a/packages/x-components/src/composables/use-no-element-render.ts b/packages/x-components/src/composables/use-no-element-render.ts
index 04c418d3df..7c85e18e86 100644
--- a/packages/x-components/src/composables/use-no-element-render.ts
+++ b/packages/x-components/src/composables/use-no-element-render.ts
@@ -1,5 +1,4 @@
-import { h, SetupContext } from 'vue';
-import { VNode } from 'vue/types/vnode';
+import { h, SetupContext, VNode } from 'vue';
 
 /**
  * Returns a render function that returns the default slot or nothing if it's not defined.
diff --git a/packages/x-components/src/directives/infinite-scroll/infinite-scroll.ts b/packages/x-components/src/directives/infinite-scroll.ts
similarity index 53%
rename from packages/x-components/src/directives/infinite-scroll/infinite-scroll.ts
rename to packages/x-components/src/directives/infinite-scroll.ts
index 5a2a376253..1fcf949c3f 100644
--- a/packages/x-components/src/directives/infinite-scroll/infinite-scroll.ts
+++ b/packages/x-components/src/directives/infinite-scroll.ts
@@ -1,15 +1,34 @@
-import { DirectiveOptions } from 'vue';
-import { Vue } from 'vue/types/vue';
-import { InfiniteScroll, ObserverOptions } from './infinite-scroll.types';
+import { Directive } from 'vue';
+import { useXBus } from '../composables/use-x-bus';
 
 const VIEWPORT_ID = 'viewport';
 
 /**
- * A record which contains {@link IntersectionObserver} objects indexed by the id of the scrollable
+ * A record which contains {@link IntersectionObserver} objects indexed by the ID of the scrollable
  * container.
  */
 const state: Record<string, IntersectionObserver> = {};
 
+/**
+ * Retrieves the root element for the provided ID.
+ *
+ * @param element - Target element where directive is set.
+ * @param id - String identifier.
+ * @returns HTMLElement or null.
+ */
+function getRoot(element: HTMLElement, id: string): HTMLElement | null {
+  switch (id) {
+    case 'html':
+      return null;
+    case 'body':
+      return document.body;
+    case VIEWPORT_ID:
+      return null;
+    default:
+      return element.closest(`#${id}`)!;
+  }
+}
+
 /**
  * Custom Vue directive for infinite scroll.
  *
@@ -19,10 +38,9 @@ const state: Record<string, IntersectionObserver> = {};
  *
  * How it works.
  *
- * As a summary, if the scroll reaches the end, the `vNode.context.onInfiniteScrollEnd` function
- * implemented by the component which imports the directive, is executed. If you provide a margin in
- * the directive options, this function is triggered when the scroll reaches the end minus that
- * amount of pixels. A default margin of 200px is set.
+ * As a summary, if the scroll reaches the end, `UserReachedResultsListEnd` event is emitted to the
+ * xBus. If you provide a margin in the directive options, this function is triggered when the
+ * scroll reaches the end minus that amount of pixels. A default margin of 200px is set.
  *
  * Usage.
  *
@@ -56,75 +74,35 @@ const state: Record<string, IntersectionObserver> = {};
  *
  * @public
  */
-export const infiniteScroll: DirectiveOptions = {
-  inserted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }, vNode) {
+export const infiniteScroll: Directive<HTMLElement, { margin: number }> = {
+  mounted(element, { arg: id = VIEWPORT_ID, value: { margin = 200 } = {} }) {
+    /*
+     * This hack allows the root element to always contain the observed element.
+     * Not overpass the top margin more than 1700000 because it doesn't work in Android chrome
+     */
+    const rootMargin = `1000000% 0px ${margin}px 0px`;
     const root = getRoot(element, id);
+    const xBus = useXBus();
 
-    state[id] = createIntersectionObserver({
-      root,
-      margin,
-      vNode
-    });
+    state[id] = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          xBus.emit('UserReachedResultsListEnd');
+        }
+      },
+      {
+        threshold: 0.99,
+        rootMargin,
+        root
+      }
+    );
 
     state[id].observe(element);
   },
-
-  unbind(_element, { arg: id = VIEWPORT_ID }) {
+  unmounted(_, { arg: id = VIEWPORT_ID }) {
     if (state[id]) {
       state[id].disconnect();
       delete state[id];
     }
   }
 };
-
-/**
- * Retrieves the root element for the provided id.
- *
- * @param element - Target element where directive is set.
- * @param id - String identifier.
- * @returns HTMLElement or null.
- */
-function getRoot(element: HTMLElement, id: string): HTMLElement | null {
-  switch (id) {
-    case 'html':
-      return null;
-    case 'body':
-      return document.body;
-    case VIEWPORT_ID:
-      return null;
-    default:
-      return element.closest(`#${id}`)!;
-  }
-}
-
-/**
- * Creates an IntersectionObserver.
- *
- * When the observer is fired, it will execute the {@link InfiniteScroll.onInfiniteScrollEnd}
- * function implemented in the provided vNode component instance.
- *
- * @param options - ObserverOptions.
- * @returns IntersectionObserver.
- */
-function createIntersectionObserver({
-  root,
-  margin,
-  vNode
-}: ObserverOptions): IntersectionObserver {
-  // This hack allows the root element to always contain the observed element.
-  // Not overpass the top margin more than 1700000 because it doesn't work in Android chrome
-  const rootMargin = `1000000% 0px ${margin}px 0px`;
-
-  return new IntersectionObserver(
-    ([entry]) => {
-      if (entry.isIntersecting) {
-        (vNode.componentInstance as Vue & InfiniteScroll)?.onInfiniteScrollEnd();
-      }
-    },
-    {
-      threshold: 0.99,
-      rootMargin,
-      root
-    }
-  );
-}
diff --git a/packages/x-components/src/directives/infinite-scroll/index.ts b/packages/x-components/src/directives/infinite-scroll/index.ts
deleted file mode 100644
index d9f789e115..0000000000
--- a/packages/x-components/src/directives/infinite-scroll/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './infinite-scroll';
-export * from './infinite-scroll.types';
diff --git a/packages/x-components/src/directives/infinite-scroll/infinite-scroll.types.ts b/packages/x-components/src/directives/infinite-scroll/infinite-scroll.types.ts
deleted file mode 100644
index 1f946d9ffc..0000000000
--- a/packages/x-components/src/directives/infinite-scroll/infinite-scroll.types.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { VNode } from 'vue';
-
-/**
- * Interface to be implemented by the component which uses the infinite scroll directive.
- * If the component wants to trigger an action when the scroll is about to end it needs to implement
- * the `onInfiniteScrollEnd` method.
- *
- * @public
- */
-export interface InfiniteScroll {
-  onInfiniteScrollEnd: () => void;
-}
-
-/**
- * Options used by the IntersectionObserver.
- *
- * @internal
- */
-export interface ObserverOptions {
-  /** The parent container used by the IntersectionObserver. If null, viewport will be observed. */
-  root: HTMLElement | null;
-  /** Amount of pixels that is used in the computed margin passed to the IntersectionObserver. */
-  margin: number;
-  /** VNode which contents the `onInfiniteScrollEnd` method within the context. */
-  vNode: VNode;
-}
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index 8737328e43..306700b313 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -131,7 +131,7 @@
               </template>
             </Spellcheck>
 
-            <SlidingPanel v-if="$x.relatedTags.length">
+            <SlidingPanel v-if="x.relatedTags.length">
               <template #sliding-panel-left-button>
                 <ChevronLeft />
               </template>
@@ -155,7 +155,7 @@
 
         <template #toolbar-aside>
           <BaseIdTogglePanelButton
-            v-if="$x.totalResults > 0"
+            v-if="x.totalResults > 0"
             class="x-button--ghost x-button"
             panelId="aside-panel"
           >
@@ -164,8 +164,8 @@
         </template>
 
         <template #toolbar-body>
-          <div v-if="$x.totalResults > 0" class="x-flex x-items-center x-gap-12">
-            <span class="x-text1">{{ $x.totalResults }} Results</span>
+          <div v-if="x.totalResults > 0" class="x-flex x-items-center x-gap-12">
+            <span class="x-text1">{{ x.totalResults }} Results</span>
             <BaseColumnPickerList
               @update:modelValue="col => (selectedColumns = col)"
               :modelValue="selectedColumns"
@@ -204,7 +204,7 @@
         </template>
 
         <template #main-aside>
-          <Aside v-if="$x.totalResults > 0" />
+          <Aside v-if="x.totalResults > 0" />
         </template>
 
         <template #main-body>
@@ -229,23 +229,23 @@
             <AutoProgressBar :isLoading="isRedirecting" :durationInSeconds="delayInSeconds" />
           </Redirection>
 
-          <template v-if="!$x.redirections.length">
+          <template v-if="!x.redirections.length">
             <FallbackDisclaimer class="x-message" />
 
             <!--  No Results Message  -->
             <div
-              v-if="$x.noResults && !$x.fromNoResultsWithFilters"
+              v-if="x.noResults && !x.fromNoResultsWithFilters"
               class="x-p-28 x-flex x-flex-col x-gap-8 x-items-center x-bg-lead-25 x-my-8"
               data-test="no-results-message"
             >
               <p>
                 There are no results for
-                <span class="x-font-bold">{{ $x.query.search }}</span>
+                <span class="x-font-bold">{{ x.query.search }}</span>
               </p>
               <p>You may be interested in these:</p>
             </div>
 
-            <template v-if="!$x.query.searchBox">
+            <template v-if="!x.query.searchBox">
               <h1 class="x-mb-16 x-title1">Brand Recommendations</h1>
               <LocationProvider location="no_results">
                 <QueryPreviewList
@@ -293,17 +293,23 @@
 
             <!-- Results -->
             <LocationProvider location="results">
-              <ResultsList v-infinite-scroll:main-scroll>
-                <PromotedsList>
-                  <BannersList>
+              <ResultsList
+                v-infinite-scroll:main-scroll="{ margin: 600 }"
+                class="x-mot-results-list"
+                data-test="results-list"
+                data-wysiwyg="results"
+              >
+                <PromotedsList class="x-mot-promoteds-list">
+                  <BannersList class="x-mot-banners-list">
                     <NextQueriesList
                       :show-only-after-offset="controls.nextQueriesList.showOnlyAfterOffset"
+                      class="x-mot-next-queries-list"
                     >
                       <BaseVariableColumnGrid
                         style="--x-size-min-width-grid-item: 150px"
                         class="x-gap-12"
                         :animation="resultsAnimation"
-                        :columns="$x.device === 'mobile' ? 2 : 4"
+                        :columns="x.device === 'mobile' ? 2 : 4"
                       >
                         <template #result="{ item: result }">
                           <MainScrollItem :item="result">
@@ -368,7 +374,7 @@
                 <h1 v-if="isAnyQueryLoadedInPreview(queries)" class="x-title1">
                   Similar Semantic Queries
                 </h1>
-                <LocationProvider :location="$x.noResults ? 'no_results' : 'low_results'">
+                <LocationProvider :location="x.noResults ? 'no_results' : 'low_results'">
                   <QueryPreviewList
                     :queries-preview-info="queries.map(q => ({ query: q }))"
                     #default="{ queryPreviewInfo: { query }, results, queryTagging }"
@@ -407,7 +413,7 @@
 
             <!-- Partials -->
             <PartialResultsList
-              v-if="!$x.fromNoResultsWithFilters && ($x.totalResults <= 4 || $x.noResults)"
+              v-if="!x.fromNoResultsWithFilters && (x.totalResults <= 4 || x.noResults)"
               :animation="resultsAnimation"
             >
               <template #default="{ partialResult }">
@@ -427,7 +433,7 @@
             </PartialResultsList>
 
             <!-- Recommendations -->
-            <Recommendations v-if="!$x.query.search || $x.noResults" #layout="{ recommendations }">
+            <Recommendations v-if="!x.query.search || x.noResults" #layout="{ recommendations }">
               <BaseVariableColumnGrid
                 #default="{ item: result }"
                 :animation="resultsAnimation"
@@ -452,8 +458,8 @@
 <script lang="ts">
   /* eslint-disable max-len */
   import { computed, ComputedRef, defineComponent, provide } from 'vue';
-  import { animateClipPath } from '../../components/animations/animate-clip-path/animate-clip-path.factory';
-  import StaggeredFadeAndSlide from '../../components/animations/staggered-fade-and-slide.vue';
+  // import { animateClipPath } from '../../components/animations/animate-clip-path/animate-clip-path.factory';
+  // import StaggeredFadeAndSlide from '../../components/animations/staggered-fade-and-slide.vue';
   import AutoProgressBar from '../../components/auto-progress-bar.vue';
   import BaseDropdown from '../../components/base-dropdown.vue';
   import BaseGrid from '../../components/base-grid.vue';
@@ -463,6 +469,8 @@
   import ChevronRight from '../../components/icons/chevron-right.vue';
   import ChevronUp from '../../components/icons/chevron-up.vue';
   import CrossIcon from '../../components/icons/cross.vue';
+  import { use$x } from '../../composables/use-$x';
+  import { infiniteScroll } from '../../directives/infinite-scroll';
   import ExperienceControls from '../../x-modules/experience-controls/components/experience-controls.vue';
   import Grid2Col from '../../components/icons/grid-2-col.vue';
   import Grid4Col from '../../components/icons/grid-4-col.vue';
@@ -473,7 +481,6 @@
   import PreselectedFilters from '../../x-modules/facets/components/preselected-filters.vue';
   import SlidingPanel from '../../components/sliding-panel.vue';
   import SnippetCallbacks from '../../components/snippet-callbacks.vue';
-  import { infiniteScroll } from '../../directives/infinite-scroll/infinite-scroll';
   import RenderlessExtraParams from '../../x-modules/extra-params/components/renderless-extra-param.vue';
   import SnippetConfigExtraParams from '../../x-modules/extra-params/components/snippet-config-extra-params.vue';
   import NextQueriesList from '../../x-modules/next-queries/components/next-queries-list.vue';
@@ -523,11 +530,6 @@
       infiniteScroll
     },
     components: {
-      DisplayEmitter,
-      QueryPreviewButton,
-      DisplayResultProvider,
-      FallbackDisclaimer,
-      QueryPreviewList,
       Aside,
       AutoProgressBar,
       Banner,
@@ -543,15 +545,19 @@
       ClearSearchInput,
       CloseMainModal,
       CrossIcon,
+      DisplayEmitter,
+      DisplayResultProvider,
       ExperienceControls,
+      FallbackDisclaimer,
       Grid2Col,
       Grid4Col,
       LocationProvider,
+      MainModal,
       MainScrollItem,
       MultiColumnMaxWidthLayout,
       NextQueriesList,
-      NextQueryPreview,
       NextQuery,
+      NextQueryPreview,
       OpenMainModal,
       PartialQueryButton,
       PartialResultsList,
@@ -559,6 +565,8 @@
       PreselectedFilters,
       Promoted,
       PromotedsList,
+      QueryPreviewButton,
+      QueryPreviewList,
       Recommendations,
       Redirection,
       RelatedTags,
@@ -579,8 +587,7 @@
       Spellcheck,
       SpellcheckButton,
       Tagging,
-      UrlHandler,
-      MainModal
+      UrlHandler
     },
     setup() {
       const stores = ['Spain', 'Portugal', 'Italy'];
@@ -593,8 +600,8 @@
         'Find sunglasses'
       ];
       const columnPickerValues = [0, 2, 4];
-      const resultsAnimation = StaggeredFadeAndSlide;
-      const modalAnimation = animateClipPath();
+      // const resultsAnimation = StaggeredFadeAndSlide;
+      // const modalAnimation = animateClipPath();
       const selectedColumns = 4;
       const sortValues = ['', 'price asc', 'price desc'];
       const isAnyQueryLoadedInPreview = useQueriesPreview().isAnyQueryLoadedInPreview;
@@ -655,8 +662,8 @@
         adapterConfig.e2e = !adapterConfig.e2e;
       };
       return {
-        resultsAnimation,
-        modalAnimation,
+        resultsAnimation: undefined,
+        modalAnimation: undefined,
         queriesPreviewInfo,
         stores,
         initialExtraParams,
@@ -667,7 +674,8 @@
         isAnyQueryLoadedInPreview,
         queries,
         toggleE2EAdapter,
-        controls
+        controls,
+        x: use$x()
       };
     }
   });
diff --git a/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue b/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue
index 92740759e5..4c81e9370a 100644
--- a/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue
+++ b/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue
@@ -1,23 +1,5 @@
-<template>
-  <NoElement>
-    <!--
-      @slot Next queries list layout.
-        @binding {SearchItem[]} items - Next queries groups plus the injected list items to
-        render.
-        @binding {Vue | string} animation - Animation to animate the elements.
-    -->
-    <slot v-bind="{ items, animation }">
-      <ItemsList :animation="animation" :items="items">
-        <template v-for="(_, slotName) in slots" v-slot:[slotName]="{ item }">
-          <slot :name="slotName" :item="item" />
-        </template>
-      </ItemsList>
-    </slot>
-  </NoElement>
-</template>
-
 <script lang="ts">
-  import { computed, ComputedRef, defineComponent, inject, provide, Ref } from 'vue';
+  import { computed, ComputedRef, defineComponent, h, inject, provide, Ref } from 'vue';
   import { NextQuery } from '@empathyco/x-types';
   import ItemsList from '../../../components/items-list.vue';
   import { groupItemsBy } from '../../../utils/array';
@@ -32,7 +14,6 @@
   import { AnimationProp } from '../../../types/animation-prop';
   import { use$x } from '../../../composables/use-$x';
   import { useGetter } from '../../../composables/use-getter';
-  import { NoElement } from '../../../components/no-element';
 
   /**
    * Component that inserts groups of next queries in different positions of the injected search
@@ -43,58 +24,32 @@
   export default defineComponent({
     name: 'NextQueriesList',
     xModule: nextQueriesXModule.name,
-    components: {
-      ItemsList,
-      NoElement
-    },
     props: {
-      /**
-       * Animation component that will be used to animate the next queries groups.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the next queries groups. */
       animation: {
         type: AnimationProp,
         default: 'ul'
       },
-      /**
-       * The first index to insert a group of next queries at.
-       *
-       * @public
-       */
+      /** The first index to insert a group of next queries at. */
       offset: {
         type: Number,
         default: 24
       },
-      /**
-       * The items cycle size to keep inserting next queries groups at.
-       *
-       * @public
-       */
+      /** The items cycle size to keep inserting next queries groups at. */
       frequency: {
         type: Number,
         default: 24
       },
-      /**
-       * The maximum amount of next queries to add in a single group.
-       *
-       * @public
-       */
+      /** The maximum amount of next queries to add in a single group. */
       maxNextQueriesPerGroup: {
         type: Number,
         default: 4
       },
-      /**
-       * The maximum number of groups to insert into the injected list items list.
-       *
-       * @public
-       */
+      /** The maximum number of groups to insert into the injected list items list. */
       maxGroups: Number,
       /**
        * Determines if a group is added to the injected items list in case the number
        * of items is smaller than the offset.
-       *
-       * @public
        */
       showOnlyAfterOffset: {
         type: Boolean,
@@ -104,30 +59,24 @@
     setup(props, { slots }) {
       const $x = use$x();
 
-      /**
-       * The state next queries.
-       *
-       * @internal
-       */
+      /** The state next queries. */
       const nextQueries: ComputedRef<NextQuery[]> = useGetter('nextQueries', [
         'nextQueries'
       ]).nextQueries;
 
-      /**
-       * Injected query, updated when the related request(s) have succeeded.
-       */
-      const injectedQuery = inject<Ref<string | undefined>>(QUERY_KEY as string);
+      /** Injected query, updated when the related request(s) have succeeded. */
+      const injectedQuery = inject<Ref<string> | undefined>(QUERY_KEY as string, undefined);
 
-      /**
-       * Indicates if there are more available results than the injected.
-       */
-      const hasMoreItems = inject<Ref<boolean | undefined>>(HAS_MORE_ITEMS_KEY as string);
+      /** Indicates if there are more available results than the injected. */
+      const hasMoreItems = inject<Ref<boolean> | undefined>(
+        HAS_MORE_ITEMS_KEY as string,
+        undefined
+      );
 
       /**
        * The grouped next queries based on the given config.
        *
        * @returns A list of next queries groups.
-       * @internal
        */
       const nextQueriesGroups = computed<NextQueriesGroup[]>(() =>
         Object.values(
@@ -143,51 +92,44 @@
           }))
       );
 
-      /**
-       * It injects {@link ListItem} provided by an ancestor as injectedListItems.
-       *
-       * @internal
-       */
-      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
+      /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */
+      const injectedListItems = inject<Ref<ListItem[]> | undefined>(
+        LIST_ITEMS_KEY as string,
+        undefined
+      );
 
       /**
        * Checks if the next queries are outdated taking into account the injected query.
        *
        * @returns True if the next queries are outdated, false if not.
-       * @internal
        */
-      const nextQueriesAreOutdated = computed(() => {
-        return (
+      const nextQueriesAreOutdated = computed(
+        () =>
           !!injectedQuery?.value &&
           ($x.query.nextQueries !== injectedQuery.value || $x.status.nextQueries !== 'success')
-        );
-      });
+      );
 
       /**
        * Checks if the number of items is smaller than the offset so a group
        * should be added to the injected items list.
        *
        * @returns True if a group should be added, false if not.
-       * @internal
        */
-      const hasNotEnoughListItems = computed(() => {
-        return (
+      const hasNotEnoughListItems = computed(
+        () =>
           !props.showOnlyAfterOffset &&
           !hasMoreItems?.value &&
           injectedListItems !== undefined &&
           injectedListItems.value.length > 0 &&
           props.offset > injectedListItems.value.length
-        );
-      });
+      );
 
       /**
        * New list of {@link ListItem}s to render.
        *
        * @returns The new list of {@link ListItem}s with the next queries groups inserted.
-       * @internal
        */
-
-      const items = computed((): ListItem[] => {
+      const items = computed(() => {
         if (!injectedListItems?.value) {
           return nextQueriesGroups.value;
         }
@@ -215,13 +157,12 @@
        * @remarks It should be overridden in the component that uses the mixin and it's intended to be
        * filled with items from the state. Vue doesn't allow mixins as abstract classes.
        * @returns An empty array as fallback in case it is not overridden.
-       * @internal
        */
       provide(LIST_ITEMS_KEY as string, items);
 
-      return {
-        items,
-        slots
+      return () => {
+        const innerProps = { items: items.value, animation: props.animation };
+        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps);
       };
     }
   });
diff --git a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
index 88dd3957ba..2c4ba1a512 100644
--- a/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
+++ b/packages/x-components/src/x-modules/queries-preview/components/query-preview-list.vue
@@ -14,7 +14,7 @@
         :queryFeature="queryFeature"
         :queryPreviewInfo="queryPreview"
       >
-        <template v-for="(_, slotName) in renderSlots" v-slot:[slotName]="scope">
+        <template v-for="(_, slotName) in $slots" v-slot:[slotName]="scope">
           <slot :name="slotName" v-bind="scope" />
         </template>
       </QueryPreview>
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts">
-  import Vue, { computed, defineComponent, PropType, ref, watch } from 'vue';
+  import { computed, defineComponent, PropType, ref, watch } from 'vue';
   import { RequestStatus } from '../../../store';
   import { queriesPreviewXModule } from '../x-module';
   import { QueryPreviewInfo } from '../store/types';
@@ -99,9 +99,7 @@
         default: 'ul'
       }
     },
-    setup(props, { slots }) {
-      const renderSlots = slots;
-
+    setup(props) {
       /**
        * Contains the status of the preview requests, indexed by query.
        */
@@ -192,8 +190,7 @@
       return {
         renderedQueryPreviews,
         flagAsFailed,
-        flagAsLoaded,
-        renderSlots
+        flagAsLoaded
       };
     }
   });
diff --git a/packages/x-components/src/x-modules/search/components/banners-list.vue b/packages/x-components/src/x-modules/search/components/banners-list.vue
index 8c47d943dd..b7e54d9992 100644
--- a/packages/x-components/src/x-modules/search/components/banners-list.vue
+++ b/packages/x-components/src/x-modules/search/components/banners-list.vue
@@ -1,23 +1,6 @@
-<template>
-  <NoElement>
-    <!--
-      @slot Customized BannersList layout.
-        @binding {Banner[]} items - Banners plus the injected list items to render.
-        @binding {Vue | string} animation - Animation to animate the elements.
-    -->
-    <slot v-bind="{ items, animation }">
-      <ItemsList :animation="animation" :items="items">
-        <template v-for="(_, slotName) in slots" v-slot:[slotName]="{ item }">
-          <slot :name="slotName" :item="item" />
-        </template>
-      </ItemsList>
-    </slot>
-  </NoElement>
-</template>
-
 <script lang="ts">
   import { Banner } from '@empathyco/x-types';
-  import { computed, ComputedRef, defineComponent, inject, isRef, provide, ref, Ref } from 'vue';
+  import { computed, ComputedRef, defineComponent, h, inject, isRef, provide, ref, Ref } from 'vue';
   import ItemsList from '../../../components/items-list.vue';
   import { FeatureLocation } from '../../../types/origin';
   import { ListItem } from '../../../utils/types';
@@ -26,14 +9,12 @@
   import { use$x } from '../../../composables/use-$x';
   import { useState } from '../../../composables/use-state';
   import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';
-  import { NoElement } from '../../../components/no-element';
 
   /**
-   * It renders a {@link ItemsList} list of banners from {@link SearchState.banners} by
-   * default using the `ItemsInjectionMixin`.
+   * It renders a {@link ItemsList} list of banners from {@link SearchState.banners}.
    *
    * The component provides a default slot which wraps the whole component with the `banners`
-   * plus the `searchInjectedItems` which also contains the injected list items from
+   * plus the `injectedListItems` which also contains the injected list items from
    * the ancestor.
    *
    * It also provides the parent slots to customize the items.
@@ -42,48 +23,28 @@
    */
   export default defineComponent({
     name: 'BannersList',
-    components: {
-      ItemsList,
-      NoElement
-    },
     xModule: searchXModule.name,
     props: {
-      /**
-       * Animation component that will be used to animate the banners.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the banners. */
       animation: {
         type: AnimationProp,
         default: 'ul'
       }
     },
-    setup(_, { slots }) {
+    setup(props, { slots }) {
       const $x = use$x();
 
-      /**
-       * The banners to render from the state.
-       *
-       * @public
-       */
+      /** The banners to render from the state. */
       const stateItems: ComputedRef<Banner[]> = useState('search', ['banners']).banners;
 
-      /**
-       * The provided {@link FeatureLocation} for the component.
-       *
-       * @internal
-       */
+      /** The provided {@link FeatureLocation} for the component. */
       const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation | undefined>(
         'location',
         undefined
       );
       const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation;
 
-      /**
-       * Number of columns the grid is being divided into.
-       *
-       * @internal
-       */
+      /** Number of columns the grid is being divided into. */
       let columnsNumber = ref(0);
 
       /**
@@ -91,8 +52,6 @@
        *
        * @param newColumnsNumber - The new columns value.
        * @param metadata - The {@link @empathyco/x-bus#SubjectPayload.metadata}.
-       *
-       * @internal
        */
       $x.on('RenderedColumnsNumberChanged', true).subscribe(({ eventPayload, metadata }) => {
         if (metadata.location === location) {
@@ -100,12 +59,11 @@
         }
       });
 
-      /**
-       * It injects {@link ListItem} provided by an ancestor as injectedListItems.
-       *
-       * @internal
-       */
-      const injectedListItems = inject<Ref<ListItem[] | undefined>>(LIST_ITEMS_KEY as string);
+      /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */
+      const injectedListItems = inject<Ref<ListItem[]> | undefined>(
+        LIST_ITEMS_KEY as string,
+        undefined
+      );
 
       /**
        * The `stateItems` concatenated with the `injectedListItems` if there are.
@@ -114,10 +72,8 @@
        * `injectedListItems`.
        *
        * @returns List of {@link ListItem}.
-       *
-       * @internal
        */
-      const items = computed((): ListItem[] => {
+      const items = computed(() => {
         if (!injectedListItems?.value!.length) {
           return stateItems.value;
         }
@@ -152,13 +108,12 @@
        * @remarks It should be overridden in the component that uses the mixin and it's intended to be
        * filled with items from the state. Vue doesn't allow mixins as abstract classes.
        * @returns An empty array as fallback in case it is not overridden.
-       * @internal
        */
       provide(LIST_ITEMS_KEY as string, items);
 
-      return {
-        items,
-        slots
+      return () => {
+        const innerProps = { items: items.value, animation: props.animation };
+        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps);
       };
     }
   });
diff --git a/packages/x-components/src/x-modules/search/components/promoteds-list.vue b/packages/x-components/src/x-modules/search/components/promoteds-list.vue
index 87d66cbfe0..049c826701 100644
--- a/packages/x-components/src/x-modules/search/components/promoteds-list.vue
+++ b/packages/x-components/src/x-modules/search/components/promoteds-list.vue
@@ -1,23 +1,6 @@
-<template>
-  <NoElement>
-    <!--
-      @slot Customized Promoteds List layout.
-        @binding {Promoted[]} items - Promoteds plus the injected list items to render.
-        @binding {Vue | string} animation - Animation to animate the elements.
-    -->
-    <slot v-bind="{ items, animation }">
-      <ItemsList :animation="animation" :items="items">
-        <template v-for="(_, slotName) in slots" v-slot:[slotName]="{ item }">
-          <slot :name="slotName" :item="item" />
-        </template>
-      </ItemsList>
-    </slot>
-  </NoElement>
-</template>
-
 <script lang="ts">
   import { Promoted } from '@empathyco/x-types';
-  import { computed, ComputedRef, defineComponent, inject, provide, Ref } from 'vue';
+  import { computed, ComputedRef, defineComponent, h, inject, provide, Ref } from 'vue';
   import ItemsList from '../../../components/items-list.vue';
   import { ListItem } from '../../../utils/types';
   import { searchXModule } from '../x-module';
@@ -25,55 +8,39 @@
   import { use$x } from '../../../composables/use-$x';
   import { useState } from '../../../composables/use-state';
   import { LIST_ITEMS_KEY } from '../../../components/decorators/injection.consts';
-  import { NoElement } from '../../../components/no-element';
 
   /**
-   * It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds} by default
-   * using the `ItemsInjectionMixin`.
+   * It renders a {@link ItemsList} of promoteds from {@link SearchState.promoteds}.
    *
    * The component provides a default slot which wraps the whole component with the `promoteds`
-   * plus the `searchInjectedItems` which also contains the injected list items from
+   * plus the `injectedListItems` which also contains the injected list items from
    * the ancestor.
    *
    * It also provides the parent slots to customize the items.
    *
    * @public
    */
-
   export default defineComponent({
     name: 'PromotedsList',
-    components: {
-      ItemsList,
-      NoElement
-    },
     xModule: searchXModule.name,
     props: {
-      /**
-       * Animation component that will be used to animate the promoteds.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the promoteds. */
       animation: {
         type: AnimationProp,
         default: 'ul'
       }
     },
-    setup(_, { slots }) {
+    setup(props, { slots }) {
       const $x = use$x();
 
-      /**
-       * The promoteds to render from the state.
-       *
-       * @public
-       */
+      /** The promoteds to render from the state. */
       const stateItems: ComputedRef<Promoted[]> = useState('search', ['promoteds']).promoteds;
 
-      /**
-       * It injects {@link ListItem} provided by an ancestor as injectedListItems.
-       *
-       * @internal
-       */
-      const injectedListItems = inject<Ref<ListItem[] | undefined>>(LIST_ITEMS_KEY as string);
+      /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */
+      const injectedListItems = inject<Ref<ListItem[]> | undefined>(
+        LIST_ITEMS_KEY as string,
+        undefined
+      );
 
       /**
        * The `stateItems` concatenated with the `injectedListItems` if there are.
@@ -82,10 +49,8 @@
        * `injectedListItems`.
        *
        * @returns List of {@link ListItem}.
-       *
-       * @internal
        */
-      const items = computed((): ListItem[] => {
+      const items = computed(() => {
         if (!injectedListItems?.value!.length) {
           return stateItems.value;
         }
@@ -112,13 +77,12 @@
        * @remarks It should be overridden in the component that uses the mixin and it's intended to be
        * filled with items from the state. Vue doesn't allow mixins as abstract classes.
        * @returns An empty array as fallback in case it is not overridden.
-       * @internal
        */
       provide(LIST_ITEMS_KEY as string, items);
 
-      return {
-        items,
-        slots
+      return () => {
+        const innerProps = { items: items.value, animation: props.animation };
+        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps);
       };
     }
   });
diff --git a/packages/x-components/src/x-modules/search/components/results-list.vue b/packages/x-components/src/x-modules/search/components/results-list.vue
index d0c2258ecc..f6dc425cfb 100644
--- a/packages/x-components/src/x-modules/search/components/results-list.vue
+++ b/packages/x-components/src/x-modules/search/components/results-list.vue
@@ -1,22 +1,5 @@
-<template>
-  <NoElement>
-    <!--
-      @slot Customize ResultsList.
-        @binding {Result[]} items - Results to render.
-        @binding {Vue | string} animation - Animation to animate the elements.
-    -->
-    <slot v-bind="{ items, animation }">
-      <ItemsList :animation="animation" :items="items">
-        <template v-for="(_, slotName) in slots" v-slot:[slotName]="{ item }">
-          <slot :name="slotName" :item="item" />
-        </template>
-      </ItemsList>
-    </slot>
-  </NoElement>
-</template>
-
 <script lang="ts">
-  import { computed, ComputedRef, defineComponent, provide, Ref, ref, watch } from 'vue';
+  import { computed, ComputedRef, defineComponent, h, provide, Ref, ref, watch } from 'vue';
   import { Result } from '@empathyco/x-types';
   import {
     HAS_MORE_ITEMS_KEY,
@@ -25,12 +8,9 @@
   } from '../../../components/decorators/injection.consts';
   import ItemsList from '../../../components/items-list.vue';
   import { RequestStatus } from '../../../store/utils/status-store.utils';
-  import { infiniteScroll } from '../../../directives';
   import { animationProp } from '../../../utils/options-api';
   import { useState } from '../../../composables/use-state';
   import { searchXModule } from '../x-module';
-  import { useXBus } from '../../../composables/use-x-bus';
-  import { NoElement } from '../../../components/no-element';
 
   /**
    * It renders a {@link ItemsList} list with the results from {@link SearchState.results} by
@@ -45,71 +25,41 @@
    */
   export default defineComponent({
     name: 'ResultsList',
-    components: {
-      ItemsList,
-      NoElement
-    },
     xModule: searchXModule.name,
-    directives: { 'infinite-scroll': infiniteScroll },
     props: {
-      /**
-       * Animation component that will be used to animate the results.
-       *
-       * @public
-       */
+      /** Animation component that will be used to animate the results. */
       animation: {
         type: animationProp,
         default: 'ul'
       }
     },
     emits: ['UserReachedResultsListEnd'],
-
-    setup(_, { slots }) {
-      const xBus = useXBus();
-
+    setup(props, { slots }) {
       /**
        * The results to render from the state.
        *
        * @remarks The results list are provided with `items` key. It can be
        * concatenated with list items from components such as `BannersList`, `PromotedsList`,
        * `BaseGrid` or any component that injects the list.
-       *
-       * @public
        */
       const items: ComputedRef<Result[]> = useState('search', ['results']).results;
       provide<ComputedRef<Result[]>>(LIST_ITEMS_KEY as string, items);
 
-      /**
-       * The total number of results, taken from the state.
-       */
+      /** The total number of results, taken from the state. */
       const totalResults: ComputedRef<number> = useState('search', ['totalResults']).totalResults;
 
-      /**
-       * It provides the search query.
-       * This query is updated only when the search request has succeeded.
-       */
+      /** This query is updated only when the search request has succeeded. */
       let providedQuery = ref('');
       provide<Ref<string>>(QUERY_KEY as string, providedQuery);
 
-      /**
-       * Indicates if there are more available results that have not been injected.
-       *
-       * @returns Boolean.
-       * @public
-       */
-      const hasMoreItems = computed(() => {
-        return items.value.length < totalResults.value;
-      });
+      /** Indicates if there are more available results that have not been injected. */
+      const hasMoreItems = computed(() => items.value.length < totalResults.value);
       provide<ComputedRef<boolean>>(HAS_MORE_ITEMS_KEY as string, hasMoreItems);
 
-      /**
-       * The status of the search request, taken from the state.
-       */
-      const searchStatus: Ref<RequestStatus> = useState('search', ['status']).status;
+      /** The status of the search request, taken from the state. */
+      const searchStatus: ComputedRef<RequestStatus> = useState('search', ['status']).status;
 
-      /**
-       * The query of the search request, taken from the state.
-       */
+      /** The query of the search request, taken from the state. */
       const searchQuery: ComputedRef<string> = useState('search', ['query']).query;
 
       /**
@@ -118,11 +68,11 @@
        *
        * @param status - The status of the search request.
        */
-      const updateQuery = (status: RequestStatus): void => {
+      function updateQuery(status: RequestStatus) {
         if (status === 'success') {
           providedQuery.value = searchQuery.value;
         }
-      };
+      }
 
       /**
        * Watches the searchStatus and triggers updateQuery as callback
@@ -132,22 +82,9 @@
        */
       watch(searchStatus, () => updateQuery(searchStatus.value), { immediate: true });
 
-      /**
-       * It emits an {@link SearchXEvents.UserReachedResultsListEnd} event.
-       *
-       * @remarks This function is going to be executed when the observer
-       * is fired in {@link infiniteScroll}.
-       *
-       * @internal
-       */
-      const onInfiniteScrollEnd = (): void => {
-        xBus.emit('UserReachedResultsListEnd');
-      };
-
-      return {
-        items,
-        onInfiniteScrollEnd,
-        slots
+      return () => {
+        const innerProps = { items: items.value, animation: props.animation };
+        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps);
       };
     }
   });

From 9697a4a842e51e5bad24e798e39ed291bdb39234 Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Fri, 26 Jul 2024 11:23:02 +0200
Subject: [PATCH 6/6] fix(list-components): avoid injecting undefined default
 value since Vue does it

---
 .../next-queries/components/next-queries-list.vue    | 12 +++---------
 .../src/x-modules/search/components/banners-list.vue | 10 ++--------
 .../x-modules/search/components/promoteds-list.vue   |  5 +----
 3 files changed, 6 insertions(+), 21 deletions(-)

diff --git a/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue b/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue
index 4c81e9370a..ced4048fba 100644
--- a/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue
+++ b/packages/x-components/src/x-modules/next-queries/components/next-queries-list.vue
@@ -65,13 +65,10 @@
       ]).nextQueries;
 
       /** Injected query, updated when the related request(s) have succeeded. */
-      const injectedQuery = inject<Ref<string> | undefined>(QUERY_KEY as string, undefined);
+      const injectedQuery = inject<Ref<string>>(QUERY_KEY as string);
 
       /** Indicates if there are more available results than the injected. */
-      const hasMoreItems = inject<Ref<boolean> | undefined>(
-        HAS_MORE_ITEMS_KEY as string,
-        undefined
-      );
+      const hasMoreItems = inject<Ref<boolean>>(HAS_MORE_ITEMS_KEY as string);
 
       /**
        * The grouped next queries based on the given config.
@@ -93,10 +90,7 @@
       );
 
       /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */
-      const injectedListItems = inject<Ref<ListItem[]> | undefined>(
-        LIST_ITEMS_KEY as string,
-        undefined
-      );
+      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
 
       /**
        * Checks if the next queries are outdated taking into account the injected query.
diff --git a/packages/x-components/src/x-modules/search/components/banners-list.vue b/packages/x-components/src/x-modules/search/components/banners-list.vue
index b7e54d9992..011ab8a3c4 100644
--- a/packages/x-components/src/x-modules/search/components/banners-list.vue
+++ b/packages/x-components/src/x-modules/search/components/banners-list.vue
@@ -38,10 +38,7 @@
       const stateItems: ComputedRef<Banner[]> = useState('search', ['banners']).banners;
 
       /** The provided {@link FeatureLocation} for the component. */
-      const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation | undefined>(
-        'location',
-        undefined
-      );
+      const injectedLocation = inject<Ref<FeatureLocation> | FeatureLocation>('location');
       const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation;
 
       /** Number of columns the grid is being divided into. */
@@ -60,10 +57,7 @@
       });
 
       /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */
-      const injectedListItems = inject<Ref<ListItem[]> | undefined>(
-        LIST_ITEMS_KEY as string,
-        undefined
-      );
+      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
 
       /**
        * The `stateItems` concatenated with the `injectedListItems` if there are.
diff --git a/packages/x-components/src/x-modules/search/components/promoteds-list.vue b/packages/x-components/src/x-modules/search/components/promoteds-list.vue
index 049c826701..794532dc90 100644
--- a/packages/x-components/src/x-modules/search/components/promoteds-list.vue
+++ b/packages/x-components/src/x-modules/search/components/promoteds-list.vue
@@ -37,10 +37,7 @@
       const stateItems: ComputedRef<Promoted[]> = useState('search', ['promoteds']).promoteds;
 
       /** It injects {@link ListItem} provided by an ancestor as injectedListItems. */
-      const injectedListItems = inject<Ref<ListItem[]> | undefined>(
-        LIST_ITEMS_KEY as string,
-        undefined
-      );
+      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
 
       /**
        * The `stateItems` concatenated with the `injectedListItems` if there are.