@empathyco/x-components 7.5.0 → 8.1.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.1.0](https://github.com/empathyco/x/compare/@empathyco/x-components@8.0.0...@empathyco/x-components@8.1.0) (2026-07-14)
+
+### Features
+
+* trigger ai suggestions only in no results scenario (#2137)
+
+
+## [8.0.0](https://github.com/empathyco/x/compare/@empathyco/x-components@7.5.0...@empathyco/x-components@8.0.0) (2026-07-13)
+
+### ⚠ BREAKING CHANGES
+
+* Sorting components moved to x-components/src/components/sort. Now, sorting components can be used by the search and browse module by managing them through props.
+
+### Features
+
+* create sort components that could be shared between search and … (#2134)
+
+
 ## [7.5.0](https://github.com/empathyco/x/compare/@empathyco/x-components@7.4.1...@empathyco/x-components@7.5.0) (2026-07-13)
 
 ### Features

package/browse/index.js

@@ -1,5 +1,4 @@
 export { default as BrowseResultsList } from '../js/x-modules/browse/components/browse-results-list.vue.js';
-export { default as BrowseSortPickerList } from '../js/x-modules/browse/components/browse-sort-picker-list.vue.js';
 export { cancelFetchAndSaveBrowseResponse, fetchAndSaveBrowseResponse } from '../js/x-modules/browse/store/actions/fetch-and-save-browse-response.action.js';
 export { fetchAndSaveResultsEnrichment as fetchAndSaveBrowseResultsEnrichment } from '../js/x-modules/browse/store/actions/fetch-and-save-results-enrichment.action.js';
 export { fetchBrowseResponse } from '../js/x-modules/browse/store/actions/fetch-browse-response.action.js';

package/core/index.js

@@ -145,6 +145,9 @@ export { default as BaseScroll } from '../js/components/scroll/base-scroll.vue.j
 export { useScroll } from '../js/components/scroll/use-scroll.js';
 export { default as SlidingPanel } from '../js/components/sliding-panel.vue.js';
 export { default as SnippetCallbacks } from '../js/components/snippet-callbacks.vue.js';
+export { default as SortDropdown } from '../js/components/sort/sort-dropdown.vue.js';
+export { default as SortList } from '../js/components/sort/sort-list.vue.js';
+export { default as SortPickerList } from '../js/components/sort/sort-picker-list.vue.js';
 export { default as BaseSuggestion } from '../js/components/suggestions/base-suggestion.vue.js';
 export { default as BaseSuggestions } from '../js/components/suggestions/base-suggestions.vue.js';
 export { getRootXComponent, getXComponentXModuleName, isXComponent } from '../js/components/x-component.utils.js';

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/docs/API-reference/api/x-components.aiconfig.md

@@ -11,48 +11,3 @@ Configuration options for the [AiXModule](./x-components.aixmodule.md)<!-- -->.
 ```typescript
 export interface AiConfig 
 ```
-
-## Properties
-
-<table><thead><tr><th>
-
-Property
-
-
-</th><th>
-
-Modifiers
-
-
-</th><th>
-
-Type
-
-
-</th><th>
-
-Description
-
-
-</th></tr></thead>
-<tbody><tr><td>
-
-[lowResultsThreshold](./x-components.aiconfig.lowresultsthreshold.md)
-
-
-</td><td>
-
-
-</td><td>
-
-number
-
-
-</td><td>
-
-Maximum number of results in the SearchResponse to display ai elements.
-
-
-</td></tr>
-</tbody></table>
-

package/docs/API-reference/api/x-components.md

@@ -4329,17 +4329,6 @@ The component provides a default slot which wraps the whole component with the `
 It also provides the slot result to customize the item, which is within the default slot, with the result bound.
 
 
-</td></tr>
-<tr><td>
-
-[BrowseSortPickerList](./x-components.browsesortpickerlist.md)
-
-
-</td><td>
-
-The `SortPickerList` component allows user to select the browse results order. This component also allows to change the selected sort programmatically.
-
-
 </td></tr>
 <tr><td>
 

package/docs/API-reference/api/x-components.sortdropdown.md

@@ -10,24 +10,50 @@ The `SortDropdown` component allows user to select the search results order. Thi
 
 ```typescript
 _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    animation: PropType<string | Component>;
     items: {
         type: PropType<Sort[]>;
         required: true;
     };
-    animation: PropType<string | Component>;
+    selectedSort: {
+        type: PropType<Sort>;
+        required: true;
+    };
+    selectedSortProvidedEvent: {
+        type: PropType<XEvent>;
+        default: string;
+    };
+    clickedSortEvent: {
+        type: PropType<XEvent>;
+        default: string;
+    };
 }>, {
     emitUserClickedASort: (sort: Sort) => void;
     rootRef: import("vue").Ref<import("vue").DefineComponent<{}, {}, any> | undefined, import("vue").DefineComponent<{}, {}, any> | undefined>;
-    selectedSort: import("vue").ComputedRef<string>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    animation: PropType<string | Component>;
     items: {
         type: PropType<Sort[]>;
         required: true;
     };
-    animation: PropType<string | Component>;
+    selectedSort: {
+        type: PropType<Sort>;
+        required: true;
+    };
+    selectedSortProvidedEvent: {
+        type: PropType<XEvent>;
+        default: string;
+    };
+    clickedSortEvent: {
+        type: PropType<XEvent>;
+        default: string;
+    };
 }>> & Readonly<{
     onChange?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {
+}>, {
+    selectedSortProvidedEvent: keyof import("../../wiring/events.types").XEventsTypes;
+    clickedSortEvent: keyof import("../../wiring/events.types").XEventsTypes;
+}, {}, {
     BaseDropdown: import("vue").DefineComponent<{}, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

package/docs/API-reference/api/x-components.sortlist.md

@@ -10,28 +10,53 @@ The `SortList` component allows user to select the search results order. This co
 
 ```typescript
 _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    animation: {
+        type: PropType<string | Component>;
+        default: () => string;
+    };
     items: {
         type: PropType<Sort[]>;
         required: true;
     };
-    animation: {
-        type: PropType<string | Component>;
-        default: () => string;
+    selectedSort: {
+        type: PropType<Sort>;
+        required: true;
+    };
+    selectedSortProvidedEvent: {
+        type: PropType<XEvent>;
+        default: string;
+    };
+    clickedSortEvent: {
+        type: PropType<XEvent>;
+        default: string;
     };
 }>, {
     listItems: import("vue").ComputedRef<SortListItem[]>;
-    selectedSort: import("vue").ComputedRef<string>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    animation: {
+        type: PropType<string | Component>;
+        default: () => string;
+    };
     items: {
         type: PropType<Sort[]>;
         required: true;
     };
-    animation: {
-        type: PropType<string | Component>;
-        default: () => string;
+    selectedSort: {
+        type: PropType<Sort>;
+        required: true;
+    };
+    selectedSortProvidedEvent: {
+        type: PropType<XEvent>;
+        default: string;
+    };
+    clickedSortEvent: {
+        type: PropType<XEvent>;
+        default: string;
     };
 }>> & Readonly<{}>, {
     animation: string | Component;
+    selectedSortProvidedEvent: keyof XEventsTypes;
+    clickedSortEvent: keyof XEventsTypes;
 }, {}, {
     BaseEventButton: import("vue").DefineComponent<{}, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>

package/docs/API-reference/api/x-components.sortpickerlist.md

@@ -10,30 +10,55 @@ The `SortPickerList` component allows user to select the search results order. T
 
 ```typescript
 _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    animation: {
+        type: PropType<string | Component>;
+        default: () => string;
+    };
     items: {
         type: PropType<Sort[]>;
         required: true;
     };
-    animation: {
-        type: PropType<string | Component>;
-        default: () => string;
+    selectedSort: {
+        type: PropType<Sort>;
+        required: true;
+    };
+    selectedSortProvidedEvent: {
+        type: PropType<XEvent>;
+        default: string;
+    };
+    clickedSortEvent: {
+        type: PropType<XEvent>;
+        default: string;
     };
     buttonClass: StringConstructor;
 }>, {
     listItems: import("vue").ComputedRef<SortPickerItem[]>;
-    selectedSort: import("vue").ComputedRef<string>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    animation: {
+        type: PropType<string | Component>;
+        default: () => string;
+    };
     items: {
         type: PropType<Sort[]>;
         required: true;
     };
-    animation: {
-        type: PropType<string | Component>;
-        default: () => string;
+    selectedSort: {
+        type: PropType<Sort>;
+        required: true;
+    };
+    selectedSortProvidedEvent: {
+        type: PropType<XEvent>;
+        default: string;
+    };
+    clickedSortEvent: {
+        type: PropType<XEvent>;
+        default: string;
     };
     buttonClass: StringConstructor;
 }>> & Readonly<{}>, {
     animation: string | Component;
+    selectedSortProvidedEvent: keyof XEventsTypes;
+    clickedSortEvent: keyof XEventsTypes;
 }, {}, {
     BaseEventButton: import("vue").DefineComponent<{}, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>

package/docs/API-reference/api/x-components.usealiasapi.browseselectedsort.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@empathyco/x-components](./x-components.md) &gt; [UseAliasAPI](./x-components.usealiasapi.md) &gt; [browseSelectedSort](./x-components.usealiasapi.browseselectedsort.md)
+
+## UseAliasAPI.browseSelectedSort property
+
+The [BrowseXModule](./x-components.browsexmodule.md) selected sort.
+
+**Signature:**
+
+```typescript
+readonly browseSelectedSort: string;
+```

package/docs/API-reference/api/x-components.usealiasapi.md

@@ -37,6 +37,27 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
+[browseSelectedSort](./x-components.usealiasapi.browseselectedsort.md)
+
+
+</td><td>
+
+`readonly`
+
+
+</td><td>
+
+string
+
+
+</td><td>
+
+The [BrowseXModule](./x-components.browsexmodule.md) selected sort.
+
+
+</td></tr>
+<tr><td>
+
 [browseTotalResults](./x-components.usealiasapi.browsetotalresults.md)
 
 

package/docs/API-reference/components/{search → common/sort}/x-components.sort-dropdown.md

@@ -11,10 +11,13 @@ also allows to change the selected sort programmatically.
 
 ## Props
 
-| Name                   | Description                                                 | Type                | Default       |
-| ---------------------- | ----------------------------------------------------------- | ------------------- | ------------- |
-| <code>items</code>     | The list of possible sort values.                           | <code>Sort[]</code> | <code></code> |
-| <code>animation</code> | The transition to use for opening and closing the dropdown. | <code></code>       | <code></code> |
+| Name                                   | Description                                                 | Type                | Default                             |
+| -------------------------------------- | ----------------------------------------------------------- | ------------------- | ----------------------------------- |
+| <code>animation</code>                 | The transition to use for opening and closing the dropdown. | <code></code>       | <code></code>                       |
+| <code>items</code>                     | The list of possible sort values.                           | <code>Sort[]</code> | <code></code>                       |
+| <code>selectedSort</code>              |                                                             | <code>Sort</code>   | <code></code>                       |
+| <code>selectedSortProvidedEvent</code> |                                                             | <code>XEvent</code> | <code>'SelectedSortProvided'</code> |
+| <code>clickedSortEvent</code>          |                                                             | <code>XEvent</code> | <code>'UserClickedASort'</code>     |
 
 ## Events
 

package/docs/API-reference/components/{search → common/sort}/x-components.sort-list.md

@@ -11,10 +11,13 @@ also allows to change the selected sort programmatically.
 
 ## Props
 
-| Name                   | Description                                   | Type                             | Default                 |
-| ---------------------- | --------------------------------------------- | -------------------------------- | ----------------------- |
-| <code>items</code>     | The list of possible sort values.             | <code>Sort[]</code>              | <code></code>           |
-| <code>animation</code> | The transition to use for rendering the list. | <code>string \| Component</code> | <code>() => 'ul'</code> |
+| Name                                   | Description                                   | Type                             | Default                             |
+| -------------------------------------- | --------------------------------------------- | -------------------------------- | ----------------------------------- |
+| <code>animation</code>                 | The transition to use for rendering the list. | <code>string \| Component</code> | <code>() => 'ul'</code>             |
+| <code>items</code>                     | The list of possible sort values.             | <code>Sort[]</code>              | <code></code>                       |
+| <code>selectedSort</code>              |                                               | <code>Sort</code>                | <code></code>                       |
+| <code>selectedSortProvidedEvent</code> |                                               | <code>XEvent</code>              | <code>'SelectedSortProvided'</code> |
+| <code>clickedSortEvent</code>          |                                               | <code>XEvent</code>              | <code>'UserClickedASort'</code>     |
 
 ## Slots
 

package/docs/API-reference/components/{search → common/sort}/x-components.sort-picker-list.md

@@ -11,11 +11,14 @@ also allows to change the selected sort programmatically.
 
 ## Props
 
-| Name                     | Description                                   | Type                             | Default                  |
-| ------------------------ | --------------------------------------------- | -------------------------------- | ------------------------ |
-| <code>items</code>       | The list of possible sort values.             | <code>Sort[]</code>              | <code></code>            |
-| <code>animation</code>   | The transition to use for rendering the list. | <code>string \| Component</code> | <code>() => 'div'</code> |
-| <code>buttonClass</code> | Class inherited by each sort button.          | <code>string</code>              | <code></code>            |
+| Name                                   | Description                                   | Type                             | Default                             |
+| -------------------------------------- | --------------------------------------------- | -------------------------------- | ----------------------------------- |
+| <code>animation</code>                 | The transition to use for rendering the list. | <code>string \| Component</code> | <code>() => 'div'</code>            |
+| <code>items</code>                     | The list of possible sort values.             | <code>Sort[]</code>              | <code></code>                       |
+| <code>selectedSort</code>              |                                               | <code>Sort</code>                | <code></code>                       |
+| <code>selectedSortProvidedEvent</code> |                                               | <code>XEvent</code>              | <code>'SelectedSortProvided'</code> |
+| <code>clickedSortEvent</code>          |                                               | <code>XEvent</code>              | <code>'UserClickedASort'</code>     |
+| <code>buttonClass</code>               | Class inherited by each sort button.          | <code>string</code>              | <code></code>                       |
 
 ## Slots
 

package/js/{x-modules/search/components → components/sort}/sort-dropdown.vue.js

@@ -1,6 +1,6 @@
 import _sfc_main from './sort-dropdown.vue2.js';
 import { resolveComponent, openBlock, createBlock, withCtx, renderSlot, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } from 'vue';
-import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_BaseDropdown = resolveComponent("BaseDropdown");

package/js/components/sort/sort-dropdown.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-dropdown.vue.js","sources":["../../../../src/components/sort/sort-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    ref=\"rootRef\"\n    :items=\"items\"\n    :model-value=\"selectedSort\"\n    :animation=\"animation\"\n    class=\"x-sort-dropdown\"\n    data-test=\"sort-dropdown\"\n    aria-label=\"Select sorting\"\n    @update:model-value=\"emitUserClickedASort\"\n  >\n    <template #toggle=\"{ isOpen, item }\">\n      <!--\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {Sort} item - The sort data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n      -->\n      <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n    </template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <!--\n        @slot (required) Used to render each one of the items content, and as fallback\n        for the toggle button content slot if it is not provided.\n        @binding {Sort} item - Sort to render\n        @binding {boolean} isHighlighted - True when the item has the focus.\n        @binding {boolean} isSelected - True when the item is selected.\n      -->\n      <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n    </template>\n  </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport type { XEvent } from '../../wiring/index'\nimport { defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseDropdown from '../base-dropdown.vue'\n\n/**\n * The `SortDropdown` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortDropdown',\n  components: { BaseDropdown },\n  props: {\n    /** The transition to use for opening and closing the dropdown. */\n    animation: [String, Object] as PropType<string | Component>,\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    selectedSort: {\n      type: String as PropType<Sort>,\n      required: true,\n    },\n    selectedSortProvidedEvent: {\n      type: String as PropType<XEvent>,\n      default: 'SelectedSortProvided',\n    },\n    clickedSortEvent: {\n      type: String as PropType<XEvent>,\n      default: 'UserClickedASort',\n    },\n  },\n  emits: ['change'],\n  setup(props, { emit }) {\n    const $x = use$x()\n    const rootRef = ref<typeof BaseDropdown>()\n\n    watch(\n      () => props.selectedSort,\n      value => $x.emit(props.selectedSortProvidedEvent, value),\n      {\n        immediate: true,\n      },\n    )\n\n    /**\n     * Emits the events related to the selection of a sort value.\n     *\n     * @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands\n     * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.\n     *\n     * @param sort - The selected sort.\n     */\n    function emitUserClickedASort(sort: Sort) {\n      $x.emit(props.clickedSortEvent, sort, { target: (rootRef.value as any)?.$el })\n      emit('change', sort)\n    }\n\n    return {\n      emitUserClickedASort,\n      rootRef,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing both the toggle button and each one of the possible sort\nvalues. This can be done with the `toggle` and `item` slots.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortDropdown :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script setup>\nimport { SortDropdown } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script setup>\nimport { SortDropdown } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":["_createBlock","_withCtx","_renderSlot","_normalizeProps","_guardReactiveProps","_createTextVNode"],"mappings":";;;;;;sBACEA,WAAA,CA6Be,uBAAA,EAAA;AAAA,IA5Bb,GAAA,EAAI,SAAA;AAAA,IACH,KAAA,EAAO,IAAA,CAAA,KAAA;AAAA,IACP,aAAA,EAAa,IAAA,CAAA,YAAA;AAAA,IACb,SAAA,EAAW,IAAA,CAAA,SAAA;AAAA,IACZ,KAAA,EAAM,iBAAA;AAAA,IACN,WAAA,EAAU,eAAA;AAAA,IACV,YAAA,EAAW,gBAAA;AAAA,IACV,qBAAA,EAAoB,IAAA,CAAA;AAAA,GAAA,EAAA;AAEV,IAAA,MAAA,EAAMC,OAAA,CAOf,CAA+D,EAP5C,MAAA,EAAQ,IAAA,EAAI,KAAA;AAAA,MAO/BC,UAAA,CAA+D,IAAA,CAAA,MAAA,EAAA,QAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAA/C,MAAA,EAAQ,IAAA,MAAxB,MAA+D;AAAA,QAAAC,eAAA;0BAAd,IAAI,CAAA;AAAA,UAAA;AAAA;AAAA;AAAA,OAAA;;AAE5C,IAAA,IAAA,EAAIJ,OAAA,CAQb,CAAgF,EAR/D,IAAA,EAAM,eAAe,UAAA,EAAU,KAAA;AAAA,MAQhDC,WAAgF,IAAA,CAAA,MAAA,EAAA,MAAA,EAAAC,cAAA,CAAAC,kBAAA,CAAA,EAAhE,IAAA,EAAM,aAAA,EAAe,UAAA,MAArC,MAAgF;AAAA,QAAAC,eAAA;0BAAd,IAAI,CAAA;AAAA,UAAA;AAAA;AAAA;AAAA,OAAA;;;;;;;;;;"}

package/js/{x-modules/search/components → components/sort}/sort-dropdown.vue2.js

@@ -1,8 +1,6 @@
 import { defineComponent, ref, watch } from 'vue';
-import BaseDropdown from '../../../components/base-dropdown.vue.js';
-import { use$x } from '../../../composables/use-_x.js';
-import { useState } from '../../../composables/use-state.js';
-import { searchXModule } from '../x-module.js';
+import { use$x } from '../../composables/use-_x.js';
+import BaseDropdown from '../base-dropdown.vue.js';
 
 /**
  * The `SortDropdown` component allows user to select the search results order. This component
@@ -10,23 +8,33 @@ import { searchXModule } from '../x-module.js';
  */
 var _sfc_main = defineComponent({
     name: 'SortDropdown',
-    xModule: searchXModule.name,
     components: { BaseDropdown },
     props: {
+        /** The transition to use for opening and closing the dropdown. */
+        animation: [String, Object],
         /** The list of possible sort values. */
         items: {
             type: Array,
             required: true,
         },
-        /** The transition to use for opening and closing the dropdown. */
-        animation: [String, Object],
+        selectedSort: {
+            type: String,
+            required: true,
+        },
+        selectedSortProvidedEvent: {
+            type: String,
+            default: 'SelectedSortProvided',
+        },
+        clickedSortEvent: {
+            type: String,
+            default: 'UserClickedASort',
+        },
     },
     emits: ['change'],
-    setup(_, { emit }) {
+    setup(props, { emit }) {
         const $x = use$x();
-        const { sort: selectedSort } = useState('search');
         const rootRef = ref();
-        watch(selectedSort, (value) => $x.emit('SelectedSortProvided', value), {
+        watch(() => props.selectedSort, value => $x.emit(props.selectedSortProvidedEvent, value), {
             immediate: true,
         });
         /**
@@ -38,13 +46,12 @@ var _sfc_main = defineComponent({
          * @param sort - The selected sort.
          */
         function emitUserClickedASort(sort) {
-            $x.emit('UserClickedASort', sort, { target: rootRef.value?.$el });
+            $x.emit(props.clickedSortEvent, sort, { target: rootRef.value?.$el });
             emit('change', sort);
         }
         return {
             emitUserClickedASort,
             rootRef,
-            selectedSort,
         };
     },
 });

package/js/components/sort/sort-dropdown.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-dropdown.vue2.js","sources":["../../../../src/components/sort/sort-dropdown.vue"],"sourcesContent":["<template>\n  <BaseDropdown\n    ref=\"rootRef\"\n    :items=\"items\"\n    :model-value=\"selectedSort\"\n    :animation=\"animation\"\n    class=\"x-sort-dropdown\"\n    data-test=\"sort-dropdown\"\n    aria-label=\"Select sorting\"\n    @update:model-value=\"emitUserClickedASort\"\n  >\n    <template #toggle=\"{ isOpen, item }\">\n      <!--\n       @slot Used to render the contents of the dropdown toggle button. If not provided, it uses\n       the item slot as fallback.\n       @binding {Sort} item - The sort data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n      -->\n      <slot v-bind=\"{ isOpen, item }\" name=\"toggle\">{{ item }}</slot>\n    </template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <!--\n        @slot (required) Used to render each one of the items content, and as fallback\n        for the toggle button content slot if it is not provided.\n        @binding {Sort} item - Sort to render\n        @binding {boolean} isHighlighted - True when the item has the focus.\n        @binding {boolean} isSelected - True when the item is selected.\n      -->\n      <slot v-bind=\"{ item, isHighlighted, isSelected }\" name=\"item\">{{ item }}</slot>\n    </template>\n  </BaseDropdown>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport type { XEvent } from '../../wiring/index'\nimport { defineComponent, ref, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseDropdown from '../base-dropdown.vue'\n\n/**\n * The `SortDropdown` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortDropdown',\n  components: { BaseDropdown },\n  props: {\n    /** The transition to use for opening and closing the dropdown. */\n    animation: [String, Object] as PropType<string | Component>,\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    selectedSort: {\n      type: String as PropType<Sort>,\n      required: true,\n    },\n    selectedSortProvidedEvent: {\n      type: String as PropType<XEvent>,\n      default: 'SelectedSortProvided',\n    },\n    clickedSortEvent: {\n      type: String as PropType<XEvent>,\n      default: 'UserClickedASort',\n    },\n  },\n  emits: ['change'],\n  setup(props, { emit }) {\n    const $x = use$x()\n    const rootRef = ref<typeof BaseDropdown>()\n\n    watch(\n      () => props.selectedSort,\n      value => $x.emit(props.selectedSortProvidedEvent, value),\n      {\n        immediate: true,\n      },\n    )\n\n    /**\n     * Emits the events related to the selection of a sort value.\n     *\n     * @remarks `(rootRef.value as any)?.$el` because rollup-plugin-vue understands\n     * `ref<typeof BaseDropdown>` as VueConstructor which doesn't contain $el.\n     *\n     * @param sort - The selected sort.\n     */\n    function emitUserClickedASort(sort: Sort) {\n      $x.emit(props.clickedSortEvent, sort, { target: (rootRef.value as any)?.$el })\n      emit('change', sort)\n    }\n\n    return {\n      emitUserClickedASort,\n      rootRef,\n    }\n  },\n})\n</script>\n\n<docs lang=\"mdx\">\n## Sort Dropdown\n\nThe `SortDropdown` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can be received then in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing both the toggle button and each one of the possible sort\nvalues. This can be done with the `toggle` and `item` slots.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortDropdown :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script setup>\nimport { SortDropdown } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortDropdown v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}</template>\n    <template #item=\"{ item, isHighlighted, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      <span v-if=\"isHighlighted\">🟢</span>\n      {{ item }}\n    </template>\n  </SortDropdown>\n</template>\n\n<script setup>\nimport { SortDropdown } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":[],"mappings":";;;;AAyCA;;;AAGE;AACF,gBAAe,eAAe,CAAC;AAC7B,IAAA,IAAI,EAAE,cAAc;IACpB,UAAU,EAAE,EAAE,YAAW,EAAG;AAC5B,IAAA,KAAK,EAAE;;AAEL,QAAA,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAiC;;AAE3D,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,KAAyB;AAC/B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAwB;AAC9B,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA;AACD,QAAA,yBAAyB,EAAE;AACzB,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,OAAO,EAAE,sBAAsB;AAChC,SAAA;AACD,QAAA,gBAAgB,EAAE;AAChB,YAAA,IAAI,EAAE,MAA0B;AAChC,YAAA,OAAO,EAAE,kBAAkB;AAC5B,SAAA;AACF,KAAA;IACD,KAAK,EAAE,CAAC,QAAQ,CAAC;AACjB,IAAA,KAAK,CAAC,KAAK,EAAE,EAAE,IAAG,EAAG,EAAA;AACnB,QAAA,MAAM,EAAC,GAAI,KAAK,EAAC;AACjB,QAAA,MAAM,OAAM,GAAI,GAAG,EAAsB;QAEzC,KAAK,CACH,MAAM,KAAK,CAAC,YAAY,EACxB,KAAI,IAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,EACxD;AACE,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CACH;AAEA;;;;;;;AAOE;QACF,SAAS,oBAAoB,CAAC,IAAU,EAAA;AACtC,YAAA,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,IAAI,EAAE,EAAE,MAAM,EAAG,OAAO,CAAC,KAAa,EAAE,KAAK,CAAA;AAC7E,YAAA,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAA;QACrB;QAEA,OAAO;YACL,oBAAoB;YACpB,OAAO;SACT;IACF,CAAC;AACF,CAAA,CAAA;;;;"}

package/js/{x-modules/search/components → components/sort}/sort-list.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from './sort-list.vue2.js';
 import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createElementBlock, Fragment, renderList, normalizeClass, createVNode, renderSlot, mergeProps, createTextVNode, toDisplayString } from 'vue';
 import './sort-list.vue3.js';
-import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.js';
+import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_BaseEventButton = resolveComponent("BaseEventButton");
@@ -52,7 +52,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     /* FORWARDED */
   });
 }
-var sortList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-834b0328"]]);
+var sortList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-52bd793c"]]);
 
 export { sortList as default };
 //# sourceMappingURL=sort-list.vue.js.map

package/js/components/sort/sort-list.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sort-list.vue.js","sources":["../../../../src/components/sort/sort-list.vue"],"sourcesContent":["<template>\n  <component :is=\"animation\" tag=\"ul\" class=\"x-option-list x-sort-list\" data-test=\"sort-list\">\n    <li\n      v-for=\"{ item, cssClasses, event } in listItems\"\n      :key=\"item\"\n      :class=\"cssClasses\"\n      class=\"x-option-list__item x-sort-list__item\"\n    >\n      <BaseEventButton\n        class=\"x-sort-list__button xds:button\"\n        data-test=\"x-sort-button\"\n        :events=\"event\"\n      >\n        <slot v-bind=\"{ item, isSelected: item === selectedSort }\">\n          {{ item }}\n        </slot>\n      </BaseEventButton>\n    </li>\n  </component>\n</template>\n\n<script lang=\"ts\">\nimport type { Sort } from '@empathyco/x-types'\nimport type { Component, PropType } from 'vue'\nimport type { VueCSSClasses } from '../../utils/index'\nimport type { XEvent, XEventsTypes } from '../../wiring/index'\nimport { computed, defineComponent, watch } from 'vue'\nimport { use$x } from '../../composables/use-$x'\nimport BaseEventButton from '../base-event-button.vue'\n\n/**\n * Sort list item options.\n */\ninterface SortListItem {\n  item: Sort\n  cssClasses: VueCSSClasses\n  event: Partial<XEventsTypes>\n}\n\n/**\n * The `SortList` component allows user to select the search results order. This component\n * also allows to change the selected sort programmatically.\n */\nexport default defineComponent({\n  name: 'SortList',\n  components: { BaseEventButton },\n  props: {\n    /** The transition to use for rendering the list. */\n    animation: {\n      type: [String, Object] as PropType<string | Component>,\n      default: () => 'ul',\n    },\n    /** The list of possible sort values. */\n    items: {\n      type: Array as PropType<Sort[]>,\n      required: true,\n    },\n    selectedSort: {\n      type: String as PropType<Sort>,\n      required: true,\n    },\n    selectedSortProvidedEvent: {\n      type: String as PropType<XEvent>,\n      default: 'SelectedSortProvided',\n    },\n    clickedSortEvent: {\n      type: String as PropType<XEvent>,\n      default: 'UserClickedASort',\n    },\n  },\n  setup(props) {\n    const $x = use$x()\n\n    watch(\n      () => props.selectedSort,\n      value => $x.emit(props.selectedSortProvidedEvent, value),\n      {\n        immediate: true,\n      },\n    )\n\n    /**\n     * Sort list items.\n     *\n     * @returns A list of items with their css class and the event associate to it.\n     */\n    const listItems = computed<SortListItem[]>(() =>\n      props.items.map(item => ({\n        item,\n        cssClasses: {\n          'x-sort-list__item--is-selected': item === props.selectedSort,\n          'x-option-list__item--is-selected': item === props.selectedSort,\n        },\n        event: { [props.clickedSortEvent]: item },\n      })),\n    )\n\n    return {\n      listItems,\n    }\n  },\n})\n</script>\n\n<style lang=\"css\" scoped>\n.x-sort-list {\n  list-style-type: none;\n}\n</style>\n\n<docs lang=\"mdx\">\n## Sort List\n\nThe `SortList` component can be used to change the way the search results are ordered.\n\nTo do so, the list of valid sort values has to be provided using the `items` prop. These are the\nvalues that can then be received in the `SearchAdapter`.\n\nThe component also optionally accepts the selected sort, which can be set using the `v-model` prop.\nThis prop allows changing programmatically the selected sort, as it will be synced with the store\nimmediately. If this prop is not provided, the first item from the `items` prop will be the one\nselected by default.\n\nThis component also allows customizing each one of the possible sort values. This can be done with\nthe default slot.\n\n## Events\n\nThis component emits 2 different events:\n\n- [`SelectedSortProvided`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  To sync the selected sort with the store state value. This event is emitted as soon as the list of\n  items is received, whenever this list changes if there is no provided value, and when the provided\n  value changes.\n- [`UserClickedASort`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):\n  As its name suggests, the event is emitted after the user clicks one of the sort options. This does\n  not mean that the sort has changed, only that the user has clicked it.\n\n## Examples\n\n### Only providing the list of items\n\n```vue\n<template>\n  <SortList :items=\"sortValues\">\n    <template #default=\"{ item, isSelected }\">Item: {{ item }}</template>\n  </SortList>\n</template>\n\n<script setup>\nimport { SortList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n\n### Providing also the selected value\n\n```vue\n<template>\n  <SortList v-model=\"selectedSort\" :items=\"sortValues\">\n    <template #default=\"{ item, isSelected }\">\n      <span v-if=\"isSelected\">✅</span>\n      {{ item }}\n    </template>\n  </SortList>\n</template>\n\n<script setup>\nimport { SortList } from '@empathyco/x-components/search'\nimport { ref } from 'vue'\n\nconst selectedSort = ref('Price asc')\nconst sortValues = ref(['Relevance', 'Price asc', 'Price desc'])\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_createElementBlock","_Fragment","_renderList","_normalizeClass","_createVNode","_renderSlot","_mergeProps","_createTextVNode"],"mappings":";;;;;;;AACE,EAAA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAiBYC,wBAjBI,IAAA,CAAA,SAAS,CAAA,EAAA;AAAA,IAAE,GAAA,EAAI,IAAA;AAAA,IAAK,KAAA,EAAM,2BAAA;AAAA,IAA4B,WAAA,EAAU;AAAA,GAAA,EAAA;qBAE5E,MAAgD;AAAA,OAAAF,SAAA,CAAA,IAAA,CAAA,EADlDG,kBAAA;AAAA,QAeKC,QAAA;AAAA,QAAA,IAAA;AAAA,QAAAC,UAAA,CAdmC,IAAA,CAAA,SAAA,EAAS,CAAA,EAAtC,IAAA,EAAM,UAAA,EAAY,KAAA,EAAK,KAAA;AADlC,UAAA,OAAAL,SAAA,EAAA,EAAAG,kBAAA;AAAA,YAeK,IAAA;AAAA,YAAA;AAAA,cAbF,GAAA,EAAK,IAAA;AAAA,cACL,KAAA,EAAKG,cAAA,CAAA,CAAE,UAAA,EACF,uCAAuC,CAAA;AAAA,aAAA;;cAE7CC,WAAA,CAQkB,0BAAA,EAAA;AAAA,gBAPhB,KAAA,EAAM,gCAAA;AAAA,gBACN,WAAA,EAAU,eAAA;AAAA,gBACT,MAAA,EAAQ;AAAA,eAAA,EAAA;iCAET,MAEO;AAAA,kBAFPC,UAAA,CAEO,wBAFPC,UAAA,CAEO,EAAA,OAAA,EAAA,IAAA,EAAA,EAAA,EAFS,MAAI,UAAA,EAAc,IAAA,KAAS,IAAA,CAAA,YAAA,EAAY,CAAA,EAAvD,MAEO;AAAA,oBAAAC,eAAA;sCADF,IAAI,CAAA;AAAA,sBAAA;AAAA;AAAA;AAAA,mBAAA,EAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;"}

package/js/{x-modules/search/components → components/sort}/sort-list.vue2.js

@@ -1,8 +1,6 @@
 import { defineComponent, watch, computed } from 'vue';
-import BaseEventButton from '../../../components/base-event-button.vue.js';
-import { use$x } from '../../../composables/use-_x.js';
-import { useState } from '../../../composables/use-state.js';
-import { searchXModule } from '../x-module.js';
+import { use$x } from '../../composables/use-_x.js';
+import BaseEventButton from '../base-event-button.vue.js';
 
 /**
  * The `SortList` component allows user to select the search results order. This component
@@ -10,24 +8,34 @@ import { searchXModule } from '../x-module.js';
  */
 var _sfc_main = defineComponent({
     name: 'SortList',
-    xModule: searchXModule.name,
     components: { BaseEventButton },
     props: {
+        /** The transition to use for rendering the list. */
+        animation: {
+            type: [String, Object],
+            default: () => 'ul',
+        },
         /** The list of possible sort values. */
         items: {
             type: Array,
             required: true,
         },
-        /** The transition to use for rendering the list. */
-        animation: {
-            type: [String, Object],
-            default: () => 'ul',
+        selectedSort: {
+            type: String,
+            required: true,
+        },
+        selectedSortProvidedEvent: {
+            type: String,
+            default: 'SelectedSortProvided',
+        },
+        clickedSortEvent: {
+            type: String,
+            default: 'UserClickedASort',
         },
     },
     setup(props) {
         const $x = use$x();
-        const { sort: selectedSort } = useState('search');
-        watch(selectedSort, (value) => $x.emit('SelectedSortProvided', value), {
+        watch(() => props.selectedSort, value => $x.emit(props.selectedSortProvidedEvent, value), {
             immediate: true,
         });
         /**
@@ -38,14 +46,13 @@ var _sfc_main = defineComponent({
         const listItems = computed(() => props.items.map(item => ({
             item,
             cssClasses: {
-                'x-sort-list__item--is-selected': item === selectedSort.value,
-                'x-option-list__item--is-selected': item === selectedSort.value,
+                'x-sort-list__item--is-selected': item === props.selectedSort,
+                'x-option-list__item--is-selected': item === props.selectedSort,
             },
-            event: { UserClickedASort: item },
+            event: { [props.clickedSortEvent]: item },
         })));
         return {
             listItems,
-            selectedSort,
         };
     },
 });