@dialpad/dialtone-vue 3.182.4 → 3.184.0

package/dist/lib/emoji-picker/emoji-picker.js

@@ -1,14 +1,14 @@
-import { ref as g, onMounted as re, openBlock as k, createElementBlock as _, createVNode as C, unref as w, withKeys as M, withModifiers as ue, createSlots as ye, withCtx as q, computed as P, watch as B, Fragment as G, renderList as W, createBlock as te, resolveDynamicComponent as Se, nextTick as X, onUnmounted as je, createElementVNode as E, toDisplayString as J, withDirectives as oe, createCommentVNode as Z, vShow as le, normalizeClass as ce, watchEffect as ae, createTextVNode as Re } from "vue";
-import { DtIconSearch as _e, DtIconClose as $e, DtIconClock as we, DtIconSatisfied as Te, DtIconLivingThing as Ie, DtIconFood as Ee, DtIconObject as Le, DtIconTransportation as Fe, DtIconLightbulb as De, DtIconHeart as Ae, DtIconFlag as Ce } from "@dialpad/dialtone-icons/vue3";
-import Ke from "../input/input.js";
-import Oe from "../button/button.js";
-import { returnFirstEl as Ne } from "../../common/utils/index.js";
-import { EMOJI_PICKER_CATEGORIES as O, ARROW_KEYS as z, EMOJIS_PER_ROW as L, CDN_URL as Y, EMOJI_PICKER_SKIN_TONE_MODIFIERS as V } from "./emoji-picker-constants.js";
-import Ue from "../tab/tab-group.js";
-import Me from "../tab/tab.js";
-import { emojisGrouped as D } from "@dialpad/dialtone-emojis";
-import Be from "../tooltip/tooltip.js";
-const qe = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Pe = {
+import { ref as k, onMounted as ue, openBlock as h, createElementBlock as R, createVNode as O, unref as $, withKeys as P, withModifiers as ce, createSlots as Re, withCtx as U, computed as M, watch as N, Fragment as W, renderList as J, createBlock as Z, resolveDynamicComponent as we, nextTick as x, onBeforeUnmount as Te, createElementVNode as _, toDisplayString as H, withDirectives as oe, createCommentVNode as Y, vShow as le, normalizeClass as fe, watchEffect as re, createTextVNode as de } from "vue";
+import { DtIconSearch as $e, DtIconClose as _e, DtIconClock as Le, DtIconSatisfied as Ie, DtIconLivingThing as Fe, DtIconFood as Ae, DtIconObject as Ce, DtIconTransportation as De, DtIconLightbulb as Oe, DtIconHeart as Ke, DtIconFlag as Ne, DtIconTiktok as Ue } from "@dialpad/dialtone-icons/vue3";
+import Me from "../input/input.js";
+import me from "../button/button.js";
+import { returnFirstEl as Be } from "../../common/utils/index.js";
+import { EMOJI_PICKER_CATEGORIES as D, ARROW_KEYS as z, EMOJIS_PER_ROW as L, CDN_URL as Q, EMOJI_PICKER_SKIN_TONE_MODIFIERS as V } from "./emoji-picker-constants.js";
+import qe from "../tab/tab-group.js";
+import Pe from "../tab/tab.js";
+import { emojisGrouped as F } from "@dialpad/dialtone-emojis";
+import Ve from "../tooltip/tooltip.js";
+const ze = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, He = {
   __name: "emoji_search",
   props: {
     searchPlaceholderLabel: {
@@ -21,50 +21,50 @@ const qe = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Pe = {
     }
   },
   emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
-  setup(t, { expose: y, emit: T }) {
-    const a = T, c = g(null);
-    function I() {
-      a("update:modelValue", ""), p();
+  setup(o, { expose: g, emit: y }) {
+    const n = y, u = k(null);
+    function T() {
+      n("update:modelValue", ""), p();
     }
     function p() {
-      c.value.focus();
+      u.value.focus();
     }
-    return re(() => {
+    return ue(() => {
       p();
-    }), y({
+    }), g({
       focusSearchInput: p
-    }), (S, f) => (k(), _("div", qe, [
-      C(w(Ke), {
+    }), (j, f) => (h(), R("div", ze, [
+      O($(Me), {
         id: "searchInput",
         ref_key: "searchInput",
-        ref: c,
-        placeholder: t.searchPlaceholderLabel,
-        "model-value": t.modelValue,
-        "onUpdate:modelValue": f[0] || (f[0] = (n) => S.$emit("update:modelValue", n)),
+        ref: u,
+        placeholder: o.searchPlaceholderLabel,
+        "model-value": o.modelValue,
+        "onUpdate:modelValue": f[0] || (f[0] = (i) => j.$emit("update:modelValue", i)),
         onKeydown: [
-          f[1] || (f[1] = M((n) => S.$emit("focus-tabset"), ["up"])),
-          f[2] || (f[2] = M(ue((n) => S.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
-          f[3] || (f[3] = M((n) => S.$emit("select-first-emoji"), ["enter"]))
+          f[1] || (f[1] = P((i) => j.$emit("focus-tabset"), ["up"])),
+          f[2] || (f[2] = P(ce((i) => j.$emit("focus-emoji-selector"), ["prevent"]), ["down"])),
+          f[3] || (f[3] = P((i) => j.$emit("select-first-emoji"), ["enter"]))
         ]
-      }, ye({
-        leftIcon: q(() => [
-          C(w(_e), { size: "200" })
+      }, Re({
+        leftIcon: U(() => [
+          O($($e), { size: "200" })
         ]),
         _: 2
       }, [
-        t.modelValue.length > 0 ? {
+        o.modelValue.length > 0 ? {
           name: "rightIcon",
-          fn: q(() => [
-            C(w(Oe), {
+          fn: U(() => [
+            O($(me), {
               importance: "clear",
               size: "xs",
               class: "d-emoji-picker__search-x-button",
               circle: "",
               kind: "muted",
-              onClick: I
+              onClick: T
             }, {
-              icon: q(() => [
-                C(w($e), { size: "200" })
+              icon: U(() => [
+                O($(_e), { size: "200" })
               ]),
               _: 1
             })
@@ -74,7 +74,7 @@ const qe = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Pe = {
       ]), 1032, ["placeholder", "model-value"])
     ]));
   }
-}, Ve = { class: "d-emoji-picker__tabset" }, ze = {
+}, Ge = { class: "d-emoji-picker__tabset" }, We = {
   __name: "emoji_tabset",
   props: {
     /**
@@ -86,6 +86,15 @@ const qe = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Pe = {
       type: Boolean,
       default: !1
     },
+    /**
+     * Whether to show the custom emojis tab or not
+     * @type {Boolean}
+     * @default false
+     */
+    showCustomEmojisTab: {
+      type: Boolean,
+      default: !1
+    },
     scrollIntoTab: {
       type: Number,
       required: !0
@@ -114,73 +123,77 @@ const qe = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Pe = {
     "focus-search-input",
     "focus-skin-selector"
   ],
-  setup(t, { expose: y, emit: T }) {
-    const a = t, c = T, I = [
-      { label: O.MOST_RECENTLY_USED, icon: we },
-      { label: O.SMILEYS_AND_PEOPLE, icon: Te },
-      { label: O.NATURE, icon: Ie },
-      { label: O.FOOD, icon: Ee },
-      { label: O.ACTIVITY, icon: Le },
-      { label: O.TRAVEL, icon: Fe },
-      { label: O.OBJECTS, icon: De },
-      { label: O.SYMBOLS, icon: Ae },
-      { label: O.FLAGS, icon: Ce }
-    ], p = P(() => (a.showRecentlyUsedTab ? I : I.slice(1)).map((o, l) => ({
-      ...o,
-      label: a.tabsetLabels[l],
-      // IDs on dt-tab component need to be on string
-      id: (l + 1).toString(),
-      panelId: (l + 1).toString()
-    }))), S = P(() => a.emojiFilter.length > 0), f = g("1"), n = g([]);
-    B(
-      () => a.scrollIntoTab,
+  setup(o, { expose: g, emit: y }) {
+    const n = o, u = y, T = [
+      { label: D.MOST_RECENTLY_USED, icon: Le },
+      { label: D.SMILEYS_AND_PEOPLE, icon: Ie },
+      { label: D.NATURE, icon: Fe },
+      { label: D.FOOD, icon: Ae },
+      { label: D.ACTIVITY, icon: Ce },
+      { label: D.TRAVEL, icon: De },
+      { label: D.OBJECTS, icon: Oe },
+      { label: D.SYMBOLS, icon: Ke },
+      { label: D.FLAGS, icon: Ne },
+      { label: D.CUSTOM, icon: Ue }
+    ], p = M(() => {
+      const e = n.showRecentlyUsedTab ? T : T.slice(1);
+      return n.showCustomEmojisTab || e.pop(), e.map((t, s) => ({
+        ...t,
+        label: n.tabsetLabels[s],
+        // IDs on dt-tab component need to be on string
+        id: (s + 1).toString(),
+        panelId: (s + 1).toString()
+      }));
+    }), j = M(() => n.emojiFilter.length > 0), f = k("1"), i = k([]);
+    N(
+      () => n.scrollIntoTab,
       () => {
-        S.value || (f.value = (a.scrollIntoTab + 1).toString());
+        j.value || (f.value = (n.scrollIntoTab + 1).toString());
       }
-    ), B(
-      S,
+    ), N(
+      j,
       () => {
-        S.value && (f.value = null);
+        j.value && (f.value = null);
       }
     );
-    function j(e) {
-      const o = parseInt(e);
-      f.value = e, c("selected-tabset", o);
+    function S(e) {
+      const t = parseInt(e);
+      f.value = e, u("selected-tabset", t);
     }
     function K(e) {
-      n.value.push(Ne(e.$el));
+      i.value.push(Be(e.$el));
     }
-    function d() {
-      n.value[0].focus();
+    function A() {
+      i.value[0].focus();
     }
-    function i(e, o) {
-      e.key === "Enter" && (j(o), n.value[o - 1].blur()), e.key === "Tab" && (e.preventDefault(), e.shiftKey ? c("focus-skin-selector") : c("focus-search-input")), e.key === "ArrowDown" && c("focus-search-input");
+    function r(e, t) {
+      e.key === "Enter" && (S(t), i.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 y({
-      focusTabset: d
-    }), (e, o) => (k(), _("div", Ve, [
-      C(w(Ue), {
+    return g({
+      focusTabset: A
+    }), (e, t) => (h(), R("div", Ge, [
+      O($(qe), {
         size: "sm",
         "tab-list-class": "d-emoji-picker__tabset-list",
         selected: f.value
       }, {
-        tabs: q(() => [
-          (k(!0), _(G, null, W(p.value, (l, v) => (k(), te(w(Me), {
-            id: l.id,
+        tabs: U(() => [
+          (h(!0), R(W, null, J(p.value, (s, m) => (h(), Z($(Pe), {
+            id: s.id,
             ref_for: !0,
-            ref: (r) => {
-              r && K(r);
+            ref: (c) => {
+              c && K(c);
             },
-            key: l.id,
-            "panel-id": l.panelId,
-            label: l.label,
+            key: s.id,
+            "panel-id": s.panelId,
+            label: s.label,
             "aria-controls": "d-emoji-picker-list",
-            tabindex: v + 1,
-            onClickCapture: ue((r) => j(l.id), ["stop"]),
-            onKeydown: (r) => i(r, l.id)
+            tabindex: m + 1,
+            onClickCapture: ce((c) => S(s.id), ["stop"]),
+            onKeydown: (c) => r(c, s.id)
           }, {
-            default: q(() => [
-              (k(), te(Se(l.icon), { size: "400" }))
+            default: U(() => [
+              (h(), Z(we(s.icon), { size: "400" }))
             ]),
             _: 2
           }, 1032, ["id", "panel-id", "label", "tabindex", "onClickCapture", "onKeydown"]))), 128))
@@ -190,90 +203,90 @@ const qe = { class: "d-emoji-picker__search d-emoji-picker__alignment" }, Pe = {
     ]));
   }
 };
-function He() {
-  const t = g([]), y = g([]), T = g(!1), a = g(!0);
-  function c(e, o) {
-    n(e, o - 1) || (t.value[e - 1] ? n(e - 1, t.value[e - 1].length - 1) : n(t.value.length - 1, t.value[t.value.length - 1].length - 1));
+function Je() {
+  const o = k([]), g = k([]), y = k(!1), n = k(!0);
+  function u(e, t) {
+    i(e, t - 1) || (o.value[e - 1] ? i(e - 1, o.value[e - 1].length - 1) : i(o.value.length - 1, o.value[o.value.length - 1].length - 1));
   }
-  function I(e, o) {
-    n(e, o + 1) || n(e + 1, 0) || n(0, 0);
+  function T(e, t) {
+    i(e, t + 1) || i(e + 1, 0) || i(0, 0);
   }
-  function p(e, o) {
-    n(0, o - 1) || n(0, y.value.length - 1);
+  function p(e, t) {
+    i(0, t - 1) || i(0, g.value.length - 1);
   }
-  function S(e, o) {
-    n(0, o + 1) || n(0, 0);
+  function j(e, t) {
+    i(0, t + 1) || i(0, 0);
   }
-  function f(e, o, l) {
-    T.value ? e === "left" ? p(o, l) : e === "right" && S(o, l) : e === "left" ? c(o, l) : e === "right" && I(o, l);
+  function f(e, t, s) {
+    y.value ? e === "left" ? p(t, s) : e === "right" && j(t, s) : e === "left" ? u(t, s) : e === "right" && T(t, s);
   }
-  function n(e, o) {
-    var v, r, R;
-    const l = T.value ? (v = y.value) == null ? void 0 : v[o] : (R = (r = t.value) == null ? void 0 : r[e]) == null ? void 0 : R[o];
-    return l ? (l.focus(), !0) : !1;
+  function i(e, t) {
+    var m, c, E;
+    const s = y.value ? (m = g.value) == null ? void 0 : m[t] : (E = (c = o.value) == null ? void 0 : c[e]) == null ? void 0 : E[t];
+    return s ? (s.focus(), !0) : !1;
   }
-  function j(e, o, l) {
-    t.value[o] || (t.value[o] = []), t.value[o][l] = e;
+  function S(e, t, s) {
+    o.value[t] || (o.value[t] = []), o.value[t][s] = e;
   }
-  function K(e, o) {
-    y.value[o] = e;
+  function K(e, t) {
+    g.value[t] = e;
   }
-  function d(e, o) {
-    var l;
-    if (a.value = !1, e === z.ARROW_UP) {
-      const v = o % L;
-      if (!n(0, o - L)) {
-        const r = y.value.length - y.value.length % L + v;
-        n(0, r), n(0, r) || n(0, y.value.length - 1);
+  function A(e, t) {
+    var s;
+    if (n.value = !1, e === z.ARROW_UP) {
+      const m = t % L;
+      if (!i(0, t - L)) {
+        const c = g.value.length - g.value.length % L + m;
+        i(0, c), i(0, c) || i(0, g.value.length - 1);
       }
     }
-    if (e === z.ARROW_DOWN && !n(0, o + L)) {
-      const v = o % L;
-      (l = y.value) != null && l[o + (L - v)] ? n(0, y.value.length - 1) : n(0, v);
+    if (e === z.ARROW_DOWN && !i(0, t + L)) {
+      const m = t % L;
+      (s = g.value) != null && s[t + (L - m)] ? i(0, g.value.length - 1) : i(0, m);
     }
-    e === z.ARROW_LEFT && f("left", 0, o), e === z.ARROW_RIGHT && f("right", 0, o);
+    e === z.ARROW_LEFT && f("left", 0, t), e === z.ARROW_RIGHT && f("right", 0, t);
   }
-  function i(e, o, l) {
-    var v, r;
+  function r(e, t, s) {
+    var m, c;
     if (e === "ArrowUp") {
-      const R = l % L;
-      if (o === 0) {
-        const $ = L - t.value[t.value.length - 1].length % L, A = t.value[t.value.length - 1].length + $ - (L - R);
-        n(t.value.length - 1, A) || n(t.value.length - 1, t.value[t.value.length - 1].length - 1);
+      const E = s % L;
+      if (t === 0) {
+        const w = L - o.value[o.value.length - 1].length % L, C = o.value[o.value.length - 1].length + w - (L - E);
+        i(o.value.length - 1, C) || i(o.value.length - 1, o.value[o.value.length - 1].length - 1);
         return;
       }
-      if (!n(o, l - L)) {
-        const $ = o - 1 < 0 ? 0 : o - 1, A = t.value[$].length, x = A - A % L + R;
-        n($, x) || n(o - 1, t.value[o - 1].length - 1);
+      if (!i(t, s - L)) {
+        const w = t - 1 < 0 ? 0 : t - 1, C = o.value[w].length, ee = C - C % L + E;
+        i(w, ee) || i(t - 1, o.value[t - 1].length - 1);
       }
     }
-    if (e === "ArrowDown" && !n(o, l + L)) {
-      const R = l % L;
-      (r = (v = t.value) == null ? void 0 : v[o]) != null && r[l + (L - R)] ? n(o, t.value[o].length - 1) : n(o + 1, R) || n(0, R) || n(0, t.value[0].length - 1);
+    if (e === "ArrowDown" && !i(t, s + L)) {
+      const E = s % L;
+      (c = (m = o.value) == null ? void 0 : m[t]) != null && c[s + (L - E)] ? i(t, o.value[t].length - 1) : i(t + 1, E) || i(0, E) || i(0, o.value[0].length - 1);
     }
-    e === "ArrowLeft" && f("left", o, l), e === "ArrowRight" && f("right", o, l);
+    e === "ArrowLeft" && f("left", t, s), e === "ArrowRight" && f("right", t, s);
   }
   return {
-    emojiFilteredRefs: y,
-    isFiltering: T,
-    hoverFirstEmoji: a,
-    setEmojiRef: j,
+    emojiFilteredRefs: g,
+    isFiltering: y,
+    hoverFirstEmoji: n,
+    setEmojiRef: S,
     setFilteredRef: K,
-    focusEmoji: n,
-    handleArrowNavigationFiltered: d,
-    handleArrowNavigation: i
+    focusEmoji: i,
+    handleArrowNavigationFiltered: A,
+    handleArrowNavigation: r
   };
 }
-const Ge = { class: "d-emoji-picker__selector" }, We = {
+const Ye = { class: "d-emoji-picker__selector" }, Qe = {
   key: 0,
   class: "d-emoji-picker__search-label d-emoji-picker__alignment"
-}, Je = { key: 0 }, Ye = { class: "d-emoji-picker__tab" }, Qe = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], Xe = ["alt", "aria-label", "title", "src"], Ze = {
+}, Xe = { key: 0 }, Ze = { class: "d-emoji-picker__tab" }, xe = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], et = ["alt", "aria-label", "title", "src"], tt = {
   key: 2,
   class: "d-emoji-picker__alignment"
-}, xe = {
+}, ot = {
   class: "d-emoji-picker__tab",
   "data-qa": "filtered-emojis"
-}, et = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], tt = ["alt", "aria-label", "title", "src"], ot = {
+}, lt = ["aria-label", "onClick", "onFocusin", "onMouseover", "onKeydown"], st = ["alt", "aria-label", "title", "src"], nt = {
   __name: "emoji_selector",
   props: {
     /**
@@ -327,6 +340,14 @@ const Ge = { class: "d-emoji-picker__selector" }, We = {
     recentlyUsedEmojis: {
       type: Array,
       default: () => []
+    },
+    /**
+     * The list of custom emojis
+     * @type {Array}
+     */
+    customEmojis: {
+      type: Array,
+      default: () => []
     }
   },
   emits: [
@@ -348,6 +369,12 @@ const Ge = { class: "d-emoji-picker__selector" }, We = {
      * @param {Number} tab-index - The tab that was scrolled into
       */
     "scroll-into-tab",
+    /**
+     * Emitted when the user reach bottom scroll
+     * This event is used on handleScroll method
+     * @event scroll-bottom-reached
+     */
+    "scroll-bottom-reached",
     /**
      * Emitted when the user reach the end of the emoji list
      * @event focus-skin-selector
@@ -359,222 +386,240 @@ const Ge = { class: "d-emoji-picker__selector" }, We = {
       */
     "focus-search-input"
   ],
-  setup(t, { expose: y, emit: T }) {
-    const a = t, c = T, {
-      emojiFilteredRefs: I,
+  setup(o, { expose: g, emit: y }) {
+    const n = o, u = y, {
+      emojiFilteredRefs: T,
       isFiltering: p,
-      hoverFirstEmoji: S,
+      hoverFirstEmoji: j,
       setEmojiRef: f,
-      setFilteredRef: n,
-      focusEmoji: j,
+      setFilteredRef: i,
+      focusEmoji: S,
       handleArrowNavigationFiltered: K,
-      handleArrowNavigation: d
-    } = He(), i = g(null), e = g(null), o = g(null), l = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags"], v = P(() => a.recentlyUsedEmojis.length ? a.tabsetLabels.map((s) => ({ label: s, ref: g(null) })) : a.tabsetLabels.slice(1).map((s) => ({ label: s, ref: g(null) }))), r = g(v.value[0].label), R = P(() => a.recentlyUsedEmojis.length ? l : l.slice(1)), $ = g([]), A = P(() => [
-      ...D[`People${a.skinTone}`],
-      ...D.Nature,
-      ...D.Food,
-      ...D[`Activity${a.skinTone}`],
-      ...D.Travel,
-      ...D[`Objects${a.skinTone}`],
-      ...D.Symbols,
-      ...D.Flags
-    ]), x = fe(() => {
-      I.value = [], se();
-    });
-    B(A, () => {
-      se();
-    }, { immediate: !0 }), B(
-      () => a.recentlyUsedEmojis,
+      handleArrowNavigation: A
+    } = Je(), r = k(null), e = k(null), t = k(null), s = ["Recently used", "People", "Nature", "Food", "Activity", "Travel", "Objects", "Symbols", "Flags", "Custom"], m = M(() => {
+      let l = n.tabsetLabels.map((a) => ({ label: a, ref: k(null) }));
+      return n.recentlyUsedEmojis && !n.recentlyUsedEmojis.length && (l = n.tabsetLabels.slice(1).map((a) => ({ label: a, ref: k(null) }))), n.customEmojis && !n.customEmojis.length && l.pop(), l;
+    }), c = k(m.value[0].label), E = M(() => {
+      const l = n.recentlyUsedEmojis.length ? s.slice() : s.slice(1);
+      return n.customEmojis && !n.customEmojis.length && l.pop(), l;
+    }), w = k([]), C = M(() => [
+      ...F[`People${n.skinTone}`],
+      ...F.Nature,
+      ...F.Food,
+      ...F[`Activity${n.skinTone}`],
+      ...F.Travel,
+      ...F[`Objects${n.skinTone}`],
+      ...F.Symbols,
+      ...F.Flags
+    ]), ee = ve(() => {
+      T.value = [], ne();
+    }), se = () => {
+      const l = e.value;
+      l.scrollTop + l.clientHeight >= l.scrollHeight && u("scroll-bottom-reached");
+    };
+    N(C, () => {
+      ne();
+    }, { immediate: !0 }), N(
+      () => n.recentlyUsedEmojis,
       () => {
-        D["Recently used"] = a.recentlyUsedEmojis;
+        F["Recently used"] = n.recentlyUsedEmojis;
       },
       { immediate: !0 }
-    ), B(() => a.emojiFilter, () => {
-      ve(), a.emojiFilter ? p.value = !0 : (p.value = !1, N(null)), x();
-    }), B(
-      () => a.selectedTabset,
-      (s) => {
-        H(s.tabId);
+    ), N(
+      () => n.customEmojis,
+      () => {
+        F.Custom = n.customEmojis;
+      },
+      { immediate: !0 }
+    ), N(() => n.emojiFilter, () => {
+      pe(), n.emojiFilter ? p.value = !0 : (p.value = !1, B(null)), ee();
+    }), N(
+      () => n.selectedTabset,
+      (l) => {
+        G(l.tabId);
       },
       { deep: !0 }
     );
-    function ee(s, u = !1) {
-      S.value = u, c("highlighted-emoji", s);
-    }
-    function se() {
-      const s = a.emojiFilter.toLowerCase();
-      $.value = A.value.filter((u) => {
-        const b = u.name.toLowerCase().includes(s), h = u.keywords.some((m) => m.toLowerCase().includes(s));
-        return b || h;
-      }), X(() => {
-        s && ee($.value[0], !0);
+    function te(l, a = !1) {
+      j.value = a, u("highlighted-emoji", l);
+    }
+    function ne() {
+      const l = n.emojiFilter.toLowerCase();
+      w.value = C.value.filter((a) => {
+        const v = a.name.toLowerCase().includes(l), b = a.keywords.some((d) => d.toLowerCase().includes(l));
+        return v || b;
+      }), x(() => {
+        l && te(w.value[0], !0);
       });
     }
-    function fe(s, u = 300) {
-      let b;
-      return (...h) => {
-        clearTimeout(b), b = setTimeout(() => s(...h), u);
+    function ve(l, a = 300) {
+      let v;
+      return (...b) => {
+        clearTimeout(v), v = setTimeout(() => l(...b), a);
       };
     }
-    function de(s) {
-      return `${Y + s}.png`;
+    function be(l) {
+      return l.date_added ? l.image : Q + l.unicode_character + ".png";
     }
-    function me(s) {
-      s.target.parentNode.style.display = "none";
+    function he(l) {
+      l.target.parentNode.style.display = "none";
     }
-    function H(s, u = !0) {
-      const h = v.value[s - 1].ref.value[0];
-      X(() => {
-        const m = e.value, U = s === 1 ? 0 : h.offsetTop - 15;
-        m.scrollTop = U, u && j(s - 1, 0);
+    function G(l, a = !0) {
+      const b = m.value[l - 1].ref.value[0];
+      x(() => {
+        const d = e.value, q = l === 1 ? 0 : b.offsetTop - 15;
+        d.scrollTop = q, a && S(l - 1, 0);
       });
     }
-    function ve() {
-      const s = e.value;
-      s.scrollTop = 0;
+    function pe() {
+      const l = e.value;
+      l.scrollTop = 0;
     }
-    function be() {
-      o.value = new IntersectionObserver(async (s) => {
-        s.forEach((u) => {
-          var m, U, F, ne, ie;
-          const { target: b } = u, h = parseInt(b.dataset.index);
-          u.isIntersecting && b.offsetTop <= i.value.offsetTop + 50 ? (r.value = ((m = v.value[h - 1]) == null ? void 0 : m.label) ?? ((U = v.value[0]) == null ? void 0 : U.label), c("scroll-into-tab", h - 1)) : u.boundingClientRect.bottom <= ((F = i.value) == null ? void 0 : F.getBoundingClientRect().bottom) ? (c("scroll-into-tab", h), r.value = (ne = v.value[h]) == null ? void 0 : ne.label) : h === 1 && (c("scroll-into-tab", h), r.value = (ie = v.value[0]) == null ? void 0 : ie.label);
+    function ke() {
+      e.value.addEventListener("scroll", se);
+    }
+    function ge() {
+      t.value = new IntersectionObserver(async (l) => {
+        l.forEach((a) => {
+          var d, q, I, ie, ae;
+          const { target: v } = a, b = parseInt(v.dataset.index);
+          a.isIntersecting && v.offsetTop <= r.value.offsetTop + 50 ? (c.value = ((d = m.value[b - 1]) == null ? void 0 : d.label) ?? ((q = m.value[0]) == null ? void 0 : q.label), u("scroll-into-tab", b - 1)) : a.boundingClientRect.bottom <= ((I = r.value) == null ? void 0 : I.getBoundingClientRect().bottom) ? (u("scroll-into-tab", b), c.value = (ie = m.value[b]) == null ? void 0 : ie.label) : b === 1 && (u("scroll-into-tab", b), c.value = (ae = m.value[0]) == null ? void 0 : ae.label);
         });
-      }), o.value.observe(i.value), Array.from(e.value.children).forEach((s, u) => {
-        o.value.observe(s), s.dataset.index = u;
+      }), t.value.observe(r.value), Array.from(e.value.children).forEach((l, a) => {
+        t.value.observe(l), l.dataset.index = a;
       });
     }
-    const he = (s, u, b) => {
-      if (s.preventDefault(), Object.values(z).includes(s.key)) {
-        K(s.key, u);
+    const ye = (l, a, v) => {
+      if (l.preventDefault(), Object.values(z).includes(l.key)) {
+        K(l.key, a);
         return;
       }
-      switch (s.key) {
+      switch (l.key) {
         case "Tab":
-          c("focus-skin-selector");
+          u("focus-skin-selector");
           break;
         case "Enter":
-          Q(b, s);
+          X(v, l);
           break;
       }
-    }, pe = (s, u, b, h) => {
-      if (s.preventDefault(), Object.values(z).includes(s.key)) {
-        d(s.key, u, b);
+    }, je = (l, a, v, b) => {
+      if (l.preventDefault(), Object.values(z).includes(l.key)) {
+        A(l.key, a, v);
         return;
       }
-      switch (s.key) {
+      switch (l.key) {
         case "Tab":
-          s.shiftKey ? j(u, 0) && u > 0 ? H(u, !0) : (H(1, !1), c("focus-search-input")) : j(u + 1, 0) ? H(u + 1 + 1, !1) : c("focus-skin-selector");
+          l.shiftKey ? S(a, 0) && a > 0 ? G(a, !0) : (G(1, !1), u("focus-search-input")) : S(a + 1, 0) ? G(a + 1 + 1, !1) : u("focus-skin-selector");
           break;
         case "Enter":
-          Q(h, s);
+          X(b, l);
           break;
       }
     };
-    function Q(s, u) {
-      c("selected-emoji", { ...s, shift_key: u.shiftKey });
+    function X(l, a) {
+      u("selected-emoji", { ...l, shift_key: a.shiftKey });
     }
-    function N(s) {
-      c("highlighted-emoji", s);
+    function B(l) {
+      u("highlighted-emoji", l);
     }
-    function ke() {
-      j(0, 0);
+    function Se() {
+      S(0, 0);
     }
-    function ge() {
-      H(R.value.length, !0);
-    }
-    return re(() => {
-      be();
-    }), je(() => {
-      o.value.disconnect();
-    }), y({
-      focusEmojiSelector: ke,
-      focusLastEmoji: ge
-    }), (s, u) => (k(), _("div", Ge, [
-      E("div", {
+    function Ee() {
+      G(E.value.length, !0);
+    }
+    return ue(() => {
+      ge(), ke();
+    }), Te(() => {
+      t.value.disconnect(), e.value.removeEventListener("scroll", se);
+    }), g({
+      focusEmojiSelector: Se,
+      focusLastEmoji: Ee
+    }), (l, a) => (h(), R("div", Ye, [
+      _("div", {
         id: "d-emoji-picker-list",
         ref_key: "listRef",
         ref: e,
         class: "d-emoji-picker__list"
       }, [
-        t.emojiFilter ? (k(), _("p", We, J($.value.length > 0 ? t.searchResultsLabel : t.searchNoResultsLabel), 1)) : (k(), _("div", {
+        o.emojiFilter ? (h(), R("p", Qe, H(w.value.length > 0 ? o.searchResultsLabel : o.searchNoResultsLabel), 1)) : (h(), R("div", {
           key: 1,
           ref_key: "tabCategoryRef",
-          ref: i,
+          ref: r,
           class: "d-emoji-picker__category d-emoji-picker__alignment"
         }, [
-          E("p", null, J(r.value), 1)
+          _("p", null, H(c.value), 1)
         ], 512)),
-        (k(!0), _(G, null, W(v.value, (b, h) => oe((k(), _("div", {
-          key: h,
+        (h(!0), R(W, null, J(m.value, (v, b) => oe((h(), R("div", {
+          key: b,
           ref_for: !0,
-          ref: b.ref,
+          ref: v.ref,
           class: "d-emoji-picker__alignment"
         }, [
-          h ? (k(), _("p", Je, J(b.label), 1)) : Z("", !0),
-          E("div", Ye, [
-            (k(!0), _(G, null, W(w(D)[R.value[h] + t.skinTone] ? w(D)[R.value[h] + t.skinTone] : w(D)[R.value[h]], (m, U) => (k(), _("button", {
-              key: m.shortname,
+          b ? (h(), R("p", Xe, H(v.label), 1)) : Y("", !0),
+          _("div", Ze, [
+            (h(!0), R(W, null, J($(F)[E.value[b] + o.skinTone] ? $(F)[E.value[b] + o.skinTone] : $(F)[E.value[b]], (d, q) => (h(), R("button", {
+              key: d.shortname,
               ref_for: !0,
-              ref: (F) => {
-                F && w(f)(F, h, U);
+              ref: (I) => {
+                I && $(f)(I, b, q);
               },
               type: "button",
-              "aria-label": m.name,
-              onClick: (F) => Q(m, F),
-              onFocusin: (F) => N(m),
-              onFocusout: u[0] || (u[0] = (F) => N(null)),
-              onMouseover: (F) => N(m),
-              onMouseleave: u[1] || (u[1] = (F) => N(null)),
-              onKeydown: (F) => pe(F, h, U, m)
+              "aria-label": d.name,
+              onClick: (I) => X(d, I),
+              onFocusin: (I) => B(d),
+              onFocusout: a[0] || (a[0] = (I) => B(null)),
+              onMouseover: (I) => B(d),
+              onMouseleave: a[1] || (a[1] = (I) => B(null)),
+              onKeydown: (I) => je(I, b, q, d)
             }, [
-              E("img", {
+              _("img", {
                 class: "d-icon d-icon--size-500",
-                alt: m.name,
-                "aria-label": m.name,
-                title: m.name,
-                src: de(m.unicode_character),
-                onError: me
-              }, null, 40, Xe)
-            ], 40, Qe))), 128))
+                alt: d.name,
+                "aria-label": d.name,
+                title: d.name,
+                src: be(d),
+                onError: he
+              }, null, 40, et)
+            ], 40, xe))), 128))
           ])
         ])), [
-          [le, !t.emojiFilter]
+          [le, !o.emojiFilter]
         ])), 128)),
-        t.emojiFilter ? (k(), _("div", Ze, [
-          E("div", xe, [
-            (k(!0), _(G, null, W($.value, (b, h) => (k(), _("button", {
-              key: b.shortname,
+        o.emojiFilter ? (h(), R("div", tt, [
+          _("div", ot, [
+            (h(!0), R(W, null, J(w.value, (v, b) => (h(), R("button", {
+              key: v.shortname,
               ref_for: !0,
-              ref: (m) => {
-                m && w(n)(m, h);
+              ref: (d) => {
+                d && $(i)(d, b);
               },
               type: "button",
-              "aria-label": b.name,
-              class: ce({
-                "hover-emoji": h === 0 && w(S)
+              "aria-label": v.name,
+              class: fe({
+                "hover-emoji": b === 0 && $(j)
               }),
-              onClick: (m) => Q(b, m),
-              onFocusin: (m) => N(b),
-              onFocusout: u[2] || (u[2] = (m) => N(null)),
-              onMouseover: (m) => ee(b),
-              onMouseleave: u[3] || (u[3] = (m) => ee(null)),
-              onKeydown: (m) => he(m, h, b)
+              onClick: (d) => X(v, d),
+              onFocusin: (d) => B(v),
+              onFocusout: a[2] || (a[2] = (d) => B(null)),
+              onMouseover: (d) => te(v),
+              onMouseleave: a[3] || (a[3] = (d) => te(null)),
+              onKeydown: (d) => ye(d, b, v)
             }, [
-              E("img", {
+              _("img", {
                 class: "d-icon d-icon--size-500",
-                alt: b.name,
-                "aria-label": b.name,
-                title: b.name,
-                src: `${w(Y) + b.unicode_character}.png`
-              }, null, 8, tt)
-            ], 42, et))), 128))
+                alt: v.name,
+                "aria-label": v.name,
+                title: v.name,
+                src: `${$(Q) + v.unicode_character}.png`
+              }, null, 8, st)
+            ], 42, lt))), 128))
           ])
-        ])) : Z("", !0)
+        ])) : Y("", !0)
       ], 512)
     ]));
   }
-}, lt = { "data-qa": "skin-selector" }, st = { class: "d-emoji-picker__skin-list" }, nt = ["onKeydown", "onClick"], it = ["alt", "aria-label", "title", "src"], at = { class: "d-emoji-picker__skin-selected" }, rt = ["aria-label"], ut = ["alt", "aria-label", "title", "src"], ct = {
+}, it = { "data-qa": "skin-selector" }, at = { class: "d-emoji-picker__skin-list" }, rt = ["onKeydown", "onClick"], ut = ["alt", "aria-label", "title", "src"], ct = { class: "d-emoji-picker__skin-selected" }, ft = ["aria-label"], dt = ["alt", "aria-label", "title", "src"], mt = {
   __name: "emoji_skin_selector",
   props: {
     /**
@@ -605,8 +650,8 @@ const Ge = { class: "d-emoji-picker__selector" }, We = {
     "focus-tabset",
     "focus-last-emoji"
   ],
-  setup(t, { expose: y, emit: T }) {
-    const a = t, c = T, I = [
+  setup(o, { expose: g, emit: y }) {
+    const n = o, u = y, T = [
       {
         name: ":wave_tone1:",
         unicode_output: "1f44b-1f3fb",
@@ -643,77 +688,77 @@ const Ge = { class: "d-emoji-picker__selector" }, We = {
         skinTone: V.DEFAULT,
         skinCode: ""
       }
-    ], p = g(!1), S = g(null), f = g([]);
-    ae(
-      () => a.isHovering && (p.value = !1)
+    ], p = k(!1), j = k(null), f = k([]);
+    re(
+      () => n.isHovering && (p.value = !1)
     );
-    const n = P(() => I.find((l) => l.skinTone === a.skinTone)), j = g(n.value);
-    ae(() => n.value && (j.value = n.value));
-    function K(l) {
-      f.value.push(l);
+    const i = M(() => T.find((s) => s.skinTone === n.skinTone)), S = k(i.value);
+    re(() => i.value && (S.value = i.value));
+    function K(s) {
+      f.value.push(s);
     }
-    function d() {
-      S.value.focus();
+    function A() {
+      j.value.focus();
     }
-    function i(l) {
-      j.value = l, p.value = !1, c("skin-tone", l.skinTone), X(() => d());
+    function r(s) {
+      S.value = s, p.value = !1, u("skin-tone", s.skinTone), x(() => A());
     }
-    const e = (l, v, r) => {
-      var R, $, A;
-      l.preventDefault(), l.key === "ArrowLeft" && (r === 0 && ((R = f.value[f.value.length - 1]) == null || R.focus()), ($ = f.value[r - 1]) == null || $.focus()), l.key === "ArrowRight" && ((A = f.value[r + 1]) == null || A.focus()), l.key === "Enter" && (v ? i(v) : o()), l.key === "Tab" && (l.shiftKey ? c("focus-last-emoji") : c("focus-tabset"));
+    const e = (s, m, c) => {
+      var E, w, C;
+      s.preventDefault(), s.key === "ArrowLeft" && (c === 0 && ((E = f.value[f.value.length - 1]) == null || E.focus()), (w = f.value[c - 1]) == null || w.focus()), s.key === "ArrowRight" && ((C = f.value[c + 1]) == null || C.focus()), s.key === "Enter" && (m ? r(m) : t()), s.key === "Tab" && (s.shiftKey ? u("focus-last-emoji") : u("focus-tabset"));
     };
-    function o() {
-      p.value = !p.value, X(() => f.value[0].focus());
-    }
-    return y({
-      focusSkinSelector: d
-    }), (l, v) => (k(), _("div", lt, [
-      oe(E("div", st, [
-        (k(), _(G, null, W(I, (r, R) => E("button", {
+    function t() {
+      p.value = !p.value, x(() => f.value[0].focus());
+    }
+    return g({
+      focusSkinSelector: A
+    }), (s, m) => (h(), R("div", it, [
+      oe(_("div", at, [
+        (h(), R(W, null, J(T, (c, E) => _("button", {
           ref_for: !0,
-          ref: ($) => {
-            $ && K($);
+          ref: (w) => {
+            w && K(w);
           },
-          key: r.name,
-          class: ce({
-            selected: j.value.skinCode === r.skinCode
+          key: c.name,
+          class: fe({
+            selected: S.value.skinCode === c.skinCode
           }),
-          onKeydown: ($) => e($, r, R),
-          onClick: ($) => i(r)
+          onKeydown: (w) => e(w, c, E),
+          onClick: (w) => r(c)
         }, [
-          E("img", {
+          _("img", {
             class: "d-icon d-icon--size-500",
-            alt: r.name,
-            "aria-label": r.name,
-            title: r.name,
-            src: `${w(Y) + r.unicode_output}.png`
-          }, null, 8, it)
-        ], 42, nt)), 64))
+            alt: c.name,
+            "aria-label": c.name,
+            title: c.name,
+            src: `${$(Q) + c.unicode_output}.png`
+          }, null, 8, ut)
+        ], 42, rt)), 64))
       ], 512), [
         [le, p.value]
       ]),
-      oe(E("div", at, [
-        C(w(Be), { placement: "top-end" }, {
-          anchor: q(() => [
-            E("button", {
+      oe(_("div", ct, [
+        O($(Ve), { placement: "top-end" }, {
+          anchor: U(() => [
+            _("button", {
               ref_key: "skinSelectorRef",
-              ref: S,
-              "aria-label": t.skinSelectorButtonTooltipLabel,
+              ref: j,
+              "aria-label": o.skinSelectorButtonTooltipLabel,
               tabindex: "-1",
-              onClick: o,
-              onKeydown: v[0] || (v[0] = (r) => e(r))
+              onClick: t,
+              onKeydown: m[0] || (m[0] = (c) => e(c))
             }, [
-              E("img", {
+              _("img", {
                 class: "d-icon d-icon--size-500",
-                alt: j.value.name,
-                "aria-label": j.value.name,
-                title: j.value.name,
-                src: `${w(Y) + j.value.unicode_output}.png`
-              }, null, 8, ut)
-            ], 40, rt)
+                alt: S.value.name,
+                "aria-label": S.value.name,
+                title: S.value.name,
+                src: `${$(Q) + S.value.unicode_output}.png`
+              }, null, 8, dt)
+            ], 40, ft)
           ]),
-          default: q(() => [
-            Re(J(t.skinSelectorButtonTooltipLabel) + " ", 1)
+          default: U(() => [
+            de(H(o.skinSelectorButtonTooltipLabel) + " ", 1)
           ]),
           _: 1
         })
@@ -722,7 +767,7 @@ const Ge = { class: "d-emoji-picker__selector" }, We = {
       ])
     ]));
   }
-}, ft = { class: "d-emoji-picker__data" }, dt = ["alt", "aria-label", "title", "src"], mt = {
+}, vt = { class: "d-emoji-picker__data" }, bt = ["alt", "aria-label", "title", "src"], ht = {
   __name: "emoji_description",
   props: {
     /**
@@ -735,23 +780,26 @@ const Ge = { class: "d-emoji-picker__selector" }, We = {
       default: null
     }
   },
-  setup(t) {
-    return (y, T) => {
-      var a;
-      return k(), _("div", ft, [
-        t.emoji ? (k(), _("img", {
+  setup(o) {
+    function g(y) {
+      return y.date_added ? y.image : `${Q + y.unicode_character}.png`;
+    }
+    return (y, n) => {
+      var u;
+      return h(), R("div", vt, [
+        o.emoji ? (h(), R("img", {
           key: 0,
           class: "d-icon d-icon--size-500",
-          alt: t.emoji.name,
-          "aria-label": t.emoji.name,
-          title: t.emoji.name,
-          src: `${w(Y) + t.emoji.unicode_character}.png`
-        }, null, 8, dt)) : Z("", !0),
-        E("div", null, J((a = t.emoji) == null ? void 0 : a.name), 1)
+          alt: o.emoji.name,
+          "aria-label": o.emoji.name,
+          title: o.emoji.name,
+          src: g(o.emoji)
+        }, null, 8, bt)) : Y("", !0),
+        _("div", null, H((u = o.emoji) == null ? void 0 : u.name), 1)
       ]);
     };
   }
-}, vt = { class: "d-emoji-picker" }, bt = { class: "d-emoji-picker--header" }, ht = { class: "d-emoji-picker--body" }, pt = { class: "d-emoji-picker--footer" }, It = {
+}, pt = { class: "d-emoji-picker" }, kt = { class: "d-emoji-picker--header" }, gt = { class: "d-emoji-picker--body" }, yt = { class: "d-emoji-picker--footer" }, Ft = {
   __name: "emoji_picker",
   props: {
     /**
@@ -767,6 +815,29 @@ const Ge = { class: "d-emoji-picker__selector" }, We = {
       type: Array,
       default: () => []
     },
+    /**
+       * The array with custom emojis object
+       * This list is necessary to fill the custom tab
+       * @type {Array}
+       * @default []
+       * @example
+       * <dt-emoji-picker :customEmojis="[emojiObject, emojiObject]" />
+       */
+    customEmojis: {
+      type: Array
+    },
+    /**
+       * The label for the add emoji button
+       * required false because it is still experimental
+       * @type {String}
+       * @example
+       * <dt-emoji-picker :addEmojiLabel="'Add emoji'" />
+       */
+    addEmojiLabel: {
+      type: String,
+      required: !1,
+      default: "Add emoji"
+    },
     /**
      * The placeholder text for the search input
      * @type {String}
@@ -808,7 +879,7 @@ const Ge = { class: "d-emoji-picker__selector" }, We = {
      * @example
      * <dt-emoji-picker
      *  :tabSetLabels="['Most recently used', 'Smileys and people', 'Nature',
-     *    'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags']" />
+     *    'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags', 'Custom']" />
      */
     tabSetLabels: {
       type: Array,
@@ -866,6 +937,12 @@ const Ge = { class: "d-emoji-picker__selector" }, We = {
      * @param {Object} emoji - The selected emoji from the emoji selector
      */
     "selected-emoji",
+    /**
+    * Emitted when the user reach bottom scroll
+    * This is being handled by handleScroll method
+    * @event scroll-bottom-reached
+    */
+    "scroll-bottom-reached",
     /**
      * It will emit the selected skin tone
      * @event skin-tone
@@ -876,85 +953,111 @@ const Ge = { class: "d-emoji-picker__selector" }, We = {
      * Since the keyboard events are encapsulated, we emit this event to close the picker
      * @event close
      */
-    "close"
+    "close",
+    /**
+     * Emitted when the user clicks on the add emoji button
+     * @event add-emoji
+     */
+    "add-emoji"
   ],
-  setup(t, { emit: y }) {
-    const T = t, a = y, c = g(T.searchQuery.value), I = g(null), p = g({}), S = g(0), f = P(() => T.recentlyUsedEmojis.length > 0);
-    B(
-      () => T.searchQuery,
-      (d) => {
-        c.value = d;
+  setup(o, { emit: g }) {
+    const y = o, n = g, u = k(y.searchQuery.value), T = k(null), p = k({}), j = k(0), f = M(() => {
+      var r;
+      return ((r = y.recentlyUsedEmojis) == null ? void 0 : r.length) > 0;
+    }), i = M(() => {
+      var r;
+      return ((r = y.customEmojis) == null ? void 0 : r.length) > 0;
+    });
+    N(
+      () => y.searchQuery,
+      (r) => {
+        u.value = r;
       }
     );
-    function n(d) {
-      c.value = "", p.value = d, p.value = { ...p.value, tabId: d };
+    function S(r) {
+      u.value = "", p.value = r, p.value = { ...p.value, tabId: r };
     }
-    function j(d) {
-      S.value = d;
+    function K(r) {
+      j.value = r;
     }
-    function K(d) {
-      I.value = d;
+    function A(r) {
+      T.value = r;
     }
-    return (d, i) => (k(), _("div", vt, [
-      E("div", bt, [
-        C(ze, {
+    return (r, e) => (h(), R("div", pt, [
+      _("div", kt, [
+        O(We, {
           ref: "tabsetRef",
-          "emoji-filter": c.value,
+          "emoji-filter": u.value,
+          "show-custom-emojis-tab": i.value,
           "show-recently-used-tab": f.value,
-          "scroll-into-tab": S.value,
-          "tabset-labels": t.tabSetLabels,
-          onFocusSkinSelector: i[0] || (i[0] = (e) => d.$refs.skinSelectorRef.focusSkinSelector()),
-          onFocusSearchInput: i[1] || (i[1] = (e) => t.showSearch ? d.$refs.searchInputRef.focusSearchInput() : d.$refs.emojiSelectorRef.focusEmojiSelector()),
-          onSelectedTabset: n,
-          onKeydown: i[2] || (i[2] = M((e) => a("close"), ["esc"]))
-        }, null, 8, ["emoji-filter", "show-recently-used-tab", "scroll-into-tab", "tabset-labels"])
+          "scroll-into-tab": j.value,
+          "tabset-labels": o.tabSetLabels,
+          onFocusSkinSelector: e[0] || (e[0] = (t) => r.$refs.skinSelectorRef.focusSkinSelector()),
+          onFocusSearchInput: e[1] || (e[1] = (t) => o.showSearch ? r.$refs.searchInputRef.focusSearchInput() : r.$refs.emojiSelectorRef.focusEmojiSelector()),
+          onSelectedTabset: S,
+          onKeydown: e[2] || (e[2] = P((t) => n("close"), ["esc"]))
+        }, null, 8, ["emoji-filter", "show-custom-emojis-tab", "show-recently-used-tab", "scroll-into-tab", "tabset-labels"])
       ]),
-      E("div", ht, [
-        t.showSearch ? (k(), te(Pe, {
+      _("div", gt, [
+        o.showSearch ? (h(), Z(He, {
           key: 0,
           ref: "searchInputRef",
-          modelValue: c.value,
-          "onUpdate:modelValue": i[3] || (i[3] = (e) => c.value = e),
-          "search-placeholder-label": t.searchPlaceholderLabel,
-          onSelectFirstEmoji: i[4] || (i[4] = (e) => a("selected-emoji", I.value)),
-          onFocusTabset: i[5] || (i[5] = (e) => d.$refs.tabsetRef.focusTabset()),
-          onFocusEmojiSelector: i[6] || (i[6] = (e) => d.$refs.emojiSelectorRef.focusEmojiSelector()),
-          onKeydown: i[7] || (i[7] = M((e) => a("close"), ["esc"]))
-        }, null, 8, ["modelValue", "search-placeholder-label"])) : Z("", !0),
-        C(ot, {
+          modelValue: u.value,
+          "onUpdate:modelValue": e[3] || (e[3] = (t) => u.value = t),
+          "search-placeholder-label": o.searchPlaceholderLabel,
+          onSelectFirstEmoji: e[4] || (e[4] = (t) => n("selected-emoji", T.value)),
+          onFocusTabset: e[5] || (e[5] = (t) => r.$refs.tabsetRef.focusTabset()),
+          onFocusEmojiSelector: e[6] || (e[6] = (t) => r.$refs.emojiSelectorRef.focusEmojiSelector()),
+          onKeydown: e[7] || (e[7] = P((t) => n("close"), ["esc"]))
+        }, null, 8, ["modelValue", "search-placeholder-label"])) : Y("", !0),
+        O(nt, {
           ref: "emojiSelectorRef",
-          "emoji-filter": c.value,
-          "skin-tone": t.skinTone,
-          "tabset-labels": t.tabSetLabels,
-          "search-results-label": t.searchResultsLabel,
-          "search-no-results-label": t.searchNoResultsLabel,
-          "recently-used-emojis": t.recentlyUsedEmojis,
+          "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,
+          "custom-emojis": o.customEmojis,
           "selected-tabset": p.value,
-          onScrollIntoTab: j,
-          onHighlightedEmoji: K,
-          onSelectedEmoji: i[8] || (i[8] = (e) => a("selected-emoji", e)),
-          onFocusSkinSelector: i[9] || (i[9] = (e) => d.$refs.skinSelectorRef.focusSkinSelector()),
-          onFocusSearchInput: i[10] || (i[10] = (e) => t.showSearch ? d.$refs.searchInputRef.focusSearchInput() : d.$refs.tabsetRef.focusTabset()),
-          onKeydown: i[11] || (i[11] = M((e) => a("close"), ["esc"]))
-        }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "selected-tabset"])
+          onScrollIntoTab: K,
+          onHighlightedEmoji: A,
+          onSelectedEmoji: e[8] || (e[8] = (t) => n("selected-emoji", t)),
+          onFocusSkinSelector: e[9] || (e[9] = (t) => r.$refs.skinSelectorRef.focusSkinSelector()),
+          onFocusSearchInput: e[10] || (e[10] = (t) => o.showSearch ? r.$refs.searchInputRef.focusSearchInput() : r.$refs.tabsetRef.focusTabset()),
+          onKeydown: e[11] || (e[11] = P((t) => n("close"), ["esc"])),
+          onScrollBottomReached: e[12] || (e[12] = (t) => n("scroll-bottom-reached"))
+        }, null, 8, ["emoji-filter", "skin-tone", "tabset-labels", "search-results-label", "search-no-results-label", "recently-used-emojis", "custom-emojis", "selected-tabset"])
       ]),
-      E("div", pt, [
-        C(mt, { emoji: I.value }, null, 8, ["emoji"]),
-        C(ct, {
+      _("div", yt, [
+        i.value && !T.value ? (h(), Z($(me), {
+          key: 0,
+          importance: "outlined",
+          "aria-label": o.addEmojiLabel,
+          class: "d-emoji-picker__add-emoji",
+          onClick: e[13] || (e[13] = (t) => n("add-emoji"))
+        }, {
+          default: U(() => [
+            de(H(o.addEmojiLabel), 1)
+          ]),
+          _: 1
+        }, 8, ["aria-label"])) : Y("", !0),
+        O(ht, { emoji: T.value }, null, 8, ["emoji"]),
+        O(mt, {
           ref: "skinSelectorRef",
-          "is-hovering": !!I.value,
-          "skin-selector-button-tooltip-label": t.skinSelectorButtonTooltipLabel,
-          "skin-tone": t.skinTone,
-          onSkinTone: i[12] || (i[12] = (e) => a("skin-tone", e)),
-          onFocusTabset: i[13] || (i[13] = (e) => d.$refs.tabsetRef.focusTabset()),
-          onFocusLastEmoji: i[14] || (i[14] = (e) => d.$refs.emojiSelectorRef.focusLastEmoji()),
-          onKeydown: i[15] || (i[15] = M((e) => a("close"), ["esc"]))
+          "is-hovering": !!T.value,
+          "skin-selector-button-tooltip-label": o.skinSelectorButtonTooltipLabel,
+          "skin-tone": o.skinTone,
+          onSkinTone: e[14] || (e[14] = (t) => n("skin-tone", t)),
+          onFocusTabset: e[15] || (e[15] = (t) => r.$refs.tabsetRef.focusTabset()),
+          onFocusLastEmoji: e[16] || (e[16] = (t) => r.$refs.emojiSelectorRef.focusLastEmoji()),
+          onKeydown: e[17] || (e[17] = P((t) => n("close"), ["esc"]))
         }, null, 8, ["is-hovering", "skin-selector-button-tooltip-label", "skin-tone"])
       ])
     ]));
   }
 };
 export {
-  It as default
+  Ft as default
 };
 //# sourceMappingURL=emoji-picker.js.map