@dialpad/dialtone 9.65.0 → 9.66.0

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

@@ -2,22 +2,24 @@ 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-RTDgnD9-.js";
+import { DtTabGroup, DtTab } from "../chunks/tab-aD6t0MNo.js";
 import { emojisGrouped } from "@dialpad/dialtone-emojis";
 import { DtTooltip } from "./tooltip.js";
 import "../common/constants.js";
 import "../common/utils.js";
-import "../chunks/input-NmYDD5bn.js";
+import "../chunks/input-HIysg24t.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-Dy4MEUJL.js";
+import "../chunks/icon_constants-gIQj4mf7.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/popover_constants-WsOUIY-m.js";
+import "../chunks/popover_constants-6YkPPbnk.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: {
@@ -31,7 +33,10 @@ 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() {
@@ -48,53 +53,41 @@ 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: {
@@ -139,20 +132,40 @@ 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) => ({
@@ -164,24 +177,20 @@ 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;
@@ -215,41 +224,35 @@ 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"])]);
     };
   }
 };
@@ -427,13 +430,19 @@ 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 = {
@@ -538,7 +547,10 @@ 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 {
@@ -556,7 +568,13 @@ 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(() => {
@@ -564,16 +582,7 @@ 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 = [];
@@ -581,14 +590,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) {
@@ -599,13 +608,11 @@ 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);
@@ -670,7 +677,9 @@ 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);
@@ -756,105 +765,88 @@ 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 = {
@@ -888,53 +880,47 @@ 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));
@@ -984,67 +970,52 @@ 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",
@@ -1062,24 +1033,29 @@ 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: {
@@ -1207,7 +1183,9 @@ const _sfc_main = {
      */
     "close"
   ],
-  setup(__props, { emit: __emit }) {
+  setup(__props, {
+    emit: __emit
+  }) {
     const props = __props;
     const emits = __emit;
     const internalSearchQuery = ref(props.searchQuery.value);
@@ -1216,16 +1194,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;
@@ -1237,65 +1215,55 @@ 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"])])]);
     };
   }
 };