@empathyco/x-components 5.0.0-alpha.9 → 6.0.0-alpha.2

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

@@ -1,252 +1,121 @@
-import script from './base-dropdown.vue2.js';
+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 './base-dropdown.vue3.js';
-import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.mjs';
+import _export_sfc from '../_virtual/_plugin-vue_export-helper.js';
 
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c(
+const _hoisted_1 = ["aria-expanded", "aria-controls", "aria-label"];
+const _hoisted_2 = ["id"];
+const _hoisted_3 = ["onClick", "aria-selected"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
     "div",
     {
       ref: "rootRef",
-      staticClass: "x-dropdown",
-      class: _vm.dropdownCSSClasses,
-      on: {
-        keydown: [
-          _vm.updateSearchBuffer,
-          function ($event) {
-            if (
-              !$event.type.indexOf("key") &&
-              _vm._k($event.keyCode, "down", 40, $event.key, [
-                "Down",
-                "ArrowDown",
-              ])
-            ) {
-              return null
-            }
-            $event.preventDefault();
-            return _vm.highlightNextItem.apply(null, arguments)
-          },
-          function ($event) {
-            if (
-              !$event.type.indexOf("key") &&
-              _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"])
-            ) {
-              return null
-            }
-            $event.preventDefault();
-            return _vm.highlightPreviousItem.apply(null, arguments)
-          },
-        ],
-      },
+      onKeydown: [
+        _cache[5] || (_cache[5] = (...args) => _ctx.updateSearchBuffer && _ctx.updateSearchBuffer(...args)),
+        _cache[6] || (_cache[6] = withKeys(withModifiers((...args) => _ctx.highlightNextItem && _ctx.highlightNextItem(...args), ["prevent"]), ["down"])),
+        _cache[7] || (_cache[7] = withKeys(withModifiers((...args) => _ctx.highlightPreviousItem && _ctx.highlightPreviousItem(...args), ["prevent"]), ["up"]))
+      ],
+      class: normalizeClass([_ctx.dropdownCSSClasses, "x-dropdown"])
     },
     [
-      _c(
-        "button",
-        {
-          ref: "toggleButtonRef",
-          staticClass: "x-dropdown__toggle",
-          attrs: {
-            "data-test": "dropdown-toggle",
-            role: "combobox",
-            "aria-haspopup": "listbox",
-            "aria-expanded": _vm.isOpen.toString(),
-            "aria-controls": _vm.listId,
-            "aria-label": _vm.ariaLabel,
-            "aria-autocomplete": "none",
-          },
-          on: {
-            click: _vm.toggle,
-            keydown: function ($event) {
-              if (
-                !$event.type.indexOf("key") &&
-                _vm._k($event.keyCode, "up", 38, $event.key, [
-                  "Up",
-                  "ArrowUp",
-                ]) &&
-                _vm._k($event.keyCode, "down", 40, $event.key, [
-                  "Down",
-                  "ArrowDown",
-                ])
-              ) {
-                return null
-              }
-              $event.preventDefault();
-              $event.stopPropagation();
-              return _vm.open.apply(null, arguments)
-            },
-          },
-        },
-        [
-          _vm.hasToggleSlot
-            ? _vm._t(
-                "toggle",
-                function () {
-                  return [_vm._v(" " + _vm._s(_vm.modelValue) + " ")]
-                },
-                { isOpen: _vm.isOpen, item: _vm.modelValue }
-              )
-            : _vm._t(
-                "item",
-                function () {
-                  return [_vm._v(_vm._s(_vm.modelValue))]
-                },
-                { item: _vm.modelValue }
-              ),
-        ],
-        2
-      ),
-      _c(_vm.animation, { tag: "component" }, [
-        _c(
-          "ul",
-          {
-            directives: [
-              {
-                name: "show",
-                rawName: "v-show",
-                value: _vm.isOpen,
-                expression: "isOpen",
-              },
+      createElementVNode("button", {
+        ref: "toggleButtonRef",
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggle && _ctx.toggle(...args)),
+        onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers((...args) => _ctx.open && _ctx.open(...args), ["prevent", "stop"]), ["up", "down"])),
+        class: "x-dropdown__toggle",
+        "data-test": "dropdown-toggle",
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": _ctx.isOpen.toString(),
+        "aria-controls": _ctx.listId,
+        "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,
+          item: _ctx.modelValue
+        }, () => [
+          createTextVNode(
+            toDisplayString(_ctx.modelValue),
+            1
+            /* TEXT */
+          )
+        ], true) : renderSlot(_ctx.$slots, "item", {
+          key: 1,
+          item: _ctx.modelValue
+        }, () => [
+          createTextVNode(
+            toDisplayString(_ctx.modelValue),
+            1
+            /* TEXT */
+          )
+        ], true)
+      ], 40, _hoisted_1),
+      (openBlock(), createBlock(resolveDynamicComponent(_ctx.animation), null, {
+        default: withCtx(() => [
+          withDirectives(createElementVNode("ul", {
+            onKeydown: [
+              _cache[2] || (_cache[2] = withKeys((...args) => _ctx.highlightLastItem && _ctx.highlightLastItem(...args), ["end"])),
+              _cache[3] || (_cache[3] = withKeys((...args) => _ctx.closeAndFocusToggleButton && _ctx.closeAndFocusToggleButton(...args), ["esc"])),
+              _cache[4] || (_cache[4] = withKeys((...args) => _ctx.highlightFirstItem && _ctx.highlightFirstItem(...args), ["home"]))
             ],
-            staticClass: "x-dropdown__items-list",
-            attrs: {
-              id: _vm.listId,
-              "data-test": "dropdown-list",
-              role: "listbox",
-              tabindex: "-1",
-            },
-            on: {
-              keydown: [
-                function ($event) {
-                  if (
-                    !$event.type.indexOf("key") &&
-                    _vm._k(
-                      $event.keyCode,
-                      "end",
-                      undefined,
-                      $event.key,
-                      undefined
-                    )
-                  ) {
-                    return null
-                  }
-                  return _vm.highlightLastItem.apply(null, arguments)
-                },
-                function ($event) {
-                  if (
-                    !$event.type.indexOf("key") &&
-                    _vm._k($event.keyCode, "esc", 27, $event.key, [
-                      "Esc",
-                      "Escape",
-                    ])
-                  ) {
-                    return null
-                  }
-                  return _vm.closeAndFocusToggleButton.apply(null, arguments)
-                },
-                function ($event) {
-                  if (
-                    !$event.type.indexOf("key") &&
-                    _vm._k(
-                      $event.keyCode,
-                      "home",
-                      undefined,
-                      $event.key,
-                      undefined
-                    )
-                  ) {
-                    return null
-                  }
-                  return _vm.highlightFirstItem.apply(null, arguments)
-                },
-              ],
-            },
-          },
-          _vm._l(_vm.items, function (item, index) {
-            return _c(
-              "li",
-              { key: item.id || item, staticClass: "x-dropdown__list-item" },
-              [
-                _c(
-                  "button",
-                  {
-                    ref: function (el) {
-                      return (_vm.itemsButtonRefs[index] = el)
-                    },
-                    refInFor: true,
-                    staticClass: "x-dropdown__item",
-                    class: _vm.itemsCSSClasses[index],
-                    attrs: {
-                      "aria-selected": (item === _vm.modelValue).toString(),
-                      "data-test": "dropdown-item",
-                      role: "option",
-                    },
-                    on: {
-                      click: function ($event) {
-                        return _vm.emitSelectedItemChanged(item)
-                      },
-                    },
-                  },
-                  [
-                    _vm._t(
-                      "item",
-                      function () {
-                        return [_vm._v(" " + _vm._s(item) + " ")]
-                      },
-                      {
-                        isHighlighted: index === _vm.highlightedItemIndex,
-                        isSelected: item === _vm.modelValue,
-                        item: item,
-                      }
-                    ),
-                  ],
-                  2
-                ),
-              ]
-            )
-          }),
-          0
-        ),
-      ]),
+            id: _ctx.listId,
+            class: "x-dropdown__items-list",
+            "data-test": "dropdown-list",
+            role: "listbox",
+            tabindex: "-1"
+          }, [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(_ctx.items, (item, index) => {
+                return openBlock(), createElementBlock("li", {
+                  key: item.id || item,
+                  class: "x-dropdown__list-item"
+                }, [
+                  createElementVNode("button", {
+                    ref_for: true,
+                    ref: (el) => _ctx.itemsButtonRefs[index] = el,
+                    onClick: ($event) => _ctx.emitSelectedItemChanged(item),
+                    "aria-selected": (item === _ctx.modelValue).toString(),
+                    class: normalizeClass([_ctx.itemsCSSClasses[index], "x-dropdown__item"]),
+                    "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,
+                      item
+                    }, () => [
+                      createTextVNode(
+                        toDisplayString(item),
+                        1
+                        /* TEXT */
+                      )
+                    ], true)
+                  ], 10, _hoisted_3)
+                ]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ], 40, _hoisted_2), [
+            [vShow, _ctx.isOpen]
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }))
     ],
-    1
-  )
-};
-var __vue_staticRenderFns__ = [];
-__vue_render__._withStripped = true;
-
-  /* style */
-  const __vue_inject_styles__ = undefined;
-  /* scoped */
-  const __vue_scope_id__ = "data-v-0072558a";
-  /* module identifier */
-  const __vue_module_identifier__ = undefined;
-  /* functional template */
-  const __vue_is_functional_template__ = false;
-  /* style inject */
-  
-  /* style inject SSR */
-  
-  /* style inject shadow dom */
-  
-
-  
-  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
-    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
-    __vue_inject_styles__,
-    __vue_script__,
-    __vue_scope_id__,
-    __vue_is_functional_template__,
-    __vue_module_identifier__,
-    false,
-    undefined,
-    undefined,
-    undefined
+    34
+    /* CLASS, NEED_HYDRATION */
   );
+}
+var BaseDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-11f44d70"]]);
 
-export { __vue_component__ as default };
+export { BaseDropdown as default };
 //# sourceMappingURL=base-dropdown.vue.js.map

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 Vue, {\n    computed,\n    defineComponent,\n    nextTick,\n    onBeforeUnmount,\n    PropType,\n    ref,\n    watch\n  } from 'vue';\n  import { getTargetElement } from '../utils/html';\n  import { normalizeString } from '../utils/normalize';\n  import { isInRange } from '../utils/number';\n  import { debounce as debounceFunction } from '../utils/debounce';\n  import { NoElement } from './no-element';\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    components: { NoElement },\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: Object as PropType<string | typeof Vue>,\n        default: () => NoElement\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=\"scss\" scoped>\n  .x-dropdown {\n    position: relative;\n\n    &__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  }\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":[],"mappings":";;;;;AAEA,MAAc,cAAA,GAAA,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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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"}

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

@@ -1,18 +1,36 @@
 import { defineComponent, ref, computed, watch, nextTick, onBeforeUnmount } from 'vue';
+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 { debounce } from '../utils/debounce.js';
-import { NoElement } from './no-element.js';
+import '../utils/storage.js';
+import './animations/animate-width.vue2.js';
+import './animations/animate-width.vue3.js';
+import './animations/collapse-height.vue2.js';
+import './animations/collapse-height.vue3.js';
+import './animations/collapse-width.vue2.js';
+import './animations/collapse-width.vue3.js';
+import './animations/cross-fade.vue2.js';
+import './animations/cross-fade.vue3.js';
+import './animations/fade.vue2.js';
+import './animations/fade.vue3.js';
+import './animations/fade-and-slide.vue2.js';
+import './animations/fade-and-slide.vue3.js';
+import _sfc_main$1 from './animations/no-animation.vue.js';
+import './animations/staggered-fade-and-slide.vue2.js';
+import './animations/staggered-fade-and-slide.vue3.js';
+import './animations/animate-clip-path/animate-clip-path.style.scss.js';
+import './animations/animate-scale/animate-scale.style.scss.js';
+import './animations/animate-translate/animate-translate.style.scss.js';
 
 let dropdownCount = 0;
 /**
  * Dropdown component that mimics a Select element behavior, but with the option
  * to customize the toggle button and each item contents.
  */
-var script = defineComponent({
+var _sfc_main = defineComponent({
     name: 'BaseDropdown',
-    components: { NoElement },
     props: {
         /** List of items to display.*/
         items: {
@@ -32,8 +50,8 @@ var script = defineComponent({
          * so only `<transition>` components are allowed.
          */
         animation: {
-            type: Object,
-            default: () => NoElement
+            type: AnimationProp,
+            default: () => _sfc_main$1
         },
         /** Time to wait without receiving any keystroke before resetting the items search query. */
         searchTimeoutMs: {
@@ -280,5 +298,5 @@ var script = defineComponent({
     }
 });
 
-export { script as default };
+export { _sfc_main as default };
 //# sourceMappingURL=base-dropdown.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"base-dropdown.vue2.js","sources":["../../../src/components/base-dropdown.vue?rollup-plugin-vue=script.ts"],"sourcesContent":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n  import { Identifiable } from '@empathyco/x-types';\n  import Vue, {\n    computed,\n    defineComponent,\n    nextTick,\n    onBeforeUnmount,\n    PropType,\n    ref,\n    watch\n  } from 'vue';\n  import { getTargetElement } from '../utils/html';\n  import { normalizeString } from '../utils/normalize';\n  import { isInRange } from '../utils/number';\n  import { debounce as debounceFunction } from '../utils/debounce';\n  import { NoElement } from './no-element';\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    components: { NoElement },\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: Object as PropType<string | typeof Vue>,\n        default: () => NoElement\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"],"names":["debounceFunction"],"mappings":"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"}
+{"version":3,"file":"base-dropdown.vue2.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":["NoAnimation","debounceFunction"],"mappings":"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"}