@empathyco/x-components 6.0.0-alpha.4 → 6.0.0-alpha.40

package/docs/API-reference/components/common/x-components.page-selector.md

@@ -0,0 +1,136 @@
+---
+
+title: PageSelector
+
+---
+
+# PageSelector
+
+Component that renders a pagination control with buttons for navigating between pages. It displays
+the current page, allows selecting other pages, and emits events when a page is selected.
+
+## Props
+
+| Name                       | Description                                                                 | Type                                                                                                     | Default                    |
+| -------------------------- | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -------------------------- |
+| <code>buttonClasses</code> | CSS classes to customize the prev/next buttons.                             | <code>(string \| Dictionary<boolean>)[]</code>                                                           | <code>() => []</code>      |
+| <code>currentPage</code>   | The current page number.                                                    | <code>number</code>                                                                                      | <code></code>              |
+| <code>hiddenPage</code>    | The string content of the hidden pages.                                     | <code>string</code>                                                                                      | <code>'...'</code>         |
+| <code>itemClasses</code>   | CSS classes to customize the page items.                                    | <code>(isSelected: boolean) => string \| Dictionary<boolean> \| (string \| Dictionary<boolean>)[]</code> | <code>() => []</code>      |
+| <code>range</code>         | The number of pages to show before and after the current page.              | <code>number</code>                                                                                      | <code>2</code>             |
+| <code>scrollTarget</code>  | The class of the scroll container to scroll to top when a page is selected. | <code>string</code>                                                                                      | <code>'main-scroll'</code> |
+| <code>totalPages</code>    | The total number of pages.                                                  | <code>number</code>                                                                                      | <code></code>              |
+
+## Slots
+
+| Name                              | Description | Bindings<br />(name - type - description) |
+| --------------------------------- | ----------- | ----------------------------------------- |
+| <code>previous-page-button</code> |             | None                                      |
+| <code>page-button</code>          |             | <br />                                    |
+| <code>next-page-button</code>     |             | None                                      |
+
+## Events
+
+This component emits the "UserSelectedAPage" and the UserClickedScrollToTop events by default.
+
+## See it in action
+
+Basic example of how the component is rendered.
+
+```vue live
+<template>
+  <PageSelector :current-page="page" :total-pages="totalPages" />
+</template>
+
+<script>
+  import { PageSelector } from '@empathyco/x-components';
+
+  export default {
+    name: 'PageSelectorDemo',
+    components: {
+      PageSelector
+    },
+    data() {
+      return {
+        page: 0,
+        totalPages: 10
+      };
+    }
+  };
+</script>
+```
+
+### Customize the slots
+
+This component allows to customise its content using slots.
+
+```vue live
+<template>
+  <PageSelector
+    :total-pages="totalPages"
+    :currentPage="page"
+    :item-classes="
+      (isSelected: boolean) =>
+        isSelected
+          ? 'x-button-lead x-text-neutral-10'
+          : 'x-text-neutral-90 x-button-outlined'
+    "
+    :buttonClasses="['x-rounded-md']"
+  >
+    <template #previous-page-button>
+      <span>Back</span>
+    </template>
+    <template #page-button="{ page, isSelected }">
+      <h2 :class="{ 'x-text1': !isSelected }">
+        {{ page }}
+      </h2>
+    </template>
+    <template #next-page-button>
+      <span>Forward</span>
+    </template>
+  </PageSelector>
+</template>
+
+<script>
+  import { PageSelector } from '@empathyco/x-components';
+
+  export default {
+    name: 'PageSelectorDemo',
+    components: {
+      PageSelector
+    },
+    data() {
+      return {
+        page: 2,
+        totalPages: 10
+      };
+    }
+  };
+</script>
+```
+
+### Customize the number of pages to show before and after the current page by changing the range default value.
+
+```vue live
+<template>
+  <PageSelector :current-page="page" :total-pages="totalPages" :range="range" />
+</template>
+
+<script>
+  import { PageSelector } from '@empathyco/x-components';
+
+  export default {
+    name: 'PageSelectorDemo',
+    components: {
+      PageSelector
+    },
+    data() {
+      return {
+        page: 6,
+        totalPages: 100,
+        range: 4
+      };
+    }
+  };
+</script>
+```

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

@@ -19,7 +19,7 @@ differently based on their purpose and this can be achieved using the exposed sl
 | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------------- |
 | <code>facetsIds</code>        | Array of facets ids used to get the selected filters for those facets.                                                                                                                                                                                                              | <code>Array<Facet['id']></code> | <code></code>     |
 | <code>alwaysVisible</code>    | Flag to render the component even if there are no filters selected.                                                                                                                                                                                                                 | <code>boolean</code>            | <code></code>     |
-| <code>animation</code>        | Animation component that will be used to animate the facets.                                                                                                                                                                                                                        | <code>animationProp</code>      | <code>'ul'</code> |
+| <code>animation</code>        | Animation component that will be used to animate the facets.                                                                                                                                                                                                                        | <code>AnimationProp</code>      | <code>'ul'</code> |
 | <code>renderableFacets</code> | Discriminates the facets rendered by this component. It expects a string containing facets<br />ids, comma separated. This property will include or exclude facets based on its value.<br />The default value is an empty string and the component will render all existing facets. | <code>string</code>             | <code></code>     |
 
 ## Slots

package/docs/API-reference/components/facets/x-components.lists/selected-filters-list.md

@@ -20,7 +20,7 @@ The property "alwaysVisible" handles if the component is rendered if no filters
 | -------------------------- | --------------------------------------------------------------------------- | ------------------------------- | ----------------- |
 | <code>facetsIds</code>     | Array of facets ids used to get the selected filters for those facets.      | <code>Array<Facet['id']></code> | <code></code>     |
 | <code>alwaysVisible</code> | Flag to render the component even if there are no filters selected.         | <code>boolean</code>            | <code></code>     |
-| <code>animation</code>     | Animation component that will be used to animate the selected filters list. | <code>animationProp</code>      | <code>'ul'</code> |
+| <code>animation</code>     | Animation component that will be used to animate the selected filters list. | <code>AnimationProp</code>      | <code>'ul'</code> |
 
 ## Slots
 

package/docs/API-reference/components/related-prompts/x-components.related-prompt.md

@@ -0,0 +1,16 @@
+---
+
+title: RelatedPrompt
+
+---
+
+# RelatedPrompt
+
+This component shows a suggested related prompt.
+
+## Props
+
+| Name                       | Description | Type                       | Default            |
+| -------------------------- | ----------- | -------------------------- | ------------------ |
+| <code>relatedPrompt</code> |             | <code>RelatedPrompt</code> | <code></code>      |
+| <code>selected</code>      |             | <code>boolean</code>       | <code>false</code> |

package/docs/API-reference/components/related-prompts/x-components.related-prompts-list.md

@@ -0,0 +1,196 @@
+---
+
+title: RelatedPromptsList
+
+---
+
+# RelatedPromptsList
+
+Component that inserts groups of related prompts in different positions of the injected search items
+list, based on the provided configuration.
+
+## Props
+
+| Name                                   | Description                                                                                                            | Type                       | Default                |
+| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------- | ---------------------- |
+| <code>animation</code>                 | Animation component that will be used to animate the related prompts groups.                                           | <code>AnimationProp</code> | <code>'ul'</code>      |
+| <code>offset</code>                    | The first index to insert a group of related prompts at.                                                               | <code>number</code>        | <code>24</code>        |
+| <code>frequency</code>                 | The items cycle size to keep inserting related prompts groups at.                                                      | <code>number</code>        | <code>24</code>        |
+| <code>maxRelatedPromptsPerGroup</code> | The maximum amount of related prompts to add in a single group.                                                        | <code>number</code>        | <code>4</code>         |
+| <code>maxGroups</code>                 | The maximum number of groups to insert into the injected list items list.                                              | <code>number</code>        | <code>undefined</code> |
+| <code>showOnlyAfterOffset</code>       | Determines if a group is added to the injected items list in case the number<br />of items is smaller than the offset. | <code>boolean</code>       | <code>false</code>     |
+
+## Events
+
+This component emits no events.
+
+## See it in action
+
+  <!-- prettier-ignore-start -->
+
+:::warning Backend microservice required To use this component, the <b>QuerySignals</b> microservice
+must be implemented. :::
+
+  <!-- prettier-ignore-end -->
+
+Usually, this component is going to be used together with the `ResultsList` one. Related prompts
+groups will be inserted between the results, guiding users to discover new searches directly from
+the results list.
+
+```vue live
+<template>
+  <div>
+    <SearchInput />
+    <ResultsList>
+      <RelatedPromptsList />
+    </ResultsList>
+  </div>
+</template>
+
+<script>
+  import { RelatedPromptsList } from '@empathyco/x-components/related-prompts';
+  import { ResultsList } from '@empathyco/x-components/search';
+  import { SearchInput } from '@empathyco/x-components/search-box';
+
+  export default {
+    name: 'RelatedPromptsListDemo',
+    components: {
+      RelatedPromptsList,
+      ResultsList,
+      SearchInput
+    }
+  };
+</script>
+```
+
+### Play with the index that related prompts groups are inserted at
+
+The component allows to customise where are the related prompts groups inserted. In the following
+example, the first group of related prompts will be inserted at the index `48` (`offset`), and then
+a second group will be inserted at index `120` because of the `frequency` prop configured to `72`.
+Finally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no
+more groups will be inserted. Each one of this groups will have up to `6` related prompts
+(`maxRelatedPromptsPerGroup`).
+
+```vue live
+<template>
+  <div>
+    <SearchInput />
+    <ResultsList>
+      <RelatedPromptsList
+        :offset="48"
+        :frequency="72"
+        :maxRelatedPromptsPerGroup="6"
+        :maxGroups="3"
+      />
+    </ResultsList>
+  </div>
+</template>
+
+<script>
+  import { RelatedPromptsList } from '@empathyco/x-components/related-prompts';
+  import { ResultsList } from '@empathyco/x-components/search';
+  import { SearchInput } from '@empathyco/x-components/search-box';
+
+  export default {
+    name: 'RelatedPromptsListDemo',
+    components: {
+      RelatedPromptsList,
+      ResultsList,
+      SearchInput
+    }
+  };
+</script>
+```
+
+### Showing/hiding first related prompts group when no more items
+
+By default, the first related prompts group will be inserted when the total number of results is
+smaller than the offset, but this behavior can be deactivated by setting the `showOnlyAfterOffset`
+to `true`.
+
+```vue live
+<template>
+  <div>
+    <SearchInput />
+    <ResultsList>
+      <RelatedPromptsList
+        :offset="48"
+        :frequency="72"
+        :maxRelatedPromptsPerGroup="1"
+        :showOnlyAfterOffset="true"
+      />
+    </ResultsList>
+  </div>
+</template>
+
+<script>
+  import { RelatedPromptsList } from '@empathyco/x-components/related-prompts';
+  import { ResultsList } from '@empathyco/x-components/search';
+  import { SearchInput } from '@empathyco/x-components/search-box';
+
+  export default {
+    name: 'RelatedPromptsListDemo',
+    components: {
+      RelatedPromptsList,
+      ResultsList,
+      SearchInput
+    }
+  };
+</script>
+```
+
+### Customise the layout of the component
+
+This component will render by default the `id` of each search item, both the injected, and for the
+groups of related prompts generated, but the common case is to integrate it with another layout
+component, for example the `BaseGrid`. To do so, you can use the `default` slot
+
+```vue
+<template>
+  <div>
+    <SearchInput />
+    <ResultsList>
+      <RelatedPromptsList
+        :offset="48"
+        :frequency="72"
+        :maxRelatedPromptsPerGroup="6"
+        :maxGroups="3"
+        #default="{ items }"
+      >
+        <BaseGrid :items="items" :animation="animation">
+          <template #related-prompts-group="{ item }">
+            <span v-for="const prompt of items.relatedPrompts">
+              RelatedPromptsGroup:
+              <pre>{{ prompt }}</pre>
+            </span>
+          </template>
+          <template #result="{ item }">
+            <span>Result: {{ item.name }}</span>
+          </template>
+          <template #default="{ item }">
+            <span>Default: {{ item }}</span>
+          </template>
+        </BaseGrid>
+      </RelatedPromptsList>
+    </ResultsList>
+  </div>
+</template>
+
+<script>
+  import { RelatedPromptsList } from '@empathyco/x-components/related-prompts';
+  import { ResultsList } from '@empathyco/x-components/search';
+  import { SearchInput } from '@empathyco/x-components/search-box';
+  import { BaseGrid } from '@empathyco/x-components';
+
+  export default {
+    name: 'RelatedPromptsListDemo',
+    components: {
+      RelatedPromptsLis,
+      ResultsList,
+      BaseGrid,
+      SearchInput
+    }
+  };
+</script>
+```

package/docs/API-reference/components/related-prompts/x-components.related-prompts-tag-list.md

@@ -0,0 +1,31 @@
+---
+
+title: RelatedPromptsTagList
+
+---
+
+# RelatedPromptsTagList
+
+This component shows the list of `RelatedPrompts` components.
+
+If the default slot is reimplemented in the consumer, `onSelect` function will be necessary to
+handle the selection of the related prompt and to trigger the stagger-fade-slide animation.
+
+## Props
+
+| Name                               | Description                                                                                                                                                                         | Type                  | Default           |
+| ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------------- |
+| <code>buttonClass</code>           | The CSS class for the left and right button of the sliding panel.                                                                                                                   | <code>string</code>   | <code></code>     |
+| <code>showButtons</code>           | The boolean prop to handle the visiblity of sliding pannel buttons.                                                                                                                 | <code>boolean</code>  | <code>true</code> |
+| <code>scrollContainerClass</code>  | The CSS class for the wrapper of all the related prompt wrapper elements.                                                                                                           | <code>string</code>   | <code></code>     |
+| <code>tagClass</code>              | The CSS class for all the related prompt wrapper elements.                                                                                                                          | <code>string</code>   | <code></code>     |
+| <code>tagColors</code>             | Array of colors to apply to the related prompts. It will be applied to tag<br />elements cyclically according to their index in the nex way: `tagColors[index % tagColors.length]`. | <code>string[]</code> | <code></code>     |
+| <code>animationDurationInMs</code> | The duration of the total animation in milliseconds.                                                                                                                                | <code>number</code>   | <code>700</code>  |
+
+## Slots
+
+| Name                                    | Description                                                        | Bindings<br />(name - type - description) |
+| --------------------------------------- | ------------------------------------------------------------------ | ----------------------------------------- |
+| <code>sliding-panel-left-button</code>  | The button to be displayed on the left side of the sliding panel.  | None                                      |
+| <code>default</code>                    | - The slot to render related prompt information.                   | <br /><br />                              |
+| <code>sliding-panel-right-button</code> | The button to be displayed on the right side of the sliding panel. | None                                      |

package/docs/API-reference/components/search/x-components.results-list.md

@@ -17,7 +17,7 @@ result bound.
 
 | Name                   | Description                                                   | Type                       | Default           |
 | ---------------------- | ------------------------------------------------------------- | -------------------------- | ----------------- |
-| <code>animation</code> | Animation component that will be used to animate the results. | <code>animationProp</code> | <code>'ul'</code> |
+| <code>animation</code> | Animation component that will be used to animate the results. | <code>AnimationProp</code> | <code>'ul'</code> |
 
 ## Events
 

package/js/components/animations/fade-and-slide.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './fade-and-slide.vue2.js';
-import { openBlock, createBlock, TransitionGroup, withCtx, createCommentVNode, renderSlot } from 'vue';
+import { openBlock, createBlock, TransitionGroup, withCtx, renderSlot } from 'vue';
 import './fade-and-slide.vue3.js';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.js';
 
@@ -11,7 +11,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     appear: _ctx.appear
   }, {
     default: withCtx(() => [
-      createCommentVNode(" @slot (Required) Transition-group content "),
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3

package/js/components/animations/fade-and-slide.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade-and-slide.vue.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group class=\"x-fade-and-slide\" :name=\"name\" :tag=\"tag\" :appear=\"appear\">\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { useDisableAnimation } from './use-disable-animation';\n\n  /**\n   * Renders a transition group wrapping the elements passed in the default slot and animating\n   * them with a fade and slide animation.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FadeAndSlide',\n    props: {\n      /**\n       * HTML Element that the transition-group children will be wrapped in.\n       */\n      tag: String,\n      /**\n       * Indicates if the transition must be applied on the initial render of the node.\n       */\n      appear: {\n        type: Boolean,\n        default: true\n      }\n    },\n    setup: function () {\n      /**\n       * The name of the animation.\n       */\n      const animationName = 'x-fade-and-slide-';\n\n      const { name } = useDisableAnimation(animationName);\n\n      return { name };\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  .x-fade-and-slide--move,\n  .x-fade-and-slide--enter-active,\n  .x-fade-and-slide--leave-active {\n    transition: opacity 0.2s ease-out, transform 0.3s ease-out;\n  }\n\n  .x-fade-and-slide--enter-from,\n  .x-fade-and-slide--leave-to {\n    transform: translate(-20%, 0);\n    opacity: 0;\n  }\n\n  .x-fade-and-slide--leave-active {\n    position: absolute;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\nUsed as a prop in an animatable component:\n\n```vue\n<AnimatableComponent :animation=\"FadeAndSlide\" />\n```\n\nUsed as a regular component passing a the tag as prop:\n\n```vue\n<FadeAndSlide tag=\"ul\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</FadeAndSlide>\n```\n</docs>\n"],"names":["name","_createBlock","_TransitionGroup","tag","appear","_withCtx","_createCommentVNode","_renderSlot"],"mappings":";;;;;AACyB,SAAA,WAAA,CAAC,IAAkB,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAAQA,SAAI,EAAA,EAAAC,WAAA,CAAAC,eAAA,EAAA;AAAA,IAAG,KAAKC,EAAAA,kBAAAA;AAAAA,IAAM,MAAM,IAAEC,CAAAA,IAAAA;AAAAA,IAAAA,GAAAA,EAAAA,IAAAA,CAAAA,GAAAA;AAD9E,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;aAGIC,OAAQ,CAAA,MAAA;AAAA,MAAAC,kBAAA,CAAA,6CAAA,CAAA;AAHZ,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}
+{"version":3,"file":"fade-and-slide.vue.js","sources":["../../../../src/components/animations/fade-and-slide.vue"],"sourcesContent":["<template>\n  <transition-group class=\"x-fade-and-slide\" :name=\"name\" :tag=\"tag\" :appear=\"appear\">\n    <!-- @slot (Required) Transition-group content -->\n    <slot />\n  </transition-group>\n</template>\n\n<script lang=\"ts\">\n  import { defineComponent } from 'vue';\n  import { useDisableAnimation } from './use-disable-animation';\n\n  /**\n   * Renders a transition group wrapping the elements passed in the default slot and animating\n   * them with a fade and slide animation.\n   *\n   * @public\n   */\n  export default defineComponent({\n    name: 'FadeAndSlide',\n    props: {\n      /**\n       * HTML Element that the transition-group children will be wrapped in.\n       */\n      tag: String,\n      /**\n       * Indicates if the transition must be applied on the initial render of the node.\n       */\n      appear: {\n        type: Boolean,\n        default: true\n      }\n    },\n    setup: function () {\n      /**\n       * The name of the animation.\n       */\n      const animationName = 'x-fade-and-slide-';\n\n      const { name } = useDisableAnimation(animationName);\n\n      return { name };\n    }\n  });\n</script>\n\n<style lang=\"css\">\n  .x-fade-and-slide--move,\n  .x-fade-and-slide--enter-active,\n  .x-fade-and-slide--leave-active {\n    transition: opacity 0.2s ease-out, transform 0.3s ease-out;\n  }\n\n  .x-fade-and-slide--enter-from,\n  .x-fade-and-slide--leave-to {\n    transform: translate(-20%, 0);\n    opacity: 0;\n  }\n\n  .x-fade-and-slide--leave-active {\n    position: absolute;\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Examples\n\nThe FadeAndSlide component is intended to be used as a prop in animatable components but also works\nas a wrapper of a transition group that can receive the tag it will render to as a prop.\n\nUsed as a prop in an animatable component:\n\n```vue\n<AnimatableComponent :animation=\"FadeAndSlide\" />\n```\n\nUsed as a regular component passing a the tag as prop:\n\n```vue\n<FadeAndSlide tag=\"ul\">\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n  <li>Element to animate</li>\n</FadeAndSlide>\n```\n</docs>\n"],"names":["name","_createBlock","_TransitionGroup","tag","appear","_renderSlot"],"mappings":";;;;;AACyB,SAAA,WAAA,CAAC,IAAkB,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,KAAA,EAAA,QAAA,EAAA;SAAQA,SAAI,EAAA,EAAAC,WAAA,CAAAC,eAAA,EAAA;AAAA,IAAG,KAAKC,EAAAA,kBAAAA;AAAAA,IAAM,MAAM,IAAEC,CAAAA,IAAAA;AAAAA,IAAAA,GAAAA,EAAAA,IAAAA,CAAAA,GAAAA;AAD9E,IAAA,MAAA,EAAA,IAAA,CAAA,MAAA;AAAA,GAAA,EAAA;;AAAA,MAAAC,UAAA,CAAA,IAAA,CAAA,MAAA,EAAA,SAAA,CAAA;AAAA,KAAA,CAAA;;;;;;;;;"}

package/js/components/base-dropdown.vue.js

@@ -1,5 +1,5 @@
 import _sfc_main from './base-dropdown.vue2.js';
-import { openBlock, createElementBlock, withKeys, withModifiers, normalizeClass, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, createBlock, resolveDynamicComponent, withCtx, withDirectives, Fragment, renderList, vShow } from 'vue';
+import { openBlock, createElementBlock, withKeys, withModifiers, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, createBlock, resolveDynamicComponent, withCtx, withDirectives, Fragment, renderList, vShow } from 'vue';
 import './base-dropdown.vue3.js';
 import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
@@ -32,7 +32,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         "aria-label": _ctx.ariaLabel,
         "aria-autocomplete": "none"
       }, [
-        createCommentVNode("\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 {string|number|Identifiable} item - The item data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n     "),
         _ctx.hasToggleSlot ? renderSlot(_ctx.$slots, "toggle", {
           key: 0,
           isOpen: _ctx.isOpen,
@@ -85,7 +84,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     "data-test": "dropdown-item",
                     role: "option"
                   }, [
-                    createCommentVNode("\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 {string|number|Identifiable} item - Item to render\n               @binding {boolean} isHighlighted - True when the item has the focus.\n               @binding {boolean} isSelected - True when the item is selected.\n             "),
                     renderSlot(_ctx.$slots, "item", {
                       isHighlighted: index === _ctx.highlightedItemIndex,
                       isSelected: item === _ctx.modelValue,

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

@@ -1 +1 @@
-{"version":3,"file":"base-dropdown.vue.js","sources":["../../../src/components/base-dropdown.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"rootRef\"\n    @keydown=\"updateSearchBuffer\"\n    @keydown.down.prevent=\"highlightNextItem\"\n    @keydown.up.prevent=\"highlightPreviousItem\"\n    :class=\"dropdownCSSClasses\"\n    class=\"x-dropdown\"\n  >\n    <button\n      ref=\"toggleButtonRef\"\n      @click=\"toggle\"\n      @keydown.up.down.prevent.stop=\"open\"\n      class=\"x-dropdown__toggle\"\n      data-test=\"dropdown-toggle\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      :aria-expanded=\"isOpen.toString()\"\n      :aria-controls=\"listId\"\n      :aria-label=\"ariaLabel\"\n      aria-autocomplete=\"none\"\n    >\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 {string|number|Identifiable} item - The item data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n     -->\n      <slot v-if=\"hasToggleSlot\" :isOpen=\"isOpen\" :item=\"modelValue\" name=\"toggle\">\n        {{ modelValue }}\n      </slot>\n      <slot v-else :item=\"modelValue\" name=\"item\">{{ modelValue }}</slot>\n    </button>\n\n    <component :is=\"animation\">\n      <ul\n        v-show=\"isOpen\"\n        @keydown.end=\"highlightLastItem\"\n        @keydown.esc=\"closeAndFocusToggleButton\"\n        @keydown.home=\"highlightFirstItem\"\n        :id=\"listId\"\n        class=\"x-dropdown__items-list\"\n        data-test=\"dropdown-list\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n      >\n        <li v-for=\"(item, index) in items\" :key=\"item.id || item\" class=\"x-dropdown__list-item\">\n          <button\n            :ref=\"el => (itemsButtonRefs[index] = el)\"\n            @click=\"emitSelectedItemChanged(item)\"\n            :aria-selected=\"(item === modelValue).toString()\"\n            :class=\"itemsCSSClasses[index]\"\n            class=\"x-dropdown__item\"\n            data-test=\"dropdown-item\"\n            role=\"option\"\n          >\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 {string|number|Identifiable} item - Item 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\n              :isHighlighted=\"index === highlightedItemIndex\"\n              :isSelected=\"item === modelValue\"\n              :item=\"item\"\n              name=\"item\"\n            >\n              {{ item }}\n            </slot>\n          </button>\n        </li>\n      </ul>\n    </component>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Identifiable } from '@empathyco/x-types';\n  import { computed, defineComponent, nextTick, onBeforeUnmount, PropType, ref, watch } from 'vue';\n  import { AnimationProp } from '../types';\n  import { debounceFunction, normalizeString, getTargetElement, isInRange } from '../utils';\n  import { NoAnimation } from './animations';\n\n  type DropdownItem = string | number | Identifiable;\n  let dropdownCount = 0;\n\n  /**\n   * Dropdown component that mimics a Select element behavior, but with the option\n   * to customize the toggle button and each item contents.\n   */\n  export default defineComponent({\n    name: 'BaseDropdown',\n    props: {\n      /** List of items to display.*/\n      items: {\n        type: Array as PropType<DropdownItem[]>,\n        required: true\n      },\n      /** The selected item. */\n      modelValue: {\n        type: null as unknown as PropType<DropdownItem | null>,\n        validator: (v: any) =>\n          typeof v === 'string' || typeof v === 'number' || typeof v === 'object' || v === null,\n        required: true\n      },\n      /** Description of what the dropdown is used for. */\n      ariaLabel: String,\n      /**\n       * Animation component to use for expanding the dropdown. This is a single element animation,\n       * so only `<transition>` components are allowed.\n       */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      },\n      /** Time to wait without receiving any keystroke before resetting the items search query. */\n      searchTimeoutMs: {\n        type: Number,\n        default: 1000\n      }\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit, slots }) {\n      const rootRef = ref<HTMLElement>();\n      /** The button that opens and closes the list of options. */\n      const toggleButtonRef = ref<HTMLButtonElement>();\n      /** Array containing the dropdown list buttons HTMLElements. */\n      const itemsButtonRefs = ref<HTMLButtonElement[]>([]);\n\n      /** Property to check whether the dropdown is expanded or closed. */\n      const isOpen = ref(false);\n      /** Index of the element that has the focus in the list. -1 means no element has focus. */\n      const highlightedItemIndex = ref(-1);\n      /** String to search for the first element that starts with it. */\n      const searchBuffer = ref('');\n\n      /** Resets the search buffer after a certain time has passed. */\n      let restartResetSearchTimeout: () => void;\n      /* Unique ID to identify the dropdown. */\n      const listId = `x-dropdown-${dropdownCount++}`;\n\n      /**\n       * Dynamic CSS classes to add to the dropdown root element.\n       *\n       * @returns An object containing the CSS classes to add to the dropdown root element.\n       */\n      const dropdownCSSClasses = computed(() => ({ 'x-dropdown--is-open': isOpen }));\n\n      /**\n       * Dynamic CSS classes to add to each one of the items.\n       *\n       * @returns An object containing the CSS classes to add to each item.\n       */\n      const itemsCSSClasses = computed(() =>\n        props.items.map((item, index) => ({\n          'x-dropdown__item--is-selected': props.modelValue === item,\n          'x-dropdown__item--is-highlighted': highlightedItemIndex.value === index\n        }))\n      );\n\n      /* Opens the dropdown. */\n      const open = () => (isOpen.value = true);\n      /* Closes the dropdown. */\n      const close = () => (isOpen.value = false);\n      /* Toggles the dropdown. */\n      const toggle = () => (isOpen.value = !isOpen.value);\n\n      /**\n       * Closes the modal and focuses the toggle button.\n       */\n      function closeAndFocusToggleButton() {\n        close();\n        toggleButtonRef.value?.focus();\n      }\n\n      /**\n       * Emits the event that the selected item has changed.\n       *\n       * @param item - The new selected item.\n       */\n      function emitSelectedItemChanged(item: DropdownItem) {\n        emit('update:modelValue', item);\n        closeAndFocusToggleButton();\n      }\n\n      /**\n       * Highlights the item after the one that is currently highlighted.\n       */\n      function highlightNextItem() {\n        open();\n        highlightedItemIndex.value = (highlightedItemIndex.value + 1) % props.items.length;\n      }\n\n      /**\n       * Highlights the item before the one that is currently highlighted.\n       */\n      function highlightPreviousItem() {\n        const currentIndex = highlightedItemIndex.value;\n        open();\n        highlightedItemIndex.value = currentIndex > 0 ? currentIndex - 1 : props.items.length - 1;\n      }\n\n      /**\n       * Highlights the first of the provided items.\n       */\n      function highlightFirstItem() {\n        highlightedItemIndex.value = 0;\n      }\n\n      /**\n       * Highlights the last of the provided items.\n       */\n      function highlightLastItem() {\n        highlightedItemIndex.value = props.items.length - 1;\n      }\n\n      /**\n       * Updates the variable that is used to search in the filters.\n       *\n       * @param event - The event coming from the user typing.\n       */\n      function updateSearchBuffer(event: KeyboardEvent) {\n        if (/^\\w$/.test(event.key)) {\n          const key = event.key;\n          searchBuffer.value += key;\n          restartResetSearchTimeout();\n        }\n      }\n\n      /**\n       * Resets the search buffer.\n       */\n      function resetSearchBuffer() {\n        searchBuffer.value = '';\n      }\n\n      /**\n       * Closes the dropdown if the passed event has happened on an element out of the dropdown.\n       *\n       * @param event - The event to check if it has happened out of the dropdown component.\n       */\n      function closeIfEventIsOutOfDropdown(event: MouseEvent | TouchEvent | FocusEvent) {\n        if (!rootRef.value?.contains(getTargetElement(event))) {\n          close();\n        }\n      }\n\n      /**\n       * Adds listeners to the document element to detect if the focus has moved out from the\n       * dropdown.\n       */\n      function addDocumentCloseListeners() {\n        document.addEventListener('mousedown', closeIfEventIsOutOfDropdown);\n        document.addEventListener('touchstart', closeIfEventIsOutOfDropdown);\n        document.addEventListener('focusin', closeIfEventIsOutOfDropdown);\n      }\n\n      /**\n       * Removes the listeners of the document element to detect if the focus has moved out from the\n       * dropdown.\n       */\n      function removeDocumentCloseListeners() {\n        document.removeEventListener('mousedown', closeIfEventIsOutOfDropdown);\n        document.removeEventListener('touchstart', closeIfEventIsOutOfDropdown);\n        document.removeEventListener('focusin', closeIfEventIsOutOfDropdown);\n      }\n\n      /**\n       * Highlights the item that matches the search buffer. To do so it checks the list buttons\n       * text content. It highlights items following this priority:\n       * - If an element is already highlighted, it starts searching from that element.\n       * - If no element is found starting from the previously highlighted, it returns the first one.\n       * - If no element is found matching the search query it highlights the first element.\n       *\n       * @param search - The search string to find in the HTML.\n       */\n      watch(searchBuffer, search => {\n        if (search) {\n          const normalizedSearch = normalizeString(search);\n          const matchingIndices = itemsButtonRefs?.value?.reduce<number[]>(\n            (matchingIndices, button, index) => {\n              const safeButtonWordCharacters = button.textContent!.replace(/[^\\w]/g, '');\n              const normalizedButtonText = normalizeString(safeButtonWordCharacters);\n              if (normalizedButtonText.startsWith(normalizedSearch)) {\n                matchingIndices.push(index);\n              }\n              return matchingIndices;\n            },\n            []\n          );\n          highlightedItemIndex.value =\n            // First matching item starting to search from the current highlighted element\n            matchingIndices?.find(index => index >= highlightedItemIndex.value) ??\n            // First matching item\n            matchingIndices?.[0] ??\n            // First item\n            0;\n        }\n      });\n\n      /**\n       * Updates the debounced function to reset the search.\n       *\n       * @param searchTimeoutMs - The new milliseconds that have to pass without typing before\n       * resetting the search.\n       */\n      watch(\n        () => props.searchTimeoutMs,\n        searchTimeoutMs => {\n          restartResetSearchTimeout = debounceFunction(resetSearchBuffer, searchTimeoutMs);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Focuses the DOM element which matches the `highlightedItemIndex`.\n       *\n       * @param highlightedItemIndex - The index of the HTML element to focus.\n       */\n      watch(\n        highlightedItemIndex,\n        highlightedItemIndex => {\n          nextTick(() => {\n            if (itemsButtonRefs && isInRange(highlightedItemIndex, [0, props.items.length - 1])) {\n              const newItem = itemsButtonRefs?.value?.[highlightedItemIndex];\n              newItem?.focus();\n            }\n          });\n        },\n        { immediate: true }\n      );\n\n      /**\n       * When the dropdown is open it sets the focused element to the one that is selected.\n       *\n       * @param isOpen - True if the dropdown is open, false otherwise.\n       */\n      watch(isOpen, isOpen => {\n        highlightedItemIndex.value = isOpen\n          ? props.modelValue === null\n            ? 0\n            : props.items.indexOf(props.modelValue)\n          : -1;\n      });\n\n      /**\n       * Adds and removes listeners to close the dropdown when it loses the focus.\n       *\n       * @param isOpen - True if the dropdown is open, false otherwise.\n       */\n      watch(isOpen, isOpen => {\n        /*\n         * Because there is an issue with Firefox in macOS and Safari that doesn't focus the target\n         * element of the `mousedown` events, the `focusout` event `relatedTarget` property can't be\n         * used to detect whether the user has blurred the dropdown. The hack here is to use\n         * document listeners that have the side effect of losing the focus.\n         */\n        if (isOpen) {\n          addDocumentCloseListeners();\n        } else {\n          removeDocumentCloseListeners();\n        }\n      });\n\n      /**\n       * If the dropdown is destroyed before removing the document listeners, it ensures that they\n       * are removed too.\n       */\n      onBeforeUnmount(() => {\n        removeDocumentCloseListeners();\n      });\n\n      return {\n        hasToggleSlot: !!slots.toggle,\n        closeAndFocusToggleButton,\n        dropdownCSSClasses,\n        emitSelectedItemChanged,\n        highlightFirstItem,\n        highlightLastItem,\n        highlightNextItem,\n        highlightPreviousItem,\n        highlightedItemIndex,\n        isOpen,\n        itemsButtonRefs,\n        itemsCSSClasses,\n        listId,\n        open,\n        rootRef,\n        toggle,\n        toggleButtonRef,\n        updateSearchBuffer\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-dropdown {\n    position: relative;\n  }\n\n  .x-dropdown__items-list {\n    z-index: 1;\n    list-style: none;\n    position: absolute;\n    padding: 0;\n    margin: 0;\n    top: calc(100% + var(--x-size-gap-dropdown-default, 0));\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `Dropdown` component is a simple yet customizable select component. The component needs to work\nthe list of items available to select, which are passed using the `items` prop, and the selected\nitem, which is passed in using the `value` prop.\n\nThe supported items must be an array that can contain unique strings, unique numbers, or objects\nwith a unique `id` property.\n\nThe content of each item can be customized using the `item` slot, which apart from the data of the\nitem, it also receives via prop if the element is selected or highlighted.\n\nThere `toggle` slot can be used to customize the button that opens the dropdown. If this is not\nprovided, the `item` slot will be used for that.\n\n```vue\n<template>\n  <BaseDropdown v-model=\"value\" :items=\"items\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseDropdown>\n</template>\n\n<script>\n  import { BaseDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'DropdownTest',\n    components: {\n      BaseDropdown\n    },\n    data() {\n      return {\n        items: ['a', 2, { id: '3' }],\n        value: 'a'\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_withKeys","_withModifiers","dropdownCSSClasses","_normalizeClass","_createElementVNode","listId","ariaLabel","hasToggleSlot","_createCommentVNode","isOpen","_createTextVNode","_toDisplayString","modelValue","_createBlock","_resolveDynamicComponent","_withCtx","_withDirectives","_Fragment","_renderList","itemsButtonRefs","itemsCSSClasses","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"base-dropdown.vue.js","sources":["../../../src/components/base-dropdown.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"rootRef\"\n    @keydown=\"updateSearchBuffer\"\n    @keydown.down.prevent=\"highlightNextItem\"\n    @keydown.up.prevent=\"highlightPreviousItem\"\n    :class=\"dropdownCSSClasses\"\n    class=\"x-dropdown\"\n  >\n    <button\n      ref=\"toggleButtonRef\"\n      @click=\"toggle\"\n      @keydown.up.down.prevent.stop=\"open\"\n      class=\"x-dropdown__toggle\"\n      data-test=\"dropdown-toggle\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      :aria-expanded=\"isOpen.toString()\"\n      :aria-controls=\"listId\"\n      :aria-label=\"ariaLabel\"\n      aria-autocomplete=\"none\"\n    >\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 {string|number|Identifiable} item - The item data to render.\n       @binding {boolean} isOpen - True if the dropdown is opened, and false if it is closed.\n     -->\n      <slot v-if=\"hasToggleSlot\" :isOpen=\"isOpen\" :item=\"modelValue\" name=\"toggle\">\n        {{ modelValue }}\n      </slot>\n      <slot v-else :item=\"modelValue\" name=\"item\">{{ modelValue }}</slot>\n    </button>\n\n    <component :is=\"animation\">\n      <ul\n        v-show=\"isOpen\"\n        @keydown.end=\"highlightLastItem\"\n        @keydown.esc=\"closeAndFocusToggleButton\"\n        @keydown.home=\"highlightFirstItem\"\n        :id=\"listId\"\n        class=\"x-dropdown__items-list\"\n        data-test=\"dropdown-list\"\n        role=\"listbox\"\n        tabindex=\"-1\"\n      >\n        <li v-for=\"(item, index) in items\" :key=\"item.id || item\" class=\"x-dropdown__list-item\">\n          <button\n            :ref=\"el => (itemsButtonRefs[index] = el)\"\n            @click=\"emitSelectedItemChanged(item)\"\n            :aria-selected=\"(item === modelValue).toString()\"\n            :class=\"itemsCSSClasses[index]\"\n            class=\"x-dropdown__item\"\n            data-test=\"dropdown-item\"\n            role=\"option\"\n          >\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 {string|number|Identifiable} item - Item 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\n              :isHighlighted=\"index === highlightedItemIndex\"\n              :isSelected=\"item === modelValue\"\n              :item=\"item\"\n              name=\"item\"\n            >\n              {{ item }}\n            </slot>\n          </button>\n        </li>\n      </ul>\n    </component>\n  </div>\n</template>\n\n<script lang=\"ts\">\n  import { Identifiable } from '@empathyco/x-types';\n  import { computed, defineComponent, nextTick, onBeforeUnmount, PropType, ref, watch } from 'vue';\n  import { AnimationProp } from '../types';\n  import { debounceFunction, normalizeString, getTargetElement } from '../utils';\n  import { NoAnimation } from './animations';\n\n  type DropdownItem = string | number | Identifiable;\n  let dropdownCount = 0;\n\n  /**\n   * Dropdown component that mimics a Select element behavior, but with the option\n   * to customize the toggle button and each item contents.\n   */\n  export default defineComponent({\n    name: 'BaseDropdown',\n    props: {\n      /** List of items to display.*/\n      items: {\n        type: Array as PropType<DropdownItem[]>,\n        required: true\n      },\n      /** The selected item. */\n      modelValue: {\n        type: null as unknown as PropType<DropdownItem | null>,\n        validator: (v: any) =>\n          typeof v === 'string' || typeof v === 'number' || typeof v === 'object' || v === null,\n        required: true\n      },\n      /** Description of what the dropdown is used for. */\n      ariaLabel: String,\n      /**\n       * Animation component to use for expanding the dropdown. This is a single element animation,\n       * so only `<transition>` components are allowed.\n       */\n      animation: {\n        type: AnimationProp,\n        default: () => NoAnimation\n      },\n      /** Time to wait without receiving any keystroke before resetting the items search query. */\n      searchTimeoutMs: {\n        type: Number,\n        default: 1000\n      }\n    },\n    emits: ['update:modelValue'],\n    setup(props, { emit, slots }) {\n      const rootRef = ref<HTMLElement>();\n      /** The button that opens and closes the list of options. */\n      const toggleButtonRef = ref<HTMLButtonElement>();\n      /** Array containing the dropdown list buttons HTMLElements. */\n      const itemsButtonRefs = ref<HTMLButtonElement[]>([]);\n\n      /** Property to check whether the dropdown is expanded or closed. */\n      const isOpen = ref(false);\n      /** Index of the element that has the focus in the list. -1 means no element has focus. */\n      const highlightedItemIndex = ref(-1);\n      /** String to search for the first element that starts with it. */\n      const searchBuffer = ref('');\n\n      /** Resets the search buffer after a certain time has passed. */\n      let restartResetSearchTimeout: () => void;\n      /* Unique ID to identify the dropdown. */\n      const listId = `x-dropdown-${dropdownCount++}`;\n\n      /**\n       * Dynamic CSS classes to add to the dropdown root element.\n       *\n       * @returns An object containing the CSS classes to add to the dropdown root element.\n       */\n      const dropdownCSSClasses = computed(() => ({ 'x-dropdown--is-open': isOpen }));\n\n      /**\n       * Dynamic CSS classes to add to each one of the items.\n       *\n       * @returns An object containing the CSS classes to add to each item.\n       */\n      const itemsCSSClasses = computed(() =>\n        props.items.map((item, index) => ({\n          'x-dropdown__item--is-selected': props.modelValue === item,\n          'x-dropdown__item--is-highlighted': highlightedItemIndex.value === index\n        }))\n      );\n\n      /* Opens the dropdown. */\n      const open = () => (isOpen.value = true);\n      /* Closes the dropdown. */\n      const close = () => (isOpen.value = false);\n      /* Toggles the dropdown. */\n      const toggle = () => (isOpen.value = !isOpen.value);\n\n      /**\n       * Closes the modal and focuses the toggle button.\n       */\n      function closeAndFocusToggleButton() {\n        close();\n        toggleButtonRef.value?.focus();\n      }\n\n      /**\n       * Emits the event that the selected item has changed.\n       *\n       * @param item - The new selected item.\n       */\n      function emitSelectedItemChanged(item: DropdownItem) {\n        emit('update:modelValue', item);\n        closeAndFocusToggleButton();\n      }\n\n      /**\n       * Highlights the item after the one that is currently highlighted.\n       */\n      function highlightNextItem() {\n        open();\n        highlightedItemIndex.value = (highlightedItemIndex.value + 1) % props.items.length;\n      }\n\n      /**\n       * Highlights the item before the one that is currently highlighted.\n       */\n      function highlightPreviousItem() {\n        const currentIndex = highlightedItemIndex.value;\n        open();\n        highlightedItemIndex.value = currentIndex > 0 ? currentIndex - 1 : props.items.length - 1;\n      }\n\n      /**\n       * Highlights the first of the provided items.\n       */\n      function highlightFirstItem() {\n        highlightedItemIndex.value = 0;\n      }\n\n      /**\n       * Highlights the last of the provided items.\n       */\n      function highlightLastItem() {\n        highlightedItemIndex.value = props.items.length - 1;\n      }\n\n      /**\n       * Updates the variable that is used to search in the filters.\n       *\n       * @param event - The event coming from the user typing.\n       */\n      function updateSearchBuffer(event: KeyboardEvent) {\n        if (/^\\w$/.test(event.key)) {\n          const key = event.key;\n          searchBuffer.value += key;\n          restartResetSearchTimeout();\n        }\n      }\n\n      /**\n       * Resets the search buffer.\n       */\n      function resetSearchBuffer() {\n        searchBuffer.value = '';\n      }\n\n      /**\n       * Closes the dropdown if the passed event has happened on an element out of the dropdown.\n       *\n       * @param event - The event to check if it has happened out of the dropdown component.\n       */\n      function closeIfEventIsOutOfDropdown(event: MouseEvent | TouchEvent | FocusEvent) {\n        if (!rootRef.value?.contains(getTargetElement(event))) {\n          close();\n        }\n      }\n\n      /**\n       * Adds listeners to the document element to detect if the focus has moved out from the\n       * dropdown.\n       */\n      function addDocumentCloseListeners() {\n        document.addEventListener('mousedown', closeIfEventIsOutOfDropdown);\n        document.addEventListener('touchstart', closeIfEventIsOutOfDropdown);\n        document.addEventListener('focusin', closeIfEventIsOutOfDropdown);\n      }\n\n      /**\n       * Removes the listeners of the document element to detect if the focus has moved out from the\n       * dropdown.\n       */\n      function removeDocumentCloseListeners() {\n        document.removeEventListener('mousedown', closeIfEventIsOutOfDropdown);\n        document.removeEventListener('touchstart', closeIfEventIsOutOfDropdown);\n        document.removeEventListener('focusin', closeIfEventIsOutOfDropdown);\n      }\n\n      /**\n       * Highlights the item that matches the search buffer. To do so it checks the list buttons\n       * text content. It highlights items following this priority:\n       * - If an element is already highlighted, it starts searching from that element.\n       * - If no element is found starting from the previously highlighted, it returns the first one.\n       * - If no element is found matching the search query it highlights the first element.\n       *\n       * @param search - The search string to find in the HTML.\n       */\n      watch(searchBuffer, search => {\n        if (search) {\n          const normalizedSearch = normalizeString(search);\n          const matchingIndices = itemsButtonRefs?.value?.reduce<number[]>(\n            (matchingIndices, button, index) => {\n              const safeButtonWordCharacters = button.textContent!.replace(/[^\\w]/g, '');\n              const normalizedButtonText = normalizeString(safeButtonWordCharacters);\n              if (normalizedButtonText.startsWith(normalizedSearch)) {\n                matchingIndices.push(index);\n              }\n              return matchingIndices;\n            },\n            []\n          );\n          highlightedItemIndex.value =\n            // First matching item starting to search from the current highlighted element\n            matchingIndices?.find(index => index >= highlightedItemIndex.value) ??\n            // First matching item\n            matchingIndices?.[0] ??\n            // First item\n            0;\n        }\n      });\n\n      /**\n       * Updates the debounced function to reset the search.\n       *\n       * @param searchTimeoutMs - The new milliseconds that have to pass without typing before\n       * resetting the search.\n       */\n      watch(\n        () => props.searchTimeoutMs,\n        searchTimeoutMs => {\n          restartResetSearchTimeout = debounceFunction(resetSearchBuffer, searchTimeoutMs);\n        },\n        { immediate: true }\n      );\n\n      /**\n       * Focuses the DOM element which matches the `highlightedItemIndex`.\n       *\n       * @param highlightedItemIndex - The index of the HTML element to focus.\n       */\n      watch(\n        highlightedItemIndex,\n        highlightedItemIndex => {\n          nextTick(() => itemsButtonRefs.value[highlightedItemIndex]?.focus());\n        },\n        { immediate: true }\n      );\n\n      /**\n       * When the dropdown is open it sets the focused element to the one that is selected.\n       *\n       * @param isOpen - True if the dropdown is open, false otherwise.\n       */\n      watch(isOpen, isOpen => {\n        highlightedItemIndex.value = isOpen\n          ? props.modelValue === null\n            ? 0\n            : props.items.indexOf(props.modelValue)\n          : -1;\n      });\n\n      /**\n       * Adds and removes listeners to close the dropdown when it loses the focus.\n       *\n       * @param isOpen - True if the dropdown is open, false otherwise.\n       */\n      watch(isOpen, isOpen => {\n        /*\n         * Because there is an issue with Firefox in macOS and Safari that doesn't focus the target\n         * element of the `mousedown` events, the `focusout` event `relatedTarget` property can't be\n         * used to detect whether the user has blurred the dropdown. The hack here is to use\n         * document listeners that have the side effect of losing the focus.\n         */\n        if (isOpen) {\n          addDocumentCloseListeners();\n        } else {\n          removeDocumentCloseListeners();\n        }\n      });\n\n      /**\n       * If the dropdown is destroyed before removing the document listeners, it ensures that they\n       * are removed too.\n       */\n      onBeforeUnmount(() => {\n        removeDocumentCloseListeners();\n      });\n\n      return {\n        hasToggleSlot: !!slots.toggle,\n        closeAndFocusToggleButton,\n        dropdownCSSClasses,\n        emitSelectedItemChanged,\n        highlightFirstItem,\n        highlightLastItem,\n        highlightNextItem,\n        highlightPreviousItem,\n        highlightedItemIndex,\n        isOpen,\n        itemsButtonRefs,\n        itemsCSSClasses,\n        listId,\n        open,\n        rootRef,\n        toggle,\n        toggleButtonRef,\n        updateSearchBuffer\n      };\n    }\n  });\n</script>\n\n<style lang=\"css\" scoped>\n  .x-dropdown {\n    position: relative;\n  }\n\n  .x-dropdown__items-list {\n    z-index: 1;\n    list-style: none;\n    position: absolute;\n    padding: 0;\n    margin: 0;\n    top: calc(100% + var(--x-size-gap-dropdown-default, 0));\n  }\n</style>\n\n<docs lang=\"mdx\">\n## Example\n\nThe `Dropdown` component is a simple yet customizable select component. The component needs to work\nthe list of items available to select, which are passed using the `items` prop, and the selected\nitem, which is passed in using the `value` prop.\n\nThe supported items must be an array that can contain unique strings, unique numbers, or objects\nwith a unique `id` property.\n\nThe content of each item can be customized using the `item` slot, which apart from the data of the\nitem, it also receives via prop if the element is selected or highlighted.\n\nThere `toggle` slot can be used to customize the button that opens the dropdown. If this is not\nprovided, the `item` slot will be used for that.\n\n```vue\n<template>\n  <BaseDropdown v-model=\"value\" :items=\"items\">\n    <template #toggle=\"{ item, isOpen }\">{{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>\n\n    <template #item=\"{ item, isSelected, isHighlighted }\">\n      <span v-if=\"isHighlighted\">🟢</span>\n      <span v-if=\"isSelected\">✅</span>\n      <span>{{ item }}</span>\n    </template>\n  </BaseDropdown>\n</template>\n\n<script>\n  import { BaseDropdown } from '@empathyco/x-components';\n\n  export default {\n    name: 'DropdownTest',\n    components: {\n      BaseDropdown\n    },\n    data() {\n      return {\n        items: ['a', 2, { id: '3' }],\n        value: 'a'\n      };\n    }\n  };\n</script>\n```\n</docs>\n"],"names":["_openBlock","_createElementBlock","_withKeys","_withModifiers","dropdownCSSClasses","_normalizeClass","_createElementVNode","listId","ariaLabel","_renderSlot","isOpen","_createTextVNode","_toDisplayString","modelValue","_createBlock","_resolveDynamicComponent","_withCtx","_withDirectives","_Fragment","_renderList","itemsButtonRefs","itemsCSSClasses"],"mappings":"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"}

package/js/components/base-dropdown.vue2.js

@@ -3,7 +3,6 @@ import { AnimationProp } from '../types/animation-prop.js';
 import { debounce } from '../utils/debounce.js';
 import { getTargetElement } from '../utils/html.js';
 import { normalizeString } from '../utils/normalize.js';
-import { isInRange } from '../utils/number.js';
 import '../utils/storage.js';
 import './animations/animate-width.vue2.js';
 import './animations/animate-width.vue3.js';
@@ -230,12 +229,7 @@ var _sfc_main = defineComponent({
          * @param highlightedItemIndex - The index of the HTML element to focus.
          */
         watch(highlightedItemIndex, highlightedItemIndex => {
-            nextTick(() => {
-                if (itemsButtonRefs && isInRange(highlightedItemIndex, [0, props.items.length - 1])) {
-                    const newItem = itemsButtonRefs?.value?.[highlightedItemIndex];
-                    newItem?.focus();
-                }
-            });
+            nextTick(() => itemsButtonRefs.value[highlightedItemIndex]?.focus());
         }, { immediate: true });
         /**
          * When the dropdown is open it sets the focused element to the one that is selected.