@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/emoji-picker.js

@@ -1,29 +1,31 @@
-import { ref as p, onMounted as ae, openBlock as y, createElementBlock as _, createVNode as F, unref as T, withKeys as U, withModifiers as ue, createSlots as Se, withCtx as H, createElementVNode as w, computed as B, toRefs as _e, watch as W, Fragment as z, renderList as Y, createBlock as je, nextTick as x, onUnmounted as Re, toDisplayString as J, withDirectives as oe, createCommentVNode as le, vShow as se, normalizeClass as ce, watchEffect as re, createTextVNode as fe } from "vue";
-import { DtInput as Te } from "./input.js";
-import { DtIcon as ne } from "./icon.js";
-import { D as we, a as Ee } from "../chunks/tab-GQZFMq83.js";
-import { emojisGrouped as I } from "@dialpad/dialtone-emojis";
-import { DtTooltip as $e } from "./tooltip.js";
-import "./constants.js";
-import "./utils.js";
-import "../chunks/input-4UQWegUk.js";
-import "./validators.js";
-import "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
+import { ref, onMounted, openBlock, createElementBlock, createVNode, unref, withKeys, withModifiers, createSlots, withCtx, createElementVNode, computed, toRefs, watch, Fragment, renderList, createBlock, nextTick, onUnmounted, toDisplayString, withDirectives, createCommentVNode, vShow, normalizeClass, watchEffect, createTextVNode } from "vue";
+import { DtInput } from "./input.js";
+import { DtIcon } from "./icon.js";
+import { DtTabGroup, DtTab } from "../chunks/tab-RTDgnD9-.js";
+import { emojisGrouped } from "@dialpad/dialtone-emojis";
+import { DtTooltip } from "./tooltip.js";
+import "../common/constants.js";
+import "../common/utils.js";
+import "../chunks/input-NmYDD5bn.js";
+import "../common/validators.js";
+import "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import "./validation-messages.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "./button.js";
-import "../chunks/link_constants-vIUB92L4.js";
-import "../chunks/popover_constants-qjlEkroB.js";
+import "../chunks/link_constants-nWVlXQBs.js";
+import "../chunks/popover_constants-Qkpb0yh2.js";
 import "tippy.js";
 import "./lazy-show.js";
-const Le = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Ae = ["onKeydown"], Ie = {
+const _hoisted_1$5 = { class: "d-emoji-picker__search d-emoji-picker__alignment" };
+const _hoisted_2$4 = ["onKeydown"];
+const _sfc_main$5 = {
   __name: "emoji_search",
   props: {
     searchPlaceholderLabel: {
       type: String,
-      required: !0
+      required: true
     },
     modelValue: {
       type: String,
@@ -31,57 +33,65 @@ const Le = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Ae = [
     }
   },
   emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
-  setup(o, { expose: k, emit: L }) {
-    const i = L, u = p(null);
-    function R() {
-      i("update:modelValue", ""), h();
-    }
-    function h() {
-      u.value.focus();
-    }
-    return ae(() => {
-      h();
-    }), k({
-      focusSearchInput: h
-    }), (S, c) => (y(), _("div", Le, [
-      F(T(Te), {
-        id: "searchInput",
-        ref_key: "searchInput",
-        ref: u,
-        placeholder: o.searchPlaceholderLabel,
-        "model-value": o.modelValue,
-        "onUpdate:modelValue": c[0] || (c[0] = (s) => S.$emit("update:modelValue", s)),
-        onKeydown: [
-          c[1] || (c[1] = U((s) => S.$emit("focus-tabset"), ["up"])),
-          c[2] || (c[2] = U(ue((s) => S.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
-          c[3] || (c[3] = U((s) => S.$emit("select-first-emoji"), ["enter"]))
-        ]
-      }, Se({
-        leftIcon: H(() => [
-          F(T(ne), {
-            name: "search",
-            size: "200"
-          })
-        ]),
-        _: 2
-      }, [
-        o.modelValue.length > 0 ? {
-          name: "rightIcon",
-          fn: H(() => [
-            w("button", {
-              class: "d-emoji-picker__search-button",
-              onClick: R,
-              onKeydown: U(R, ["enter"])
-            }, [
-              F(T(ne), { name: "close" })
-            ], 40, Ae)
+  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$5, [
+        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(DtIcon), {
+              name: "search",
+              size: "200"
+            })
           ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["placeholder", "model-value"])
-    ]));
+          _: 2
+        }, [
+          __props.modelValue.length > 0 ? {
+            name: "rightIcon",
+            fn: withCtx(() => [
+              createElementVNode("button", {
+                class: "d-emoji-picker__search-button",
+                onClick: clearSearch,
+                onKeydown: withKeys(clearSearch, ["enter"])
+              }, [
+                createVNode(unref(DtIcon), { name: "close" })
+              ], 40, _hoisted_2$4)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["placeholder", "model-value"])
+      ]);
+    };
   }
-}, Fe = { class: "d-emoji-picker__tabset" }, De = {
+};
+const _hoisted_1$4 = { class: "d-emoji-picker__tabset" };
+const _sfc_main$4 = {
   __name: "emoji_tabset",
   props: {
     /**
@@ -91,15 +101,15 @@ const Le = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Ae = [
      */
     showRecentlyUsedTab: {
       type: Boolean,
-      default: !1
+      default: false
     },
     scrollIntoTab: {
       type: Number,
-      required: !0
+      required: true
     },
     isScrolling: {
       type: Boolean,
-      default: !1
+      default: false
     },
     emojiFilter: {
       type: String,
@@ -112,7 +122,7 @@ const Le = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Ae = [
      */
     tabsetLabels: {
       type: Array,
-      required: !0
+      required: true
     }
   },
   emits: [
@@ -125,94 +135,137 @@ const Le = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Ae = [
     "focus-search-input",
     "focus-skin-selector"
   ],
-  setup(o, { expose: k, emit: L }) {
-    const i = o, u = L, R = [
-      { label: K.MOST_RECENTLY_USED, icon: "clock" },
-      { label: K.SMILEYS_AND_PEOPLE, icon: "satisfied" },
-      { label: K.NATURE, icon: "living-thing" },
-      { label: K.FOOD, icon: "food" },
-      { label: K.ACTIVITY, icon: "object" },
-      { label: K.TRAVEL, icon: "transportation" },
-      { label: K.OBJECTS, icon: "lightbulb" },
-      { label: K.SYMBOLS, icon: "heart" },
-      { label: K.FLAGS, icon: "flag" }
-    ], h = B(() => (i.showRecentlyUsedTab ? R : R.slice(1)).map((t, r) => ({
-      ...t,
-      label: i.tabsetLabels[r],
-      id: (r + 1).toString(),
-      panelId: (r + 1).toString()
-    }))), S = B(() => i.emojiFilter.length > 0), c = p("1"), { isScrolling: s } = _e(i), g = p([]);
-    W(
-      () => i.scrollIntoTab,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const TABS_DATA = [
+      { 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" }
+    ];
+    const tabs = computed(() => {
+      const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);
+      return tabsData.map((tab, index) => ({
+        ...tab,
+        label: props.tabsetLabels[index],
+        id: (index + 1).toString(),
+        panelId: (index + 1).toString()
+      }));
+    });
+    const isSearching = computed(() => props.emojiFilter.length > 0);
+    const selectedTab = ref("1");
+    const { isScrolling } = toRefs(props);
+    const tabsetRef = ref([]);
+    watch(
+      () => props.scrollIntoTab,
       () => {
-        !s.value && !S.value && (c.value = (i.scrollIntoTab + 1).toString());
+        if (!isScrolling.value && !isSearching.value) {
+          selectedTab.value = (props.scrollIntoTab + 1).toString();
+        }
       }
-    ), W(
-      S,
+    );
+    watch(
+      isSearching,
       () => {
-        S.value && (c.value = null);
+        if (isSearching.value) {
+          selectedTab.value = null;
+        }
       }
     );
-    function D(e) {
-      s.value || (c.value = e), u("selected-tabset", e);
-    }
-    function O(e) {
-      g.value.push(e.$el);
-    }
-    function A() {
-      g.value[0].focus();
-    }
-    function l(e, t) {
-      e.key === "Enter" && (D(t), g.value[t - 1].blur()), e.key === "Tab" && (e.preventDefault(), e.shiftKey ? u("focus-skin-selector") : u("focus-search-input")), e.key === "ArrowDown" && u("focus-search-input");
-    }
-    return k({
-      focusTabset: A
-    }), (e, t) => (y(), _("div", Fe, [
-      F(T(we), {
-        "tab-list-class": "d-emoji-picker__tabset-list",
-        selected: c.value
-      }, {
-        tabs: H(() => [
-          (y(!0), _(z, null, Y(h.value, (r, f) => (y(), je(T(Ee), {
-            id: r.id,
-            ref_for: !0,
-            ref: (b) => {
-              b && O(b);
-            },
-            key: r.id,
-            "panel-id": r.panelId,
-            label: r.label,
-            "aria-controls": "d-emoji-picker-list",
-            tabindex: f + 1,
-            onClickCapture: ue((b) => D(r.id), ["stop"]),
-            onKeydown: (b) => l(b, r.id)
-          }, {
-            default: H(() => [
-              F(T(ne), {
-                size: "400",
-                name: r.icon
-              }, null, 8, ["name"])
-            ]),
-            _: 2
-          }, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]))), 128))
-        ]),
-        _: 1
-      }, 8, ["selected"])
-    ]));
+    function selectTabset(id) {
+      if (!isScrolling.value) {
+        selectedTab.value = id;
+      }
+      emits("selected-tabset", id);
+    }
+    function setTabsetRef(ref2) {
+      tabsetRef.value.push(ref2.$el);
+    }
+    function focusTabset() {
+      tabsetRef.value[0].focus();
+    }
+    function handleKeyDown(event, tabId) {
+      if (event.key === "Enter") {
+        selectTabset(tabId);
+        tabsetRef.value[tabId - 1].blur();
+      }
+      if (event.key === "Tab") {
+        event.preventDefault();
+        if (event.shiftKey) {
+          emits("focus-skin-selector");
+        } else {
+          emits("focus-search-input");
+        }
+      }
+      if (event.key === "ArrowDown") {
+        emits("focus-search-input");
+      }
+    }
+    __expose({
+      focusTabset
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
+        createVNode(unref(DtTabGroup), {
+          "tab-list-class": "d-emoji-picker__tabset-list",
+          selected: selectedTab.value
+        }, {
+          tabs: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(tabs.value, (tab, index) => {
+              return openBlock(), createBlock(unref(DtTab), {
+                id: tab.id,
+                ref_for: true,
+                ref: (el) => {
+                  if (el)
+                    setTabsetRef(el);
+                },
+                key: tab.id,
+                "panel-id": tab.panelId,
+                label: tab.label,
+                "aria-controls": "d-emoji-picker-list",
+                tabindex: index + 1,
+                onClickCapture: withModifiers(($event) => selectTabset(tab.id), ["stop"]),
+                onKeydown: ($event) => handleKeyDown($event, tab.id)
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(DtIcon), {
+                    size: "400",
+                    name: tab.icon
+                  }, null, 8, ["name"])
+                ]),
+                _: 2
+              }, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["selected"])
+      ]);
+    };
   }
-}, G = {
+};
+const ARROW_KEYS = {
   ARROW_UP: "ArrowUp",
   ARROW_DOWN: "ArrowDown",
   ARROW_LEFT: "ArrowLeft",
   ARROW_RIGHT: "ArrowRight"
-}, Q = "https://static.dialpadcdn.com/joypixels/png/unicode/32/", $ = 9, q = {
+};
+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"
-}, K = {
+};
+const EMOJI_PICKER_CATEGORIES = {
   MOST_RECENTLY_USED: "Most recently used",
   SMILEYS_AND_PEOPLE: "Smileys and people",
   NATURE: "Nature",
@@ -223,90 +276,173 @@ const Le = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Ae = [
   SYMBOLS: "Symbols",
   FLAGS: "Flags"
 };
-function Oe() {
-  const o = p([]), k = p([]), L = p(!1), i = p(!0);
-  function u(l, e) {
-    s(l, e - 1) || (o.value[l - 1] ? s(l - 1, o.value[l - 1].length - 1) : s(o.value.length - 1, o.value[o.value.length - 1].length - 1));
+function useKeyboardNavigation() {
+  const emojiRefs = ref([]);
+  const emojiFilteredRefs = ref([]);
+  const isFiltering = ref(false);
+  const hoverFirstEmoji = ref(true);
+  function _handleArrowLeft(indexTab, indexEmoji) {
+    if (!focusEmoji(indexTab, indexEmoji - 1)) {
+      if (emojiRefs.value[indexTab - 1]) {
+        focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);
+      } else {
+        focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);
+      }
+    }
   }
-  function R(l, e) {
-    s(l, e + 1) || s(l + 1, 0) || s(0, 0);
+  function _handleArrowRight(indexTab, indexEmoji) {
+    if (!focusEmoji(indexTab, indexEmoji + 1)) {
+      if (!focusEmoji(indexTab + 1, 0)) {
+        focusEmoji(0, 0);
+      }
+    }
   }
-  function h(l, e) {
-    s(0, e - 1) || s(0, k.value.length - 1);
+  function _handleArrowLeftFiltered(indexTab, indexEmoji) {
+    if (!focusEmoji(0, indexEmoji - 1)) {
+      focusEmoji(0, emojiFilteredRefs.value.length - 1);
+    }
   }
-  function S(l, e) {
-    s(0, e + 1) || s(0, 0);
+  function _handleArrowRightFiltered(indexTab, indexEmoji) {
+    if (!focusEmoji(0, indexEmoji + 1)) {
+      focusEmoji(0, 0);
+    }
   }
-  function c(l, e, t) {
-    L.value ? l === "left" ? h(e, t) : l === "right" && S(e, t) : l === "left" ? u(e, t) : l === "right" && R(e, t);
+  function _handleHorizontalNavigation(direction, indexTab, indexEmoji) {
+    if (isFiltering.value) {
+      if (direction === "left") {
+        _handleArrowLeftFiltered(indexTab, indexEmoji);
+      } else if (direction === "right") {
+        _handleArrowRightFiltered(indexTab, indexEmoji);
+      }
+    } else {
+      if (direction === "left") {
+        _handleArrowLeft(indexTab, indexEmoji);
+      } else if (direction === "right") {
+        _handleArrowRight(indexTab, indexEmoji);
+      }
+    }
   }
-  function s(l, e) {
-    var r, f, b;
-    const t = L.value ? (r = k.value) == null ? void 0 : r[e] : (b = (f = o.value) == null ? void 0 : f[l]) == null ? void 0 : b[e];
-    return t ? (t.focus(), !0) : !1;
+  function focusEmoji(indexTab, indexEmoji) {
+    var _a, _b, _c;
+    const emojiRef = isFiltering.value ? (_a = emojiFilteredRefs.value) == null ? void 0 : _a[indexEmoji] : (_c = (_b = emojiRefs.value) == null ? void 0 : _b[indexTab]) == null ? void 0 : _c[indexEmoji];
+    if (emojiRef) {
+      emojiRef.focus();
+      return true;
+    }
+    return false;
   }
-  function g(l, e, t) {
-    o.value[e] || (o.value[e] = []), o.value[e][t] = l;
+  function setEmojiRef(el, indexTab, indexEmoji) {
+    if (!emojiRefs.value[indexTab]) {
+      emojiRefs.value[indexTab] = [];
+    }
+    emojiRefs.value[indexTab][indexEmoji] = el;
   }
-  function D(l, e) {
-    k.value[e] = l;
+  function setFilteredRef(el, index) {
+    emojiFilteredRefs.value[index] = el;
   }
-  function O(l, e) {
-    var t;
-    if (i.value = !1, l === G.ARROW_UP) {
-      const r = e % $;
-      if (!s(0, e - $)) {
-        const f = k.value.length - k.value.length % $ + r;
-        s(0, f), s(0, f) || s(0, k.value.length - 1);
+  function handleArrowNavigationFiltered(key, indexEmoji) {
+    var _a;
+    hoverFirstEmoji.value = false;
+    if (key === ARROW_KEYS.ARROW_UP) {
+      const position = indexEmoji % EMOJIS_PER_ROW;
+      if (!focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {
+        const lastEmojiPosition = emojiFilteredRefs.value.length - emojiFilteredRefs.value.length % EMOJIS_PER_ROW + position;
+        focusEmoji(0, lastEmojiPosition);
+        if (!focusEmoji(0, lastEmojiPosition)) {
+          focusEmoji(0, emojiFilteredRefs.value.length - 1);
+        }
       }
     }
-    if (l === G.ARROW_DOWN && !s(0, e + $)) {
-      const r = e % $;
-      (t = k.value) != null && t[e + ($ - r)] ? s(0, k.value.length - 1) : s(0, r);
+    if (key === ARROW_KEYS.ARROW_DOWN) {
+      if (!focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {
+        const position = indexEmoji % EMOJIS_PER_ROW;
+        if ((_a = emojiFilteredRefs.value) == null ? void 0 : _a[indexEmoji + (EMOJIS_PER_ROW - position)]) {
+          focusEmoji(0, emojiFilteredRefs.value.length - 1);
+        } else {
+          focusEmoji(0, position);
+        }
+      }
+    }
+    if (key === ARROW_KEYS.ARROW_LEFT) {
+      _handleHorizontalNavigation("left", 0, indexEmoji);
+    }
+    if (key === ARROW_KEYS.ARROW_RIGHT) {
+      _handleHorizontalNavigation("right", 0, indexEmoji);
     }
-    l === G.ARROW_LEFT && c("left", 0, e), l === G.ARROW_RIGHT && c("right", 0, e);
   }
-  function A(l, e, t) {
-    var r, f;
-    if (l === "ArrowUp") {
-      const b = t % $;
-      if (e === 0) {
-        const j = $ - o.value[o.value.length - 1].length % $, C = o.value[o.value.length - 1].length + j - ($ - b);
-        s(o.value.length - 1, C) || s(o.value.length - 1, o.value[o.value.length - 1].length - 1);
+  function handleArrowNavigation(key, indexTab, indexEmoji) {
+    var _a, _b;
+    if (key === "ArrowUp") {
+      const position = indexEmoji % EMOJIS_PER_ROW;
+      if (indexTab === 0) {
+        const numberOfMissingEmojis = EMOJIS_PER_ROW - emojiRefs.value[emojiRefs.value.length - 1].length % EMOJIS_PER_ROW;
+        const emojiToJump = emojiRefs.value[emojiRefs.value.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);
+        if (!focusEmoji(emojiRefs.value.length - 1, emojiToJump)) {
+          focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);
+        }
         return;
       }
-      if (!s(e, t - $)) {
-        const j = e - 1 < 0 ? 0 : e - 1, C = o.value[j].length, ee = C - C % $ + b;
-        s(j, ee) || s(e - 1, o.value[e - 1].length - 1);
+      if (!focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {
+        const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;
+        const emojisInPreviousTab = emojiRefs.value[previousTab].length;
+        const lastEmojiPosition = emojisInPreviousTab - emojisInPreviousTab % EMOJIS_PER_ROW + position;
+        if (!focusEmoji(previousTab, lastEmojiPosition)) {
+          focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);
+        }
       }
     }
-    if (l === "ArrowDown" && !s(e, t + $)) {
-      const b = t % $;
-      (f = (r = o.value) == null ? void 0 : r[e]) != null && f[t + ($ - b)] ? s(e, o.value[e].length - 1) : s(e + 1, b) || s(0, b) || s(0, o.value[0].length - 1);
+    if (key === "ArrowDown") {
+      if (!focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {
+        const position = indexEmoji % EMOJIS_PER_ROW;
+        if ((_b = (_a = emojiRefs.value) == null ? void 0 : _a[indexTab]) == null ? void 0 : _b[indexEmoji + (EMOJIS_PER_ROW - position)]) {
+          focusEmoji(indexTab, emojiRefs.value[indexTab].length - 1);
+        } else {
+          if (!focusEmoji(indexTab + 1, position)) {
+            if (!focusEmoji(0, position)) {
+              focusEmoji(0, emojiRefs.value[0].length - 1);
+            }
+          }
+        }
+      }
+    }
+    if (key === "ArrowLeft") {
+      _handleHorizontalNavigation("left", indexTab, indexEmoji);
+    }
+    if (key === "ArrowRight") {
+      _handleHorizontalNavigation("right", indexTab, indexEmoji);
     }
-    l === "ArrowLeft" && c("left", e, t), l === "ArrowRight" && c("right", e, t);
   }
   return {
-    emojiFilteredRefs: k,
-    isFiltering: L,
-    hoverFirstEmoji: i,
-    setEmojiRef: g,
-    setFilteredRef: D,
-    focusEmoji: s,
-    handleArrowNavigationFiltered: O,
-    handleArrowNavigation: A
+    emojiFilteredRefs,
+    isFiltering,
+    hoverFirstEmoji,
+    setEmojiRef,
+    setFilteredRef,
+    focusEmoji,
+    handleArrowNavigationFiltered,
+    handleArrowNavigation
   };
 }
-const Ce = { class: "d-emoji-picker__selector" }, Me = {
+const _hoisted_1$3 = { class: "d-emoji-picker__selector" };
+const _hoisted_2$3 = {
   key: 0,
   class: "d-emoji-picker__search-label d-emoji-picker__alignment"
-}, Ke = { key: 0 }, Ne = { class: "d-emoji-picker__tab" }, Ue = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], Pe = ["alt", "aria-label", "title", "src"], Be = {
+};
+const _hoisted_3$2 = { key: 0 };
+const _hoisted_4$2 = { class: "d-emoji-picker__tab" };
+const _hoisted_5$1 = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"];
+const _hoisted_6$1 = ["alt", "aria-label", "title", "src"];
+const _hoisted_7$1 = {
   key: 2,
   class: "d-emoji-picker__alignment"
-}, Ve = {
+};
+const _hoisted_8 = {
   class: "d-emoji-picker__tab",
   "data-qa": "filtered-emojis"
-}, qe = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], We = ["alt", "aria-label", "title", "src"], Ge = {
+};
+const _hoisted_9 = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"];
+const _hoisted_10 = ["alt", "aria-label", "title", "src"];
+const _sfc_main$3 = {
   __name: "emoji_selector",
   props: {
     /**
@@ -325,7 +461,7 @@ const Ce = { class: "d-emoji-picker__selector" }, Me = {
      */
     skinTone: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * The labels for the tabset
@@ -334,11 +470,11 @@ const Ce = { class: "d-emoji-picker__selector" }, Me = {
      */
     tabsetLabels: {
       type: Array,
-      required: !0
+      required: true
     },
     selectedTabset: {
       type: Object,
-      required: !0
+      required: true
     },
     /**
      * The label for the search results tab
@@ -347,11 +483,11 @@ const Ce = { class: "d-emoji-picker__selector" }, Me = {
      */
     searchResultsLabel: {
       type: String,
-      required: !0
+      required: true
     },
     searchNoResultsLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * The list of recently used emojis
@@ -398,228 +534,325 @@ const Ce = { class: "d-emoji-picker__selector" }, Me = {
       */
     "focus-search-input"
   ],
-  setup(o, { expose: k, emit: L }) {
-    const i = o, u = L, {
-      emojiFilteredRefs: R,
-      isFiltering: h,
-      hoverFirstEmoji: S,
-      setEmojiRef: c,
-      setFilteredRef: s,
-      focusEmoji: g,
-      handleArrowNavigationFiltered: D,
-      handleArrowNavigation: O
-    } = Oe(), A = p(null), l = p(null), e = p(null), t = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"], r = B(() => i.recentlyUsedEmojis.length ? i.tabsetLabels.map((n) => ({ label: n, ref: p(null) })) : i.tabsetLabels.slice(1).map((n) => ({ label: n, ref: p(null) }))), f = p(r.value[0].label), b = B(() => i.recentlyUsedEmojis.length ? t : t.slice(1)), j = p([]), C = B(() => [
-      ...I[`People${i.skinTone}`],
-      ...I.Nature,
-      ...I.Food,
-      ...I[`Activity${i.skinTone}`],
-      ...I.Travel,
-      ...I[`Objects${i.skinTone}`],
-      ...I.Symbols,
-      ...I.Flags
-    ]), ee = de(() => {
-      R.value = [], ie();
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const {
+      emojiFilteredRefs,
+      isFiltering,
+      hoverFirstEmoji,
+      setEmojiRef,
+      setFilteredRef,
+      focusEmoji,
+      handleArrowNavigationFiltered,
+      handleArrowNavigation
+    } = useKeyboardNavigation();
+    const tabCategoryRef = ref(null);
+    const listRef = ref(null);
+    const tabLabelObserver = ref(null);
+    const TABS_DATA = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"];
+    const tabLabels = computed(() => {
+      return props.recentlyUsedEmojis.length ? props.tabsetLabels.map((label) => ({ label, ref: ref(null) })) : props.tabsetLabels.slice(1).map((label) => ({ label, ref: ref(null) }));
+    });
+    const fixedLabel = ref(tabLabels.value[0].label);
+    const tabs = computed(() => {
+      return props.recentlyUsedEmojis.length ? TABS_DATA : TABS_DATA.slice(1);
     });
-    W(C, () => {
-      ie();
-    }, { immediate: !0 }), W(
-      () => i.recentlyUsedEmojis,
+    const filteredEmojis = ref([]);
+    const currentEmojis = computed(() => {
+      return [
+        ...emojisGrouped[`People${props.skinTone}`],
+        ...emojisGrouped.Nature,
+        ...emojisGrouped.Food,
+        ...emojisGrouped[`Activity${props.skinTone}`],
+        ...emojisGrouped.Travel,
+        ...emojisGrouped[`Objects${props.skinTone}`],
+        ...emojisGrouped.Symbols,
+        ...emojisGrouped.Flags
+      ];
+    });
+    const debouncedSearch = debounce(() => {
+      emojiFilteredRefs.value = [];
+      searchByNameAndKeywords();
+    });
+    watch(currentEmojis, () => {
+      searchByNameAndKeywords();
+    }, { immediate: true });
+    watch(
+      () => props.recentlyUsedEmojis,
       () => {
-        I["Recently used"] = i.recentlyUsedEmojis;
+        emojisGrouped["Recently used"] = props.recentlyUsedEmojis;
       },
-      { immediate: !0 }
-    ), W(() => i.emojiFilter, () => {
-      be(), i.emojiFilter ? h.value = !0 : (h.value = !1, P(null)), ee();
-    }), W(
-      () => i.selectedTabset,
-      (n) => {
-        X(n.tabId);
+      { immediate: true }
+    );
+    watch(() => props.emojiFilter, () => {
+      resetScroll();
+      if (props.emojiFilter) {
+        isFiltering.value = true;
+      } else {
+        isFiltering.value = false;
+        highlightEmoji(null);
+      }
+      debouncedSearch();
+    });
+    watch(
+      () => props.selectedTabset,
+      (tab) => {
+        scrollToTab(tab.tabId);
       },
-      { deep: !0 }
+      { deep: true }
     );
-    function te(n, a = !1) {
-      S.value = a, u("highlighted-emoji", n);
-    }
-    function ie() {
-      const n = i.emojiFilter.toLowerCase();
-      j.value = C.value.filter((a) => {
-        const m = a.name.toLowerCase().includes(n), v = a.keywords.some((d) => d.toLowerCase().includes(n));
-        return m || v;
-      }), x(() => {
-        n && te(j.value[0], !0);
+    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;
+      });
+      nextTick(() => {
+        if (searchStr) {
+          hoverEmoji(filteredEmojis.value[0], true);
+        }
       });
     }
-    function de(n, a = 300) {
-      let m;
-      return (...v) => {
-        clearTimeout(m), m = setTimeout(() => n(...v), a);
+    function debounce(fn, delay = 300) {
+      let timeout;
+      return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => fn(...args), delay);
       };
     }
-    function me(n) {
-      return `${Q + n}.png`;
-    }
-    function ve(n) {
-      n.target.parentNode.style.display = "none";
-    }
-    function X(n, a = !0) {
-      const v = r.value[n - 1].ref.value[0];
-      x(() => {
-        const d = l.value, M = n === "1" ? 0 : v.offsetTop - 20;
-        let E = !0, V = d.scrollTop;
-        u("is-scrolling", !0), d.addEventListener("scroll", () => {
-          if (E) {
-            const N = d.scrollTop;
-            (V < N && N >= M || V > N && N <= M) && (E = !1, u("is-scrolling", !1)), V = N;
+    function getImgSrc(emoji) {
+      return `${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];
+      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;
           }
-        }), d.scrollTop = M, a && g(n - 1, 0);
+        });
+        container.scrollTop = offsetTop;
+        if (focusFirstEmoji) {
+          focusEmoji(tabIndex - 1, 0);
+        }
       });
     }
-    function be() {
-      const n = l.value;
-      n.scrollTop = 0;
+    function resetScroll() {
+      const container = listRef.value;
+      container.scrollTop = 0;
     }
-    function pe() {
-      e.value = new IntersectionObserver((n) => {
-        n.forEach((a) => {
-          var d, M, E, V, N;
-          const { target: m } = a, v = parseInt(m.dataset.index);
-          a.isIntersecting && m.offsetTop <= A.value.offsetTop + 50 ? (f.value = ((d = r.value[v - 1]) == null ? void 0 : d.label) ?? ((M = r.value[0]) == null ? void 0 : M.label), u("scroll-into-tab", v - 1)) : a.boundingClientRect.bottom <= ((E = A.value) == null ? void 0 : E.getBoundingClientRect().bottom) ? (u("scroll-into-tab", v), f.value = (V = r.value[v]) == null ? void 0 : V.label) : v === 1 && (u("scroll-into-tab", v), f.value = (N = r.value[0]) == null ? void 0 : N.label);
+    function setTabLabelObserver() {
+      tabLabelObserver.value = new IntersectionObserver((entries) => {
+        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;
+          }
         });
-      }), e.value.observe(A.value), Array.from(l.value.children).forEach((n, a) => {
-        e.value.observe(n), n.dataset.index = a;
+      });
+      tabLabelObserver.value.observe(tabCategoryRef.value);
+      Array.from(listRef.value.children).forEach((child, index) => {
+        tabLabelObserver.value.observe(child);
+        child.dataset.index = index;
       });
     }
-    const he = (n, a, m) => {
-      if (n.preventDefault(), Object.values(G).includes(n.key)) {
-        D(n.key, a);
+    const handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {
+      event.preventDefault();
+      if (Object.values(ARROW_KEYS).includes(event.key)) {
+        handleArrowNavigationFiltered(event.key, indexEmoji);
         return;
       }
-      switch (n.key) {
+      switch (event.key) {
         case "Tab":
-          u("focus-skin-selector");
+          emits("focus-skin-selector");
           break;
         case "Enter":
-          Z(m);
+          selectEmoji(emoji);
           break;
       }
-    }, ge = (n, a, m, v) => {
-      if (n.preventDefault(), Object.values(G).includes(n.key)) {
-        O(n.key, a, m);
+    };
+    const handleKeyDown = (event, indexTab, indexEmoji, emoji) => {
+      event.preventDefault();
+      if (Object.values(ARROW_KEYS).includes(event.key)) {
+        handleArrowNavigation(event.key, indexTab, indexEmoji);
         return;
       }
-      switch (n.key) {
+      switch (event.key) {
         case "Tab":
-          n.shiftKey ? g(a, 0) && a > 0 ? X(a, !0) : (X(1, !1), u("focus-search-input")) : g(a + 1, 0) ? X(a + 1 + 1, !1) : u("focus-skin-selector");
+          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":
-          Z(v);
+          selectEmoji(emoji);
           break;
       }
     };
-    function Z(n) {
-      u("selected-emoji", n);
-    }
-    function P(n) {
-      u("highlighted-emoji", n);
-    }
-    function ke() {
-      g(0, 0);
-    }
-    function ye() {
-      g(b.value.length - 1, 0);
-    }
-    return ae(() => {
-      pe();
-    }), Re(() => {
-      e.value.disconnect();
-    }), k({
-      focusEmojiSelector: ke,
-      focusLastEmoji: ye
-    }), (n, a) => (y(), _("div", Ce, [
-      w("div", {
-        id: "d-emoji-picker-list",
-        ref_key: "listRef",
-        ref: l,
-        class: "d-emoji-picker__list"
-      }, [
-        o.emojiFilter ? (y(), _("p", Me, J(j.value.length > 0 ? o.searchResultsLabel : o.searchNoResultsLabel), 1)) : (y(), _("div", {
-          key: 1,
-          ref_key: "tabCategoryRef",
-          ref: A,
-          class: "d-emoji-picker__category d-emoji-picker__alignment"
-        }, [
-          w("p", null, J(f.value), 1)
-        ], 512)),
-        (y(!0), _(z, null, Y(r.value, (m, v) => oe((y(), _("div", {
-          key: v,
-          ref_for: !0,
-          ref: m.ref,
-          class: "d-emoji-picker__alignment"
+    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);
+    }
+    onMounted(() => {
+      setTabLabelObserver();
+    });
+    onUnmounted(() => {
+      tabLabelObserver.value.disconnect();
+    });
+    __expose({
+      focusEmojiSelector,
+      focusLastEmoji
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        createElementVNode("div", {
+          id: "d-emoji-picker-list",
+          ref_key: "listRef",
+          ref: listRef,
+          class: "d-emoji-picker__list"
         }, [
-          v ? (y(), _("p", Ke, J(m.label), 1)) : le("", !0),
-          w("div", Ne, [
-            (y(!0), _(z, null, Y(T(I)[b.value[v] + o.skinTone] ? T(I)[b.value[v] + o.skinTone] : T(I)[b.value[v]], (d, M) => (y(), _("button", {
-              key: d.shortname,
-              ref_for: !0,
-              ref: (E) => {
-                E && T(c)(E, v, M);
-              },
-              type: "button",
-              "aria-label": d.name,
-              onClick: (E) => Z(d),
-              onFocusin: (E) => P(d),
-              onFocusout: a[0] || (a[0] = (E) => P(null)),
-              onMouseover: (E) => P(d),
-              onMouseleave: a[1] || (a[1] = (E) => P(null)),
-              onKeydown: (E) => ge(E, v, M, d)
-            }, [
-              w("img", {
-                class: "d-icon d-icon--size-500",
-                alt: d.name,
-                "aria-label": d.name,
-                title: d.name,
-                src: me(d.unicode_character),
-                onError: ve
-              }, null, 40, Pe)
-            ], 40, Ue))), 128))
-          ])
-        ])), [
-          [se, !o.emojiFilter]
-        ])), 128)),
-        o.emojiFilter ? (y(), _("div", Be, [
-          w("div", Ve, [
-            (y(!0), _(z, null, Y(j.value, (m, v) => (y(), _("button", {
-              key: m.shortname,
-              ref_for: !0,
-              ref: (d) => {
-                d && T(s)(d, v);
-              },
-              type: "button",
-              "aria-label": m.name,
-              class: ce({
-                "hover-emoji": v === 0 && T(S)
-              }),
-              onClick: (d) => Z(m),
-              onFocusin: (d) => P(m),
-              onFocusout: a[2] || (a[2] = (d) => P(null)),
-              onMouseover: (d) => te(m),
-              onMouseleave: a[3] || (a[3] = (d) => te(null)),
-              onKeydown: (d) => he(d, v, m)
+          __props.emojiFilter ? (openBlock(), createElementBlock("p", _hoisted_2$3, toDisplayString(filteredEmojis.value.length > 0 ? __props.searchResultsLabel : __props.searchNoResultsLabel), 1)) : (openBlock(), createElementBlock("div", {
+            key: 1,
+            ref_key: "tabCategoryRef",
+            ref: tabCategoryRef,
+            class: "d-emoji-picker__category d-emoji-picker__alignment"
+          }, [
+            createElementVNode("p", null, toDisplayString(fixedLabel.value), 1)
+          ], 512)),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(tabLabels.value, (tabLabel, indexTab) => {
+            return withDirectives((openBlock(), createElementBlock("div", {
+              key: indexTab,
+              ref_for: true,
+              ref: tabLabel.ref,
+              class: "d-emoji-picker__alignment"
             }, [
-              w("img", {
-                class: "d-icon d-icon--size-500",
-                alt: m.name,
-                "aria-label": m.name,
-                title: m.name,
-                src: `${T(Q) + m.unicode_character}.png`
-              }, null, 8, We)
-            ], 42, qe))), 128))
-          ])
-        ])) : le("", !0)
-      ], 512)
-    ]));
+              indexTab ? (openBlock(), createElementBlock("p", _hoisted_3$2, toDisplayString(tabLabel.label), 1)) : createCommentVNode("", true),
+              createElementVNode("div", _hoisted_4$2, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(emojisGrouped)[tabs.value[indexTab] + __props.skinTone] ? unref(emojisGrouped)[tabs.value[indexTab] + __props.skinTone] : unref(emojisGrouped)[tabs.value[indexTab]], (emoji, indexEmoji) => {
+                  return openBlock(), createElementBlock("button", {
+                    key: emoji.shortname,
+                    ref_for: true,
+                    ref: (el) => {
+                      if (el)
+                        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)
+                  }, [
+                    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$1)
+                  ], 40, _hoisted_5$1);
+                }), 128))
+              ])
+            ])), [
+              [vShow, !__props.emojiFilter]
+            ]);
+          }), 128)),
+          __props.emojiFilter ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
+            createElementVNode("div", _hoisted_8, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(filteredEmojis.value, (emoji, index) => {
+                return openBlock(), createElementBlock("button", {
+                  key: emoji.shortname,
+                  ref_for: true,
+                  ref: (el) => {
+                    if (el)
+                      unref(setFilteredRef)(el, index);
+                  },
+                  type: "button",
+                  "aria-label": emoji.name,
+                  class: normalizeClass({
+                    "hover-emoji": index === 0 && 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)
+                }, [
+                  createElementVNode("img", {
+                    class: "d-icon d-icon--size-500",
+                    alt: emoji.name,
+                    "aria-label": emoji.name,
+                    title: emoji.name,
+                    src: `${unref(CDN_URL) + emoji.unicode_character}.png`
+                  }, null, 8, _hoisted_10)
+                ], 42, _hoisted_9);
+              }), 128))
+            ])
+          ])) : createCommentVNode("", true)
+        ], 512)
+      ]);
+    };
   }
-}, He = { "data-qa": "skin-selector" }, ze = { class: "d-emoji-picker__skin-list" }, Ye = ["onKeydown", "onClick"], Je = ["alt", "aria-label", "title", "src"], Qe = { class: "d-emoji-picker__skin-selected" }, Xe = ["aria-label"], Ze = ["alt", "aria-label", "title", "src"], xe = {
+};
+const _hoisted_1$2 = { "data-qa": "skin-selector" };
+const _hoisted_2$2 = { class: "d-emoji-picker__skin-list" };
+const _hoisted_3$1 = ["onKeydown", "onClick"];
+const _hoisted_4$1 = ["alt", "aria-label", "title", "src"];
+const _hoisted_5 = { class: "d-emoji-picker__skin-selected" };
+const _hoisted_6 = ["aria-label"];
+const _hoisted_7 = ["alt", "aria-label", "title", "src"];
+const _sfc_main$2 = {
   __name: "emoji_skin_selector",
   props: {
     /**
@@ -629,15 +862,15 @@ const Ce = { class: "d-emoji-picker__selector" }, Me = {
      */
     skinTone: {
       type: String,
-      required: !0
+      required: true
     },
     isHovering: {
       type: Boolean,
-      default: !1
+      default: false
     },
     skinSelectorButtonTooltipLabel: {
       type: String,
-      required: !0
+      required: true
     }
   },
   emits: [
@@ -650,124 +883,165 @@ const Ce = { class: "d-emoji-picker__selector" }, Me = {
     "focus-tabset",
     "focus-last-emoji"
   ],
-  setup(o, { expose: k, emit: L }) {
-    const i = o, u = L, R = [
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const skinList = [
       {
         name: ":wave_tone1:",
         unicode_output: "1f44b-1f3fb",
-        skinTone: q.LIGHT,
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
         skinCode: "_tone1"
       },
       {
         name: ":wave_tone2:",
         unicode_output: "1f44b-1f3fc",
-        skinTone: q.MEDIUM_LIGHT,
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
         skinCode: "_tone2"
       },
       {
         name: ":wave_tone3:",
         unicode_output: "1f44b-1f3fd",
-        skinTone: q.MEDIUM,
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
         skinCode: "_tone3"
       },
       {
         name: ":wave_tone4:",
         unicode_output: "1f44b-1f3fe",
-        skinTone: q.MEDIUM_DARK,
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
         skinCode: "_tone4"
       },
       {
         name: ":wave_tone5:",
         unicode_output: "1f44b-1f3ff",
-        skinTone: q.DARK,
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
         skinCode: "_tone5"
       },
       {
         name: ":wave:",
         unicode_output: "1f44b",
-        skinTone: q.DEFAULT,
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
         skinCode: ""
       }
-    ], h = p(!1), S = p(null), c = p([]);
-    re(
-      () => i.isHovering && (h.value = !1)
+    ];
+    const isOpen = ref(false);
+    const skinSelectorRef = ref(null);
+    const skinsRef = ref([]);
+    watchEffect(
+      () => props.isHovering && (isOpen.value = false)
     );
-    const s = B(() => R.find((t) => t.skinTone === i.skinTone)), g = p(s.value);
-    re(() => s.value && (g.value = s.value));
-    function D(t) {
-      c.value.push(t);
+    const skinPassedIn = computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));
+    const skinSelected = ref(skinPassedIn.value);
+    watchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));
+    function setSkinsRef(ref2) {
+      skinsRef.value.push(ref2);
     }
-    function O() {
-      S.value.focus();
+    function focusSkinSelector() {
+      skinSelectorRef.value.focus();
     }
-    function A(t) {
-      g.value = t, h.value = !1, u("skin-tone", t.skinTone), x(() => O());
+    function selectSkin(skin) {
+      skinSelected.value = skin;
+      isOpen.value = false;
+      emits("skin-tone", skin.skinTone);
+      nextTick(() => focusSkinSelector());
     }
-    const l = (t, r, f) => {
-      var b, j, C;
-      t.preventDefault(), t.key === "ArrowLeft" && (f === 0 && ((b = c.value[c.value.length - 1]) == null || b.focus()), (j = c.value[f - 1]) == null || j.focus()), t.key === "ArrowRight" && ((C = c.value[f + 1]) == null || C.focus()), t.key === "Enter" && (r ? A(r) : e()), t.key === "Tab" && (t.shiftKey ? u("focus-last-emoji") : u("focus-tabset"));
+    const handleKeyDown = (event, skin, index) => {
+      var _a, _b, _c;
+      event.preventDefault();
+      if (event.key === "ArrowLeft") {
+        if (index === 0)
+          (_a = skinsRef.value[skinsRef.value.length - 1]) == null ? void 0 : _a.focus();
+        (_b = skinsRef.value[index - 1]) == null ? void 0 : _b.focus();
+      }
+      if (event.key === "ArrowRight") {
+        (_c = skinsRef.value[index + 1]) == null ? void 0 : _c.focus();
+      }
+      if (event.key === "Enter") {
+        if (skin) {
+          selectSkin(skin);
+        } else {
+          toggleSkinList();
+        }
+      }
+      if (event.key === "Tab") {
+        if (event.shiftKey) {
+          emits("focus-last-emoji");
+        } else {
+          emits("focus-tabset");
+        }
+      }
     };
-    function e() {
-      h.value = !h.value, x(() => c.value[0].focus());
-    }
-    return k({
-      focusSkinSelector: O
-    }), (t, r) => (y(), _("div", He, [
-      oe(w("div", ze, [
-        (y(), _(z, null, Y(R, (f, b) => w("button", {
-          ref_for: !0,
-          ref: (j) => {
-            j && D(j);
-          },
-          key: f.name,
-          class: ce({
-            selected: g.value.skinCode === f.skinCode
-          }),
-          onKeydown: (j) => l(j, f, b),
-          onClick: (j) => A(f)
-        }, [
-          w("img", {
-            class: "d-icon d-icon--size-500",
-            alt: f.name,
-            "aria-label": f.name,
-            title: f.name,
-            src: `${T(Q) + f.unicode_output}.png`
-          }, null, 8, Je)
-        ], 42, Ye)), 64))
-      ], 512), [
-        [se, h.value]
-      ]),
-      oe(w("div", Qe, [
-        F(T($e), { placement: "top-end" }, {
-          anchor: H(() => [
-            w("button", {
-              ref_key: "skinSelectorRef",
-              ref: S,
-              "aria-label": o.skinSelectorButtonTooltipLabel,
-              tabindex: "-1",
-              onClick: e,
-              onKeydown: r[0] || (r[0] = (f) => l(f))
+    function toggleSkinList() {
+      isOpen.value = !isOpen.value;
+      nextTick(() => skinsRef.value[0].focus());
+    }
+    __expose({
+      focusSkinSelector
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        withDirectives(createElementVNode("div", _hoisted_2$2, [
+          (openBlock(), createElementBlock(Fragment, null, renderList(skinList, (skin, index) => {
+            return createElementVNode("button", {
+              ref_for: true,
+              ref: (el) => {
+                if (el)
+                  setSkinsRef(el);
+              },
+              key: skin.name,
+              class: normalizeClass({
+                "selected": skinSelected.value.skinCode === skin.skinCode
+              }),
+              onKeydown: (event) => handleKeyDown(event, skin, index),
+              onClick: ($event) => selectSkin(skin)
             }, [
-              w("img", {
+              createElementVNode("img", {
                 class: "d-icon d-icon--size-500",
-                alt: g.value.name,
-                "aria-label": g.value.name,
-                title: g.value.name,
-                src: `${T(Q) + g.value.unicode_output}.png`
-              }, null, 8, Ze)
-            ], 40, Xe)
-          ]),
-          default: H(() => [
-            fe(J(o.skinSelectorButtonTooltipLabel) + " ", 1)
-          ]),
-          _: 1
-        })
-      ], 512), [
-        [se, !h.value]
-      ])
-    ]));
+                alt: skin.name,
+                "aria-label": skin.name,
+                title: skin.name,
+                src: `${unref(CDN_URL) + skin.unicode_output}.png`
+              }, null, 8, _hoisted_4$1)
+            ], 42, _hoisted_3$1);
+          }), 64))
+        ], 512), [
+          [vShow, isOpen.value]
+        ]),
+        withDirectives(createElementVNode("div", _hoisted_5, [
+          createVNode(unref(DtTooltip), { placement: "top-end" }, {
+            anchor: withCtx(() => [
+              createElementVNode("button", {
+                ref_key: "skinSelectorRef",
+                ref: skinSelectorRef,
+                "aria-label": __props.skinSelectorButtonTooltipLabel,
+                tabindex: "-1",
+                onClick: toggleSkinList,
+                onKeydown: _cache[0] || (_cache[0] = (event) => handleKeyDown(event))
+              }, [
+                createElementVNode("img", {
+                  class: "d-icon d-icon--size-500",
+                  alt: skinSelected.value.name,
+                  "aria-label": skinSelected.value.name,
+                  title: skinSelected.value.name,
+                  src: `${unref(CDN_URL) + skinSelected.value.unicode_output}.png`
+                }, null, 8, _hoisted_7)
+              ], 40, _hoisted_6)
+            ]),
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.skinSelectorButtonTooltipLabel) + " ", 1)
+            ]),
+            _: 1
+          })
+        ], 512), [
+          [vShow, !isOpen.value]
+        ])
+      ]);
+    };
   }
-}, et = { class: "d-emoji-picker__data" }, tt = ["alt", "aria-label", "title", "src"], ot = {
+};
+const _hoisted_1$1 = { class: "d-emoji-picker__data" };
+const _hoisted_2$1 = ["alt", "aria-label", "title", "src"];
+const _sfc_main$1 = {
   __name: "emoji_description",
   props: {
     /**
@@ -780,23 +1054,28 @@ const Ce = { class: "d-emoji-picker__selector" }, Me = {
       default: null
     }
   },
-  setup(o) {
-    return (k, L) => {
-      var i;
-      return y(), _("div", et, [
-        o.emoji ? (y(), _("img", {
+  setup(__props) {
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        __props.emoji ? (openBlock(), createElementBlock("img", {
           key: 0,
           class: "d-icon d-icon--size-500",
-          alt: o.emoji.name,
-          "aria-label": o.emoji.name,
-          title: o.emoji.name,
-          src: `${T(Q) + o.emoji.unicode_character}.png`
-        }, null, 8, tt)) : le("", !0),
-        fe(" " + J((i = o.emoji) == null ? void 0 : i.name), 1)
+          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$1)) : createCommentVNode("", true),
+        createTextVNode(" " + toDisplayString((_a = __props.emoji) == null ? void 0 : _a.name), 1)
       ]);
     };
   }
-}, lt = { class: "d-emoji-picker" }, st = { class: "d-emoji-picker--header" }, nt = { class: "d-emoji-picker--body" }, it = { class: "d-emoji-picker--footer" }, Et = {
+};
+const _hoisted_1 = { class: "d-emoji-picker" };
+const _hoisted_2 = { class: "d-emoji-picker--header" };
+const _hoisted_3 = { class: "d-emoji-picker--body" };
+const _hoisted_4 = { class: "d-emoji-picker--footer" };
+const _sfc_main = {
   __name: "emoji_picker",
   props: {
     /**
@@ -821,7 +1100,7 @@ const Ce = { class: "d-emoji-picker__selector" }, Me = {
      */
     searchPlaceholderLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * The label for the search results tab
@@ -832,7 +1111,7 @@ const Ce = { class: "d-emoji-picker__selector" }, Me = {
      */
     searchResultsLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * The label for the search no results
@@ -843,7 +1122,7 @@ const Ce = { class: "d-emoji-picker__selector" }, Me = {
      */
     searchNoResultsLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * The list of tabsets to show, it is necessary to be updated with the correct language
@@ -857,7 +1136,7 @@ const Ce = { class: "d-emoji-picker__selector" }, Me = {
      */
     tabSetLabels: {
       type: Array,
-      required: !0
+      required: true
     },
     /**
      * The skin tone to show the emojis
@@ -881,7 +1160,7 @@ const Ce = { class: "d-emoji-picker__selector" }, Me = {
      */
     skinSelectorButtonTooltipLabel: {
       type: String,
-      required: !0
+      required: true
     }
   },
   emits: [
@@ -903,86 +1182,97 @@ const Ce = { class: "d-emoji-picker__selector" }, Me = {
      */
     "close"
   ],
-  setup(o, { emit: k }) {
-    const L = o, i = k, u = p(""), R = p(null), h = p({}), S = p(0), c = p(!1), s = B(() => L.recentlyUsedEmojis.length > 0);
-    function g(l) {
-      u.value = "", h.value = l, h.value = { ...h.value, tabId: l };
-    }
-    function D(l) {
-      S.value = l;
-    }
-    function O(l) {
-      c.value = l;
-    }
-    function A(l) {
-      R.value = l;
-    }
-    return (l, e) => (y(), _("div", lt, [
-      w("div", st, [
-        F(De, {
-          ref: "tabsetRef",
-          "emoji-filter": u.value,
-          "show-recently-used-tab": s.value,
-          "scroll-into-tab": S.value,
-          "tabset-labels": o.tabSetLabels,
-          "is-scrolling": c.value,
-          onFocusSearchInput: e[0] || (e[0] = (t) => l.$refs.searchInputRef.focusSearchInput()),
-          onFocusSkinSelector: e[1] || (e[1] = (t) => l.$refs.skinSelectorRef.focusSkinSelector()),
-          onSelectedTabset: g,
-          onKeydown: e[2] || (e[2] = U((t) => i("close"), ["esc"]))
-        }, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels", "is-scrolling"])
-      ]),
-      w("div", nt, [
-        F(Ie, {
-          ref: "searchInputRef",
-          modelValue: u.value,
-          "onUpdate:modelValue": e[3] || (e[3] = (t) => u.value = t),
-          "search-placeholder-label": o.searchPlaceholderLabel,
-          onSelectFirstEmoji: e[4] || (e[4] = (t) => i("selected-emoji", R.value)),
-          onFocusTabset: e[5] || (e[5] = (t) => l.$refs.tabsetRef.focusTabset()),
-          onFocusEmojiSelector: e[6] || (e[6] = (t) => l.$refs.emojiSelectorRef.focusEmojiSelector()),
-          onKeydown: e[7] || (e[7] = U((t) => i("close"), ["esc"]))
-        }, null, 8, ["modelValue", "search-placeholder-label"]),
-        F(Ge, {
-          ref: "emojiSelectorRef",
-          "emoji-filter": u.value,
-          "skin-tone": o.skinTone,
-          "tabset-labels": o.tabSetLabels,
-          "search-results-label": o.searchResultsLabel,
-          "search-no-results-label": o.searchNoResultsLabel,
-          "recently-used-emojis": o.recentlyUsedEmojis,
-          "selected-tabset": h.value,
-          onScrollIntoTab: D,
-          onIsScrolling: O,
-          onHighlightedEmoji: A,
-          onSelectedEmoji: e[8] || (e[8] = (t) => i("selected-emoji", t)),
-          onFocusSkinSelector: e[9] || (e[9] = (t) => l.$refs.skinSelectorRef.focusSkinSelector()),
-          onFocusSearchInput: e[10] || (e[10] = (t) => l.$refs.searchInputRef.focusSearchInput()),
-          onKeydown: e[11] || (e[11] = U((t) => i("close"), ["esc"]))
-        }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "selected-tabset"])
-      ]),
-      w("div", it, [
-        F(ot, { emoji: R.value }, null, 8, ["emoji"]),
-        F(xe, {
-          ref: "skinSelectorRef",
-          "is-hovering": !!R.value,
-          "skin-selector-button-tooltip-label": o.skinSelectorButtonTooltipLabel,
-          "skin-tone": o.skinTone,
-          onSkinTone: e[12] || (e[12] = (t) => i("skin-tone", t)),
-          onFocusTabset: e[13] || (e[13] = (t) => l.$refs.tabsetRef.focusTabset()),
-          onFocusLastEmoji: e[14] || (e[14] = (t) => l.$refs.emojiSelectorRef.focusLastEmoji()),
-          onKeydown: e[15] || (e[15] = U((t) => i("close"), ["esc"]))
-        }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
-      ])
-    ]));
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const searchQuery = ref("");
+    const highlightedEmoji = ref(null);
+    const selectedTabset = ref({});
+    const scrollIntoTab = ref(0);
+    const isScrolling = ref(false);
+    const showRecentlyUsedTab = computed(() => props.recentlyUsedEmojis.length > 0);
+    function scrollToSelectedTabset(tabId) {
+      searchQuery.value = "";
+      selectedTabset.value = tabId;
+      selectedTabset.value = { ...selectedTabset.value, tabId };
+    }
+    function updateScrollIntoTab(value) {
+      scrollIntoTab.value = value;
+    }
+    function updateIsScrolling(value) {
+      isScrolling.value = value;
+    }
+    function updateHighlightedEmoji(emoji) {
+      highlightedEmoji.value = emoji;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createVNode(_sfc_main$4, {
+            ref: "tabsetRef",
+            "emoji-filter": searchQuery.value,
+            "show-recently-used-tab": showRecentlyUsedTab.value,
+            "scroll-into-tab": scrollIntoTab.value,
+            "tabset-labels": __props.tabSetLabels,
+            "is-scrolling": isScrolling.value,
+            onFocusSearchInput: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.searchInputRef.focusSearchInput()),
+            onFocusSkinSelector: _cache[1] || (_cache[1] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
+            onSelectedTabset: scrollToSelectedTabset,
+            onKeydown: _cache[2] || (_cache[2] = withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels", "is-scrolling"])
+        ]),
+        createElementVNode("div", _hoisted_3, [
+          createVNode(_sfc_main$5, {
+            ref: "searchInputRef",
+            modelValue: searchQuery.value,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => searchQuery.value = $event),
+            "search-placeholder-label": __props.searchPlaceholderLabel,
+            onSelectFirstEmoji: _cache[4] || (_cache[4] = ($event) => emits("selected-emoji", highlightedEmoji.value)),
+            onFocusTabset: _cache[5] || (_cache[5] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
+            onFocusEmojiSelector: _cache[6] || (_cache[6] = ($event) => _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
+            onKeydown: _cache[7] || (_cache[7] = withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["modelValue", "search-placeholder-label"]),
+          createVNode(_sfc_main$3, {
+            ref: "emojiSelectorRef",
+            "emoji-filter": searchQuery.value,
+            "skin-tone": __props.skinTone,
+            "tabset-labels": __props.tabSetLabels,
+            "search-results-label": __props.searchResultsLabel,
+            "search-no-results-label": __props.searchNoResultsLabel,
+            "recently-used-emojis": __props.recentlyUsedEmojis,
+            "selected-tabset": selectedTabset.value,
+            onScrollIntoTab: updateScrollIntoTab,
+            onIsScrolling: updateIsScrolling,
+            onHighlightedEmoji: updateHighlightedEmoji,
+            onSelectedEmoji: _cache[8] || (_cache[8] = ($event) => emits("selected-emoji", $event)),
+            onFocusSkinSelector: _cache[9] || (_cache[9] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
+            onFocusSearchInput: _cache[10] || (_cache[10] = ($event) => _ctx.$refs.searchInputRef.focusSearchInput()),
+            onKeydown: _cache[11] || (_cache[11] = withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "selected-tabset"])
+        ]),
+        createElementVNode("div", _hoisted_4, [
+          createVNode(_sfc_main$1, { emoji: highlightedEmoji.value }, null, 8, ["emoji"]),
+          createVNode(_sfc_main$2, {
+            ref: "skinSelectorRef",
+            "is-hovering": !!highlightedEmoji.value,
+            "skin-selector-button-tooltip-label": __props.skinSelectorButtonTooltipLabel,
+            "skin-tone": __props.skinTone,
+            onSkinTone: _cache[12] || (_cache[12] = ($event) => emits("skin-tone", $event)),
+            onFocusTabset: _cache[13] || (_cache[13] = ($event) => _ctx.$refs.tabsetRef.focusTabset()),
+            onFocusLastEmoji: _cache[14] || (_cache[14] = ($event) => _ctx.$refs.emojiSelectorRef.focusLastEmoji()),
+            onKeydown: _cache[15] || (_cache[15] = withKeys(($event) => emits("close"), ["esc"]))
+          }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
+        ])
+      ]);
+    };
   }
 };
 export {
-  G as ARROW_KEYS,
-  Q as CDN_URL,
-  Et as DtEmojiPicker,
-  $ as EMOJIS_PER_ROW,
-  K as EMOJI_PICKER_CATEGORIES,
-  q as EMOJI_PICKER_SKIN_TONE_MODIFIERS
+  ARROW_KEYS,
+  CDN_URL,
+  _sfc_main as DtEmojiPicker,
+  EMOJIS_PER_ROW,
+  EMOJI_PICKER_CATEGORIES,
+  EMOJI_PICKER_SKIN_TONE_MODIFIERS
 };
 //# sourceMappingURL=emoji-picker.js.map