@dialpad/dialtone-vue 3.69.3 → 3.71.0

package/dist/emoji.js

@@ -1,7 +1,7 @@
-import { _ as N, s as Q, D as B, H as W, J as X, a6 as k, t as Y } from "./emoji_text_wrapper-a6cf0407.js";
-import { x as Je, w as Ge, ao as Ke, a9 as Qe, a8 as We, ad as Xe, ab as Ye, ac as Ze, aa as et, ae as tt, a7 as lt, aq as ot, ar as st, ap as nt, af as at, aj as it, ai as rt, ah as ct, ag as ut, al as dt, an as mt, am as bt, ak as _t } from "./emoji_text_wrapper-a6cf0407.js";
-import { openBlock as i, createElementBlock as d, createVNode as T, createSlots as Z, withCtx as F, createElementVNode as v, computed as D, ref as f, toRefs as ee, watch as w, Fragment as U, renderList as R, unref as h, createBlock as te, withModifiers as le, nextTick as oe, onMounted as se, onUnmounted as ne, toDisplayString as A, withDirectives as M, createCommentVNode as O, vShow as x, watchEffect as ae, normalizeClass as ie, createTextVNode as P } from "vue";
-const re = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ce = { class: "d-emoji-picker__search-button" }, ue = {
+import { _ as W, s as be, D as Q, J as he, K as pe, a7 as I, t as ge } from "./emoji_text_wrapper-2d0e6363.js";
+import { y as ft, w as dt, ap as mt, aa as vt, a9 as bt, ae as ht, ac as pt, ad as gt, ab as yt, af as kt, a8 as _t, ar as jt, as as St, aq as $t, ag as wt, ak as Tt, aj as Rt, ai as Et, ah as Lt, am as Ft, ao as Ct, an as It, al as At } from "./emoji_text_wrapper-2d0e6363.js";
+import { ref as y, onMounted as te, openBlock as j, createElementBlock as S, createVNode as K, withKeys as q, withModifiers as oe, createSlots as ye, withCtx as B, createElementVNode as T, computed as V, toRefs as ke, watch as N, Fragment as M, renderList as O, unref as $, createBlock as _e, nextTick as G, onUnmounted as je, toDisplayString as P, withDirectives as X, createCommentVNode as Y, vShow as Z, normalizeClass as le, watchEffect as Se, createTextVNode as se } from "vue";
+const $e = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, we = ["onKeydown"], Te = {
   __name: "emoji_search",
   props: {
     searchPlaceholderLabel: {
@@ -13,36 +13,55 @@ const re = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, ce = {
       default: ""
     }
   },
-  emits: ["update:modelValue"],
-  setup(e) {
-    return (_, l) => (i(), d("div", re, [
-      T(Q, {
-        placeholder: e.searchPlaceholderLabel,
-        "model-value": e.modelValue,
-        "onUpdate:modelValue": l[1] || (l[1] = (s) => _.$emit("update:modelValue", s))
-      }, Z({
-        leftIcon: F(() => [
-          T(B, { name: "search" })
+  emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
+  setup(i, { expose: v, emit: d }) {
+    const s = y(null);
+    function u() {
+      d("update:modelValue", ""), h();
+    }
+    function h() {
+      s.value.focus();
+    }
+    return te(() => {
+      h();
+    }), v({
+      focusSearchInput: h
+    }), (g, p) => (j(), S("div", $e, [
+      K(be, {
+        ref_key: "searchInput",
+        ref: s,
+        placeholder: i.searchPlaceholderLabel,
+        "model-value": i.modelValue,
+        "onUpdate:modelValue": p[0] || (p[0] = (c) => g.$emit("update:modelValue", c)),
+        onKeydown: [
+          p[1] || (p[1] = q((c) => g.$emit("focus-tabset"), ["up"])),
+          p[2] || (p[2] = q(oe((c) => g.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
+          p[3] || (p[3] = q((c) => g.$emit("select-first-emoji"), ["enter"]))
+        ]
+      }, ye({
+        leftIcon: B(() => [
+          K(Q, { name: "search" })
         ]),
         _: 2
       }, [
-        e.modelValue.length > 0 ? {
+        i.modelValue.length > 0 ? {
           name: "rightIcon",
-          fn: F(() => [
-            v("button", ce, [
-              T(B, {
-                name: "close",
-                onClick: l[0] || (l[0] = (s) => _.$emit("update:modelValue", ""))
-              })
-            ])
+          fn: B(() => [
+            T("button", {
+              class: "d-emoji-picker__search-button",
+              onClick: u,
+              onKeydown: q(u, ["enter"])
+            }, [
+              K(Q, { name: "close" })
+            ], 40, we)
           ]),
           key: "0"
         } : void 0
       ]), 1032, ["placeholder", "model-value"])
     ]));
   }
-}, de = /* @__PURE__ */ N(ue, [["__scopeId", "data-v-20dd73b1"]]);
-const me = { class: "d-emoji-picker__tabset" }, be = {
+}, Re = /* @__PURE__ */ W(Te, [["__scopeId", "data-v-2576719b"]]);
+const Ee = { class: "d-emoji-picker__tabset" }, Le = {
   __name: "emoji_tabset",
   props: {
     /**
@@ -82,10 +101,11 @@ const me = { class: "d-emoji-picker__tabset" }, be = {
      * @event selected-tabset
      * @param {String} tabId - The name of the tab that was selected
      */
-    "selected-tabset"
+    "selected-tabset",
+    "focus-search-input"
   ],
-  setup(e, { emit: _ }) {
-    const l = e, s = [
+  setup(i, { expose: v, emit: d }) {
+    const s = i, u = [
       { label: "Recently used", icon: "clock" },
       { label: "Smiley’s and people", icon: "satisfied" },
       { label: "Nature", icon: "living-thing" },
@@ -95,61 +115,124 @@ const me = { class: "d-emoji-picker__tabset" }, be = {
       { label: "Objects", icon: "lightbulb" },
       { label: "Symbols", icon: "heart" },
       { label: "Flags", icon: "flag" }
-    ], b = D(() => (l.showRecentlyUsedTab ? s : s.slice(1)).map(($, p) => ({
-      ...$,
-      label: l.tabsetLabels[p],
-      id: (p + 1).toString(),
-      panelId: (p + 1).toString()
-    }))), r = D(() => l.emojiFilter.length > 0), g = f("1"), { isScrolling: c } = ee(l);
-    w(
-      () => l.scrollIntoTab,
+    ], h = V(() => (s.showRecentlyUsedTab ? u : u.slice(1)).map((t, n) => ({
+      ...t,
+      label: s.tabsetLabels[n],
+      id: (n + 1).toString(),
+      panelId: (n + 1).toString()
+    }))), g = V(() => s.emojiFilter.length > 0), p = y("1"), { isScrolling: c } = ke(s), A = y([]);
+    N(
+      () => s.scrollIntoTab,
       () => {
-        !c.value && !r.value && (g.value = (l.scrollIntoTab + 1).toString());
+        !c.value && !g.value && (p.value = (s.scrollIntoTab + 1).toString());
       }
-    ), w(
-      r,
+    ), N(
+      g,
       () => {
-        r.value && (g.value = null);
+        g.value && (p.value = null);
       }
     );
-    function y(u) {
-      c.value || (g.value = u), _("selected-tabset", u);
+    function L(e) {
+      c.value || (p.value = e), d("selected-tabset", e);
+    }
+    function f(e) {
+      A.value.push(e.$el);
     }
-    return (u, $) => (i(), d("div", me, [
-      T(W, {
+    function F() {
+      A.value[0].focus();
+    }
+    function b(e, t) {
+      e.key === "Enter" && (L(t), A.value[t - 1].blur()), e.key === "Tab" && (e.preventDefault(), d("focus-search-input")), e.key === "ArrowDown" && d("focus-search-input");
+    }
+    return v({
+      focusTabset: F
+    }), (e, t) => (j(), S("div", Ee, [
+      K(he, {
         "tab-list-class": "d-emoji-picker__tabset-list",
-        selected: g.value
+        selected: p.value
       }, {
-        tabs: F(() => [
-          (i(!0), d(U, null, R(h(b), (p) => (i(), te(X, {
-            id: p.id,
-            key: p.id,
-            "panel-id": p.panelId,
-            label: p.label,
+        tabs: B(() => [
+          (j(!0), S(M, null, O($(h), (n, w) => (j(), _e(pe, {
+            id: n.id,
+            ref_for: !0,
+            ref: (k) => {
+              k && f(k);
+            },
+            key: n.id,
+            "panel-id": n.panelId,
+            label: n.label,
             "aria-controls": "d-emoji-picker-list",
-            onClickCapture: le((V) => y(p.id), ["stop"])
+            tabindex: w + 1,
+            onClickCapture: oe((k) => L(n.id), ["stop"]),
+            onKeydown: (k) => b(k, n.id)
           }, {
-            default: F(() => [
-              T(B, {
+            default: B(() => [
+              K(Q, {
                 size: "400",
-                name: p.icon
+                name: n.icon
               }, null, 8, ["name"])
             ]),
             _: 2
-          }, 1032, ["id", "panel-id", "label", "onClickCapture"]))), 128))
+          }, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]))), 128))
         ]),
         _: 1
       }, 8, ["selected"])
     ]));
   }
-}, q = "https://static.dialpadcdn.com/joypixels/png/unicode/32/";
-const _e = { class: "d-emoji-picker__selector" }, ve = {
+}, z = "https://static.dialpadcdn.com/joypixels/png/unicode/32/", E = 9;
+function Fe(i) {
+  const v = y([]), d = y([]), s = y(!1), u = y(!0);
+  function h(e, t = !1) {
+    u.value = t, i("highlighted-emoji", e);
+  }
+  function g(e, t, n) {
+    v.value[t] || (v.value[t] = []), v.value[t][n] = e;
+  }
+  function p(e, t) {
+    d.value[t] = e;
+  }
+  function c(e, t) {
+    var w, k, U;
+    const n = s.value ? (w = d.value) == null ? void 0 : w[t] : (U = (k = v.value) == null ? void 0 : k[e]) == null ? void 0 : U[t];
+    return n ? (n.focus(), !0) : !1;
+  }
+  function A(e, t) {
+    c(e, t - 1) || (v.value[e - 1] ? c(e - 1, v.value[e - 1].length - 1) : c(v.value.length - 1, v.value[v.value.length - 1].length - 1));
+  }
+  function L(e, t) {
+    c(e, t + 1) || c(e + 1, 0) || c(0, 0);
+  }
+  function f(e, t) {
+    c(0, t - 1) || c(0, d.value.length - 1);
+  }
+  function F(e, t) {
+    c(0, t + 1) || c(0, 0);
+  }
+  function b(e, t, n) {
+    s.value ? e === "left" ? f(t, n) : e === "right" && F(t, n) : e === "left" ? A(t, n) : e === "right" && L(t, n);
+  }
+  return {
+    emojiRefs: v,
+    emojiFilteredRefs: d,
+    isFiltering: s,
+    hoverFirstEmoji: u,
+    setEmojiRef: g,
+    setFilteredRef: p,
+    hoverEmoji: h,
+    focusEmoji: c,
+    handleHorizontalNavigation: b
+  };
+}
+const Ce = { class: "d-emoji-picker__selector" }, Ie = {
   key: 0,
   class: "d-emoji-picker__search-label d-emoji-picker__alignment"
-}, pe = { key: 0 }, fe = { class: "d-emoji-picker__tab" }, he = ["aria-label", "onClick", "onFocusin", "onMouseover"], ge = ["alt", "aria-label", "title", "src"], je = {
+}, Ae = { key: 0 }, De = { class: "d-emoji-picker__tab" }, Ke = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], Ue = ["alt", "aria-label", "title", "src"], qe = {
   key: 2,
   class: "d-emoji-picker__alignment"
-}, ke = { class: "d-emoji-picker__tab" }, ye = ["aria-label", "onClick", "onFocusin", "onMouseover"], Te = ["alt", "aria-label", "title", "src"], Se = {
+}, Ne = {
+  class: "d-emoji-picker__tab",
+  "data-qa": "filtered-emojis"
+}, Ve = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], Be = ["alt", "aria-label", "title", "src"], Me = {
   __name: "emoji_selector",
   props: {
     /**
@@ -229,162 +312,236 @@ const _e = { class: "d-emoji-picker__selector" }, ve = {
      * @event is-scrolling
      * @param {Boolean} is-scrolling - Whether the user is scrolling with the scroll-to
       */
-    "is-scrolling"
+    "is-scrolling",
+    /**
+     * Emitted when the user reach the end of the emoji list
+     * @event focus-skin-selector
+      */
+    "focus-skin-selector",
+    /**
+     * Emitted when the user shift tab in first tab of emoji selector
+     * @event focus-search-input
+      */
+    "focus-search-input"
   ],
-  setup(e, { emit: _ }) {
-    const l = e, s = f(null), b = f(null), r = f(null), g = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"], c = D(() => l.recentlyUsedEmojis.length ? l.tabsetLabels.map((t) => ({ label: t, ref: f(null) })) : l.tabsetLabels.slice(1).map((t) => ({ label: t, ref: f(null) }))), y = f(c.value[0].label), u = D(() => l.recentlyUsedEmojis.length ? g : g.slice(1)), $ = f([]), p = D(() => [
-      ...k[`People${l.skinTone}`],
-      ...k.Nature,
-      ...k.Food,
-      ...k[`Activity${l.skinTone}`],
-      ...k.Travel,
-      ...k[`Objects${l.skinTone}`],
-      ...k.Symbols,
-      ...k.Flags
-    ]), V = E(() => {
-      j();
+  setup(i, { expose: v, emit: d }) {
+    const s = i, {
+      emojiRefs: u,
+      emojiFilteredRefs: h,
+      isFiltering: g,
+      hoverFirstEmoji: p,
+      setEmojiRef: c,
+      setFilteredRef: A,
+      hoverEmoji: L,
+      focusEmoji: f,
+      handleHorizontalNavigation: F
+    } = Fe(d), b = y(null), e = y(null), t = y(null), n = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"], w = V(() => s.recentlyUsedEmojis.length ? s.tabsetLabels.map((o) => ({ label: o, ref: y(null) })) : s.tabsetLabels.slice(1).map((o) => ({ label: o, ref: y(null) }))), k = y(w.value[0].label), U = V(() => s.recentlyUsedEmojis.length ? n : n.slice(1)), H = y([]), x = V(() => [
+      ...I[`People${s.skinTone}`],
+      ...I.Nature,
+      ...I.Food,
+      ...I[`Activity${s.skinTone}`],
+      ...I.Travel,
+      ...I[`Objects${s.skinTone}`],
+      ...I.Symbols,
+      ...I.Flags
+    ]), ne = ie(() => {
+      h.value = [], ee();
     });
-    w(p, () => {
-      j();
-    }, { immediate: !0 }), w(
-      () => l.recentlyUsedEmojis,
+    N(x, () => {
+      ee();
+    }, { immediate: !0 }), N(
+      () => s.recentlyUsedEmojis,
       () => {
-        k["Recently used"] = l.recentlyUsedEmojis;
+        I["Recently used"] = s.recentlyUsedEmojis;
       },
       { immediate: !0 }
-    ), w(() => l.emojiFilter, () => {
-      G(), V();
-    }), w(
-      () => l.selectedTabset,
-      (t) => {
-        J(t.tabId);
+    ), N(() => s.emojiFilter, () => {
+      ue(), s.emojiFilter ? g.value = !0 : (g.value = !1, d("highlighted-emoji", null)), ne();
+    }), N(
+      () => s.selectedTabset,
+      (o) => {
+        J(o.tabId);
       },
       { deep: !0 }
     );
-    function j() {
-      const t = l.emojiFilter.toLowerCase();
-      $.value = p.value.filter((a) => {
-        const n = a.name.toLowerCase().includes(t), o = a.keywords.some((m) => m.toLowerCase().includes(t));
-        return n || o;
+    function ee() {
+      const o = s.emojiFilter.toLowerCase();
+      H.value = x.value.filter((l) => {
+        const r = l.name.toLowerCase().includes(o), m = l.keywords.some((a) => a.toLowerCase().includes(o));
+        return r || m;
+      }), G(() => {
+        o && L(H.value[0], !0);
       });
     }
-    function E(t, a = 300) {
-      let n;
-      return (...o) => {
-        clearTimeout(n), n = setTimeout(() => t(...o), a);
+    function ie(o, l = 300) {
+      let r;
+      return (...m) => {
+        clearTimeout(r), r = setTimeout(() => o(...m), l);
       };
     }
-    function C(t) {
-      return `${q + t}.png`;
+    function ae(o) {
+      return `${z + o}.png`;
     }
-    function H(t) {
-      t.target.parentNode.style.display = "none";
+    function re(o) {
+      o.target.parentNode.style.display = "none";
     }
-    function J(t) {
-      const n = c.value[t - 1].ref.value[0];
-      oe(() => {
-        const o = b.value, m = t === "1" ? 0 : n.offsetTop - 20;
-        let S = !0, I = o.scrollTop;
-        _("is-scrolling", !0), o.addEventListener("scroll", () => {
-          if (S) {
-            const L = o.scrollTop;
-            (I < L && L >= m || I > L && L <= m) && (S = !1, _("is-scrolling", !1)), I = L;
+    function J(o, l = !0) {
+      const m = w.value[o - 1].ref.value[0];
+      G(() => {
+        const a = e.value, R = o === "1" ? 0 : m.offsetTop - 20;
+        let _ = !0, D = a.scrollTop;
+        d("is-scrolling", !0), a.addEventListener("scroll", () => {
+          if (_) {
+            const C = a.scrollTop;
+            (D < C && C >= R || D > C && C <= R) && (_ = !1, d("is-scrolling", !1)), D = C;
           }
-        }), o.scrollTop = m;
+        }), a.scrollTop = R, l && f(o - 1, 0);
       });
     }
-    function G() {
-      const t = b.value;
-      t.scrollTop = 0;
+    function ue() {
+      const o = e.value;
+      o.scrollTop = 0;
     }
-    function K() {
-      r.value = new IntersectionObserver((t) => {
-        t.forEach((a) => {
-          var m, S, I, L, z;
-          const { target: n } = a, o = parseInt(n.dataset.index);
-          a.isIntersecting && n.offsetTop <= s.value.offsetTop + 50 ? (y.value = ((m = c.value[o - 1]) == null ? void 0 : m.label) ?? ((S = c.value[0]) == null ? void 0 : S.label), _("scroll-into-tab", o - 1)) : a.boundingClientRect.bottom <= ((I = s.value) == null ? void 0 : I.getBoundingClientRect().bottom) ? (_("scroll-into-tab", o), y.value = (L = c.value[o]) == null ? void 0 : L.label) : o === 1 && (_("scroll-into-tab", o), y.value = (z = c.value[0]) == null ? void 0 : z.label);
+    function ce() {
+      t.value = new IntersectionObserver((o) => {
+        o.forEach((l) => {
+          var a, R, _, D, C;
+          const { target: r } = l, m = parseInt(r.dataset.index);
+          l.isIntersecting && r.offsetTop <= b.value.offsetTop + 50 ? (k.value = ((a = w.value[m - 1]) == null ? void 0 : a.label) ?? ((R = w.value[0]) == null ? void 0 : R.label), d("scroll-into-tab", m - 1)) : l.boundingClientRect.bottom <= ((_ = b.value) == null ? void 0 : _.getBoundingClientRect().bottom) ? (d("scroll-into-tab", m), k.value = (D = w.value[m]) == null ? void 0 : D.label) : m === 1 && (d("scroll-into-tab", m), k.value = (C = w.value[0]) == null ? void 0 : C.label);
         });
-      }), r.value.observe(s.value), Array.from(b.value.children).forEach((t, a) => {
-        r.value.observe(t), t.dataset.index = a;
+      }), t.value.observe(b.value), Array.from(e.value.children).forEach((o, l) => {
+        t.value.observe(o), o.dataset.index = l;
       });
     }
-    return se(() => {
-      K();
-    }), ne(() => {
-      r.value.disconnect();
-    }), (t, a) => (i(), d("div", _e, [
-      v("div", {
+    const fe = (o, l, r) => {
+      var m;
+      if (o.preventDefault(), p.value = !1, o.key === "ArrowUp") {
+        const a = l % E;
+        if (!f(0, l - E)) {
+          const R = h.value.length - h.value.length % E + a;
+          f(0, R), f(0, R) || f(0, h.value.length - 1);
+        }
+      }
+      if (o.key === "ArrowDown" && !f(0, l + E)) {
+        const a = l % E;
+        (m = h.value) != null && m[l + (E - a)] ? f(0, h.value.length - 1) : f(0, a);
+      }
+      o.key === "ArrowLeft" && F("left", 0, l), o.key === "ArrowRight" && F("right", 0, l), o.key === "Tab" && d("focus-skin-selector"), o.key === "Enter" && d("selected-emoji", r);
+    }, de = (o, l, r, m) => {
+      var a, R;
+      if (o.preventDefault(), o.key === "ArrowUp") {
+        const _ = r % E;
+        if (l === 0) {
+          const D = E - u.value[u.value.length - 1].length % E, C = u.value[u.value.length - 1].length + D - (E - _);
+          f(u.value.length - 1, C) || f(u.value.length - 1, u.value[u.value.length - 1].length - 1);
+          return;
+        }
+        if (!f(l, r - E)) {
+          const D = l - 1 < 0 ? 0 : l - 1, C = u.value[D].length, ve = C - C % E + _;
+          f(D, ve) || f(l - 1, u.value[l - 1].length - 1);
+        }
+      }
+      if (o.key === "ArrowDown" && !f(l, r + E)) {
+        const _ = r % E;
+        (R = (a = u.value) == null ? void 0 : a[l]) != null && R[r + (E - _)] ? f(l, u.value[l].length - 1) : f(l + 1, _) || f(0, _) || f(0, u.value[0].length - 1);
+      }
+      o.key === "ArrowLeft" && F("left", l, r), o.key === "ArrowRight" && F("right", l, r), o.key === "Tab" && (f(l + 1, 0) ? J(l + 1 + 1, !1) : d("focus-skin-selector")), o.key === "Tab" && o.shiftKey && (f(l, 0) && l > 0 ? J(l, !0) : (J(1, !1), d("focus-search-input"))), o.key === "Enter" && d("selected-emoji", m);
+    };
+    function me() {
+      f(0, 0);
+    }
+    return te(() => {
+      ce();
+    }), je(() => {
+      t.value.disconnect();
+    }), v({
+      focusEmojiSelector: me
+    }), (o, l) => (j(), S("div", Ce, [
+      T("div", {
         id: "d-emoji-picker-list",
         ref_key: "listRef",
-        ref: b,
+        ref: e,
         class: "d-emoji-picker__list"
       }, [
-        e.emojiFilter ? (i(), d("p", ve, A($.value.length > 0 ? e.searchResultsLabel : e.searchNoResultsLabel), 1)) : (i(), d("div", {
+        i.emojiFilter ? (j(), S("p", Ie, P(H.value.length > 0 ? i.searchResultsLabel : i.searchNoResultsLabel), 1)) : (j(), S("div", {
           key: 1,
           ref_key: "tabCategoryRef",
-          ref: s,
+          ref: b,
           class: "d-emoji-picker__category d-emoji-picker__alignment"
         }, [
-          v("p", null, A(y.value), 1)
+          T("p", null, P(k.value), 1)
         ], 512)),
-        (i(!0), d(U, null, R(h(c), (n, o) => M((i(), d("div", {
-          key: o,
+        (j(!0), S(M, null, O($(w), (r, m) => X((j(), S("div", {
+          key: m,
           ref_for: !0,
-          ref: n.ref,
+          ref: r.ref,
           class: "d-emoji-picker__alignment"
         }, [
-          o ? (i(), d("p", pe, A(n.label), 1)) : O("", !0),
-          v("div", fe, [
-            (i(!0), d(U, null, R(h(k)[h(u)[o] + e.skinTone] ? h(k)[h(u)[o] + e.skinTone] : h(k)[h(u)[o]], (m) => (i(), d("button", {
-              key: m.shortname,
+          m ? (j(), S("p", Ae, P(r.label), 1)) : Y("", !0),
+          T("div", De, [
+            (j(!0), S(M, null, O($(I)[$(U)[m] + i.skinTone] ? $(I)[$(U)[m] + i.skinTone] : $(I)[$(U)[m]], (a, R) => (j(), S("button", {
+              key: a.shortname,
+              ref_for: !0,
+              ref: (_) => {
+                _ && $(c)(_, m, R);
+              },
               type: "button",
-              "aria-label": m.name,
-              onClick: (S) => t.$emit("selected-emoji", m),
-              onFocusin: (S) => t.$emit("highlighted-emoji", m),
-              onFocusout: a[0] || (a[0] = (S) => t.$emit("highlighted-emoji", null)),
-              onMouseover: (S) => t.$emit("highlighted-emoji", m),
-              onMouseleave: a[1] || (a[1] = (S) => t.$emit("highlighted-emoji", null))
+              "aria-label": a.name,
+              onClick: (_) => o.$emit("selected-emoji", a),
+              onFocusin: (_) => o.$emit("highlighted-emoji", a),
+              onFocusout: l[0] || (l[0] = (_) => o.$emit("highlighted-emoji", null)),
+              onMouseover: (_) => o.$emit("highlighted-emoji", a),
+              onMouseleave: l[1] || (l[1] = (_) => o.$emit("highlighted-emoji", null)),
+              onKeydown: (_) => de(_, m, R, a)
             }, [
-              v("img", {
+              T("img", {
                 class: "d-icon d-icon--size-500",
-                alt: m.name,
-                "aria-label": m.name,
-                title: m.name,
-                src: C(m.unicode_character),
-                onError: H
-              }, null, 40, ge)
-            ], 40, he))), 128))
+                alt: a.name,
+                "aria-label": a.name,
+                title: a.name,
+                src: ae(a.unicode_character),
+                onError: re
+              }, null, 40, Ue)
+            ], 40, Ke))), 128))
           ])
         ])), [
-          [x, !e.emojiFilter]
+          [Z, !i.emojiFilter]
         ])), 128)),
-        e.emojiFilter ? (i(), d("div", je, [
-          v("div", ke, [
-            (i(!0), d(U, null, R($.value, (n) => (i(), d("button", {
-              key: n.shortname,
+        i.emojiFilter ? (j(), S("div", qe, [
+          T("div", Ne, [
+            (j(!0), S(M, null, O(H.value, (r, m) => (j(), S("button", {
+              key: r.shortname,
+              ref_for: !0,
+              ref: (a) => {
+                a && $(A)(a, m);
+              },
               type: "button",
-              "aria-label": n.name,
-              onClick: (o) => t.$emit("selected-emoji", n),
-              onFocusin: (o) => t.$emit("highlighted-emoji", n),
-              onFocusout: a[2] || (a[2] = (o) => t.$emit("highlighted-emoji", null)),
-              onMouseover: (o) => t.$emit("highlighted-emoji", n),
-              onMouseleave: a[3] || (a[3] = (o) => t.$emit("highlighted-emoji", null))
+              "aria-label": r.name,
+              class: le({
+                "hover-emoji": m === 0 && $(p)
+              }),
+              onClick: (a) => o.$emit("selected-emoji", r),
+              onFocusin: (a) => o.$emit("highlighted-emoji", r),
+              onFocusout: l[2] || (l[2] = (a) => o.$emit("highlighted-emoji", null)),
+              onMouseover: (a) => $(L)(r),
+              onMouseleave: l[3] || (l[3] = (a) => $(L)(null)),
+              onKeydown: (a) => fe(a, m, r)
             }, [
-              v("img", {
+              T("img", {
                 class: "d-icon d-icon--size-500",
-                alt: n.name,
-                "aria-label": n.name,
-                title: n.name,
-                src: `${h(q) + n.unicode_character}.png`
-              }, null, 8, Te)
-            ], 40, ye))), 128))
+                alt: r.name,
+                "aria-label": r.name,
+                title: r.name,
+                src: `${$(z) + r.unicode_character}.png`
+              }, null, 8, Be)
+            ], 42, Ve))), 128))
           ])
-        ])) : O("", !0)
+        ])) : Y("", !0)
       ], 512)
     ]));
   }
-}, $e = /* @__PURE__ */ N(Se, [["__scopeId", "data-v-183240d8"]]);
-const Ee = { class: "d-emoji-picker__skin-list" }, Le = ["onClick"], Ce = ["alt", "aria-label", "title", "src"], Ie = { class: "d-emoji-picker__skin-selected" }, we = ["alt", "aria-label", "title", "src"], De = {
+}, Oe = /* @__PURE__ */ W(Me, [["__scopeId", "data-v-b604e646"]]);
+const Pe = { "data-qa": "skin-selector" }, ze = { class: "d-emoji-picker__skin-list" }, He = ["onKeydown", "onClick"], Je = ["alt", "aria-label", "title", "src"], Ge = { class: "d-emoji-picker__skin-selected" }, We = ["aria-label"], Qe = ["alt", "aria-label", "title", "src"], Xe = {
   __name: "emoji_skin_selector",
   props: {
     /**
@@ -411,10 +568,11 @@ const Ee = { class: "d-emoji-picker__skin-list" }, Le = ["onClick"], Ce = ["alt"
      * @event skin-tone
      * @type {Number}
      */
-    "skin-tone"
+    "skin-tone",
+    "focus-tabset"
   ],
-  setup(e, { emit: _ }) {
-    const l = e, s = [
+  setup(i, { expose: v, emit: d }) {
+    const s = i, u = [
       {
         name: ":wave_tone1:",
         unicode_output: "1f44b-1f3fb",
@@ -451,60 +609,84 @@ const Ee = { class: "d-emoji-picker__skin-list" }, Le = ["onClick"], Ce = ["alt"
         skinTone: "Default",
         skinCode: ""
       }
-    ], b = f(s.find((c) => c.skinTone === l.skinTone)), r = f(!1);
-    ae(
-      () => l.isHovering && (r.value = !1)
+    ], h = y(u.find((e) => e.skinTone === s.skinTone)), g = y(!1), p = y(null), c = y([]);
+    Se(
+      () => s.isHovering && (g.value = !1)
     );
-    function g(c) {
-      b.value = c, r.value = !1, _("skin-tone", c.skinTone);
+    function A(e) {
+      c.value.push(e);
+    }
+    function L() {
+      p.value.focus();
+    }
+    function f(e) {
+      h.value = e, g.value = !1, d("skin-tone", e.skinTone), G(() => L());
+    }
+    const F = (e, t, n) => {
+      var w, k, U;
+      e.preventDefault(), e.key === "ArrowLeft" && (n === 0 && ((w = c.value[c.value.length - 1]) == null || w.focus()), (k = c.value[n - 1]) == null || k.focus()), e.key === "ArrowRight" && ((U = c.value[n + 1]) == null || U.focus()), e.key === "Enter" && (t ? f(t) : b()), e.key === "Tab" && d("focus-tabset");
+    };
+    function b() {
+      g.value = !g.value, G(() => c.value[0].focus());
     }
-    return (c, y) => (i(), d("div", null, [
-      M(v("div", Ee, [
-        (i(), d(U, null, R(s, (u) => v("button", {
-          key: u.name,
-          class: ie({
-            selected: b.value.skinCode === u.skinCode
+    return v({
+      focusSkinSelector: L
+    }), (e, t) => (j(), S("div", Pe, [
+      X(T("div", ze, [
+        (j(), S(M, null, O(u, (n, w) => T("button", {
+          ref_for: !0,
+          ref: (k) => {
+            k && A(k);
+          },
+          key: n.name,
+          class: le({
+            selected: h.value.skinCode === n.skinCode
           }),
-          onClick: ($) => g(u)
+          onKeydown: (k) => F(k, n, w),
+          onClick: (k) => f(n)
         }, [
-          v("img", {
+          T("img", {
             class: "d-icon d-icon--size-500",
-            alt: u.name,
-            "aria-label": u.name,
-            title: u.name,
-            src: `${h(q) + u.unicode_output}.png`
-          }, null, 8, Ce)
-        ], 10, Le)), 64))
+            alt: n.name,
+            "aria-label": n.name,
+            title: n.name,
+            src: `${$(z) + n.unicode_output}.png`
+          }, null, 8, Je)
+        ], 42, He)), 64))
       ], 512), [
-        [x, r.value]
+        [Z, g.value]
       ]),
-      M(v("div", Ie, [
-        T(Y, { placement: "top-end" }, {
-          anchor: F(() => [
-            v("button", {
-              onClick: y[0] || (y[0] = (u) => r.value = !0)
+      X(T("div", Ge, [
+        K(ge, { placement: "top-end" }, {
+          anchor: B(() => [
+            T("button", {
+              ref_key: "skinSelectorRef",
+              ref: p,
+              "aria-label": i.skinSelectorButtonTooltipLabel,
+              onClick: b,
+              onKeydown: t[0] || (t[0] = (n) => F(n))
             }, [
-              v("img", {
+              T("img", {
                 class: "d-icon d-icon--size-500",
-                alt: b.value.name,
-                "aria-label": b.value.name,
-                title: b.value.name,
-                src: `${h(q) + b.value.unicode_output}.png`
-              }, null, 8, we)
-            ])
+                alt: h.value.name,
+                "aria-label": h.value.name,
+                title: h.value.name,
+                src: `${$(z) + h.value.unicode_output}.png`
+              }, null, 8, Qe)
+            ], 40, We)
           ]),
-          default: F(() => [
-            P(A(e.skinSelectorButtonTooltipLabel) + " ", 1)
+          default: B(() => [
+            se(P(i.skinSelectorButtonTooltipLabel) + " ", 1)
           ]),
           _: 1
         })
       ], 512), [
-        [x, !r.value]
+        [Z, !g.value]
       ])
     ]));
   }
-}, Fe = /* @__PURE__ */ N(De, [["__scopeId", "data-v-5c3fd4f6"]]);
-const Ue = { class: "d-emoji-picker__data" }, Re = ["alt", "aria-label", "title", "src"], Ae = {
+}, Ye = /* @__PURE__ */ W(Xe, [["__scopeId", "data-v-58a153f4"]]);
+const Ze = { class: "d-emoji-picker__data" }, xe = ["alt", "aria-label", "title", "src"], et = {
   __name: "emoji_description",
   props: {
     /**
@@ -517,24 +699,24 @@ const Ue = { class: "d-emoji-picker__data" }, Re = ["alt", "aria-label", "title"
       default: null
     }
   },
-  setup(e) {
-    return (_, l) => {
+  setup(i) {
+    return (v, d) => {
       var s;
-      return i(), d("div", Ue, [
-        e.emoji ? (i(), d("img", {
+      return j(), S("div", Ze, [
+        i.emoji ? (j(), S("img", {
           key: 0,
           class: "d-icon d-icon--size-500",
-          alt: e.emoji.name,
-          "aria-label": e.emoji.name,
-          title: e.emoji.name,
-          src: `${h(q) + e.emoji.unicode_character}.png`
-        }, null, 8, Re)) : O("", !0),
-        P(" " + A((s = e.emoji) == null ? void 0 : s.name), 1)
+          alt: i.emoji.name,
+          "aria-label": i.emoji.name,
+          title: i.emoji.name,
+          src: `${$(z) + i.emoji.unicode_character}.png`
+        }, null, 8, xe)) : Y("", !0),
+        se(" " + P((s = i.emoji) == null ? void 0 : s.name), 1)
       ]);
     };
   }
-}, qe = /* @__PURE__ */ N(Ae, [["__scopeId", "data-v-48c61881"]]);
-const Ve = { class: "d-emoji-picker" }, Ne = { class: "d-emoji-picker--header" }, Be = { class: "d-emoji-picker--body" }, Me = { class: "d-emoji-picker--footer" }, ze = {
+}, tt = /* @__PURE__ */ W(et, [["__scopeId", "data-v-48c61881"]]);
+const ot = { class: "d-emoji-picker" }, lt = { class: "d-emoji-picker--header" }, st = { class: "d-emoji-picker--body" }, nt = { class: "d-emoji-picker--footer" }, rt = {
   __name: "emoji_picker",
   props: {
     /**
@@ -634,88 +816,108 @@ const Ve = { class: "d-emoji-picker" }, Ne = { class: "d-emoji-picker--header" }
      * @event skin-tone
      * @param {String} skin - The selected skin tone from the skin selector
      */
-    "skin-tone"
+    "skin-tone",
+    /**
+     * Since the keyboard events are encapsulated, we emit this event to close the picker
+     * @event close
+     */
+    "close"
   ],
-  setup(e, { emit: _ }) {
-    const l = e, s = f(""), b = f(null), r = f({}), g = f(0), c = f(!1), y = D(() => l.recentlyUsedEmojis.length > 0);
-    function u(j) {
-      s.value = "", r.value = j, r.value = { ...r.value, tabId: j };
+  setup(i, { emit: v }) {
+    const d = i, s = y(""), u = y(null), h = y({}), g = y(0), p = y(!1), c = V(() => d.recentlyUsedEmojis.length > 0);
+    function A(b) {
+      s.value = "", h.value = b, h.value = { ...h.value, tabId: b };
     }
-    function $(j) {
-      g.value = j;
+    function L(b) {
+      g.value = b;
     }
-    function p(j) {
-      c.value = j;
+    function f(b) {
+      p.value = b;
     }
-    function V(j) {
-      b.value = j;
+    function F(b) {
+      u.value = b;
     }
-    return (j, E) => (i(), d("div", Ve, [
-      v("div", Ne, [
-        T(be, {
+    return (b, e) => (j(), S("div", ot, [
+      T("div", lt, [
+        K(Le, {
+          ref: "tabsetRef",
           "emoji-filter": s.value,
-          "show-recently-used-tab": h(y),
+          "show-recently-used-tab": $(c),
           "scroll-into-tab": g.value,
-          "tabset-labels": e.tabSetLabels,
-          "is-scrolling": c.value,
-          onSelectedTabset: u
+          "tabset-labels": i.tabSetLabels,
+          "is-scrolling": p.value,
+          onFocusSearchInput: e[0] || (e[0] = (t) => b.$refs.searchInputRef.focusSearchInput()),
+          onSelectedTabset: A,
+          onKeydown: e[1] || (e[1] = q((t) => v("close"), ["esc"]))
         }, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels", "is-scrolling"])
       ]),
-      v("div", Be, [
-        T(de, {
+      T("div", st, [
+        K(Re, {
+          ref: "searchInputRef",
           modelValue: s.value,
-          "onUpdate:modelValue": E[0] || (E[0] = (C) => s.value = C),
-          "search-placeholder-label": e.searchPlaceholderLabel
+          "onUpdate:modelValue": e[2] || (e[2] = (t) => s.value = t),
+          "search-placeholder-label": i.searchPlaceholderLabel,
+          onSelectFirstEmoji: e[3] || (e[3] = (t) => v("selected-emoji", u.value)),
+          onFocusTabset: e[4] || (e[4] = (t) => b.$refs.tabsetRef.focusTabset()),
+          onFocusEmojiSelector: e[5] || (e[5] = (t) => b.$refs.emojiSelectorRef.focusEmojiSelector()),
+          onKeydown: e[6] || (e[6] = q((t) => v("close"), ["esc"]))
         }, null, 8, ["modelValue", "search-placeholder-label"]),
-        T($e, {
+        K(Oe, {
+          ref: "emojiSelectorRef",
           "emoji-filter": s.value,
-          "skin-tone": e.skinTone,
-          "tabset-labels": e.tabSetLabels,
-          "search-results-label": e.searchResultsLabel,
-          "search-no-results-label": e.searchNoResultsLabel,
-          "recently-used-emojis": e.recentlyUsedEmojis,
-          "selected-tabset": r.value,
-          onScrollIntoTab: $,
-          onIsScrolling: p,
-          onHighlightedEmoji: V,
-          onSelectedEmoji: E[1] || (E[1] = (C) => _("selected-emoji", C))
+          "skin-tone": i.skinTone,
+          "tabset-labels": i.tabSetLabels,
+          "search-results-label": i.searchResultsLabel,
+          "search-no-results-label": i.searchNoResultsLabel,
+          "recently-used-emojis": i.recentlyUsedEmojis,
+          "selected-tabset": h.value,
+          onScrollIntoTab: L,
+          onIsScrolling: f,
+          onHighlightedEmoji: F,
+          onSelectedEmoji: e[7] || (e[7] = (t) => v("selected-emoji", t)),
+          onFocusSkinSelector: e[8] || (e[8] = (t) => b.$refs.skinSelectorRef.focusSkinSelector()),
+          onFocusSearchInput: e[9] || (e[9] = (t) => b.$refs.searchInputRef.focusSearchInput()),
+          onKeydown: e[10] || (e[10] = q((t) => v("close"), ["esc"]))
         }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "selected-tabset"])
       ]),
-      v("div", Me, [
-        T(qe, { emoji: b.value }, null, 8, ["emoji"]),
-        T(Fe, {
-          "is-hovering": !!b.value,
-          "skin-selector-button-tooltip-label": e.skinSelectorButtonTooltipLabel,
-          "skin-tone": e.skinTone,
-          onSkinTone: E[2] || (E[2] = (C) => _("skin-tone", C))
+      T("div", nt, [
+        K(tt, { emoji: u.value }, null, 8, ["emoji"]),
+        K(Ye, {
+          ref: "skinSelectorRef",
+          "is-hovering": !!u.value,
+          "skin-selector-button-tooltip-label": i.skinSelectorButtonTooltipLabel,
+          "skin-tone": i.skinTone,
+          onSkinTone: e[11] || (e[11] = (t) => v("skin-tone", t)),
+          onFocusTabset: e[12] || (e[12] = (t) => b.$refs.tabsetRef.focusTabset()),
+          onKeydown: e[13] || (e[13] = q((t) => v("close"), ["esc"]))
         }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
       ])
     ]));
   }
 };
 export {
-  Je as DtEmoji,
-  ze as DtEmojiPicker,
-  Ge as DtEmojiTextWrapper,
-  Ke as codeToEmojiData,
-  Qe as customEmojiAssetUrl,
-  We as defaultEmojiAssetUrl,
-  Xe as emojiFileExtensionLarge,
-  Ye as emojiFileExtensionSmall,
-  Ze as emojiImageUrlLarge,
-  et as emojiImageUrlSmall,
-  tt as emojiJson,
-  lt as emojiVersion,
-  ot as filterValidShortCodes,
-  st as findEmojis,
-  nt as findShortCodes,
-  at as getEmojiData,
-  it as setCustomEmojiJson,
-  rt as setCustomEmojiUrl,
-  ct as setEmojiAssetUrlLarge,
-  ut as setEmojiAssetUrlSmall,
-  dt as shortcodeToEmojiData,
-  mt as stringToUnicode,
-  bt as unicodeToString,
-  _t as validateCustomEmojiJson
+  ft as DtEmoji,
+  rt as DtEmojiPicker,
+  dt as DtEmojiTextWrapper,
+  mt as codeToEmojiData,
+  vt as customEmojiAssetUrl,
+  bt as defaultEmojiAssetUrl,
+  ht as emojiFileExtensionLarge,
+  pt as emojiFileExtensionSmall,
+  gt as emojiImageUrlLarge,
+  yt as emojiImageUrlSmall,
+  kt as emojiJson,
+  _t as emojiVersion,
+  jt as filterValidShortCodes,
+  St as findEmojis,
+  $t as findShortCodes,
+  wt as getEmojiData,
+  Tt as setCustomEmojiJson,
+  Rt as setCustomEmojiUrl,
+  Et as setEmojiAssetUrlLarge,
+  Lt as setEmojiAssetUrlSmall,
+  Ft as shortcodeToEmojiData,
+  Ct as stringToUnicode,
+  It as unicodeToString,
+  At as validateCustomEmojiJson
 };