@dialpad/dialtone-vue 2.126.0 → 2.127.1

package/dist/lib/emoji-picker.js

@@ -1,43 +1,42 @@
-import { D as b, a as k } from "../chunks/tab-Qm9LVkYj.js";
-import { DtIcon as p } from "./icon.js";
-import { n as m } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-import { DtInput as _ } from "./input.js";
-import { emojisGrouped as j } from "@dialpad/dialtone-emojis";
-import { DtTooltip as g } from "./tooltip.js";
+import { DtTabGroup, DtTab } from "../chunks/tab-V4cb44Ry.js";
+import { DtIcon } from "./icon.js";
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+import { DtInput } from "./input.js";
+import { emojisGrouped } from "@dialpad/dialtone-emojis";
+import { DtTooltip } from "./tooltip.js";
 import "./button.js";
 import "vue";
-import "../chunks/link_constants-vIUB92L4.js";
+import "../chunks/link_constants-nWVlXQBs.js";
 import "@dialpad/dialtone-icons/vue2";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
-import "./constants.js";
-import "./utils.js";
-import "../chunks/input-1tm09l_-.js";
-import "./validators.js";
+import "../common/constants.js";
+import "../common/utils.js";
+import "../chunks/input-6kbd8Pju.js";
+import "../common/validators.js";
 import "./validation-messages.js";
-import "../chunks/popover_constants-qjlEkroB.js";
+import "../chunks/popover_constants-Qkpb0yh2.js";
 import "tippy.js";
 import "./lazy-show.js";
-const y = {
+const _sfc_main$5 = {
   name: "EmojiTabset",
   components: {
-    DtTabGroup: b,
-    DtTab: k,
-    DtIcon: p
+    DtTabGroup,
+    DtTab,
+    DtIcon
   },
   props: {
     showRecentlyUsedTab: {
       type: Boolean,
-      default: !1
+      default: false
     },
     scrollIntoTab: {
       type: Number,
-      required: !0
+      required: true
     },
     isScrolling: {
       type: Boolean,
-      default: !1
+      default: false
     },
     emojiFilter: {
       type: String,
@@ -45,7 +44,7 @@ const y = {
     },
     tabSetLabels: {
       type: Array,
-      required: !0
+      required: true
     }
   },
   data() {
@@ -53,25 +52,26 @@ const y = {
       selectedTab: "1",
       tabsetRef: [],
       TABS_DATA: [
-        { label: u.MOST_RECENTLY_USED, icon: "clock" },
-        { label: u.SMILEYS_AND_PEOPLE, icon: "satisfied" },
-        { label: u.NATURE, icon: "living-thing" },
-        { label: u.FOOD, icon: "food" },
-        { label: u.ACTIVITY, icon: "object" },
-        { label: u.TRAVEL, icon: "transportation" },
-        { label: u.OBJECTS, icon: "lightbulb" },
-        { label: u.SYMBOLS, icon: "heart" },
-        { label: u.FLAGS, icon: "flag" }
+        { label: EMOJI_PICKER_CATEGORIES.MOST_RECENTLY_USED, icon: "clock" },
+        { label: EMOJI_PICKER_CATEGORIES.SMILEYS_AND_PEOPLE, icon: "satisfied" },
+        { label: EMOJI_PICKER_CATEGORIES.NATURE, icon: "living-thing" },
+        { label: EMOJI_PICKER_CATEGORIES.FOOD, icon: "food" },
+        { label: EMOJI_PICKER_CATEGORIES.ACTIVITY, icon: "object" },
+        { label: EMOJI_PICKER_CATEGORIES.TRAVEL, icon: "transportation" },
+        { label: EMOJI_PICKER_CATEGORIES.OBJECTS, icon: "lightbulb" },
+        { label: EMOJI_PICKER_CATEGORIES.SYMBOLS, icon: "heart" },
+        { label: EMOJI_PICKER_CATEGORIES.FLAGS, icon: "flag" }
       ]
     };
   },
   computed: {
     tabs() {
-      return (this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1)).map((e, i) => ({
-        ...e,
-        label: this.tabSetLabels[i],
-        id: (i + 1).toString(),
-        panelId: (i + 1).toString()
+      const tabsData = this.showRecentlyUsedTab ? this.TABS_DATA : this.TABS_DATA.slice(1);
+      return tabsData.map((tab, index) => ({
+        ...tab,
+        label: this.tabSetLabels[index],
+        id: (index + 1).toString(),
+        panelId: (index + 1).toString()
       }));
     },
     isSearching() {
@@ -79,11 +79,15 @@ const y = {
     }
   },
   watch: {
-    scrollIntoTab: function(t) {
-      !this.isScrolling && !this.isSearching && (this.selectedTab = (t + 1).toString());
+    scrollIntoTab: function(newVal) {
+      if (!this.isScrolling && !this.isSearching) {
+        this.selectedTab = (newVal + 1).toString();
+      }
     },
-    isSearching: function(t) {
-      t && (this.selectedTab = null);
+    isSearching: function(newVal) {
+      if (newVal) {
+        this.selectedTab = null;
+      }
     }
   },
   mounted() {
@@ -92,54 +96,81 @@ const y = {
     });
   },
   methods: {
-    selectTabset(t) {
-      this.isScrolling || (this.selectedTab = t), this.$emit("selected-tabset", t);
+    selectTabset(id) {
+      if (!this.isScrolling) {
+        this.selectedTab = id;
+      }
+      this.$emit("selected-tabset", id);
     },
     setTabsetRef() {
-      this.tabs.forEach((t, e) => {
-        const i = `tabsetRef-${e}`;
-        this.$refs[i] && this.$set(this.tabsetRef, e, this.$refs[i][0].$el);
+      this.tabs.forEach((skin, index) => {
+        const refKey = `tabsetRef-${index}`;
+        if (this.$refs[refKey]) {
+          this.$set(this.tabsetRef, index, this.$refs[refKey][0].$el);
+        }
       });
     },
     focusTabset() {
-      this.tabsetRef[0] && this.tabsetRef[0].focus();
+      if (this.tabsetRef[0]) {
+        this.tabsetRef[0].focus();
+      }
     },
-    handleKeyDown(t, e) {
-      t.key === "Enter" && (this.selectTabset(e), this.tabsetRef[e - 1] && this.tabsetRef[e - 1].blur()), t.key === "Tab" && (t.preventDefault(), t.shiftKey ? this.$emit("focus-skin-selector") : this.$emit("focus-search-input")), t.key === "ArrowDown" && this.$emit("focus-search-input");
+    handleKeyDown(event, tabId) {
+      if (event.key === "Enter") {
+        this.selectTabset(tabId);
+        if (this.tabsetRef[tabId - 1]) {
+          this.tabsetRef[tabId - 1].blur();
+        }
+      }
+      if (event.key === "Tab") {
+        event.preventDefault();
+        if (event.shiftKey) {
+          this.$emit("focus-skin-selector");
+        } else {
+          this.$emit("focus-search-input");
+        }
+      }
+      if (event.key === "ArrowDown") {
+        this.$emit("focus-search-input");
+      }
     }
   }
 };
-var R = function() {
-  var e = this, i = e._self._c;
-  return i("div", { staticClass: "d-emoji-picker__tabset" }, [i("dt-tab-group", { attrs: { "tab-list-class": "d-emoji-picker__tabset-list", selected: e.selectedTab }, scopedSlots: e._u([{ key: "tabs", fn: function() {
-    return e._l(e.tabs, function(s, r) {
-      return i("dt-tab", { key: s.id, ref: `tabsetRef-${r}`, refInFor: !0, attrs: { id: s.id, "panel-id": s.panelId, label: s.label, "aria-controls": "d-emoji-picker-list", tabindex: r + 1 }, on: { "!click": function(o) {
-        return o.stopPropagation(), e.selectTabset(s.id);
-      }, keydown: function(o) {
-        return e.handleKeyDown(o, s.id);
-      } } }, [i("dt-icon", { attrs: { size: "400", name: s.icon } })], 1);
+var _sfc_render$5 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "d-emoji-picker__tabset" }, [_c("dt-tab-group", { attrs: { "tab-list-class": "d-emoji-picker__tabset-list", "selected": _vm.selectedTab }, scopedSlots: _vm._u([{ key: "tabs", fn: function() {
+    return _vm._l(_vm.tabs, function(tab, index) {
+      return _c("dt-tab", { key: tab.id, ref: `tabsetRef-${index}`, refInFor: true, attrs: { "id": tab.id, "panel-id": tab.panelId, "label": tab.label, "aria-controls": "d-emoji-picker-list", "tabindex": index + 1 }, on: { "!click": function($event) {
+        $event.stopPropagation();
+        return _vm.selectTabset(tab.id);
+      }, "keydown": function($event) {
+        return _vm.handleKeyDown($event, tab.id);
+      } } }, [_c("dt-icon", { attrs: { "size": "400", "name": tab.icon } })], 1);
     });
-  }, proxy: !0 }]) })], 1);
-}, S = [], E = /* @__PURE__ */ m(
-  y,
-  R,
-  S,
-  !1,
+  }, proxy: true }]) })], 1);
+};
+var _sfc_staticRenderFns$5 = [];
+var __component__$5 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$5,
+  _sfc_render$5,
+  _sfc_staticRenderFns$5,
+  false,
   null,
   null,
   null,
   null
 );
-const $ = E.exports, T = {
+const EmojiTabset = __component__$5.exports;
+const _sfc_main$4 = {
   name: "EmojiSearch",
   components: {
-    DtInput: _,
-    DtIcon: p
+    DtInput,
+    DtIcon
   },
   props: {
     searchPlaceholderLabel: {
       type: String,
-      required: !0
+      required: true
     },
     modelValue: {
       type: String,
@@ -150,8 +181,8 @@ const $ = E.exports, T = {
     this.focusSearchInput();
   },
   methods: {
-    updateModelValue(t) {
-      this.$emit("update:model-value", t);
+    updateModelValue(value) {
+      this.$emit("update:model-value", value);
     },
     focusEmojiSelector() {
       this.$emit("focus-emoji-selector");
@@ -163,39 +194,52 @@ const $ = E.exports, T = {
       this.$emit("select-first-emoji");
     },
     clearSearch() {
-      this.$emit("update:model-value", ""), this.focusSearchInput();
+      this.$emit("update:model-value", "");
+      this.focusSearchInput();
     },
     focusSearchInput() {
       this.$refs.searchInputRef.focus();
     }
   }
 };
-var v = function() {
-  var e = this, i = e._self._c;
-  return i("div", { staticClass: "d-emoji-picker__search d-emoji-picker__alignment" }, [i("dt-input", { ref: "searchInputRef", attrs: { id: "searchInput", placeholder: e.searchPlaceholderLabel, value: e.modelValue }, on: { input: e.updateModelValue, keydown: [function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "up", 38, s.key, ["Up", "ArrowUp"]) ? null : e.focusTabset.apply(null, arguments);
-  }, function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "down", 40, s.key, ["Down", "ArrowDown"]) ? null : (s.preventDefault(), e.focusEmojiSelector.apply(null, arguments));
-  }, function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : e.selectFirstEmoji.apply(null, arguments);
-  }] }, scopedSlots: e._u([{ key: "leftIcon", fn: function() {
-    return [i("dt-icon", { attrs: { name: "search", size: "200" } })];
-  }, proxy: !0 }, e.modelValue.length > 0 ? { key: "rightIcon", fn: function() {
-    return [i("button", { staticClass: "d-emoji-picker__search-button", on: { click: e.clearSearch, keydown: function(s) {
-      return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : e.clearSearch.apply(null, arguments);
-    } } }, [i("dt-icon", { attrs: { name: "close" } })], 1)];
-  }, proxy: !0 } : null], null, !0) })], 1);
-}, L = [], w = /* @__PURE__ */ m(
-  T,
-  v,
-  L,
-  !1,
+var _sfc_render$4 = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "d-emoji-picker__search d-emoji-picker__alignment" }, [_c("dt-input", { ref: "searchInputRef", attrs: { "id": "searchInput", "placeholder": _vm.searchPlaceholderLabel, "value": _vm.modelValue }, on: { "input": _vm.updateModelValue, "keydown": [function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]))
+      return null;
+    return _vm.focusTabset.apply(null, arguments);
+  }, function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]))
+      return null;
+    $event.preventDefault();
+    return _vm.focusEmojiSelector.apply(null, arguments);
+  }, function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
+      return null;
+    return _vm.selectFirstEmoji.apply(null, arguments);
+  }] }, scopedSlots: _vm._u([{ key: "leftIcon", fn: function() {
+    return [_c("dt-icon", { attrs: { "name": "search", "size": "200" } })];
+  }, proxy: true }, _vm.modelValue.length > 0 ? { key: "rightIcon", fn: function() {
+    return [_c("button", { staticClass: "d-emoji-picker__search-button", on: { "click": _vm.clearSearch, "keydown": function($event) {
+      if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
+        return null;
+      return _vm.clearSearch.apply(null, arguments);
+    } } }, [_c("dt-icon", { attrs: { "name": "close" } })], 1)];
+  }, proxy: true } : null], null, true) })], 1);
+};
+var _sfc_staticRenderFns$4 = [];
+var __component__$4 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$4,
+  _sfc_render$4,
+  _sfc_staticRenderFns$4,
+  false,
   null,
   null,
   null,
   null
 );
-const A = w.exports, I = {
+const EmojiSearch = __component__$4.exports;
+const _sfc_main$3 = {
   name: "EmojiSelector",
   props: {
     emojiFilter: {
@@ -204,23 +248,23 @@ const A = w.exports, I = {
     },
     skinTone: {
       type: String,
-      required: !0
+      required: true
     },
     tabSetLabels: {
       type: Array,
-      required: !0
+      required: true
     },
     selectedTabset: {
       type: Object,
-      required: !0
+      required: true
     },
     searchResultsLabel: {
       type: String,
-      required: !0
+      required: true
     },
     searchNoResultsLabel: {
       type: String,
-      required: !0
+      required: true
     },
     recentlyUsedEmojis: {
       type: Array,
@@ -231,8 +275,8 @@ const A = w.exports, I = {
     return {
       emojiRefs: [],
       emojiFilteredRefs: [],
-      isFiltering: !1,
-      hoverFirstEmoji: !0,
+      isFiltering: false,
+      hoverFirstEmoji: true,
       fixedLabel: "",
       filteredEmojis: [],
       TABS_DATA: ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"],
@@ -253,13 +297,13 @@ const A = w.exports, I = {
       ];
     },
     emojis() {
-      return j;
+      return emojisGrouped;
     },
     CDN_URL() {
-      return d;
+      return CDN_URL;
     },
     tabLabels() {
-      return this.recentlyUsedEmojis.length ? this.tabSetLabels.map((t, e) => ({ label: t, ref: this.$refs[`tabLabelRef-${e}`] })) : this.tabSetLabels.slice(1).map((t, e) => ({ label: t, ref: this.$refs[`tabLabelRef-${e}`] }));
+      return this.recentlyUsedEmojis.length ? this.tabSetLabels.map((label, index) => ({ label, ref: this.$refs[`tabLabelRef-${index}`] })) : this.tabSetLabels.slice(1).map((label, index) => ({ label, ref: this.$refs[`tabLabelRef-${index}`] }));
     },
     tabs() {
       return this.recentlyUsedEmojis.length ? this.TABS_DATA : this.TABS_DATA.slice(1);
@@ -270,24 +314,31 @@ const A = w.exports, I = {
       handler() {
         this.searchByNameAndKeywords();
       },
-      immediate: !0
+      immediate: true
     },
     recentlyUsedEmojis: {
-      handler(t) {
-        this.emojis["Recently used"] = t;
+      handler(newValue) {
+        this.emojis["Recently used"] = newValue;
       },
-      immediate: !0
+      immediate: true
     },
     emojiFilter: {
-      handler(t) {
-        this.resetScroll(), t ? this.isFiltering = !0 : (this.isFiltering = !1, this.$emit("highlighted-emoji", null)), this.debouncedSearch();
+      handler(newFilter) {
+        this.resetScroll();
+        if (newFilter) {
+          this.isFiltering = true;
+        } else {
+          this.isFiltering = false;
+          this.$emit("highlighted-emoji", null);
+        }
+        this.debouncedSearch();
       }
     },
     selectedTabset: {
-      handler(t) {
-        this.scrollToTab(t.tabId);
+      handler(newValue) {
+        this.scrollToTab(newValue.tabId);
       },
-      deep: !0
+      deep: true
     }
   },
   created() {
@@ -295,159 +346,308 @@ const A = w.exports, I = {
   },
   mounted() {
     this.$nextTick(() => {
-      this.setupEmojiRefs(), this.setupFilteredRefs(), this.setupTabLabelRefs(), this.setTabLabelObserver();
+      this.setupEmojiRefs();
+      this.setupFilteredRefs();
+      this.setupTabLabelRefs();
+      this.setTabLabelObserver();
     });
   },
   beforeDestroy() {
-    this.tabLabelObserver && this.tabLabelObserver.disconnect();
+    if (this.tabLabelObserver) {
+      this.tabLabelObserver.disconnect();
+    }
   },
   methods: {
     setupTabLabelRefs() {
-      var t;
-      (t = this.tabSetLabels) == null || t.forEach((e, i) => {
-        const s = `tabLabelRef-${i}`;
-        this.$refs[s] && this.$set(this.tabLabels, i, { label: e, ref: this.$refs[s] });
+      var _a;
+      (_a = this.tabSetLabels) == null ? void 0 : _a.forEach((label, index) => {
+        const refKey = `tabLabelRef-${index}`;
+        if (this.$refs[refKey]) {
+          this.$set(this.tabLabels, index, { label, ref: this.$refs[refKey] });
+        }
       });
     },
     setupFilteredRefs() {
-      this.emojiFilteredRefs = [], this.filteredEmojis.forEach((t, e) => {
-        const i = `filteredEmoji-${e}`;
-        this.$refs[i] && this.setFilteredRef(this.$refs[i], e);
+      this.emojiFilteredRefs = [];
+      this.filteredEmojis.forEach((emoji, index) => {
+        const refKey = `filteredEmoji-${index}`;
+        if (this.$refs[refKey]) {
+          this.setFilteredRef(this.$refs[refKey], index);
+        }
       });
     },
     setupEmojiRefs() {
-      for (let t = 0; t < this.tabs.length; t++) {
-        const e = `emojiRef-${t}`;
-        this.$refs[e] && this.$refs[e].forEach((i, s) => {
-          i && this.setEmojiRef(i, t, s);
-        });
+      for (let i = 0; i < this.tabs.length; i++) {
+        const refKey = `emojiRef-${i}`;
+        if (this.$refs[refKey]) {
+          this.$refs[refKey].forEach((el, indexEmoji) => {
+            if (el) {
+              this.setEmojiRef(el, i, indexEmoji);
+            }
+          });
+        }
       }
     },
     searchByNameAndKeywords() {
-      const t = this.emojiFilter.toLowerCase();
-      this.filteredEmojis = this.currentEmojis.filter(function(e) {
-        const i = e.name.toLowerCase().includes(t), s = e.keywords.some(function(r) {
-          return r.toLowerCase().includes(t);
+      const searchStr = this.emojiFilter.toLowerCase();
+      this.filteredEmojis = this.currentEmojis.filter(function(obj) {
+        const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);
+        const keywordsIncludeSearchStr = obj.keywords.some(function(keyword) {
+          return keyword.toLowerCase().includes(searchStr);
         });
-        return i || s;
-      }), this.$nextTick(function() {
-        t && (this.hoverEmoji(this.filteredEmojis[0], !0), this.setupFilteredRefs());
+        return nameIncludesSearchStr || keywordsIncludeSearchStr;
+      });
+      this.$nextTick(function() {
+        if (searchStr) {
+          this.hoverEmoji(this.filteredEmojis[0], true);
+          this.setupFilteredRefs();
+        }
       });
     },
-    debounce: function(t, e) {
-      e === void 0 && (e = 300);
-      let i;
+    debounce: function(fn, delay) {
+      if (delay === void 0) {
+        delay = 300;
+      }
+      let timeout;
       return function() {
-        const s = [];
-        let r = arguments.length;
-        for (; r--; )
-          s[r] = arguments[r];
-        clearTimeout(i), i = setTimeout(function() {
-          t.apply(void 0, s);
-        }, e);
+        const args = [];
+        let len = arguments.length;
+        while (len--)
+          args[len] = arguments[len];
+        clearTimeout(timeout);
+        timeout = setTimeout(function() {
+          fn.apply(void 0, args);
+        }, delay);
       };
     },
-    getImgSrc: function(t) {
-      return this.CDN_URL + t + ".png";
-    },
-    handleImageError: function(t) {
-      t.target.parentNode.style.display = "none";
-    },
-    scrollToTab: function(t, e) {
-      const i = this;
-      e === void 0 && (e = !0);
-      const r = i.tabLabels[t - 1].ref[0];
-      i.$nextTick(function() {
-        const o = i.$refs.listRef, n = t === "1" ? 0 : r.offsetTop - 20;
-        let l = !0, c = o.scrollTop;
-        i.$emit("is-scrolling", !0), o.addEventListener("scroll", function() {
-          if (l) {
-            const f = o.scrollTop;
-            (c < f && f >= n || c > f && f <= n) && (l = !1, i.$emit("is-scrolling", !1)), c = f;
+    getImgSrc: function(emoji) {
+      return this.CDN_URL + emoji + ".png";
+    },
+    handleImageError: function(event) {
+      event.target.parentNode.style.display = "none";
+    },
+    scrollToTab: function(tabIndex, focusFirstEmoji) {
+      const vm = this;
+      if (focusFirstEmoji === void 0) {
+        focusFirstEmoji = true;
+      }
+      const tabLabel = vm.tabLabels[tabIndex - 1];
+      const tabElement = tabLabel.ref[0];
+      vm.$nextTick(function() {
+        const container = vm.$refs.listRef;
+        const offsetTop = tabIndex === "1" ? 0 : tabElement.offsetTop - 20;
+        let isScrolling = true;
+        let prevScrollTop = container.scrollTop;
+        vm.$emit("is-scrolling", true);
+        container.addEventListener("scroll", function() {
+          if (isScrolling) {
+            const scrollTop = container.scrollTop;
+            if (prevScrollTop < scrollTop && scrollTop >= offsetTop || prevScrollTop > scrollTop && scrollTop <= offsetTop) {
+              isScrolling = false;
+              vm.$emit("is-scrolling", false);
+            }
+            prevScrollTop = scrollTop;
           }
-        }), o.scrollTop = n, e && i.focusEmoji(t - 1, 0);
+        });
+        container.scrollTop = offsetTop;
+        if (focusFirstEmoji) {
+          vm.focusEmoji(tabIndex - 1, 0);
+        }
       });
     },
     resetScroll: function() {
-      const t = this.$refs.listRef;
-      t.scrollTop = 0;
+      const container = this.$refs.listRef;
+      container.scrollTop = 0;
     },
     focusEmojiSelector: function() {
       this.focusEmoji(0, 0);
     },
-    hoverEmoji(t, e) {
-      e === void 0 && (e = !1), this.hoverFirstEmoji = e, this.$emit("highlighted-emoji", t);
-    },
-    setEmojiRef: function(t, e, i) {
-      this.emojiRefs[e] || this.$set(this.emojiRefs, e, []), this.$set(this.emojiRefs[e], i, t);
+    hoverEmoji(emoji, isFirst) {
+      if (isFirst === void 0) {
+        isFirst = false;
+      }
+      this.hoverFirstEmoji = isFirst;
+      this.$emit("highlighted-emoji", emoji);
     },
-    setFilteredRef: function(t, e) {
-      this.$set(this.emojiFilteredRefs, e, t);
+    setEmojiRef: function(el, indexTab, indexEmoji) {
+      if (!this.emojiRefs[indexTab]) {
+        this.$set(this.emojiRefs, indexTab, []);
+      }
+      this.$set(this.emojiRefs[indexTab], indexEmoji, el);
     },
-    focusEmoji: function(t, e) {
-      var s;
-      const i = this.isFiltering ? (s = this.emojiFilteredRefs[e]) == null ? void 0 : s[0] : this.emojiRefs[t] && this.emojiRefs[t][e];
-      return i ? (i.focus(), !0) : !1;
+    setFilteredRef: function(el, index) {
+      this.$set(this.emojiFilteredRefs, index, el);
     },
-    handleKeyDown: function(t, e, i, s) {
-      var r, o;
-      if (t.preventDefault(), t.key === "ArrowUp") {
-        const n = i % a;
-        if (e === 0) {
-          const l = a - this.emojiRefs[this.emojiRefs.length - 1].length % a, c = this.emojiRefs[this.emojiRefs.length - 1].length + l - (a - n);
-          this.focusEmoji(this.emojiRefs.length - 1, c) || this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);
+    focusEmoji: function(indexTab, indexEmoji) {
+      var _a;
+      const emojiRef = this.isFiltering ? (_a = this.emojiFilteredRefs[indexEmoji]) == null ? void 0 : _a[0] : this.emojiRefs[indexTab] && this.emojiRefs[indexTab][indexEmoji];
+      if (emojiRef) {
+        emojiRef.focus();
+        return true;
+      }
+      return false;
+    },
+    handleKeyDown: function(event, indexTab, indexEmoji, emoji) {
+      var _a, _b;
+      event.preventDefault();
+      if (event.key === "ArrowUp") {
+        const position = indexEmoji % EMOJIS_PER_ROW;
+        if (indexTab === 0) {
+          const numberOfMissingEmojis = EMOJIS_PER_ROW - this.emojiRefs[this.emojiRefs.length - 1].length % EMOJIS_PER_ROW;
+          const emojiToJump = this.emojiRefs[this.emojiRefs.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);
+          if (!this.focusEmoji(this.emojiRefs.length - 1, emojiToJump)) {
+            this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);
+          }
           return;
         }
-        if (!this.focusEmoji(e, i - a)) {
-          const l = e - 1 < 0 ? 0 : e - 1, c = this.emojiRefs[l].length, f = c - c % a + n;
-          this.focusEmoji(l, f) || this.focusEmoji(e - 1, this.emojiRefs[e - 1].length - 1);
+        if (!this.focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {
+          const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;
+          const emojisInPreviousTab = this.emojiRefs[previousTab].length;
+          const lastEmojiPosition = emojisInPreviousTab - emojisInPreviousTab % EMOJIS_PER_ROW + position;
+          if (!this.focusEmoji(previousTab, lastEmojiPosition)) {
+            this.focusEmoji(indexTab - 1, this.emojiRefs[indexTab - 1].length - 1);
+          }
+        }
+      }
+      if (event.key === "ArrowDown") {
+        if (!this.focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {
+          const position = indexEmoji % EMOJIS_PER_ROW;
+          if ((_b = (_a = this.emojiRefs) == null ? void 0 : _a[indexTab]) == null ? void 0 : _b[indexEmoji + (EMOJIS_PER_ROW - position)]) {
+            this.focusEmoji(indexTab, this.emojiRefs[indexTab].length - 1);
+          } else {
+            if (!this.focusEmoji(indexTab + 1, position)) {
+              if (!this.focusEmoji(0, position)) {
+                this.focusEmoji(0, this.emojiRefs[0].length - 1);
+              }
+            }
+          }
         }
       }
-      if (t.key === "ArrowDown" && !this.focusEmoji(e, i + a)) {
-        const n = i % a;
-        (o = (r = this.emojiRefs) == null ? void 0 : r[e]) != null && o[i + (a - n)] ? this.focusEmoji(e, this.emojiRefs[e].length - 1) : this.focusEmoji(e + 1, n) || this.focusEmoji(0, n) || this.focusEmoji(0, this.emojiRefs[0].length - 1);
+      if (event.key === "ArrowLeft") {
+        this.handleHorizontalNavigation("left", indexTab, indexEmoji);
+      }
+      if (event.key === "ArrowRight") {
+        this.handleHorizontalNavigation("right", indexTab, indexEmoji);
+      }
+      if (event.key === "Tab") {
+        if (this.focusEmoji(indexTab + 1, 0)) {
+          this.scrollToTab(indexTab + 1 + 1, false);
+        } else {
+          this.$emit("focus-skin-selector");
+        }
+      }
+      if (event.key === "Tab" && event.shiftKey) {
+        if (this.focusEmoji(indexTab, 0) && indexTab > 0) {
+          this.scrollToTab(indexTab, true);
+        } else {
+          this.scrollToTab(1, false);
+          this.$emit("focus-search-input");
+        }
+      }
+      if (event.key === "Enter") {
+        this.$emit("selected-emoji", emoji);
       }
-      t.key === "ArrowLeft" && this.handleHorizontalNavigation("left", e, i), t.key === "ArrowRight" && this.handleHorizontalNavigation("right", e, i), t.key === "Tab" && (this.focusEmoji(e + 1, 0) ? this.scrollToTab(e + 1 + 1, !1) : this.$emit("focus-skin-selector")), t.key === "Tab" && t.shiftKey && (this.focusEmoji(e, 0) && e > 0 ? this.scrollToTab(e, !0) : (this.scrollToTab(1, !1), this.$emit("focus-search-input"))), t.key === "Enter" && this.$emit("selected-emoji", s);
     },
-    handleHorizontalNavigation: function(t, e, i) {
-      this.isFiltering ? t === "left" ? this.handleArrowLeftFiltered(e, i) : t === "right" && this.handleArrowRightFiltered(e, i) : t === "left" ? this.handleArrowLeft(e, i) : t === "right" && this.handleArrowRight(e, i);
+    handleHorizontalNavigation: function(direction, indexTab, indexEmoji) {
+      if (this.isFiltering) {
+        if (direction === "left") {
+          this.handleArrowLeftFiltered(indexTab, indexEmoji);
+        } else if (direction === "right") {
+          this.handleArrowRightFiltered(indexTab, indexEmoji);
+        }
+      } else {
+        if (direction === "left") {
+          this.handleArrowLeft(indexTab, indexEmoji);
+        } else if (direction === "right") {
+          this.handleArrowRight(indexTab, indexEmoji);
+        }
+      }
     },
-    handleArrowLeftFiltered: function(t, e) {
-      this.focusEmoji(0, e - 1) || this.focusEmoji(0, this.emojiFilteredRefs.length - 1);
+    handleArrowLeftFiltered: function(indexTab, indexEmoji) {
+      if (!this.focusEmoji(0, indexEmoji - 1)) {
+        this.focusEmoji(0, this.emojiFilteredRefs.length - 1);
+      }
     },
-    handleArrowRightFiltered: function(t, e) {
-      this.focusEmoji(0, e + 1) || this.focusEmoji(0, 0);
+    handleArrowRightFiltered: function(indexTab, indexEmoji) {
+      if (!this.focusEmoji(0, indexEmoji + 1)) {
+        this.focusEmoji(0, 0);
+      }
     },
-    handleArrowLeft: function(t, e) {
-      this.focusEmoji(t, e - 1) || (this.emojiRefs[t - 1] ? this.focusEmoji(t - 1, this.emojiRefs[t - 1].length - 1) : this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1));
+    handleArrowLeft: function(indexTab, indexEmoji) {
+      if (!this.focusEmoji(indexTab, indexEmoji - 1)) {
+        if (this.emojiRefs[indexTab - 1]) {
+          this.focusEmoji(indexTab - 1, this.emojiRefs[indexTab - 1].length - 1);
+        } else {
+          this.focusEmoji(this.emojiRefs.length - 1, this.emojiRefs[this.emojiRefs.length - 1].length - 1);
+        }
+      }
     },
-    handleArrowRight: function(t, e) {
-      this.focusEmoji(t, e + 1) || this.focusEmoji(t + 1, 0) || this.focusEmoji(0, 0);
+    handleArrowRight: function(indexTab, indexEmoji) {
+      if (!this.focusEmoji(indexTab, indexEmoji + 1)) {
+        if (!this.focusEmoji(indexTab + 1, 0)) {
+          this.focusEmoji(0, 0);
+        }
+      }
     },
-    handleKeyDownFilteredEmojis(t, e, i) {
-      var s;
-      if (t.preventDefault(), this.hoverFirstEmoji = !1, t.key === "ArrowUp") {
-        const r = e % a;
-        if (!this.focusEmoji(0, e - a)) {
-          const o = this.emojiFilteredRefs.length - this.emojiFilteredRefs.length % a + r;
-          this.focusEmoji(0, o), this.focusEmoji(0, o) || this.focusEmoji(0, this.emojiFilteredRefs.length - 1);
+    handleKeyDownFilteredEmojis(event, indexEmoji, emoji) {
+      var _a;
+      event.preventDefault();
+      this.hoverFirstEmoji = false;
+      if (event.key === "ArrowUp") {
+        const position = indexEmoji % EMOJIS_PER_ROW;
+        if (!this.focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {
+          const lastEmojiPosition = this.emojiFilteredRefs.length - this.emojiFilteredRefs.length % EMOJIS_PER_ROW + position;
+          this.focusEmoji(0, lastEmojiPosition);
+          if (!this.focusEmoji(0, lastEmojiPosition)) {
+            this.focusEmoji(0, this.emojiFilteredRefs.length - 1);
+          }
+        }
+      }
+      if (event.key === "ArrowDown") {
+        if (!this.focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {
+          const position = indexEmoji % EMOJIS_PER_ROW;
+          if ((_a = this.emojiFilteredRefs) == null ? void 0 : _a[indexEmoji + (EMOJIS_PER_ROW - position)]) {
+            this.focusEmoji(0, this.emojiFilteredRefs.length - 1);
+          } else {
+            this.focusEmoji(0, position);
+          }
         }
       }
-      if (t.key === "ArrowDown" && !this.focusEmoji(0, e + a)) {
-        const r = e % a;
-        (s = this.emojiFilteredRefs) != null && s[e + (a - r)] ? this.focusEmoji(0, this.emojiFilteredRefs.length - 1) : this.focusEmoji(0, r);
+      if (event.key === "ArrowLeft") {
+        this.handleHorizontalNavigation("left", 0, indexEmoji);
+      }
+      if (event.key === "ArrowRight") {
+        this.handleHorizontalNavigation("right", 0, indexEmoji);
+      }
+      if (event.key === "Tab") {
+        this.$emit("focus-skin-selector");
+      }
+      if (event.key === "Enter") {
+        this.$emit("selected-emoji", emoji);
       }
-      t.key === "ArrowLeft" && this.handleHorizontalNavigation("left", 0, e), t.key === "ArrowRight" && this.handleHorizontalNavigation("right", 0, e), t.key === "Tab" && this.$emit("focus-skin-selector"), t.key === "Enter" && this.$emit("selected-emoji", i);
     },
     setTabLabelObserver() {
-      this.tabLabelObserver = new IntersectionObserver((t) => {
-        t.forEach((e) => {
-          var r, o, n, l, c, f;
-          const { target: i } = e, s = parseInt(i.dataset.index);
-          e.isIntersecting && i.offsetTop <= ((r = this.$refs.tabCategoryRef) == null ? void 0 : r.offsetTop) + 50 ? (this.fixedLabel = ((o = this.tabLabels[s - 1]) == null ? void 0 : o.label) ?? ((n = this.tabLabels[0]) == null ? void 0 : n.label), this.$emit("scroll-into-tab", s - 1)) : e.boundingClientRect.bottom <= ((l = this.$refs.tabCategoryRef) == null ? void 0 : l.getBoundingClientRect().bottom) ? (this.$emit("scroll-into-tab", s), this.fixedLabel = (c = this.tabLabels[s]) == null ? void 0 : c.label) : s === 1 && (this.$emit("scroll-into-tab", s), this.fixedLabel = (f = this.tabLabels[0]) == null ? void 0 : f.label);
+      this.tabLabelObserver = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          var _a, _b, _c, _d, _e, _f;
+          const { target } = entry;
+          const index = parseInt(target.dataset.index);
+          if (entry.isIntersecting && target.offsetTop <= ((_a = this.$refs.tabCategoryRef) == null ? void 0 : _a.offsetTop) + 50) {
+            this.fixedLabel = ((_b = this.tabLabels[index - 1]) == null ? void 0 : _b.label) ?? ((_c = this.tabLabels[0]) == null ? void 0 : _c.label);
+            this.$emit("scroll-into-tab", index - 1);
+          } else if (entry.boundingClientRect.bottom <= ((_d = this.$refs.tabCategoryRef) == null ? void 0 : _d.getBoundingClientRect().bottom)) {
+            this.$emit("scroll-into-tab", index);
+            this.fixedLabel = (_e = this.tabLabels[index]) == null ? void 0 : _e.label;
+          } else if (index === 1) {
+            this.$emit("scroll-into-tab", index);
+            this.fixedLabel = (_f = this.tabLabels[0]) == null ? void 0 : _f.label;
+          }
         });
-      }), this.tabLabelObserver.observe(this.$refs.tabCategoryRef), Array.from(this.$refs.listRef.children).forEach((t, e) => {
-        this.tabLabelObserver.observe(t), t.dataset.index = e;
+      });
+      this.tabLabelObserver.observe(this.$refs.tabCategoryRef);
+      Array.from(this.$refs.listRef.children).forEach((child, index) => {
+        this.tabLabelObserver.observe(child);
+        child.dataset.index = index;
       });
     },
     focusLastEmoji() {
@@ -455,55 +655,61 @@ const A = w.exports, I = {
     }
   }
 };
-var D = function() {
-  var e = this, i = e._self._c;
-  return i("div", { staticClass: "d-emoji-picker__selector" }, [i("div", { ref: "listRef", staticClass: "d-emoji-picker__list", attrs: { id: "d-emoji-picker-list" } }, [e.emojiFilter ? i("p", { staticClass: "d-emoji-picker__search-label d-emoji-picker__alignment" }, [e._v(" " + e._s(e.filteredEmojis.length > 0 ? e.searchResultsLabel : e.searchNoResultsLabel) + " ")]) : i("div", { ref: "tabCategoryRef", staticClass: "d-emoji-picker__category d-emoji-picker__alignment" }, [i("p", [e._v(" " + e._s(e.fixedLabel) + " ")])]), e._l(e.tabLabels, function(s, r) {
-    return i("div", { directives: [{ name: "show", rawName: "v-show", value: !e.emojiFilter, expression: "!emojiFilter" }], key: r, ref: `tabLabelRef-${r}`, refInFor: !0, staticClass: "d-emoji-picker__alignment" }, [r ? i("p", [e._v(" " + e._s(s.label) + " ")]) : e._e(), i("div", { staticClass: "d-emoji-picker__tab" }, e._l(e.emojis[e.tabs[r] + e.skinTone] ? e.emojis[e.tabs[r] + e.skinTone] : e.emojis[e.tabs[r]], function(o, n) {
-      return i("button", { key: o.shortname, ref: `emojiRef-${r}`, refInFor: !0, attrs: { type: "button", "aria-label": o.name }, on: { click: function(l) {
-        return e.$emit("selected-emoji", o);
-      }, focusin: function(l) {
-        return e.$emit("highlighted-emoji", o);
-      }, focusout: function(l) {
-        return e.$emit("highlighted-emoji", null);
-      }, mouseover: function(l) {
-        return e.$emit("highlighted-emoji", o);
-      }, mouseleave: function(l) {
-        return e.$emit("highlighted-emoji", null);
-      }, keydown: (l) => e.handleKeyDown(l, r, n, o) } }, [i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: o.name, "aria-label": o.name, title: o.name, src: e.getImgSrc(o.unicode_character) }, on: { error: e.handleImageError } })]);
+var _sfc_render$3 = function render3() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "d-emoji-picker__selector" }, [_c("div", { ref: "listRef", staticClass: "d-emoji-picker__list", attrs: { "id": "d-emoji-picker-list" } }, [_vm.emojiFilter ? _c("p", { staticClass: "d-emoji-picker__search-label d-emoji-picker__alignment" }, [_vm._v(" " + _vm._s(_vm.filteredEmojis.length > 0 ? _vm.searchResultsLabel : _vm.searchNoResultsLabel) + " ")]) : _c("div", { ref: "tabCategoryRef", staticClass: "d-emoji-picker__category d-emoji-picker__alignment" }, [_c("p", [_vm._v(" " + _vm._s(_vm.fixedLabel) + " ")])]), _vm._l(_vm.tabLabels, function(tabLabel, indexTab) {
+    return _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.emojiFilter, expression: "!emojiFilter" }], key: indexTab, ref: `tabLabelRef-${indexTab}`, refInFor: true, staticClass: "d-emoji-picker__alignment" }, [indexTab ? _c("p", [_vm._v(" " + _vm._s(tabLabel.label) + " ")]) : _vm._e(), _c("div", { staticClass: "d-emoji-picker__tab" }, _vm._l(_vm.emojis[_vm.tabs[indexTab] + _vm.skinTone] ? _vm.emojis[_vm.tabs[indexTab] + _vm.skinTone] : _vm.emojis[_vm.tabs[indexTab]], function(emoji, indexEmoji) {
+      return _c("button", { key: emoji.shortname, ref: `emojiRef-${indexTab}`, refInFor: true, attrs: { "type": "button", "aria-label": emoji.name }, on: { "click": function($event) {
+        return _vm.$emit("selected-emoji", emoji);
+      }, "focusin": function($event) {
+        return _vm.$emit("highlighted-emoji", emoji);
+      }, "focusout": function($event) {
+        return _vm.$emit("highlighted-emoji", null);
+      }, "mouseover": function($event) {
+        return _vm.$emit("highlighted-emoji", emoji);
+      }, "mouseleave": function($event) {
+        return _vm.$emit("highlighted-emoji", null);
+      }, "keydown": (event) => _vm.handleKeyDown(event, indexTab, indexEmoji, emoji) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": emoji.name, "aria-label": emoji.name, "title": emoji.name, "src": _vm.getImgSrc(emoji.unicode_character) }, on: { "error": _vm.handleImageError } })]);
     }), 0)]);
-  }), e.emojiFilter ? i("div", { staticClass: "d-emoji-picker__alignment" }, [i("div", { staticClass: "d-emoji-picker__tab", attrs: { "data-qa": "filtered-emojis" } }, e._l(e.filteredEmojis, function(s, r) {
-    return i("button", { key: s.shortname, ref: `filteredEmoji-${r}`, refInFor: !0, class: {
-      "hover-emoji": r === 0 && e.hoverFirstEmoji
-    }, attrs: { type: "button", "aria-label": s.name }, on: { click: function(o) {
-      return e.$emit("selected-emoji", s);
-    }, focusin: function(o) {
-      return e.$emit("highlighted-emoji", s);
-    }, focusout: function(o) {
-      return e.$emit("highlighted-emoji", null);
-    }, mouseover: function(o) {
-      return e.hoverEmoji(s);
-    }, mouseleave: function(o) {
-      return e.hoverEmoji(null);
-    }, keydown: (o) => e.handleKeyDownFilteredEmojis(o, r, s) } }, [i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: s.name, "aria-label": s.name, title: s.name, src: `${e.CDN_URL + s.unicode_character}.png` } })]);
-  }), 0)]) : e._e()], 2)]);
-}, C = [], F = /* @__PURE__ */ m(
-  I,
-  D,
-  C,
-  !1,
+  }), _vm.emojiFilter ? _c("div", { staticClass: "d-emoji-picker__alignment" }, [_c("div", { staticClass: "d-emoji-picker__tab", attrs: { "data-qa": "filtered-emojis" } }, _vm._l(_vm.filteredEmojis, function(emoji, index) {
+    return _c("button", { key: emoji.shortname, ref: `filteredEmoji-${index}`, refInFor: true, class: {
+      "hover-emoji": index === 0 && _vm.hoverFirstEmoji
+    }, attrs: { "type": "button", "aria-label": emoji.name }, on: { "click": function($event) {
+      return _vm.$emit("selected-emoji", emoji);
+    }, "focusin": function($event) {
+      return _vm.$emit("highlighted-emoji", emoji);
+    }, "focusout": function($event) {
+      return _vm.$emit("highlighted-emoji", null);
+    }, "mouseover": function($event) {
+      return _vm.hoverEmoji(emoji);
+    }, "mouseleave": function($event) {
+      return _vm.hoverEmoji(null);
+    }, "keydown": (event) => _vm.handleKeyDownFilteredEmojis(event, index, emoji) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": emoji.name, "aria-label": emoji.name, "title": emoji.name, "src": `${_vm.CDN_URL + emoji.unicode_character}.png` } })]);
+  }), 0)]) : _vm._e()], 2)]);
+};
+var _sfc_staticRenderFns$3 = [];
+var __component__$3 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$3,
+  _sfc_render$3,
+  _sfc_staticRenderFns$3,
+  false,
   null,
   null,
   null,
   null
 );
-const O = F.exports, d = "https://static.dialpadcdn.com/joypixels/png/unicode/32/", a = 9, h = {
+const EmojiSelector = __component__$3.exports;
+const CDN_URL = "https://static.dialpadcdn.com/joypixels/png/unicode/32/";
+const EMOJIS_PER_ROW = 9;
+const EMOJI_PICKER_SKIN_TONE_MODIFIERS = {
   DEFAULT: "Default",
   LIGHT: "Light",
   MEDIUM_LIGHT: "MediumLight",
   MEDIUM: "Medium",
   MEDIUM_DARK: "MediumDark",
   DARK: "Dark"
-}, u = {
+};
+const EMOJI_PICKER_CATEGORIES = {
   MOST_RECENTLY_USED: "Most recently used",
   SMILEYS_AND_PEOPLE: "Smileys and people",
   NATURE: "Nature",
@@ -513,7 +719,8 @@ const O = F.exports, d = "https://static.dialpadcdn.com/joypixels/png/unicode/32
   OBJECTS: "Objects",
   SYMBOLS: "Symbols",
   FLAGS: "Flags"
-}, U = {
+};
+const _sfc_main$2 = {
   name: "EmojiDescription",
   props: {
     /**
@@ -528,166 +735,211 @@ const O = F.exports, d = "https://static.dialpadcdn.com/joypixels/png/unicode/32
   },
   data() {
     return {
-      CDN_URL: d
+      CDN_URL
     };
   }
 };
-var N = function() {
-  var s;
-  var e = this, i = e._self._c;
-  return i("div", { staticClass: "d-emoji-picker__data" }, [e.emoji ? i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: e.emoji.name, "aria-label": e.emoji.name, title: e.emoji.name, src: `${e.CDN_URL + e.emoji.unicode_character}.png` } }) : e._e(), e._v(" " + e._s((s = e.emoji) == null ? void 0 : s.name) + " ")]);
-}, M = [], K = /* @__PURE__ */ m(
-  U,
-  N,
-  M,
-  !1,
+var _sfc_render$2 = function render4() {
+  var _a;
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "d-emoji-picker__data" }, [_vm.emoji ? _c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": _vm.emoji.name, "aria-label": _vm.emoji.name, "title": _vm.emoji.name, "src": `${_vm.CDN_URL + _vm.emoji.unicode_character}.png` } }) : _vm._e(), _vm._v(" " + _vm._s((_a = _vm.emoji) == null ? void 0 : _a.name) + " ")]);
+};
+var _sfc_staticRenderFns$2 = [];
+var __component__$2 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
   null,
   null,
   null,
   null
 );
-const B = K.exports, P = {
+const EmojiDescription = __component__$2.exports;
+const _sfc_main$1 = {
   name: "EmojiSkinSelector",
   components: {
-    DtTooltip: g
+    DtTooltip
   },
   props: {
     skinTone: {
       type: String,
-      required: !0
+      required: true
     },
     isHovering: {
       type: Boolean,
-      default: !1
+      default: false
     },
     skinSelectorButtonTooltipLabel: {
       type: String,
-      required: !0
+      required: true
     }
   },
   data() {
     return {
-      isOpen: !1,
+      isOpen: false,
       skinSelected: null,
       skinsRef: [],
-      cdnUrl: d
+      cdnUrl: CDN_URL
     };
   },
   computed: {
     skinPassedIn() {
-      return this.skinList.find((t) => t.skinTone === this.skinTone);
+      return this.skinList.find((skin) => skin.skinTone === this.skinTone);
     },
     skinList() {
       return [
         {
           name: ":wave_tone1:",
           unicode_output: "1f44b-1f3fb",
-          skinTone: h.LIGHT,
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
           skinCode: "_tone1"
         },
         {
           name: ":wave_tone2:",
           unicode_output: "1f44b-1f3fc",
-          skinTone: h.MEDIUM_LIGHT,
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
           skinCode: "_tone2"
         },
         {
           name: ":wave_tone3:",
           unicode_output: "1f44b-1f3fd",
-          skinTone: h.MEDIUM,
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
           skinCode: "_tone3"
         },
         {
           name: ":wave_tone4:",
           unicode_output: "1f44b-1f3fe",
-          skinTone: h.MEDIUM_DARK,
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
           skinCode: "_tone4"
         },
         {
           name: ":wave_tone5:",
           unicode_output: "1f44b-1f3ff",
-          skinTone: h.DARK,
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
           skinCode: "_tone5"
         },
         {
           name: ":wave:",
           unicode_output: "1f44b",
-          skinTone: h.DEFAULT,
+          skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
           skinCode: ""
         }
       ];
     }
   },
   watch: {
-    isHovering(t) {
-      t && (this.isOpen = !1);
+    isHovering(newVal) {
+      if (newVal) {
+        this.isOpen = false;
+      }
     },
-    skinTone(t, e) {
-      t !== e && (this.skinSelected = this.skinPassedIn);
+    skinTone(newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.skinSelected = this.skinPassedIn;
+      }
     }
   },
   mounted() {
-    this.skinSelected = this.skinPassedIn, this.$nextTick(() => {
+    this.skinSelected = this.skinPassedIn;
+    this.$nextTick(() => {
       this.setupSkinRefs();
     });
   },
   methods: {
     setupSkinRefs() {
-      this.skinList.forEach((t, e) => {
-        const i = `skinRef-${e}`;
-        this.$refs[i] && this.$set(this.skinsRef, e, this.$refs[i][0]);
+      this.skinList.forEach((skin, index) => {
+        const refKey = `skinRef-${index}`;
+        if (this.$refs[refKey]) {
+          this.$set(this.skinsRef, index, this.$refs[refKey][0]);
+        }
       });
     },
     focusSkinSelector() {
-      this.$refs.skinSelectorRef && this.$refs.skinSelectorRef.focus();
+      if (this.$refs.skinSelectorRef) {
+        this.$refs.skinSelectorRef.focus();
+      }
     },
-    selectSkin(t) {
-      this.skinSelected = t, this.isOpen = !1, this.$emit("skin-tone", t.skinTone), this.$nextTick(() => {
+    selectSkin(skin) {
+      this.skinSelected = skin;
+      this.isOpen = false;
+      this.$emit("skin-tone", skin.skinTone);
+      this.$nextTick(() => {
         this.focusSkinSelector();
       });
     },
-    handleKeyDown(t, e, i) {
-      var s, r, o, n;
-      t.preventDefault(), t.key === "ArrowLeft" && (i === 0 && ((s = this.skinsRef[this.skinsRef.length - 1]) == null || s.focus()), (r = this.skinsRef[i - 1]) == null || r.focus()), t.key === "ArrowRight" && (this.skinsRef.length && ((o = this.skinsRef[0]) == null || o.focus()), (n = this.skinsRef[i + 1]) == null || n.focus()), t.key === "Enter" && (e ? this.selectSkin(e) : this.toggleSkinList()), t.key === "Tab" && (t.shiftKey ? this.$emit("focus-last-emoji") : this.$emit("focus-tabset"));
+    handleKeyDown(event, skin, index) {
+      var _a, _b, _c, _d;
+      event.preventDefault();
+      if (event.key === "ArrowLeft") {
+        if (index === 0)
+          (_a = this.skinsRef[this.skinsRef.length - 1]) == null ? void 0 : _a.focus();
+        (_b = this.skinsRef[index - 1]) == null ? void 0 : _b.focus();
+      }
+      if (event.key === "ArrowRight") {
+        if (this.skinsRef.length)
+          (_c = this.skinsRef[0]) == null ? void 0 : _c.focus();
+        (_d = this.skinsRef[index + 1]) == null ? void 0 : _d.focus();
+      }
+      if (event.key === "Enter") {
+        if (skin) {
+          this.selectSkin(skin);
+        } else {
+          this.toggleSkinList();
+        }
+      }
+      if (event.key === "Tab") {
+        if (event.shiftKey) {
+          this.$emit("focus-last-emoji");
+        } else {
+          this.$emit("focus-tabset");
+        }
+      }
     },
     toggleSkinList() {
-      this.isOpen = !this.isOpen, this.$nextTick(() => {
-        this.skinsRef[0] && this.skinsRef[0].focus();
+      this.isOpen = !this.isOpen;
+      this.$nextTick(() => {
+        if (this.skinsRef[0]) {
+          this.skinsRef[0].focus();
+        }
       });
     }
   }
 };
-var q = function() {
-  var e = this, i = e._self._c;
-  return i("div", { attrs: { "data-qa": "skin-selector" } }, [i("div", { directives: [{ name: "show", rawName: "v-show", value: e.isOpen, expression: "isOpen" }], staticClass: "d-emoji-picker__skin-list" }, e._l(e.skinList, function(s, r) {
-    var o;
-    return i("button", { key: s.name, ref: `skinRef-${r}`, refInFor: !0, class: {
-      selected: ((o = e.skinSelected) == null ? void 0 : o.skinCode) === s.skinCode
-    }, on: { click: function(n) {
-      return e.selectSkin(s);
-    }, keydown: (n) => e.handleKeyDown(n, s, r) } }, [i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: s.name, "aria-label": s.name, title: s.name, src: `${e.cdnUrl + s.unicode_output}.png` } })]);
-  }), 0), i("div", { directives: [{ name: "show", rawName: "v-show", value: !e.isOpen, expression: "!isOpen" }], staticClass: "d-emoji-picker__skin-selected" }, [i("dt-tooltip", { attrs: { placement: "top-end" }, scopedSlots: e._u([{ key: "anchor", fn: function() {
-    var s, r, o, n;
-    return [i("button", { ref: "skinSelectorRef", attrs: { "aria-label": e.skinSelectorButtonTooltipLabel, tabindex: "-1" }, on: { click: e.toggleSkinList, keydown: (l) => e.handleKeyDown(l) } }, [i("img", { staticClass: "d-icon d-icon--size-500", attrs: { alt: (s = e.skinSelected) == null ? void 0 : s.name, "aria-label": (r = e.skinSelected) == null ? void 0 : r.name, title: (o = e.skinSelected) == null ? void 0 : o.name, src: `${e.cdnUrl + ((n = e.skinSelected) == null ? void 0 : n.unicode_output)}.png` } })])];
-  }, proxy: !0 }]) }, [e._v(" " + e._s(e.skinSelectorButtonTooltipLabel) + " ")])], 1)]);
-}, z = [], H = /* @__PURE__ */ m(
-  P,
-  q,
-  z,
-  !1,
+var _sfc_render$1 = function render5() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { attrs: { "data-qa": "skin-selector" } }, [_c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.isOpen, expression: "isOpen" }], staticClass: "d-emoji-picker__skin-list" }, _vm._l(_vm.skinList, function(skin, index) {
+    var _a;
+    return _c("button", { key: skin.name, ref: `skinRef-${index}`, refInFor: true, class: {
+      "selected": ((_a = _vm.skinSelected) == null ? void 0 : _a.skinCode) === skin.skinCode
+    }, on: { "click": function($event) {
+      return _vm.selectSkin(skin);
+    }, "keydown": (event) => _vm.handleKeyDown(event, skin, index) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": skin.name, "aria-label": skin.name, "title": skin.name, "src": `${_vm.cdnUrl + skin.unicode_output}.png` } })]);
+  }), 0), _c("div", { directives: [{ name: "show", rawName: "v-show", value: !_vm.isOpen, expression: "!isOpen" }], staticClass: "d-emoji-picker__skin-selected" }, [_c("dt-tooltip", { attrs: { "placement": "top-end" }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
+    var _a, _b, _c2, _d;
+    return [_c("button", { ref: "skinSelectorRef", attrs: { "aria-label": _vm.skinSelectorButtonTooltipLabel, "tabindex": "-1" }, on: { "click": _vm.toggleSkinList, "keydown": (event) => _vm.handleKeyDown(event) } }, [_c("img", { staticClass: "d-icon d-icon--size-500", attrs: { "alt": (_a = _vm.skinSelected) == null ? void 0 : _a.name, "aria-label": (_b = _vm.skinSelected) == null ? void 0 : _b.name, "title": (_c2 = _vm.skinSelected) == null ? void 0 : _c2.name, "src": `${_vm.cdnUrl + ((_d = _vm.skinSelected) == null ? void 0 : _d.unicode_output)}.png` } })])];
+  }, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.skinSelectorButtonTooltipLabel) + " ")])], 1)]);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
   null,
   null,
   null,
   null
 );
-const G = H.exports, V = {
+const EmojiSkinSelector = __component__$1.exports;
+const _sfc_main = {
   name: "DtEmojiPicker",
   components: {
-    EmojiTabset: $,
-    EmojiSearch: A,
-    EmojiSelector: O,
-    EmojiDescription: B,
-    EmojiSkinSelector: G
+    EmojiTabset,
+    EmojiSearch,
+    EmojiSelector,
+    EmojiDescription,
+    EmojiSkinSelector
   },
   props: {
     recentlyUsedEmojis: {
@@ -695,26 +947,26 @@ const G = H.exports, V = {
     },
     searchPlaceholderLabel: {
       type: String,
-      required: !0
+      required: true
     },
     searchResultsLabel: {
       type: String,
-      required: !0
+      required: true
     },
     searchNoResultsLabel: {
       type: String,
-      required: !0
+      required: true
     },
     tabSetLabels: {
       type: Array,
-      required: !0
+      required: true
     },
     skinTone: {
       type: String
     },
     skinSelectorButtonTooltipLabel: {
       type: String,
-      required: !0
+      required: true
     }
   },
   data() {
@@ -723,79 +975,90 @@ const G = H.exports, V = {
       highlightedEmoji: null,
       selectedTabset: {},
       scrollIntoTab: 0,
-      isScrolling: !1
+      isScrolling: false
     };
   },
   computed: {
     showRecentlyUsedTab() {
-      var t;
-      return ((t = this.recentlyUsedEmojis) == null ? void 0 : t.length) > 0;
+      var _a;
+      return ((_a = this.recentlyUsedEmojis) == null ? void 0 : _a.length) > 0;
     }
   },
   methods: {
-    scrollToSelectedTabset(t) {
-      this.searchQuery = "", this.selectedTabset = { ...this.selectedTabset, tabId: t };
+    scrollToSelectedTabset(tabId) {
+      this.searchQuery = "";
+      this.selectedTabset = { ...this.selectedTabset, tabId };
     },
-    updateScrollIntoTab(t) {
-      this.scrollIntoTab = t;
+    updateScrollIntoTab(value) {
+      this.scrollIntoTab = value;
     },
-    updateIsScrolling(t) {
-      this.isScrolling = t;
+    updateIsScrolling(value) {
+      this.isScrolling = value;
     },
-    updateHighlightedEmoji(t) {
-      this.highlightedEmoji = t;
+    updateHighlightedEmoji(emoji) {
+      this.highlightedEmoji = emoji;
     }
   }
 };
-var Y = function() {
-  var e = this, i = e._self._c;
-  return i("div", { staticClass: "d-emoji-picker" }, [i("div", { staticClass: "d-emoji-picker--header" }, [i("emoji-tabset", { ref: "tabsetRef", attrs: { "emoji-filter": e.searchQuery, "show-recently-used-tab": e.showRecentlyUsedTab, "scroll-into-tab": e.scrollIntoTab, "tab-set-labels": e.tabSetLabels, "is-scrolling": e.isScrolling }, on: { "focus-search-input": function(s) {
-    return e.$refs.searchInputRef.focusSearchInput();
-  }, "focus-skin-selector": function(s) {
-    return e.$refs.skinSelectorRef.focusSkinSelector();
-  }, "selected-tabset": e.scrollToSelectedTabset }, nativeOn: { keydown: function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : e.$emit("close");
-  } } })], 1), i("div", { staticClass: "d-emoji-picker--body" }, [i("emoji-search", { ref: "searchInputRef", attrs: { "model-value": e.searchQuery, "search-placeholder-label": e.searchPlaceholderLabel }, on: { "update:model-value": (s) => e.searchQuery = s, "select-first-emoji": function(s) {
-    return e.$emit("selected-emoji", e.highlightedEmoji);
-  }, "focus-tabset": function(s) {
-    return e.$refs.tabsetRef.focusTabset();
-  }, "focus-emoji-selector": function(s) {
-    return e.$refs.emojiSelectorRef.focusEmojiSelector();
-  } }, nativeOn: { keydown: function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : e.$emit("close");
-  } } }), i("emoji-selector", { ref: "emojiSelectorRef", attrs: { "emoji-filter": e.searchQuery, "skin-tone": e.skinTone, "tab-set-labels": e.tabSetLabels, "search-results-label": e.searchResultsLabel, "search-no-results-label": e.searchNoResultsLabel, "recently-used-emojis": e.recentlyUsedEmojis, "selected-tabset": e.selectedTabset }, on: { "scroll-into-tab": e.updateScrollIntoTab, "is-scrolling": e.updateIsScrolling, "highlighted-emoji": e.updateHighlightedEmoji, "selected-emoji": function(s) {
-    return e.$emit("selected-emoji", s);
-  }, "focus-skin-selector": function(s) {
-    return e.$refs.skinSelectorRef.focusSkinSelector();
-  }, "focus-search-input": function(s) {
-    return e.$refs.searchInputRef.focusSearchInput();
-  } }, nativeOn: { keydown: function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : e.$emit("close");
-  } } })], 1), i("div", { staticClass: "d-emoji-picker--footer" }, [i("emoji-description", { attrs: { emoji: e.highlightedEmoji } }), i("emoji-skin-selector", { ref: "skinSelectorRef", attrs: { "is-hovering": !!e.highlightedEmoji, "skin-selector-button-tooltip-label": e.skinSelectorButtonTooltipLabel, "skin-tone": e.skinTone }, on: { "skin-tone": function(s) {
-    return e.$emit("skin-tone", s);
-  }, "focus-tabset": function(s) {
-    return e.$refs.tabsetRef.focusTabset();
-  }, "focus-last-emoji": function(s) {
-    return e.$refs.emojiSelectorRef.focusLastEmoji();
-  } }, nativeOn: { keydown: function(s) {
-    return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : e.$emit("close");
+var _sfc_render = function render6() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { staticClass: "d-emoji-picker" }, [_c("div", { staticClass: "d-emoji-picker--header" }, [_c("emoji-tabset", { ref: "tabsetRef", attrs: { "emoji-filter": _vm.searchQuery, "show-recently-used-tab": _vm.showRecentlyUsedTab, "scroll-into-tab": _vm.scrollIntoTab, "tab-set-labels": _vm.tabSetLabels, "is-scrolling": _vm.isScrolling }, on: { "focus-search-input": function($event) {
+    return _vm.$refs.searchInputRef.focusSearchInput();
+  }, "focus-skin-selector": function($event) {
+    return _vm.$refs.skinSelectorRef.focusSkinSelector();
+  }, "selected-tabset": _vm.scrollToSelectedTabset }, nativeOn: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+      return null;
+    return _vm.$emit("close");
+  } } })], 1), _c("div", { staticClass: "d-emoji-picker--body" }, [_c("emoji-search", { ref: "searchInputRef", attrs: { "model-value": _vm.searchQuery, "search-placeholder-label": _vm.searchPlaceholderLabel }, on: { "update:model-value": (newValue) => _vm.searchQuery = newValue, "select-first-emoji": function($event) {
+    return _vm.$emit("selected-emoji", _vm.highlightedEmoji);
+  }, "focus-tabset": function($event) {
+    return _vm.$refs.tabsetRef.focusTabset();
+  }, "focus-emoji-selector": function($event) {
+    return _vm.$refs.emojiSelectorRef.focusEmojiSelector();
+  } }, nativeOn: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+      return null;
+    return _vm.$emit("close");
+  } } }), _c("emoji-selector", { ref: "emojiSelectorRef", attrs: { "emoji-filter": _vm.searchQuery, "skin-tone": _vm.skinTone, "tab-set-labels": _vm.tabSetLabels, "search-results-label": _vm.searchResultsLabel, "search-no-results-label": _vm.searchNoResultsLabel, "recently-used-emojis": _vm.recentlyUsedEmojis, "selected-tabset": _vm.selectedTabset }, on: { "scroll-into-tab": _vm.updateScrollIntoTab, "is-scrolling": _vm.updateIsScrolling, "highlighted-emoji": _vm.updateHighlightedEmoji, "selected-emoji": function($event) {
+    return _vm.$emit("selected-emoji", $event);
+  }, "focus-skin-selector": function($event) {
+    return _vm.$refs.skinSelectorRef.focusSkinSelector();
+  }, "focus-search-input": function($event) {
+    return _vm.$refs.searchInputRef.focusSearchInput();
+  } }, nativeOn: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+      return null;
+    return _vm.$emit("close");
+  } } })], 1), _c("div", { staticClass: "d-emoji-picker--footer" }, [_c("emoji-description", { attrs: { "emoji": _vm.highlightedEmoji } }), _c("emoji-skin-selector", { ref: "skinSelectorRef", attrs: { "is-hovering": !!_vm.highlightedEmoji, "skin-selector-button-tooltip-label": _vm.skinSelectorButtonTooltipLabel, "skin-tone": _vm.skinTone }, on: { "skin-tone": function($event) {
+    return _vm.$emit("skin-tone", $event);
+  }, "focus-tabset": function($event) {
+    return _vm.$refs.tabsetRef.focusTabset();
+  }, "focus-last-emoji": function($event) {
+    return _vm.$refs.emojiSelectorRef.focusLastEmoji();
+  } }, nativeOn: { "keydown": function($event) {
+    if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"]))
+      return null;
+    return _vm.$emit("close");
   } } })], 1)]);
-}, J = [], Q = /* @__PURE__ */ m(
-  V,
-  Y,
-  J,
-  !1,
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const ke = Q.exports;
+const DtEmojiPicker = __component__.exports;
 export {
-  d as CDN_URL,
-  ke as DtEmojiPicker,
-  a as EMOJIS_PER_ROW,
-  u as EMOJI_PICKER_CATEGORIES,
-  h as EMOJI_PICKER_SKIN_TONE_MODIFIERS
+  CDN_URL,
+  DtEmojiPicker,
+  EMOJIS_PER_ROW,
+  EMOJI_PICKER_CATEGORIES,
+  EMOJI_PICKER_SKIN_TONE_MODIFIERS
 };
 //# sourceMappingURL=emoji-picker.js.map