@dialpad/dialtone 9.70.1 → 9.71.0-beta.2

package/dist/vue3/components/emoji_picker/modules/emoji_description.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_description.vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/emoji_picker/modules/emoji_description.vue.js

@@ -0,0 +1,38 @@
+import { openBlock, createElementBlock, unref, createCommentVNode, createElementVNode, toDisplayString } from "vue";
+import { CDN_URL } from "../emoji_picker_constants.js";
+const _hoisted_1 = { class: "d-emoji-picker__data" };
+const _hoisted_2 = ["alt", "aria-label", "title", "src"];
+const _sfc_main = {
+  __name: "emoji_description",
+  props: {
+    /**
+     * Emoji data
+     * @type {Object}
+     * @default null
+     */
+    emoji: {
+      type: Object,
+      default: null
+    }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        __props.emoji ? (openBlock(), createElementBlock("img", {
+          key: 0,
+          class: "d-icon d-icon--size-500",
+          alt: __props.emoji.name,
+          "aria-label": __props.emoji.name,
+          title: __props.emoji.name,
+          src: `${unref(CDN_URL) + __props.emoji.unicode_character}.png`
+        }, null, 8, _hoisted_2)) : createCommentVNode("", true),
+        createElementVNode("div", null, toDisplayString((_a = __props.emoji) == null ? void 0 : _a.name), 1)
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=emoji_description.vue.js.map

package/dist/vue3/components/emoji_picker/modules/emoji_description.vue.js.map

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

package/dist/vue3/components/emoji_picker/modules/emoji_search.vue.cjs

@@ -0,0 +1,78 @@
+"use strict";
+const vue = require("vue");
+const vue3 = require("@dialpad/dialtone-icons/vue3");
+const input = require("../../input/input.vue.cjs");
+const button = require("../../button/button.vue.cjs");
+const _hoisted_1 = { class: "d-emoji-picker__search d-emoji-picker__alignment" };
+const _sfc_main = {
+  __name: "emoji_search",
+  props: {
+    searchPlaceholderLabel: {
+      type: String,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emits = __emit;
+    const searchInput = vue.ref(null);
+    function clearSearch() {
+      emits("update:modelValue", "");
+      focusSearchInput();
+    }
+    function focusSearchInput() {
+      searchInput.value.focus();
+    }
+    vue.onMounted(() => {
+      focusSearchInput();
+    });
+    __expose({
+      focusSearchInput
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(vue.unref(input), {
+          id: "searchInput",
+          ref_key: "searchInput",
+          ref: searchInput,
+          placeholder: __props.searchPlaceholderLabel,
+          "model-value": __props.modelValue,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event)),
+          onKeydown: [
+            _cache[1] || (_cache[1] = vue.withKeys(($event) => _ctx.$emit("focus-tabset"), ["up"])),
+            _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers(($event) => _ctx.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
+            _cache[3] || (_cache[3] = vue.withKeys(($event) => _ctx.$emit("select-first-emoji"), ["enter"]))
+          ]
+        }, vue.createSlots({
+          leftIcon: vue.withCtx(() => [
+            vue.createVNode(vue.unref(vue3.DtIconSearch), { size: "200" })
+          ]),
+          _: 2
+        }, [
+          __props.modelValue.length > 0 ? {
+            name: "rightIcon",
+            fn: vue.withCtx(() => [
+              vue.createVNode(vue.unref(button), {
+                importance: "clear",
+                kind: "muted",
+                onClick: clearSearch
+              }, {
+                icon: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(vue3.DtIconXCircle), { size: "200" })
+                ]),
+                _: 1
+              })
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["placeholder", "model-value"])
+      ]);
+    };
+  }
+};
+module.exports = _sfc_main;
+//# sourceMappingURL=emoji_search.vue.cjs.map

package/dist/vue3/components/emoji_picker/modules/emoji_search.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_search.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n    <dt-input\n      id=\"searchInput\"\n      ref=\"searchInput\"\n      :placeholder=\"searchPlaceholderLabel\"\n      :model-value=\"modelValue\"\n      @update:model-value=\"$emit('update:modelValue', $event)\"\n      @keydown.up=\"$emit('focus-tabset')\"\n      @keydown.down.prevent=\"$emit('focus-emoji-selector')\"\n      @keydown.enter=\"$emit('select-first-emoji')\"\n    >\n      <template #leftIcon>\n        <dt-icon-search\n          size=\"200\"\n        />\n      </template>\n      <template\n        v-if=\"modelValue.length > 0\"\n        #rightIcon\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          @click=\"clearSearch\"\n        >\n          <template #icon>\n            <dt-icon-x-circle\n              size=\"200\"\n            />\n          </template>\n        </dt-button>\n      </template>\n    </dt-input>\n  </div>\n</template>\n\n<script setup>\nimport { DtIconSearch, DtIconXCircle } from '@dialpad/dialtone-icons/vue3';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\nimport { onMounted, ref } from 'vue';\n\ndefineProps({\n  searchPlaceholderLabel: {\n    type: String,\n    required: true,\n  },\n  modelValue: {\n    type: String,\n    default: '',\n  },\n});\n\nconst emits = defineEmits(['update:modelValue', 'focus-emoji-selector', 'focus-tabset', 'select-first-emoji']);\n\nconst searchInput = ref(null);\n\nfunction clearSearch () {\n  emits('update:modelValue', '');\n  focusSearchInput();\n}\n\nfunction focusSearchInput () {\n  searchInput.value.focus();\n}\nonMounted(() => {\n  focusSearchInput();\n});\n\ndefineExpose({\n  focusSearchInput,\n});\n</script>\n"],"names":["ref","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsDA,UAAM,QAAQ;AAEd,UAAM,cAAcA,IAAAA,IAAI,IAAI;AAE5B,aAAS,cAAe;AACtB,YAAM,qBAAqB,EAAE;AAC7B;IACF;AAEA,aAAS,mBAAoB;AAC3B,kBAAY,MAAM;IACpB;AACAC,QAAAA,UAAU,MAAM;AACd;IACF,CAAC;AAED,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/emoji_picker/modules/emoji_search.vue.js

@@ -0,0 +1,79 @@
+import { ref, onMounted, openBlock, createElementBlock, createVNode, unref, withKeys, withModifiers, createSlots, withCtx } from "vue";
+import { DtIconSearch, DtIconXCircle } from "@dialpad/dialtone-icons/vue3";
+import DtInput from "../../input/input.vue.js";
+import DtButton from "../../button/button.vue.js";
+const _hoisted_1 = { class: "d-emoji-picker__search d-emoji-picker__alignment" };
+const _sfc_main = {
+  __name: "emoji_search",
+  props: {
+    searchPlaceholderLabel: {
+      type: String,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emits = __emit;
+    const searchInput = ref(null);
+    function clearSearch() {
+      emits("update:modelValue", "");
+      focusSearchInput();
+    }
+    function focusSearchInput() {
+      searchInput.value.focus();
+    }
+    onMounted(() => {
+      focusSearchInput();
+    });
+    __expose({
+      focusSearchInput
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(DtInput), {
+          id: "searchInput",
+          ref_key: "searchInput",
+          ref: searchInput,
+          placeholder: __props.searchPlaceholderLabel,
+          "model-value": __props.modelValue,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", $event)),
+          onKeydown: [
+            _cache[1] || (_cache[1] = withKeys(($event) => _ctx.$emit("focus-tabset"), ["up"])),
+            _cache[2] || (_cache[2] = withKeys(withModifiers(($event) => _ctx.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
+            _cache[3] || (_cache[3] = withKeys(($event) => _ctx.$emit("select-first-emoji"), ["enter"]))
+          ]
+        }, createSlots({
+          leftIcon: withCtx(() => [
+            createVNode(unref(DtIconSearch), { size: "200" })
+          ]),
+          _: 2
+        }, [
+          __props.modelValue.length > 0 ? {
+            name: "rightIcon",
+            fn: withCtx(() => [
+              createVNode(unref(DtButton), {
+                importance: "clear",
+                kind: "muted",
+                onClick: clearSearch
+              }, {
+                icon: withCtx(() => [
+                  createVNode(unref(DtIconXCircle), { size: "200" })
+                ]),
+                _: 1
+              })
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["placeholder", "model-value"])
+      ]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=emoji_search.vue.js.map

package/dist/vue3/components/emoji_picker/modules/emoji_search.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"emoji_search.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_search.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n    <dt-input\n      id=\"searchInput\"\n      ref=\"searchInput\"\n      :placeholder=\"searchPlaceholderLabel\"\n      :model-value=\"modelValue\"\n      @update:model-value=\"$emit('update:modelValue', $event)\"\n      @keydown.up=\"$emit('focus-tabset')\"\n      @keydown.down.prevent=\"$emit('focus-emoji-selector')\"\n      @keydown.enter=\"$emit('select-first-emoji')\"\n    >\n      <template #leftIcon>\n        <dt-icon-search\n          size=\"200\"\n        />\n      </template>\n      <template\n        v-if=\"modelValue.length > 0\"\n        #rightIcon\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          @click=\"clearSearch\"\n        >\n          <template #icon>\n            <dt-icon-x-circle\n              size=\"200\"\n            />\n          </template>\n        </dt-button>\n      </template>\n    </dt-input>\n  </div>\n</template>\n\n<script setup>\nimport { DtIconSearch, DtIconXCircle } from '@dialpad/dialtone-icons/vue3';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\nimport { onMounted, ref } from 'vue';\n\ndefineProps({\n  searchPlaceholderLabel: {\n    type: String,\n    required: true,\n  },\n  modelValue: {\n    type: String,\n    default: '',\n  },\n});\n\nconst emits = defineEmits(['update:modelValue', 'focus-emoji-selector', 'focus-tabset', 'select-first-emoji']);\n\nconst searchInput = ref(null);\n\nfunction clearSearch () {\n  emits('update:modelValue', '');\n  focusSearchInput();\n}\n\nfunction focusSearchInput () {\n  searchInput.value.focus();\n}\nonMounted(() => {\n  focusSearchInput();\n});\n\ndefineExpose({\n  focusSearchInput,\n});\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAsDA,UAAM,QAAQ;AAEd,UAAM,cAAc,IAAI,IAAI;AAE5B,aAAS,cAAe;AACtB,YAAM,qBAAqB,EAAE;AAC7B;IACF;AAEA,aAAS,mBAAoB;AAC3B,kBAAY,MAAM;IACpB;AACA,cAAU,MAAM;AACd;IACF,CAAC;AAED,aAAa;AAAA,MACX;AAAA,IACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue3/components/emoji_picker/modules/emoji_selector.vue.cjs

@@ -0,0 +1,428 @@
+"use strict";
+const vue = require("vue");
+const dialtoneEmojis = require("@dialpad/dialtone-emojis");
+const emoji_picker_constants = require("../emoji_picker_constants.cjs");
+const useKeyboardNavigation = require("../composables/useKeyboardNavigation.cjs");
+const _hoisted_1 = { class: "d-emoji-picker__selector" };
+const _hoisted_2 = {
+  key: 0,
+  class: "d-emoji-picker__search-label d-emoji-picker__alignment"
+};
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = { class: "d-emoji-picker__tab" };
+const _hoisted_5 = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"];
+const _hoisted_6 = ["alt", "aria-label", "title", "src"];
+const _hoisted_7 = {
+  key: 2,
+  class: "d-emoji-picker__alignment"
+};
+const _hoisted_8 = {
+  class: "d-emoji-picker__tab",
+  "data-qa": "filtered-emojis"
+};
+const _hoisted_9 = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"];
+const _hoisted_10 = ["alt", "aria-label", "title", "src"];
+const _sfc_main = {
+  __name: "emoji_selector",
+  props: {
+    /**
+     * The filter to apply to the emoji list
+     * @type {String}
+     * @default ''
+     */
+    emojiFilter: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The skin tone to apply to the emoji list
+     * @type {String}
+     * @required
+     */
+    skinTone: {
+      type: String,
+      required: true
+    },
+    /**
+     * The labels for the tabset
+     * @type {Array}
+     * @required
+     */
+    tabsetLabels: {
+      type: Array,
+      required: true
+    },
+    selectedTabset: {
+      type: Object,
+      required: true
+    },
+    /**
+     * The label for the search results tab
+     * @type {String}
+     * @required
+     */
+    searchResultsLabel: {
+      type: String,
+      required: true
+    },
+    searchNoResultsLabel: {
+      type: String,
+      required: true
+    },
+    /**
+     * The list of recently used emojis
+     * @type {Array}
+     */
+    recentlyUsedEmojis: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: [
+    /**
+     * Emitted when the user hover over an emoji
+     * @event highlighted-emoji
+     * @param {Object} emoji - The emoji data that was hovered
+      */
+    "highlighted-emoji",
+    /**
+     * Emitted when the user select an emoji
+     * @event selected-emoji
+     * @param {Object} emoji - The emoji data that was selected
+      */
+    "selected-emoji",
+    /**
+     * Emitted when the user scroll into an emoji tab
+     * @event scroll-into-tab
+     * @param {Number} tab-index - The tab that was scrolled into
+      */
+    "scroll-into-tab",
+    /**
+     * Emitted when the scrollTo function starts scrolling and stops scrolling
+     * @event is-scrolling
+     * @param {Boolean} is-scrolling - Whether the user is scrolling with the scroll-to
+      */
+    "is-scrolling",
+    /**
+     * Emitted when the user reach the end of the emoji list
+     * @event focus-skin-selector
+      */
+    "focus-skin-selector",
+    /**
+     * Emitted when the user shift tab in first tab of emoji selector
+     * @event focus-search-input
+      */
+    "focus-search-input"
+  ],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const {
+      emojiFilteredRefs,
+      isFiltering,
+      hoverFirstEmoji,
+      setEmojiRef,
+      setFilteredRef,
+      focusEmoji,
+      handleArrowNavigationFiltered,
+      handleArrowNavigation
+    } = useKeyboardNavigation.useKeyboardNavigation();
+    const tabCategoryRef = vue.ref(null);
+    const listRef = vue.ref(null);
+    const tabLabelObserver = vue.ref(null);
+    const TABS_DATA = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"];
+    const tabLabels = vue.computed(() => {
+      return props.recentlyUsedEmojis.length ? props.tabsetLabels.map((label) => ({ label, ref: vue.ref(null) })) : props.tabsetLabels.slice(1).map((label) => ({ label, ref: vue.ref(null) }));
+    });
+    const fixedLabel = vue.ref(tabLabels.value[0].label);
+    const tabs = vue.computed(() => {
+      return props.recentlyUsedEmojis.length ? TABS_DATA : TABS_DATA.slice(1);
+    });
+    const filteredEmojis = vue.ref([]);
+    const currentEmojis = vue.computed(() => {
+      return [
+        ...dialtoneEmojis.emojisGrouped[`People${props.skinTone}`],
+        ...dialtoneEmojis.emojisGrouped.Nature,
+        ...dialtoneEmojis.emojisGrouped.Food,
+        ...dialtoneEmojis.emojisGrouped[`Activity${props.skinTone}`],
+        ...dialtoneEmojis.emojisGrouped.Travel,
+        ...dialtoneEmojis.emojisGrouped[`Objects${props.skinTone}`],
+        ...dialtoneEmojis.emojisGrouped.Symbols,
+        ...dialtoneEmojis.emojisGrouped.Flags
+      ];
+    });
+    const debouncedSearch = debounce(() => {
+      emojiFilteredRefs.value = [];
+      searchByNameAndKeywords();
+    });
+    vue.watch(currentEmojis, () => {
+      searchByNameAndKeywords();
+    }, { immediate: true });
+    vue.watch(
+      () => props.recentlyUsedEmojis,
+      () => {
+        dialtoneEmojis.emojisGrouped["Recently used"] = props.recentlyUsedEmojis;
+      },
+      { immediate: true }
+    );
+    vue.watch(() => props.emojiFilter, () => {
+      resetScroll();
+      if (props.emojiFilter) {
+        isFiltering.value = true;
+      } else {
+        isFiltering.value = false;
+        highlightEmoji(null);
+      }
+      debouncedSearch();
+    });
+    vue.watch(
+      () => props.selectedTabset,
+      (tab) => {
+        scrollToTab(tab.tabId);
+      },
+      { deep: true }
+    );
+    function hoverEmoji(emoji, isFirst = false) {
+      hoverFirstEmoji.value = isFirst;
+      emits("highlighted-emoji", emoji);
+    }
+    function searchByNameAndKeywords() {
+      const searchStr = props.emojiFilter.toLowerCase();
+      filteredEmojis.value = currentEmojis.value.filter((obj) => {
+        const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);
+        const keywordsIncludeSearchStr = obj.keywords.some((keyword) => keyword.toLowerCase().includes(searchStr));
+        return nameIncludesSearchStr || keywordsIncludeSearchStr;
+      });
+      vue.nextTick(() => {
+        if (searchStr) {
+          hoverEmoji(filteredEmojis.value[0], true);
+        }
+      });
+    }
+    function debounce(fn, delay = 300) {
+      let timeout;
+      return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => fn(...args), delay);
+      };
+    }
+    function getImgSrc(emoji) {
+      return `${emoji_picker_constants.CDN_URL + emoji}.png`;
+    }
+    function handleImageError(event) {
+      event.target.parentNode.style.display = "none";
+    }
+    function scrollToTab(tabIndex, focusFirstEmoji = true) {
+      const tabLabel = tabLabels.value[tabIndex - 1];
+      const tabElement = tabLabel.ref.value[0];
+      vue.nextTick(() => {
+        const container = listRef.value;
+        const offsetTop = tabIndex === "1" ? 0 : tabElement.offsetTop - 20;
+        let isScrolling = true;
+        let prevScrollTop = container.scrollTop;
+        emits("is-scrolling", true);
+        container.addEventListener("scroll", () => {
+          if (isScrolling) {
+            const scrollTop = container.scrollTop;
+            if (prevScrollTop < scrollTop && scrollTop >= offsetTop || prevScrollTop > scrollTop && scrollTop <= offsetTop) {
+              isScrolling = false;
+              emits("is-scrolling", false);
+            }
+            prevScrollTop = scrollTop;
+          }
+        });
+        container.scrollTop = offsetTop;
+        if (focusFirstEmoji) {
+          focusEmoji(tabIndex - 1, 0);
+        }
+      });
+    }
+    function resetScroll() {
+      const container = listRef.value;
+      container.scrollTop = 0;
+    }
+    function setTabLabelObserver() {
+      tabLabelObserver.value = new IntersectionObserver(async (entries) => {
+        emits("is-scrolling", false);
+        entries.forEach((entry) => {
+          var _a, _b, _c, _d, _e;
+          const { target } = entry;
+          const index = parseInt(target.dataset.index);
+          if (entry.isIntersecting && target.offsetTop <= tabCategoryRef.value.offsetTop + 50) {
+            fixedLabel.value = ((_a = tabLabels.value[index - 1]) == null ? void 0 : _a.label) ?? ((_b = tabLabels.value[0]) == null ? void 0 : _b.label);
+            emits("scroll-into-tab", index - 1);
+          } else if (entry.boundingClientRect.bottom <= ((_c = tabCategoryRef.value) == null ? void 0 : _c.getBoundingClientRect().bottom)) {
+            emits("scroll-into-tab", index);
+            fixedLabel.value = (_d = tabLabels.value[index]) == null ? void 0 : _d.label;
+          } else if (index === 1) {
+            emits("scroll-into-tab", index);
+            fixedLabel.value = (_e = tabLabels.value[0]) == null ? void 0 : _e.label;
+          }
+        });
+      });
+      tabLabelObserver.value.observe(tabCategoryRef.value);
+      Array.from(listRef.value.children).forEach((child, index) => {
+        tabLabelObserver.value.observe(child);
+        child.dataset.index = index;
+      });
+    }
+    const handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {
+      event.preventDefault();
+      if (Object.values(emoji_picker_constants.ARROW_KEYS).includes(event.key)) {
+        handleArrowNavigationFiltered(event.key, indexEmoji);
+        return;
+      }
+      switch (event.key) {
+        case "Tab":
+          emits("focus-skin-selector");
+          break;
+        case "Enter":
+          selectEmoji(emoji);
+          break;
+      }
+    };
+    const handleKeyDown = (event, indexTab, indexEmoji, emoji) => {
+      event.preventDefault();
+      if (Object.values(emoji_picker_constants.ARROW_KEYS).includes(event.key)) {
+        handleArrowNavigation(event.key, indexTab, indexEmoji);
+        return;
+      }
+      switch (event.key) {
+        case "Tab":
+          if (event.shiftKey) {
+            if (focusEmoji(indexTab, 0) && indexTab > 0) {
+              scrollToTab(indexTab, true);
+            } else {
+              scrollToTab(1, false);
+              emits("focus-search-input");
+            }
+          } else {
+            if (focusEmoji(indexTab + 1, 0)) {
+              scrollToTab(indexTab + 1 + 1, false);
+            } else {
+              emits("focus-skin-selector");
+            }
+          }
+          break;
+        case "Enter":
+          selectEmoji(emoji);
+          break;
+      }
+    };
+    function selectEmoji(emoji) {
+      emits("selected-emoji", emoji);
+    }
+    function highlightEmoji(emoji) {
+      emits("highlighted-emoji", emoji);
+    }
+    function focusEmojiSelector() {
+      focusEmoji(0, 0);
+    }
+    function focusLastEmoji() {
+      focusEmoji(tabs.value.length - 1, 0);
+    }
+    vue.onMounted(() => {
+      setTabLabelObserver();
+    });
+    vue.onUnmounted(() => {
+      tabLabelObserver.value.disconnect();
+    });
+    __expose({
+      focusEmojiSelector,
+      focusLastEmoji
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", {
+          id: "d-emoji-picker-list",
+          ref_key: "listRef",
+          ref: listRef,
+          class: "d-emoji-picker__list"
+        }, [
+          __props.emojiFilter ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_2, vue.toDisplayString(filteredEmojis.value.length > 0 ? __props.searchResultsLabel : __props.searchNoResultsLabel), 1)) : (vue.openBlock(), vue.createElementBlock("div", {
+            key: 1,
+            ref_key: "tabCategoryRef",
+            ref: tabCategoryRef,
+            class: "d-emoji-picker__category d-emoji-picker__alignment"
+          }, [
+            vue.createElementVNode("p", null, vue.toDisplayString(fixedLabel.value), 1)
+          ], 512)),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tabLabels.value, (tabLabel, indexTab) => {
+            return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+              key: indexTab,
+              ref_for: true,
+              ref: tabLabel.ref,
+              class: "d-emoji-picker__alignment"
+            }, [
+              indexTab ? (vue.openBlock(), vue.createElementBlock("p", _hoisted_3, vue.toDisplayString(tabLabel.label), 1)) : vue.createCommentVNode("", true),
+              vue.createElementVNode("div", _hoisted_4, [
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(dialtoneEmojis.emojisGrouped)[tabs.value[indexTab] + __props.skinTone] ? vue.unref(dialtoneEmojis.emojisGrouped)[tabs.value[indexTab] + __props.skinTone] : vue.unref(dialtoneEmojis.emojisGrouped)[tabs.value[indexTab]], (emoji, indexEmoji) => {
+                  return vue.openBlock(), vue.createElementBlock("button", {
+                    key: emoji.shortname,
+                    ref_for: true,
+                    ref: (el) => {
+                      if (el) vue.unref(setEmojiRef)(el, indexTab, indexEmoji);
+                    },
+                    type: "button",
+                    "aria-label": emoji.name,
+                    onClick: ($event) => selectEmoji(emoji),
+                    onFocusin: ($event) => highlightEmoji(emoji),
+                    onFocusout: _cache[0] || (_cache[0] = ($event) => highlightEmoji(null)),
+                    onMouseover: ($event) => highlightEmoji(emoji),
+                    onMouseleave: _cache[1] || (_cache[1] = ($event) => highlightEmoji(null)),
+                    onKeydown: (event) => handleKeyDown(event, indexTab, indexEmoji, emoji)
+                  }, [
+                    vue.createElementVNode("img", {
+                      class: "d-icon d-icon--size-500",
+                      alt: emoji.name,
+                      "aria-label": emoji.name,
+                      title: emoji.name,
+                      src: getImgSrc(emoji.unicode_character),
+                      onError: handleImageError
+                    }, null, 40, _hoisted_6)
+                  ], 40, _hoisted_5);
+                }), 128))
+              ])
+            ])), [
+              [vue.vShow, !__props.emojiFilter]
+            ]);
+          }), 128)),
+          __props.emojiFilter ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+            vue.createElementVNode("div", _hoisted_8, [
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(filteredEmojis.value, (emoji, index) => {
+                return vue.openBlock(), vue.createElementBlock("button", {
+                  key: emoji.shortname,
+                  ref_for: true,
+                  ref: (el) => {
+                    if (el) vue.unref(setFilteredRef)(el, index);
+                  },
+                  type: "button",
+                  "aria-label": emoji.name,
+                  class: vue.normalizeClass({
+                    "hover-emoji": index === 0 && vue.unref(hoverFirstEmoji)
+                  }),
+                  onClick: ($event) => selectEmoji(emoji),
+                  onFocusin: ($event) => highlightEmoji(emoji),
+                  onFocusout: _cache[2] || (_cache[2] = ($event) => highlightEmoji(null)),
+                  onMouseover: ($event) => hoverEmoji(emoji),
+                  onMouseleave: _cache[3] || (_cache[3] = ($event) => hoverEmoji(null)),
+                  onKeydown: (event) => handleKeyDownFilteredEmojis(event, index, emoji)
+                }, [
+                  vue.createElementVNode("img", {
+                    class: "d-icon d-icon--size-500",
+                    alt: emoji.name,
+                    "aria-label": emoji.name,
+                    title: emoji.name,
+                    src: `${vue.unref(emoji_picker_constants.CDN_URL) + emoji.unicode_character}.png`
+                  }, null, 8, _hoisted_10)
+                ], 42, _hoisted_9);
+              }), 128))
+            ])
+          ])) : vue.createCommentVNode("", true)
+        ], 512)
+      ]);
+    };
+  }
+};
+module.exports = _sfc_main;
+//# sourceMappingURL=emoji_selector.vue.cjs.map