@dialpad/dialtone 9.66.0 → 9.67.0

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

@@ -2,24 +2,22 @@ import { ref, onMounted, openBlock, createElementBlock, createVNode, unref, with
 import { DtInput } from "./input.js";
 import { DtIcon } from "./icon.js";
 import { DtButton } from "./button.js";
-import { DtTabGroup, DtTab } from "../chunks/tab-aD6t0MNo.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-HIysg24t.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-gIQj4mf7.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/popover_constants-6YkPPbnk.js";
+import "../chunks/popover_constants-WsOUIY-m.js";
 import "tippy.js";
-const _hoisted_1$5 = {
-  class: "d-emoji-picker__search d-emoji-picker__alignment"
-};
+const _hoisted_1$5 = { class: "d-emoji-picker__search d-emoji-picker__alignment" };
 const _sfc_main$5 = {
   __name: "emoji_search",
   props: {
@@ -33,10 +31,7 @@ const _sfc_main$5 = {
     }
   },
   emits: ["update:modelValue", "focus-emoji-selector", "focus-tabset", "select-first-emoji"],
-  setup(__props, {
-    expose: __expose,
-    emit: __emit
-  }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const emits = __emit;
     const searchInput = ref(null);
     function clearSearch() {
@@ -53,41 +48,53 @@ const _sfc_main$5 = {
       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"
-        })]),
-        _: 2
-      }, [__props.modelValue.length > 0 ? {
-        name: "rightIcon",
-        fn: withCtx(() => [createVNode(unref(DtButton), {
-          importance: "clear",
-          kind: "muted",
-          onClick: clearSearch
-        }, {
-          icon: withCtx(() => [createVNode(unref(DtIcon), {
-            name: "x-circle",
-            size: "200"
-          })]),
-          _: 1
-        })]),
-        key: "0"
-      } : void 0]), 1032, ["placeholder", "model-value"])]);
+      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"
+            })
+          ]),
+          _: 2
+        }, [
+          __props.modelValue.length > 0 ? {
+            name: "rightIcon",
+            fn: withCtx(() => [
+              createVNode(unref(DtButton), {
+                importance: "clear",
+                kind: "muted",
+                onClick: clearSearch
+              }, {
+                icon: withCtx(() => [
+                  createVNode(unref(DtIcon), {
+                    name: "x-circle",
+                    size: "200"
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["placeholder", "model-value"])
+      ]);
     };
   }
 };
-const _hoisted_1$4 = {
-  class: "d-emoji-picker__tabset"
-};
+const _hoisted_1$4 = { class: "d-emoji-picker__tabset" };
 const _sfc_main$4 = {
   __name: "emoji_tabset",
   props: {
@@ -132,40 +139,20 @@ const _sfc_main$4 = {
     "focus-search-input",
     "focus-skin-selector"
   ],
-  setup(__props, {
-    expose: __expose,
-    emit: __emit
-  }) {
+  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_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) => ({
@@ -177,20 +164,24 @@ const _sfc_main$4 = {
     });
     const isSearching = computed(() => props.emojiFilter.length > 0);
     const selectedTab = ref("1");
-    const {
-      isScrolling
-    } = toRefs(props);
+    const { isScrolling } = toRefs(props);
     const tabsetRef = ref([]);
-    watch(() => props.scrollIntoTab, () => {
-      if (!isScrolling.value && !isSearching.value) {
-        selectedTab.value = (props.scrollIntoTab + 1).toString();
+    watch(
+      () => props.scrollIntoTab,
+      () => {
+        if (!isScrolling.value && !isSearching.value) {
+          selectedTab.value = (props.scrollIntoTab + 1).toString();
+        }
       }
-    });
-    watch(isSearching, () => {
-      if (isSearching.value) {
-        selectedTab.value = null;
+    );
+    watch(
+      isSearching,
+      () => {
+        if (isSearching.value) {
+          selectedTab.value = null;
+        }
       }
-    });
+    );
     function selectTabset(id) {
       if (!isScrolling.value) {
         selectedTab.value = id;
@@ -224,35 +215,41 @@ const _sfc_main$4 = {
       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"])]);
+      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"])
+      ]);
     };
   }
 };
@@ -430,19 +427,13 @@ function useKeyboardNavigation() {
     handleArrowNavigation
   };
 }
-const _hoisted_1$3 = {
-  class: "d-emoji-picker__selector"
-};
+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"
 };
-const _hoisted_3$2 = {
-  key: 0
-};
-const _hoisted_4$2 = {
-  class: "d-emoji-picker__tab"
-};
+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 = {
@@ -547,10 +538,7 @@ const _sfc_main$3 = {
       */
     "focus-search-input"
   ],
-  setup(__props, {
-    expose: __expose,
-    emit: __emit
-  }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
     const {
@@ -568,13 +556,7 @@ const _sfc_main$3 = {
     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)
-      }));
+      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(() => {
@@ -582,7 +564,16 @@ const _sfc_main$3 = {
     });
     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];
+      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 = [];
@@ -590,14 +581,14 @@ const _sfc_main$3 = {
     });
     watch(currentEmojis, () => {
       searchByNameAndKeywords();
-    }, {
-      immediate: true
-    });
-    watch(() => props.recentlyUsedEmojis, () => {
-      emojisGrouped["Recently used"] = props.recentlyUsedEmojis;
-    }, {
-      immediate: true
-    });
+    }, { immediate: true });
+    watch(
+      () => props.recentlyUsedEmojis,
+      () => {
+        emojisGrouped["Recently used"] = props.recentlyUsedEmojis;
+      },
+      { immediate: true }
+    );
     watch(() => props.emojiFilter, () => {
       resetScroll();
       if (props.emojiFilter) {
@@ -608,11 +599,13 @@ const _sfc_main$3 = {
       }
       debouncedSearch();
     });
-    watch(() => props.selectedTabset, (tab) => {
-      scrollToTab(tab.tabId);
-    }, {
-      deep: true
-    });
+    watch(
+      () => props.selectedTabset,
+      (tab) => {
+        scrollToTab(tab.tabId);
+      },
+      { deep: true }
+    );
     function hoverEmoji(emoji, isFirst = false) {
       hoverFirstEmoji.value = isFirst;
       emits("highlighted-emoji", emoji);
@@ -677,9 +670,7 @@ const _sfc_main$3 = {
         emits("is-scrolling", false);
         entries.forEach((entry) => {
           var _a, _b, _c, _d, _e;
-          const {
-            target
-          } = entry;
+          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);
@@ -765,88 +756,105 @@ const _sfc_main$3 = {
       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"
-      }, [__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"
-        }, [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)]);
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        createElementVNode("div", {
+          id: "d-emoji-picker-list",
+          ref_key: "listRef",
+          ref: listRef,
+          class: "d-emoji-picker__list"
+        }, [
+          __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"
+            }, [
+              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)
+      ]);
     };
   }
 };
-const _hoisted_1$2 = {
-  "data-qa": "skin-selector"
-};
-const _hoisted_2$2 = {
-  class: "d-emoji-picker__skin-list"
-};
+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_5 = { class: "d-emoji-picker__skin-selected" };
 const _hoisted_6 = ["aria-label"];
 const _hoisted_7 = ["alt", "aria-label", "title", "src"];
 const _sfc_main$2 = {
@@ -880,47 +888,53 @@ const _sfc_main$2 = {
     "focus-tabset",
     "focus-last-emoji"
   ],
-  setup(__props, {
-    expose: __expose,
-    emit: __emit
-  }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const skinList = [{
-      name: ":wave_tone1:",
-      unicode_output: "1f44b-1f3fb",
-      skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
-      skinCode: "_tone1"
-    }, {
-      name: ":wave_tone2:",
-      unicode_output: "1f44b-1f3fc",
-      skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
-      skinCode: "_tone2"
-    }, {
-      name: ":wave_tone3:",
-      unicode_output: "1f44b-1f3fd",
-      skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
-      skinCode: "_tone3"
-    }, {
-      name: ":wave_tone4:",
-      unicode_output: "1f44b-1f3fe",
-      skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
-      skinCode: "_tone4"
-    }, {
-      name: ":wave_tone5:",
-      unicode_output: "1f44b-1f3ff",
-      skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
-      skinCode: "_tone5"
-    }, {
-      name: ":wave:",
-      unicode_output: "1f44b",
-      skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
-      skinCode: ""
-    }];
+    const skinList = [
+      {
+        name: ":wave_tone1:",
+        unicode_output: "1f44b-1f3fb",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,
+        skinCode: "_tone1"
+      },
+      {
+        name: ":wave_tone2:",
+        unicode_output: "1f44b-1f3fc",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,
+        skinCode: "_tone2"
+      },
+      {
+        name: ":wave_tone3:",
+        unicode_output: "1f44b-1f3fd",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,
+        skinCode: "_tone3"
+      },
+      {
+        name: ":wave_tone4:",
+        unicode_output: "1f44b-1f3fe",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,
+        skinCode: "_tone4"
+      },
+      {
+        name: ":wave_tone5:",
+        unicode_output: "1f44b-1f3ff",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,
+        skinCode: "_tone5"
+      },
+      {
+        name: ":wave:",
+        unicode_output: "1f44b",
+        skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,
+        skinCode: ""
+      }
+    ];
     const isOpen = ref(false);
     const skinSelectorRef = ref(null);
     const skinsRef = ref([]);
-    watchEffect(() => props.isHovering && (isOpen.value = false));
+    watchEffect(
+      () => props.isHovering && (isOpen.value = false)
+    );
     const skinPassedIn = computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));
     const skinSelected = ref(skinPassedIn.value);
     watchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));
@@ -970,52 +984,67 @@ const _sfc_main$2 = {
       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)
-        }, [createElementVNode("img", {
-          class: "d-icon d-icon--size-500",
-          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]])]);
+      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)
+            }, [
+              createElementVNode("img", {
+                class: "d-icon d-icon--size-500",
+                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]
+        ])
+      ]);
     };
   }
 };
-const _hoisted_1$1 = {
-  class: "d-emoji-picker__data"
-};
+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",
@@ -1033,29 +1062,24 @@ const _sfc_main$1 = {
   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: __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), createElementVNode("div", null, toDisplayString((_a = __props.emoji) == null ? void 0 : _a.name), 1)]);
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        __props.emoji ? (openBlock(), createElementBlock("img", {
+          key: 0,
+          class: "d-icon d-icon--size-500",
+          alt: __props.emoji.name,
+          "aria-label": __props.emoji.name,
+          title: __props.emoji.name,
+          src: `${unref(CDN_URL) + __props.emoji.unicode_character}.png`
+        }, null, 8, _hoisted_2$1)) : createCommentVNode("", true),
+        createElementVNode("div", null, toDisplayString((_a = __props.emoji) == null ? void 0 : _a.name), 1)
+      ]);
     };
   }
 };
-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 _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: {
@@ -1183,9 +1207,7 @@ const _sfc_main = {
      */
     "close"
   ],
-  setup(__props, {
-    emit: __emit
-  }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
     const internalSearchQuery = ref(props.searchQuery.value);
@@ -1194,16 +1216,16 @@ const _sfc_main = {
     const scrollIntoTab = ref(0);
     const isScrolling = ref(false);
     const showRecentlyUsedTab = computed(() => props.recentlyUsedEmojis.length > 0);
-    watch(() => props.searchQuery, (newValue) => {
-      internalSearchQuery.value = newValue;
-    });
+    watch(
+      () => props.searchQuery,
+      (newValue) => {
+        internalSearchQuery.value = newValue;
+      }
+    );
     function scrollToSelectedTabset(tabId) {
       internalSearchQuery.value = "";
       selectedTabset.value = tabId;
-      selectedTabset.value = {
-        ...selectedTabset.value,
-        tabId
-      };
+      selectedTabset.value = { ...selectedTabset.value, tabId };
     }
     function updateScrollIntoTab(value) {
       scrollIntoTab.value = value;
@@ -1215,55 +1237,65 @@ const _sfc_main = {
       highlightedEmoji.value = emoji;
     }
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createVNode(_sfc_main$4, {
-        ref: "tabsetRef",
-        "emoji-filter": internalSearchQuery.value,
-        "show-recently-used-tab": showRecentlyUsedTab.value,
-        "scroll-into-tab": scrollIntoTab.value,
-        "tabset-labels": __props.tabSetLabels,
-        "is-scrolling": isScrolling.value,
-        onFocusSkinSelector: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
-        onFocusSearchInput: _cache[1] || (_cache[1] = ($event) => __props.showSearch ? _ctx.$refs.searchInputRef.focusSearchInput() : _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
-        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, [__props.showSearch ? (openBlock(), createBlock(_sfc_main$5, {
-        key: 0,
-        ref: "searchInputRef",
-        modelValue: internalSearchQuery.value,
-        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => internalSearchQuery.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"])) : createCommentVNode("", true), createVNode(_sfc_main$3, {
-        ref: "emojiSelectorRef",
-        "emoji-filter": internalSearchQuery.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) => __props.showSearch ? _ctx.$refs.searchInputRef.focusSearchInput() : _ctx.$refs.tabsetRef.focusTabset()),
-        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"])])]);
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createVNode(_sfc_main$4, {
+            ref: "tabsetRef",
+            "emoji-filter": internalSearchQuery.value,
+            "show-recently-used-tab": showRecentlyUsedTab.value,
+            "scroll-into-tab": scrollIntoTab.value,
+            "tabset-labels": __props.tabSetLabels,
+            "is-scrolling": isScrolling.value,
+            onFocusSkinSelector: _cache[0] || (_cache[0] = ($event) => _ctx.$refs.skinSelectorRef.focusSkinSelector()),
+            onFocusSearchInput: _cache[1] || (_cache[1] = ($event) => __props.showSearch ? _ctx.$refs.searchInputRef.focusSearchInput() : _ctx.$refs.emojiSelectorRef.focusEmojiSelector()),
+            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, [
+          __props.showSearch ? (openBlock(), createBlock(_sfc_main$5, {
+            key: 0,
+            ref: "searchInputRef",
+            modelValue: internalSearchQuery.value,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => internalSearchQuery.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"])) : createCommentVNode("", true),
+          createVNode(_sfc_main$3, {
+            ref: "emojiSelectorRef",
+            "emoji-filter": internalSearchQuery.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) => __props.showSearch ? _ctx.$refs.searchInputRef.focusSearchInput() : _ctx.$refs.tabsetRef.focusTabset()),
+            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"])
+        ])
+      ]);
     };
   }
 };