@dialpad/dialtone 9.82.0 → 9.83.0

package/dist/vue2/components/emoji_text_wrapper/emoji_text_wrapper.vue.js

@@ -1,5 +1,6 @@
-import { findShortCodes, findEmojis } from "../../common/emoji.js";
+import { findShortCodes } from "../../common/emoji.js";
 import { ICON_SIZE_MODIFIERS } from "../icon/icon_constants.js";
+import { emojiPattern } from "regex-combined-emojis";
 import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
 import DtEmoji from "../emoji/emoji.vue.js";
 const _sfc_main = {
@@ -42,7 +43,8 @@ const _sfc_main = {
       const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
       const items = textContent.split(regexp);
       return items.filter((item) => item.trim() !== "").map((item) => {
-        if (replaceList.includes(item)) {
+        regexp.lastIndex = 0;
+        if (replaceList.includes(item) || regexp.test(item)) {
           return this.$createElement(DtEmoji, {
             props: { code: item, size: this.size }
           });
@@ -72,8 +74,7 @@ const _sfc_main = {
      */
     searchCodes(textContent) {
       const shortcodes = findShortCodes(textContent);
-      const emojis = findEmojis(textContent);
-      const replaceList = [...shortcodes, ...emojis];
+      const replaceList = [...shortcodes, emojiPattern];
       return this.replaceDtEmojis(replaceList, textContent);
     }
   },

package/dist/vue2/components/emoji_text_wrapper/emoji_text_wrapper.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_text_wrapper.vue.js","sources":["../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findEmojis, findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at: 100 to 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      if (!replaceList.length) return textContent;\n\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          if (replaceList.includes(item)) {\n            return this.$createElement(DtEmoji, {\n              props: { code: item, size: this.size },\n            });\n          }\n          return this.$createElement('span', { class: 'd-emoji-text-wrapper__text' }, item);\n        });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      // If VNode has no tag, it is a text node\n      if (!VNode.tag && VNode.text) {\n        return this.searchCodes(VNode.text);\n      }\n\n      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n      return this.$createElement(VNode.tag, VNode.data, children);\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent (VNode) {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const emojis = findEmojis(textContent);\n\n      const replaceList = [...shortcodes, ...emojis];\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render (h) {\n    const defaultSlotContent = this.$slots.default || [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;AASA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,mBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,UAAA,CAAA,YAAA,OAAA,QAAA;AAEA,YAAA,SAAA,IAAA,OAAA,IAAA,YAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AAEA,aAAA,MACA,OAAA,UAAA,KAAA,KAAA,MAAA,EAAA,EACA,IAAA,CAAA,SAAA;AACA,YAAA,YAAA,SAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAA,SAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,EAAA,OAAA,6BAAA,GAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAA,eAAA,WAAA;AACA,YAAA,SAAA,WAAA,WAAA;AAEA,YAAA,cAAA,CAAA,GAAA,YAAA,GAAA,MAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,MACA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}
+{"version":3,"file":"emoji_text_wrapper.vue.js","sources":["../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"sourcesContent":["<script>\nimport { DtEmoji } from '../emoji';\nimport { findShortCodes } from '@/common/emoji';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon/icon_constants';\nimport { emojiPattern } from 'regex-combined-emojis';\n\n/**\n * Wrapper to find and replace shortcodes like :smile: or unicode chars such as 😄 with our custom Emojis implementation.\n * @see https://dialtone.dialpad.com/components/emoji_text_wrapper.html\n */\nexport default {\n  name: 'DtEmojiTextWrapper',\n\n  components: {\n    DtEmoji,\n  },\n\n  props: {\n    /**\n     * Element type (tag name) to use for the wrapper.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The icon size to render the emojis at: 100 to 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n  },\n\n  data () {\n    return {\n      loadingEmojiJson: true,\n    };\n  },\n\n  async created () {\n    this.loadingEmojiJson = false;\n  },\n\n  methods: {\n    /**\n     * Replaces the valid codes from the text content with a DtEmoji component.\n     * @returns {Array<VNode|string>}\n     */\n    replaceDtEmojis (replaceList, textContent) {\n      if (!replaceList.length) return textContent;\n\n      const regexp = new RegExp(`(${replaceList.join('|')})`, 'g');\n      const items = textContent.split(regexp);\n\n      return items\n        .filter(item => item.trim() !== '')\n        .map((item) => {\n          // Reset the regexp index to 0 to start from the beginning\n          // Otherwise, it will start from the last index\n          regexp.lastIndex = 0;\n          if (replaceList.includes(item) || regexp.test(item)) {\n            return this.$createElement(DtEmoji, {\n              props: { code: item, size: this.size },\n            });\n          }\n          return this.$createElement('span', { class: 'd-emoji-text-wrapper__text' }, item);\n        });\n    },\n\n    /**\n     * Recursively search the Vue virtual DOM to find text\n     * @param VNode\n     * @returns {VNode|*}\n     */\n    searchVNodes (VNode) {\n      // If VNode has no tag, it is a text node\n      if (!VNode.tag && VNode.text) {\n        return this.searchCodes(VNode.text);\n      }\n\n      const children = VNode.children ? VNode.children.map(VNodeChild => this.searchVNodes(VNodeChild)) : [];\n      return this.$createElement(VNode.tag, VNode.data, children);\n    },\n\n    // TODO: Find a way to crawl vue components\n    replaceVueComponentVNodeContent (VNode) {\n      //\n    },\n\n    /**\n     * Find codes in text.\n     * @param textContent string\n     * @returns {Array<VNode|string>|string}\n     */\n    searchCodes (textContent) {\n      const shortcodes = findShortCodes(textContent);\n      const replaceList = [...shortcodes, emojiPattern];\n      return this.replaceDtEmojis(replaceList, textContent);\n    },\n  },\n\n  render (h) {\n    const defaultSlotContent = this.$slots.default || [];\n    return h(\n      this.elementType,\n      {\n        'data-qa': 'emoji-text-wrapper',\n        class: 'd-emoji-text-wrapper',\n      },\n      this.loadingEmojiJson\n        ? defaultSlotContent\n        : defaultSlotContent.map(VNode => this.searchVNodes(VNode)),\n    );\n  },\n};\n</script>\n"],"names":[],"mappings":";;;;;AAUA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAA,mBAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,SAAA,mBAAA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA,aAAA,aAAA;AACA,UAAA,CAAA,YAAA,OAAA,QAAA;AAEA,YAAA,SAAA,IAAA,OAAA,IAAA,YAAA,KAAA,GAAA,CAAA,KAAA,GAAA;AACA,YAAA,QAAA,YAAA,MAAA,MAAA;AAEA,aAAA,MACA,OAAA,UAAA,KAAA,KAAA,MAAA,EAAA,EACA,IAAA,CAAA,SAAA;AAGA,eAAA,YAAA;AACA,YAAA,YAAA,SAAA,IAAA,KAAA,OAAA,KAAA,IAAA,GAAA;AACA,iBAAA,KAAA,eAAA,SAAA;AAAA,YACA,OAAA,EAAA,MAAA,MAAA,MAAA,KAAA,KAAA;AAAA,UACA,CAAA;AAAA,QACA;AACA,eAAA,KAAA,eAAA,QAAA,EAAA,OAAA,6BAAA,GAAA,IAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA,OAAA;AAEA,UAAA,CAAA,MAAA,OAAA,MAAA,MAAA;AACA,eAAA,KAAA,YAAA,MAAA,IAAA;AAAA,MACA;AAEA,YAAA,WAAA,MAAA,WAAA,MAAA,SAAA,IAAA,gBAAA,KAAA,aAAA,UAAA,CAAA,IAAA,CAAA;AACA,aAAA,KAAA,eAAA,MAAA,KAAA,MAAA,MAAA,QAAA;AAAA,IACA;AAAA;AAAA,IAGA,gCAAA,OAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA,aAAA;AACA,YAAA,aAAA,eAAA,WAAA;AACA,YAAA,cAAA,CAAA,GAAA,YAAA,YAAA;AACA,aAAA,KAAA,gBAAA,aAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,GAAA;AACA,UAAA,qBAAA,KAAA,OAAA,WAAA,CAAA;AACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,QACA,WAAA;AAAA,QACA,OAAA;AAAA,MACA;AAAA,MACA,KAAA,mBACA,qBACA,mBAAA,IAAA,WAAA,KAAA,aAAA,KAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;"}

package/dist/vue2/dialtone-vue.cjs

@@ -177,7 +177,6 @@ exports.emojiRegex = common_emoji.emojiRegex;
 exports.emojiShortCodeRegex = common_emoji.emojiShortCodeRegex;
 exports.emojiVersion = common_emoji.emojiVersion;
 exports.filterValidShortCodes = common_emoji.filterValidShortCodes;
-exports.findEmojis = common_emoji.findEmojis;
 exports.findShortCodes = common_emoji.findShortCodes;
 exports.getEmojiData = common_emoji.getEmojiData;
 exports.setCustomEmojiJson = common_emoji.setCustomEmojiJson;

package/dist/vue2/dialtone-vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialtone-vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dialtone-vue.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/dialtone-vue.js

@@ -2,7 +2,7 @@ import { DEFAULT_VALIDATION_MESSAGE_TYPE, DESCRIPTION_SIZE_TYPES, VALIDATION_MES
 import { validationMessageValidator } from "./common/validators.js";
 import { disableRootScrolling, enableRootScrolling, filterFormattedMessages, formatMessages, getUniqueString, getValidationState } from "./common/utils.js";
 import { durationInHHMM, getDateMedium, relativeDate, setDateLocale } from "./common/dates.js";
-import { codeToEmojiData, customEmojiAssetUrl, defaultEmojiAssetUrl, emojiFileExtensionLarge, emojiFileExtensionSmall, emojiImageUrlLarge, emojiImageUrlSmall, emojiJson, emojiRegex, emojiShortCodeRegex, emojiVersion, filterValidShortCodes, findEmojis, findShortCodes, getEmojiData, setCustomEmojiJson, setCustomEmojiUrl, setEmojiAssetUrlLarge, setEmojiAssetUrlSmall, shortcodeToEmojiData, stringToUnicode, unicodeToString, validateCustomEmojiJson } from "./common/emoji.js";
+import { codeToEmojiData, customEmojiAssetUrl, defaultEmojiAssetUrl, emojiFileExtensionLarge, emojiFileExtensionSmall, emojiImageUrlLarge, emojiImageUrlSmall, emojiJson, emojiRegex, emojiShortCodeRegex, emojiVersion, filterValidShortCodes, findShortCodes, getEmojiData, setCustomEmojiJson, setCustomEmojiUrl, setEmojiAssetUrlLarge, setEmojiAssetUrlSmall, shortcodeToEmojiData, stringToUnicode, unicodeToString, validateCustomEmojiJson } from "./common/emoji.js";
 import { CheckableMixin, GroupableMixin, InputMixin } from "./common/mixins/input.js";
 import { InputGroupMixin } from "./common/mixins/input_group.js";
 import { default as default2 } from "./common/mixins/keyboard_list_navigation.js";
@@ -358,7 +358,6 @@ export {
   enableRootScrolling,
   filterFormattedMessages,
   filterValidShortCodes,
-  findEmojis,
   findShortCodes,
   formatLong,
   formatMedium,

package/dist/vue2/types/common/emoji/index.d.ts

@@ -10,7 +10,6 @@ export function stringToUnicode(str: any): string;
 export function codeToEmojiData(code: any): any;
 export function findShortCodes(textContent: any): Set<any>;
 export function filterValidShortCodes(shortcodes: any): Set<any>;
-export function findEmojis(textContent: any): Set<any>;
 export const emojiRegex: RegExp;
 export const emojiVersion: "8.0";
 export const defaultEmojiAssetUrl: string;

package/dist/vue2/types/common/emoji/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../common/emoji/index.js"],"names":[],"mappings":"AAoBA,mCAEC;AAED,8EAMC;AAED,8EAMC;AAED,kDAEC;AAED,oDAEC;AAKD,yDA6DC;AAID,gEAqBC;AAUD,oDAWC;AAGD,kDAOC;AAGD,gDAUC;AAMD,2DAKC;AAED,iEAGC;AAKD,uDAIC;AA3MD,gCAAwD;AACxD,iCAAkC;AAClC,0CAAqH;AACrH,qCAAsC;AAGtC,sCAAqD;AACrD,2CAA4C;AAG5C,sCAAqD;AACrD,2CAA4C;AAE5C,2BAAuC;AAEvC,yCAA0D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../common/emoji/index.js"],"names":[],"mappings":"AAoBA,mCAEC;AAED,8EAMC;AAED,8EAMC;AAED,kDAEC;AAED,oDAEC;AAKD,yDA6DC;AAID,gEAqBC;AAUD,oDAWC;AAGD,kDAOC;AAGD,gDAUC;AAMD,2DAKC;AAED,iEAGC;AAlMD,gCAAwD;AACxD,iCAAkC;AAClC,0CAAqH;AACrH,qCAAsC;AAGtC,sCAAqD;AACrD,2CAA4C;AAG5C,sCAAqD;AACrD,2CAA4C;AAE5C,2BAAuC;AAEvC,yCAA0D"}

package/dist/vue2/types/components/emoji_picker/modules/emoji_selector.vue.d.ts

@@ -282,6 +282,7 @@ declare const _default: import('vue').DefineComponent<{
     handleArrowRightFiltered: (indexTab: any, indexEmoji: any) => void;
     handleArrowLeft: (indexTab: any, indexEmoji: any) => void;
     handleArrowRight: (indexTab: any, indexEmoji: any) => void;
+    handleEmojiSelection(emoji: any, event: any): void;
     handleKeyDownFilteredEmojis(event: any, indexEmoji: any, emoji: any): void;
     setTabLabelObserver(): void;
     focusLastEmoji(): void;

package/dist/vue2/types/components/emoji_text_wrapper/emoji_text_wrapper.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_text_wrapper.vue.d.ts","sourceRoot":"","sources":["../../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"names":[],"mappings":";;;;;;;;;;;;;yDAsKiB,MAAM,QAAM,MAAM,CAAC;8BAuBnB,SAAO;;mCAoBP,MAAM,QAAM,MAAM,CAAC,GAAC,MAAM"}
+{"version":3,"file":"emoji_text_wrapper.vue.d.ts","sourceRoot":"","sources":["../../../../components/emoji_text_wrapper/emoji_text_wrapper.vue"],"names":[],"mappings":";;;;;;;;;;;;;yDAyKiB,MAAM,QAAM,MAAM,CAAC;8BA0BnB,SAAO;;mCAoBP,MAAM,QAAM,MAAM,CAAC,GAAC,MAAM"}

package/dist/vue3/common/emoji.cjs

@@ -140,11 +140,6 @@ function filterValidShortCodes(shortcodes) {
   const filtered = shortcodes ? shortcodes.filter((code) => shortcodeToEmojiData(code)) : [];
   return new Set(filtered);
 }
-function findEmojis(textContent) {
-  const matches = [...textContent.matchAll(emojiRegex)];
-  const emojis = matches.length ? matches.map((match) => match[0]) : [];
-  return new Set(emojis);
-}
 exports.codeToEmojiData = codeToEmojiData;
 exports.defaultEmojiAssetUrl = defaultEmojiAssetUrl;
 exports.emojiJson = emojiJson;
@@ -152,7 +147,6 @@ exports.emojiRegex = emojiRegex;
 exports.emojiShortCodeRegex = emojiShortCodeRegex;
 exports.emojiVersion = emojiVersion;
 exports.filterValidShortCodes = filterValidShortCodes;
-exports.findEmojis = findEmojis;
 exports.findShortCodes = findShortCodes;
 exports.getEmojiData = getEmojiData;
 exports.setCustomEmojiJson = setCustomEmojiJson;

package/dist/vue3/common/emoji.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.cjs","sources":["../../common/emoji/index.js"],"sourcesContent":["import { emojiPattern } from 'regex-combined-emojis';\nimport { emojisIndexed } from '@dialpad/dialtone-emojis';\n\nexport const emojiRegex = new RegExp(emojiPattern, 'g');\nexport const emojiVersion = '8.0';\nexport const defaultEmojiAssetUrl = 'https://cdn.jsdelivr.net/joypixels/assets/' + emojiVersion + '/png/unicode/32/';\nexport let customEmojiAssetUrl = null;\n\n// Used for emoji 16px and smaller\nexport let emojiImageUrlSmall = defaultEmojiAssetUrl;\nexport let emojiFileExtensionSmall = '.png';\n\n// Used for emoji larger than 16px\nexport let emojiImageUrlLarge = defaultEmojiAssetUrl;\nexport let emojiFileExtensionLarge = '.png';\n\nexport const emojiJson = emojisIndexed;\n\nexport const emojiShortCodeRegex = /(^| |(?<=:))(:\\w+:)/g;\n\nexport function getEmojiData () {\n  return emojiJson;\n}\n\nexport function setEmojiAssetUrlSmall (url, fileExtension = '.png') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlSmall = url;\n  emojiFileExtensionSmall = fileExtension;\n}\n\nexport function setEmojiAssetUrlLarge (url, fileExtension = '.svg') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlLarge = url;\n  emojiFileExtensionLarge = fileExtension;\n}\n\nexport function setCustomEmojiUrl (url) {\n  customEmojiAssetUrl = url;\n}\n\nexport function setCustomEmojiJson (json) {\n  validateCustomEmojiJson(json);\n}\n\n/**\n * Validate custom emoji json\n */\nexport function validateCustomEmojiJson (json) {\n  const customEmojiProps = ['extension', 'custom'];\n  const customEmojiRequiredProps = [\n    'name',\n    'category',\n    'shortname',\n    'extension',\n    'custom',\n  ];\n\n  /**\n   * Update single emoji properties.\n   * If the property exists in emojiData, it'll add the values if the property is an array, otherwise will overwrite.\n   * If not exists, will add the property to the emojiData object.\n   */\n  const _updateNativeEmojiData = (emojiData, propName, propValue) => {\n    if (emojiData[propName] === undefined) {\n      if (!customEmojiProps.includes(propName)) {\n        return;\n      }\n\n      // new property to add\n      emojiData[propName] = propValue;\n    } else {\n      if (Array.isArray(emojiData[propName])) {\n        emojiData[propName] = emojiData[propName].concat(propValue);\n      } else {\n        emojiData[propName] = propValue;\n      }\n    }\n  };\n\n  Object.entries(json).forEach((item) => {\n    const [customEmojiKey, customEmojiValue] = item;\n\n    if (customEmojiKey in emojiJson) {\n      // custom emoji exists in emoji json which means to update some data in the native emoji\n      const emojiData = emojiJson[customEmojiKey];\n\n      for (const customEmojiPropertyName in customEmojiValue) {\n        const customEmojiPropertyValue = customEmojiValue[customEmojiPropertyName];\n\n        _updateNativeEmojiData(emojiData, customEmojiPropertyName, customEmojiPropertyValue);\n      }\n    } else {\n      // new custom emoji\n      const _validateRequiredProps = () =>\n        customEmojiRequiredProps.every((val) => {\n          return customEmojiValue[val] !== undefined;\n        });\n\n      if (_validateRequiredProps()) {\n        emojiJson[customEmojiKey] = customEmojiValue;\n      } else {\n        console.error(\n          'The following custom emoji doesn\\'t contain the required properties:',\n          customEmojiValue,\n        );\n      }\n    }\n  });\n}\n\n// recursively searches the emoji data object containing data for all emojis\n// and returns the object with the specified shortcode.\nexport function shortcodeToEmojiData (shortcode) {\n  // eslint-disable-next-line complexity\n  function f (o, key) {\n    if (!o || typeof o !== 'object') {\n      return;\n    }\n    if ('shortname' in o) {\n      if (o.shortname === shortcode || o.shortname_alternates.includes(shortcode)) {\n        o.key = key;\n        reference = o;\n        return true;\n      }\n    }\n    Object.keys(o).some(function (k) {\n      return f(o[k], k);\n    });\n  }\n\n  let reference;\n  f(getEmojiData(), null);\n  return reference;\n}\n\n// Takes in an emoji unicode character(s) and converts it to an emoji string in the format the emoji data object expects\n// as a key. There can be multiple unicode characters in an emoji to denote the emoji itself, skin tone, gender\n// and such. Note that this function does NOT return variation selectors (fe0f) or zero width joiners (200d), as these\n// are not included as part of the key in the emoji.json.\n//\n// Example:\n// return value for smile emoji (no skin tone): 1f600\n// return value for left facing fist (light skin tone): 1f91b-1f3fb\nexport function unicodeToString (emoji) {\n  let key = '';\n  for (const codePoint of emoji) {\n    const codepoint = codePoint.codePointAt(0).toString(16).padStart(4, '0');\n\n    // skip 200d and fe0f as these are not included in emoji_strategy.json keys\n    if (['200d', 'fe0f'].includes(codepoint)) continue;\n    if (key !== '') { key = key + '-'; }\n    key = key + codepoint;\n  }\n  return key;\n}\n\n// Takes in unicode in string form ex: '1f91b-1f3fb' and converts it to an actual unicode character.\nexport function stringToUnicode (str) {\n  const uChars = str.split('-');\n  let result = '';\n  uChars.forEach((uChar) => {\n    result = result + String.fromCodePoint(parseInt(uChar, 16));\n  });\n  return result;\n}\n\n// Takes in a code (which could be unicode or shortcode) and returns the emoji data for it.\nexport function codeToEmojiData (code) {\n  code = code?.trim();\n  if (code.startsWith(':') && code.endsWith(':')) {\n    return shortcodeToEmojiData(code);\n  } else {\n    const unicodeString = unicodeToString(code);\n    const result = emojiJson[unicodeString];\n    if (result) result.key = unicodeString;\n    return result;\n  }\n}\n\n// Finds every shortcode in slot text\n// filters only the existing codes in emojiJson\n// removes duplicates.\n// @returns {string[]}\nexport function findShortCodes (textContent) {\n  const shortcodes = (\n    textContent.match(emojiShortCodeRegex) || []\n  ).map(code => code.trim());\n  return filterValidShortCodes(shortcodes);\n}\n\nexport function filterValidShortCodes (shortcodes) {\n  const filtered = shortcodes ? shortcodes.filter(code => shortcodeToEmojiData(code)) : [];\n  return new Set(filtered);\n}\n\n// Finds every emoji in slot text\n// removes duplicates\n// @returns {string[]}\nexport function findEmojis (textContent) {\n  const matches = [...textContent.matchAll(emojiRegex)];\n  const emojis = matches.length ? matches.map(match => match[0]) : [];\n  return new Set(emojis);\n}\n"],"names":["emojiPattern","customEmojiAssetUrl","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","emojisIndexed"],"mappings":"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"}
+{"version":3,"file":"emoji.cjs","sources":["../../common/emoji/index.js"],"sourcesContent":["import { emojiPattern } from 'regex-combined-emojis';\nimport { emojisIndexed } from '@dialpad/dialtone-emojis';\n\nexport const emojiRegex = new RegExp(emojiPattern, 'g');\nexport const emojiVersion = '8.0';\nexport const defaultEmojiAssetUrl = 'https://cdn.jsdelivr.net/joypixels/assets/' + emojiVersion + '/png/unicode/32/';\nexport let customEmojiAssetUrl = null;\n\n// Used for emoji 16px and smaller\nexport let emojiImageUrlSmall = defaultEmojiAssetUrl;\nexport let emojiFileExtensionSmall = '.png';\n\n// Used for emoji larger than 16px\nexport let emojiImageUrlLarge = defaultEmojiAssetUrl;\nexport let emojiFileExtensionLarge = '.png';\n\nexport const emojiJson = emojisIndexed;\n\nexport const emojiShortCodeRegex = /(^| |(?<=:))(:\\w+:)/g;\n\nexport function getEmojiData () {\n  return emojiJson;\n}\n\nexport function setEmojiAssetUrlSmall (url, fileExtension = '.png') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlSmall = url;\n  emojiFileExtensionSmall = fileExtension;\n}\n\nexport function setEmojiAssetUrlLarge (url, fileExtension = '.svg') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlLarge = url;\n  emojiFileExtensionLarge = fileExtension;\n}\n\nexport function setCustomEmojiUrl (url) {\n  customEmojiAssetUrl = url;\n}\n\nexport function setCustomEmojiJson (json) {\n  validateCustomEmojiJson(json);\n}\n\n/**\n * Validate custom emoji json\n */\nexport function validateCustomEmojiJson (json) {\n  const customEmojiProps = ['extension', 'custom'];\n  const customEmojiRequiredProps = [\n    'name',\n    'category',\n    'shortname',\n    'extension',\n    'custom',\n  ];\n\n  /**\n   * Update single emoji properties.\n   * If the property exists in emojiData, it'll add the values if the property is an array, otherwise will overwrite.\n   * If not exists, will add the property to the emojiData object.\n   */\n  const _updateNativeEmojiData = (emojiData, propName, propValue) => {\n    if (emojiData[propName] === undefined) {\n      if (!customEmojiProps.includes(propName)) {\n        return;\n      }\n\n      // new property to add\n      emojiData[propName] = propValue;\n    } else {\n      if (Array.isArray(emojiData[propName])) {\n        emojiData[propName] = emojiData[propName].concat(propValue);\n      } else {\n        emojiData[propName] = propValue;\n      }\n    }\n  };\n\n  Object.entries(json).forEach((item) => {\n    const [customEmojiKey, customEmojiValue] = item;\n\n    if (customEmojiKey in emojiJson) {\n      // custom emoji exists in emoji json which means to update some data in the native emoji\n      const emojiData = emojiJson[customEmojiKey];\n\n      for (const customEmojiPropertyName in customEmojiValue) {\n        const customEmojiPropertyValue = customEmojiValue[customEmojiPropertyName];\n\n        _updateNativeEmojiData(emojiData, customEmojiPropertyName, customEmojiPropertyValue);\n      }\n    } else {\n      // new custom emoji\n      const _validateRequiredProps = () =>\n        customEmojiRequiredProps.every((val) => {\n          return customEmojiValue[val] !== undefined;\n        });\n\n      if (_validateRequiredProps()) {\n        emojiJson[customEmojiKey] = customEmojiValue;\n      } else {\n        console.error(\n          'The following custom emoji doesn\\'t contain the required properties:',\n          customEmojiValue,\n        );\n      }\n    }\n  });\n}\n\n// recursively searches the emoji data object containing data for all emojis\n// and returns the object with the specified shortcode.\nexport function shortcodeToEmojiData (shortcode) {\n  // eslint-disable-next-line complexity\n  function f (o, key) {\n    if (!o || typeof o !== 'object') {\n      return;\n    }\n    if ('shortname' in o) {\n      if (o.shortname === shortcode || o.shortname_alternates.includes(shortcode)) {\n        o.key = key;\n        reference = o;\n        return true;\n      }\n    }\n    Object.keys(o).some(function (k) {\n      return f(o[k], k);\n    });\n  }\n\n  let reference;\n  f(getEmojiData(), null);\n  return reference;\n}\n\n// Takes in an emoji unicode character(s) and converts it to an emoji string in the format the emoji data object expects\n// as a key. There can be multiple unicode characters in an emoji to denote the emoji itself, skin tone, gender\n// and such. Note that this function does NOT return variation selectors (fe0f) or zero width joiners (200d), as these\n// are not included as part of the key in the emoji.json.\n//\n// Example:\n// return value for smile emoji (no skin tone): 1f600\n// return value for left facing fist (light skin tone): 1f91b-1f3fb\nexport function unicodeToString (emoji) {\n  let key = '';\n  for (const codePoint of emoji) {\n    const codepoint = codePoint.codePointAt(0).toString(16).padStart(4, '0');\n\n    // skip 200d and fe0f as these are not included in emoji_strategy.json keys\n    if (['200d', 'fe0f'].includes(codepoint)) continue;\n    if (key !== '') { key = key + '-'; }\n    key = key + codepoint;\n  }\n  return key;\n}\n\n// Takes in unicode in string form ex: '1f91b-1f3fb' and converts it to an actual unicode character.\nexport function stringToUnicode (str) {\n  const uChars = str.split('-');\n  let result = '';\n  uChars.forEach((uChar) => {\n    result = result + String.fromCodePoint(parseInt(uChar, 16));\n  });\n  return result;\n}\n\n// Takes in a code (which could be unicode or shortcode) and returns the emoji data for it.\nexport function codeToEmojiData (code) {\n  code = code?.trim();\n  if (code.startsWith(':') && code.endsWith(':')) {\n    return shortcodeToEmojiData(code);\n  } else {\n    const unicodeString = unicodeToString(code);\n    const result = emojiJson[unicodeString];\n    if (result) result.key = unicodeString;\n    return result;\n  }\n}\n\n// Finds every shortcode in slot text\n// filters only the existing codes in emojiJson\n// removes duplicates.\n// @returns {string[]}\nexport function findShortCodes (textContent) {\n  const shortcodes = (\n    textContent.match(emojiShortCodeRegex) || []\n  ).map(code => code.trim());\n  return filterValidShortCodes(shortcodes);\n}\n\nexport function filterValidShortCodes (shortcodes) {\n  const filtered = shortcodes ? shortcodes.filter(code => shortcodeToEmojiData(code)) : [];\n  return new Set(filtered);\n}\n"],"names":["emojiPattern","customEmojiAssetUrl","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","emojisIndexed"],"mappings":"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"}

package/dist/vue3/common/emoji.js

@@ -138,11 +138,6 @@ function filterValidShortCodes(shortcodes) {
   const filtered = shortcodes ? shortcodes.filter((code) => shortcodeToEmojiData(code)) : [];
   return new Set(filtered);
 }
-function findEmojis(textContent) {
-  const matches = [...textContent.matchAll(emojiRegex)];
-  const emojis = matches.length ? matches.map((match) => match[0]) : [];
-  return new Set(emojis);
-}
 export {
   codeToEmojiData,
   customEmojiAssetUrl,
@@ -156,7 +151,6 @@ export {
   emojiShortCodeRegex,
   emojiVersion,
   filterValidShortCodes,
-  findEmojis,
   findShortCodes,
   getEmojiData,
   setCustomEmojiJson,

package/dist/vue3/common/emoji.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.js","sources":["../../common/emoji/index.js"],"sourcesContent":["import { emojiPattern } from 'regex-combined-emojis';\nimport { emojisIndexed } from '@dialpad/dialtone-emojis';\n\nexport const emojiRegex = new RegExp(emojiPattern, 'g');\nexport const emojiVersion = '8.0';\nexport const defaultEmojiAssetUrl = 'https://cdn.jsdelivr.net/joypixels/assets/' + emojiVersion + '/png/unicode/32/';\nexport let customEmojiAssetUrl = null;\n\n// Used for emoji 16px and smaller\nexport let emojiImageUrlSmall = defaultEmojiAssetUrl;\nexport let emojiFileExtensionSmall = '.png';\n\n// Used for emoji larger than 16px\nexport let emojiImageUrlLarge = defaultEmojiAssetUrl;\nexport let emojiFileExtensionLarge = '.png';\n\nexport const emojiJson = emojisIndexed;\n\nexport const emojiShortCodeRegex = /(^| |(?<=:))(:\\w+:)/g;\n\nexport function getEmojiData () {\n  return emojiJson;\n}\n\nexport function setEmojiAssetUrlSmall (url, fileExtension = '.png') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlSmall = url;\n  emojiFileExtensionSmall = fileExtension;\n}\n\nexport function setEmojiAssetUrlLarge (url, fileExtension = '.svg') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlLarge = url;\n  emojiFileExtensionLarge = fileExtension;\n}\n\nexport function setCustomEmojiUrl (url) {\n  customEmojiAssetUrl = url;\n}\n\nexport function setCustomEmojiJson (json) {\n  validateCustomEmojiJson(json);\n}\n\n/**\n * Validate custom emoji json\n */\nexport function validateCustomEmojiJson (json) {\n  const customEmojiProps = ['extension', 'custom'];\n  const customEmojiRequiredProps = [\n    'name',\n    'category',\n    'shortname',\n    'extension',\n    'custom',\n  ];\n\n  /**\n   * Update single emoji properties.\n   * If the property exists in emojiData, it'll add the values if the property is an array, otherwise will overwrite.\n   * If not exists, will add the property to the emojiData object.\n   */\n  const _updateNativeEmojiData = (emojiData, propName, propValue) => {\n    if (emojiData[propName] === undefined) {\n      if (!customEmojiProps.includes(propName)) {\n        return;\n      }\n\n      // new property to add\n      emojiData[propName] = propValue;\n    } else {\n      if (Array.isArray(emojiData[propName])) {\n        emojiData[propName] = emojiData[propName].concat(propValue);\n      } else {\n        emojiData[propName] = propValue;\n      }\n    }\n  };\n\n  Object.entries(json).forEach((item) => {\n    const [customEmojiKey, customEmojiValue] = item;\n\n    if (customEmojiKey in emojiJson) {\n      // custom emoji exists in emoji json which means to update some data in the native emoji\n      const emojiData = emojiJson[customEmojiKey];\n\n      for (const customEmojiPropertyName in customEmojiValue) {\n        const customEmojiPropertyValue = customEmojiValue[customEmojiPropertyName];\n\n        _updateNativeEmojiData(emojiData, customEmojiPropertyName, customEmojiPropertyValue);\n      }\n    } else {\n      // new custom emoji\n      const _validateRequiredProps = () =>\n        customEmojiRequiredProps.every((val) => {\n          return customEmojiValue[val] !== undefined;\n        });\n\n      if (_validateRequiredProps()) {\n        emojiJson[customEmojiKey] = customEmojiValue;\n      } else {\n        console.error(\n          'The following custom emoji doesn\\'t contain the required properties:',\n          customEmojiValue,\n        );\n      }\n    }\n  });\n}\n\n// recursively searches the emoji data object containing data for all emojis\n// and returns the object with the specified shortcode.\nexport function shortcodeToEmojiData (shortcode) {\n  // eslint-disable-next-line complexity\n  function f (o, key) {\n    if (!o || typeof o !== 'object') {\n      return;\n    }\n    if ('shortname' in o) {\n      if (o.shortname === shortcode || o.shortname_alternates.includes(shortcode)) {\n        o.key = key;\n        reference = o;\n        return true;\n      }\n    }\n    Object.keys(o).some(function (k) {\n      return f(o[k], k);\n    });\n  }\n\n  let reference;\n  f(getEmojiData(), null);\n  return reference;\n}\n\n// Takes in an emoji unicode character(s) and converts it to an emoji string in the format the emoji data object expects\n// as a key. There can be multiple unicode characters in an emoji to denote the emoji itself, skin tone, gender\n// and such. Note that this function does NOT return variation selectors (fe0f) or zero width joiners (200d), as these\n// are not included as part of the key in the emoji.json.\n//\n// Example:\n// return value for smile emoji (no skin tone): 1f600\n// return value for left facing fist (light skin tone): 1f91b-1f3fb\nexport function unicodeToString (emoji) {\n  let key = '';\n  for (const codePoint of emoji) {\n    const codepoint = codePoint.codePointAt(0).toString(16).padStart(4, '0');\n\n    // skip 200d and fe0f as these are not included in emoji_strategy.json keys\n    if (['200d', 'fe0f'].includes(codepoint)) continue;\n    if (key !== '') { key = key + '-'; }\n    key = key + codepoint;\n  }\n  return key;\n}\n\n// Takes in unicode in string form ex: '1f91b-1f3fb' and converts it to an actual unicode character.\nexport function stringToUnicode (str) {\n  const uChars = str.split('-');\n  let result = '';\n  uChars.forEach((uChar) => {\n    result = result + String.fromCodePoint(parseInt(uChar, 16));\n  });\n  return result;\n}\n\n// Takes in a code (which could be unicode or shortcode) and returns the emoji data for it.\nexport function codeToEmojiData (code) {\n  code = code?.trim();\n  if (code.startsWith(':') && code.endsWith(':')) {\n    return shortcodeToEmojiData(code);\n  } else {\n    const unicodeString = unicodeToString(code);\n    const result = emojiJson[unicodeString];\n    if (result) result.key = unicodeString;\n    return result;\n  }\n}\n\n// Finds every shortcode in slot text\n// filters only the existing codes in emojiJson\n// removes duplicates.\n// @returns {string[]}\nexport function findShortCodes (textContent) {\n  const shortcodes = (\n    textContent.match(emojiShortCodeRegex) || []\n  ).map(code => code.trim());\n  return filterValidShortCodes(shortcodes);\n}\n\nexport function filterValidShortCodes (shortcodes) {\n  const filtered = shortcodes ? shortcodes.filter(code => shortcodeToEmojiData(code)) : [];\n  return new Set(filtered);\n}\n\n// Finds every emoji in slot text\n// removes duplicates\n// @returns {string[]}\nexport function findEmojis (textContent) {\n  const matches = [...textContent.matchAll(emojiRegex)];\n  const emojis = matches.length ? matches.map(match => match[0]) : [];\n  return new Set(emojis);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"emoji.js","sources":["../../common/emoji/index.js"],"sourcesContent":["import { emojiPattern } from 'regex-combined-emojis';\nimport { emojisIndexed } from '@dialpad/dialtone-emojis';\n\nexport const emojiRegex = new RegExp(emojiPattern, 'g');\nexport const emojiVersion = '8.0';\nexport const defaultEmojiAssetUrl = 'https://cdn.jsdelivr.net/joypixels/assets/' + emojiVersion + '/png/unicode/32/';\nexport let customEmojiAssetUrl = null;\n\n// Used for emoji 16px and smaller\nexport let emojiImageUrlSmall = defaultEmojiAssetUrl;\nexport let emojiFileExtensionSmall = '.png';\n\n// Used for emoji larger than 16px\nexport let emojiImageUrlLarge = defaultEmojiAssetUrl;\nexport let emojiFileExtensionLarge = '.png';\n\nexport const emojiJson = emojisIndexed;\n\nexport const emojiShortCodeRegex = /(^| |(?<=:))(:\\w+:)/g;\n\nexport function getEmojiData () {\n  return emojiJson;\n}\n\nexport function setEmojiAssetUrlSmall (url, fileExtension = '.png') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlSmall = url;\n  emojiFileExtensionSmall = fileExtension;\n}\n\nexport function setEmojiAssetUrlLarge (url, fileExtension = '.svg') {\n  if (!url.endsWith('/')) {\n    url = url + '/';\n  }\n  emojiImageUrlLarge = url;\n  emojiFileExtensionLarge = fileExtension;\n}\n\nexport function setCustomEmojiUrl (url) {\n  customEmojiAssetUrl = url;\n}\n\nexport function setCustomEmojiJson (json) {\n  validateCustomEmojiJson(json);\n}\n\n/**\n * Validate custom emoji json\n */\nexport function validateCustomEmojiJson (json) {\n  const customEmojiProps = ['extension', 'custom'];\n  const customEmojiRequiredProps = [\n    'name',\n    'category',\n    'shortname',\n    'extension',\n    'custom',\n  ];\n\n  /**\n   * Update single emoji properties.\n   * If the property exists in emojiData, it'll add the values if the property is an array, otherwise will overwrite.\n   * If not exists, will add the property to the emojiData object.\n   */\n  const _updateNativeEmojiData = (emojiData, propName, propValue) => {\n    if (emojiData[propName] === undefined) {\n      if (!customEmojiProps.includes(propName)) {\n        return;\n      }\n\n      // new property to add\n      emojiData[propName] = propValue;\n    } else {\n      if (Array.isArray(emojiData[propName])) {\n        emojiData[propName] = emojiData[propName].concat(propValue);\n      } else {\n        emojiData[propName] = propValue;\n      }\n    }\n  };\n\n  Object.entries(json).forEach((item) => {\n    const [customEmojiKey, customEmojiValue] = item;\n\n    if (customEmojiKey in emojiJson) {\n      // custom emoji exists in emoji json which means to update some data in the native emoji\n      const emojiData = emojiJson[customEmojiKey];\n\n      for (const customEmojiPropertyName in customEmojiValue) {\n        const customEmojiPropertyValue = customEmojiValue[customEmojiPropertyName];\n\n        _updateNativeEmojiData(emojiData, customEmojiPropertyName, customEmojiPropertyValue);\n      }\n    } else {\n      // new custom emoji\n      const _validateRequiredProps = () =>\n        customEmojiRequiredProps.every((val) => {\n          return customEmojiValue[val] !== undefined;\n        });\n\n      if (_validateRequiredProps()) {\n        emojiJson[customEmojiKey] = customEmojiValue;\n      } else {\n        console.error(\n          'The following custom emoji doesn\\'t contain the required properties:',\n          customEmojiValue,\n        );\n      }\n    }\n  });\n}\n\n// recursively searches the emoji data object containing data for all emojis\n// and returns the object with the specified shortcode.\nexport function shortcodeToEmojiData (shortcode) {\n  // eslint-disable-next-line complexity\n  function f (o, key) {\n    if (!o || typeof o !== 'object') {\n      return;\n    }\n    if ('shortname' in o) {\n      if (o.shortname === shortcode || o.shortname_alternates.includes(shortcode)) {\n        o.key = key;\n        reference = o;\n        return true;\n      }\n    }\n    Object.keys(o).some(function (k) {\n      return f(o[k], k);\n    });\n  }\n\n  let reference;\n  f(getEmojiData(), null);\n  return reference;\n}\n\n// Takes in an emoji unicode character(s) and converts it to an emoji string in the format the emoji data object expects\n// as a key. There can be multiple unicode characters in an emoji to denote the emoji itself, skin tone, gender\n// and such. Note that this function does NOT return variation selectors (fe0f) or zero width joiners (200d), as these\n// are not included as part of the key in the emoji.json.\n//\n// Example:\n// return value for smile emoji (no skin tone): 1f600\n// return value for left facing fist (light skin tone): 1f91b-1f3fb\nexport function unicodeToString (emoji) {\n  let key = '';\n  for (const codePoint of emoji) {\n    const codepoint = codePoint.codePointAt(0).toString(16).padStart(4, '0');\n\n    // skip 200d and fe0f as these are not included in emoji_strategy.json keys\n    if (['200d', 'fe0f'].includes(codepoint)) continue;\n    if (key !== '') { key = key + '-'; }\n    key = key + codepoint;\n  }\n  return key;\n}\n\n// Takes in unicode in string form ex: '1f91b-1f3fb' and converts it to an actual unicode character.\nexport function stringToUnicode (str) {\n  const uChars = str.split('-');\n  let result = '';\n  uChars.forEach((uChar) => {\n    result = result + String.fromCodePoint(parseInt(uChar, 16));\n  });\n  return result;\n}\n\n// Takes in a code (which could be unicode or shortcode) and returns the emoji data for it.\nexport function codeToEmojiData (code) {\n  code = code?.trim();\n  if (code.startsWith(':') && code.endsWith(':')) {\n    return shortcodeToEmojiData(code);\n  } else {\n    const unicodeString = unicodeToString(code);\n    const result = emojiJson[unicodeString];\n    if (result) result.key = unicodeString;\n    return result;\n  }\n}\n\n// Finds every shortcode in slot text\n// filters only the existing codes in emojiJson\n// removes duplicates.\n// @returns {string[]}\nexport function findShortCodes (textContent) {\n  const shortcodes = (\n    textContent.match(emojiShortCodeRegex) || []\n  ).map(code => code.trim());\n  return filterValidShortCodes(shortcodes);\n}\n\nexport function filterValidShortCodes (shortcodes) {\n  const filtered = shortcodes ? shortcodes.filter(code => shortcodeToEmojiData(code)) : [];\n  return new Set(filtered);\n}\n"],"names":[],"mappings":"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"}

package/dist/vue3/components/emoji_picker/modules/emoji_selector.vue.cjs

@@ -258,7 +258,7 @@ const _sfc_main = {
           emits("focus-skin-selector");
           break;
         case "Enter":
-          selectEmoji(emoji);
+          selectEmoji(emoji, event);
           break;
       }
     };
@@ -286,12 +286,12 @@ const _sfc_main = {
           }
           break;
         case "Enter":
-          selectEmoji(emoji);
+          selectEmoji(emoji, event);
           break;
       }
     };
-    function selectEmoji(emoji) {
-      emits("selected-emoji", emoji);
+    function selectEmoji(emoji, event) {
+      emits("selected-emoji", { ...emoji, shift_key: event.shiftKey });
     }
     function highlightEmoji(emoji) {
       emits("highlighted-emoji", emoji);
@@ -346,7 +346,7 @@ const _sfc_main = {
                     },
                     type: "button",
                     "aria-label": emoji.name,
-                    onClick: ($event) => selectEmoji(emoji),
+                    onClick: (event) => selectEmoji(emoji, event),
                     onFocusin: ($event) => highlightEmoji(emoji),
                     onFocusout: _cache[0] || (_cache[0] = ($event) => highlightEmoji(null)),
                     onMouseover: ($event) => highlightEmoji(emoji),
@@ -382,7 +382,7 @@ const _sfc_main = {
                   class: vue.normalizeClass({
                     "hover-emoji": index === 0 && vue.unref(hoverFirstEmoji)
                   }),
-                  onClick: ($event) => selectEmoji(emoji),
+                  onClick: (event) => selectEmoji(emoji, event),
                   onFocusin: ($event) => highlightEmoji(emoji),
                   onFocusout: _cache[2] || (_cache[2] = ($event) => highlightEmoji(null)),
                   onMouseover: ($event) => hoverEmoji(emoji),

package/dist/vue3/components/emoji_picker/modules/emoji_selector.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_selector.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_selector.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-emoji-picker__selector\"\n  >\n    <div\n      id=\"d-emoji-picker-list\"\n      ref=\"listRef\"\n      class=\"d-emoji-picker__list\"\n    >\n      <p\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__search-label d-emoji-picker__alignment\"\n      >\n        {{ filteredEmojis.length > 0 ? searchResultsLabel : searchNoResultsLabel }}\n      </p>\n      <div\n        v-else\n        ref=\"tabCategoryRef\"\n        class=\"d-emoji-picker__category d-emoji-picker__alignment\"\n      >\n        <p>\n          {{ fixedLabel }}\n        </p>\n      </div>\n      <div\n        v-for=\"(tabLabel, indexTab) in tabLabels\"\n        v-show=\"!emojiFilter\"\n        :key=\"indexTab\"\n        :ref=\"tabLabel.ref\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <p\n          v-if=\"indexTab\"\n        >\n          {{ tabLabel.label }}\n        </p>\n        <div\n          class=\"d-emoji-picker__tab\"\n        >\n          <button\n            v-for=\"(emoji, indexEmoji) in\n            (emojis[tabs[indexTab] + skinTone] ? emojis[tabs[indexTab] + skinTone] : emojis[tabs[indexTab]])\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setEmojiRef(el, indexTab, indexEmoji) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            @click=\"selectEmoji(emoji)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"highlightEmoji(emoji)\"\n            @mouseleave=\"highlightEmoji(null)\"\n            @keydown=\"event => handleKeyDown(event, indexTab, indexEmoji, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"getImgSrc(emoji.unicode_character)\"\n              @error=\"handleImageError\"\n            >\n          </button>\n        </div>\n      </div>\n      <div\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <div\n          class=\"d-emoji-picker__tab \"\n          data-qa=\"filtered-emojis\"\n        >\n          <button\n            v-for=\"(emoji, index) in filteredEmojis\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setFilteredRef(el, index) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            :class=\"{\n              'hover-emoji': (index === 0 && hoverFirstEmoji),\n            }\"\n            @click=\"selectEmoji(emoji)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"hoverEmoji(emoji)\"\n            @mouseleave=\"hoverEmoji(null)\"\n            @keydown=\"event => handleKeyDownFilteredEmojis(event, index, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"`${CDN_URL + emoji.unicode_character}.png`\"\n            >\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\n/* eslint-disable max-len */\n/* eslint-disable max-lines */\nimport { emojisGrouped as emojis } from '@dialpad/dialtone-emojis';\nimport { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue';\nimport { CDN_URL, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\nimport { useKeyboardNavigation } from '@/components/emoji_picker/composables/useKeyboardNavigation';\n\nconst props = defineProps({\n  /**\n   * The filter to apply to the emoji list\n   * @type {String}\n   * @default ''\n   */\n  emojiFilter: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * The skin tone to apply to the emoji list\n   * @type {String}\n   * @required\n   */\n  skinTone: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The labels for the tabset\n   * @type {Array}\n   * @required\n   */\n  tabsetLabels: {\n    type: Array,\n    required: true,\n  },\n\n  selectedTabset: {\n    type: Object,\n    required: true,\n  },\n\n  /**\n   * The label for the search results tab\n   * @type {String}\n   * @required\n   */\n  searchResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  searchNoResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The list of recently used emojis\n   * @type {Array}\n   */\n  recentlyUsedEmojis: {\n    type: Array,\n    default: () => [],\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * Emitted when the user hover over an emoji\n   * @event highlighted-emoji\n   * @param {Object} emoji - The emoji data that was hovered\n    */\n  'highlighted-emoji',\n\n  /**\n   * Emitted when the user select an emoji\n   * @event selected-emoji\n   * @param {Object} emoji - The emoji data that was selected\n    */\n  'selected-emoji',\n\n  /**\n   * Emitted when the user scroll into an emoji tab\n   * @event scroll-into-tab\n   * @param {Number} tab-index - The tab that was scrolled into\n    */\n  'scroll-into-tab',\n\n  /**\n   * Emitted when the user reach the end of the emoji list\n   * @event focus-skin-selector\n    */\n  'focus-skin-selector',\n\n  /**\n   * Emitted when the user shift tab in first tab of emoji selector\n   * @event focus-search-input\n    */\n  'focus-search-input',\n]);\n\nconst {\n  emojiFilteredRefs,\n  isFiltering,\n  hoverFirstEmoji,\n  setEmojiRef,\n  setFilteredRef,\n  focusEmoji,\n  handleArrowNavigationFiltered,\n  handleArrowNavigation,\n} = useKeyboardNavigation();\n\n/**\n * The ref for the tab category\n * This is used to display the fixed label\n */\nconst tabCategoryRef = ref(null);\n\n/**\n * The ref for the list\n * This is used to display the tabs\n */\nconst listRef = ref(null);\n\n/**\n * The ref for the tab label observer\n * This is used to update the fixed label\n */\nconst tabLabelObserver = ref(null);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n */\nconst TABS_DATA = ['Recently used', 'People', 'Nature', 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags'];\n\n/**\n * The list of tab labels\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n */\nconst tabLabels = computed(() => {\n  return props.recentlyUsedEmojis.length\n    ? props.tabsetLabels.map((label) => ({ label, ref: ref(null) }))\n    : props.tabsetLabels.slice(1).map((label) => ({ label, ref: ref(null) }));\n});\n\n/**\n * The label of the fixed tab\n * This is used to display the fixed label\n */\nconst fixedLabel = ref(tabLabels.value[0].label);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n * The difference between this and the tab labels is that this one will set the structure of tabs\n * and the tab labels will set the labels\n */\nconst tabs = computed(() => {\n  return props.recentlyUsedEmojis.length ? TABS_DATA : TABS_DATA.slice(1);\n});\n\n/**\n * The list of current emojis that match the filter\n * This will be updated when the emojiFilter changes\n * This is used to display the search results\n * The difference between this and the current emojis list is that this one will not have the skin tone applied\n */\nconst filteredEmojis = ref([]);\n\n/**\n * The current emojis list we are displaying\n * This will be updated when the skin tone changes\n * The difference between this and the emojis list is that this one will have only the skin tone applied\n */\nconst currentEmojis = computed(() => {\n  return [\n    ...emojis[`People${props.skinTone}`],\n    ...emojis.Nature,\n    ...emojis.Food,\n    ...emojis[`Activity${props.skinTone}`],\n    ...emojis.Travel,\n    ...emojis[`Objects${props.skinTone}`],\n    ...emojis.Symbols,\n    ...emojis.Flags,\n  ];\n});\n\n/**\n * This will trigger the searchByNameAndKeywords function with debounce of 300 milliseconds\n */\nconst debouncedSearch = debounce(() => {\n  // We clean the emojiFilteredRefs to have an updated ref list for the search results\n  emojiFilteredRefs.value = [];\n  searchByNameAndKeywords();\n});\n\n/**\n * Update the current emojis list on skin tone changes\n * Also update the filtered emojis list\n * @listens skinTone\n */\nwatch(currentEmojis, () => {\n  searchByNameAndKeywords();\n}, { immediate: true });\n\n/**\n * Update the recently used emojis list on recently used emojis prop changes\n * @listens recentlyUsedEmojis\n */\nwatch(() => props.recentlyUsedEmojis,\n  () => {\n    emojis['Recently used'] = props.recentlyUsedEmojis;\n  }, { immediate: true });\n\n/**\n * Search for emojis by name and keywords\n * Will update the filtered emojis list on emojiFilter update\n * @listens emojiFilter\n */\nwatch(() => props.emojiFilter, () => {\n  resetScroll();\n  if (props.emojiFilter) {\n    isFiltering.value = true;\n  } else {\n    isFiltering.value = false;\n    // If the emoji filter is empty, emit null to remove the highlighted emoji\n    // of the previous search\n    highlightEmoji(null);\n  }\n  debouncedSearch();\n});\n\nwatch(\n  () => props.selectedTabset,\n  (tab) => {\n    scrollToTab(tab.tabId);\n  },\n  { deep: true },\n);\n\nfunction hoverEmoji (emoji, isFirst = false) {\n  hoverFirstEmoji.value = isFirst;\n  emits('highlighted-emoji', emoji);\n}\n\n/**\n * Filters an array of emoji objects based on a search string that matches both the name and keywords.\n * Will update the filtered emojis list\n */\nfunction searchByNameAndKeywords () {\n  const searchStr = props.emojiFilter.toLowerCase();\n  filteredEmojis.value = currentEmojis.value.filter(obj => {\n    const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);\n    const keywordsIncludeSearchStr = obj.keywords.some(keyword => keyword.toLowerCase().includes(searchStr));\n    return nameIncludesSearchStr || keywordsIncludeSearchStr;\n  });\n  nextTick(() => {\n    if (searchStr) {\n      hoverEmoji(filteredEmojis.value[0], true);\n    }\n  });\n}\n\nfunction debounce (fn, delay = 300) {\n  let timeout;\n\n  return (...args) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => fn(...args), delay);\n  };\n}\n\nfunction getImgSrc (emoji) {\n  return `${CDN_URL + emoji}.png`;\n}\n\n/**\n * Handle image error - We hide the entire button if the image is not found\n */\nfunction handleImageError (event) {\n  event.target.parentNode.style.display = 'none';\n}\n\n/**\n * Scroll to the selected tab\n */\nfunction scrollToTab (tabIndex, focusFirstEmoji = true) {\n  const tabLabel = tabLabels.value[tabIndex - 1];\n  const tabElement = tabLabel.ref.value[0];\n\n  nextTick(() => {\n    const container = listRef.value;\n    const offsetTop = tabIndex === 1 ? 0 : tabElement.offsetTop - 15;\n\n    container.scrollTop = offsetTop;\n\n    if (focusFirstEmoji) {\n      focusEmoji((tabIndex - 1), 0);\n    }\n  });\n}\n\nfunction resetScroll () {\n  const container = listRef.value;\n\n  container.scrollTop = 0;\n}\n\n/**\n * This code creates an IntersectionObserver object that monitors the intersection between\n * the root element (tabCategoryRef) and its targets (the child elements of listRef),\n * and updates the value of the fixedLabel variable accordingly.\n */\nfunction setTabLabelObserver () {\n  /**\n   * The code extracts the target element and its index from the IntersectionObserverEntry object,\n   * and checks whether the target intersects with the root and is positioned above or below it.\n   */\n  tabLabelObserver.value = new IntersectionObserver(async (entries) => {\n    // eslint-disable-next-line complexity\n    entries.forEach(entry => {\n      const { target } = entry;\n      const index = parseInt(target.dataset.index);\n\n      /**\n       * If the target is positioned above the root,\n       * the code updates the value of the fixed label to the label of the previous tab,\n       * or the first tab if the current tab is the first one. If the target is positioned below the root, the code\n       * updates the value of the fixed label to the label of the current tab.\n       * If the target stops intersecting with the root and its index is 1 (the second tab),\n       * the code updates the value of the fixed label to the label of the first tab.\n       * NOTES:\n       * This last condition is needed because sometimes it is\n       * not detect the intersection between the root and the target.\n       * We also provide a 50 pixels offset to the root element in the first condition to always get the\n       * first tab if it has fewer emojis, because in some cases if you quickly scroll the observer does not detect it.\n       */\n      if (entry.isIntersecting && target.offsetTop <= tabCategoryRef.value.offsetTop + 50) {\n        fixedLabel.value = tabLabels.value[index - 1]?.label ?? tabLabels.value[0]?.label;\n        emits('scroll-into-tab', index - 1);\n      } else if (entry.boundingClientRect.bottom <= tabCategoryRef.value?.getBoundingClientRect().bottom) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[index]?.label;\n      } else if (index === 1) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[0]?.label;\n      }\n    });\n  });\n\n  /**\n   * The tabLabelObserver is set to observe the root element and all its children elements with\n   * the IntersectionObserver object, and sets their data-index attribute to their index.\n   */\n  tabLabelObserver.value.observe(tabCategoryRef.value);\n\n  Array.from(listRef.value.children).forEach((child, index) => {\n    tabLabelObserver.value.observe(child);\n    child.dataset.index = index;\n  });\n}\n\nconst handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigationFiltered(event.key, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      emits('focus-skin-selector');\n      break;\n    case 'Enter':\n      selectEmoji(emoji);\n      break;\n    default:\n      break;\n  }\n};\n\n/* eslint-disable-next-line complexity */\nconst handleKeyDown = (event, indexTab, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigation(event.key, indexTab, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      if (event.shiftKey) {\n        if (focusEmoji(indexTab, 0) && indexTab > 0) {\n          scrollToTab(indexTab, true);\n        } else {\n          scrollToTab(1, false);\n          emits('focus-search-input');\n        }\n      } else {\n        if (focusEmoji(indexTab + 1, 0)) {\n          scrollToTab(indexTab + 1 + 1, false);\n        } else {\n          // We are on the last emoji tabset, jump to the skin selector\n          emits('focus-skin-selector');\n        }\n      }\n      break;\n\n    case 'Enter':\n      selectEmoji(emoji);\n      break;\n\n    default:\n      break;\n  }\n};\n\nfunction selectEmoji (emoji) {\n  emits('selected-emoji', emoji);\n}\n\nfunction highlightEmoji (emoji) {\n  emits('highlighted-emoji', emoji);\n}\n\nfunction focusEmojiSelector () {\n  focusEmoji(0, 0);\n}\n\nfunction focusLastEmoji () {\n  scrollToTab(tabs.value.length, true);\n}\n\nonMounted(() => {\n  setTabLabelObserver();\n});\n\nonUnmounted(() => {\n  tabLabelObserver.value.disconnect();\n});\n\ndefineExpose({\n  focusEmojiSelector,\n  focusLastEmoji,\n});\n</script>\n"],"names":["useKeyboardNavigation","ref","computed","emojis","watch","nextTick","CDN_URL","ARROW_KEYS","onMounted","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"emoji_selector.vue.cjs","sources":["../../../../components/emoji_picker/modules/emoji_selector.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-emoji-picker__selector\"\n  >\n    <div\n      id=\"d-emoji-picker-list\"\n      ref=\"listRef\"\n      class=\"d-emoji-picker__list\"\n    >\n      <p\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__search-label d-emoji-picker__alignment\"\n      >\n        {{ filteredEmojis.length > 0 ? searchResultsLabel : searchNoResultsLabel }}\n      </p>\n      <div\n        v-else\n        ref=\"tabCategoryRef\"\n        class=\"d-emoji-picker__category d-emoji-picker__alignment\"\n      >\n        <p>\n          {{ fixedLabel }}\n        </p>\n      </div>\n      <div\n        v-for=\"(tabLabel, indexTab) in tabLabels\"\n        v-show=\"!emojiFilter\"\n        :key=\"indexTab\"\n        :ref=\"tabLabel.ref\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <p\n          v-if=\"indexTab\"\n        >\n          {{ tabLabel.label }}\n        </p>\n        <div\n          class=\"d-emoji-picker__tab\"\n        >\n          <button\n            v-for=\"(emoji, indexEmoji) in\n            (emojis[tabs[indexTab] + skinTone] ? emojis[tabs[indexTab] + skinTone] : emojis[tabs[indexTab]])\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setEmojiRef(el, indexTab, indexEmoji) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            @click=\"event => selectEmoji(emoji, event)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"highlightEmoji(emoji)\"\n            @mouseleave=\"highlightEmoji(null)\"\n            @keydown=\"event => handleKeyDown(event, indexTab, indexEmoji, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"getImgSrc(emoji.unicode_character)\"\n              @error=\"handleImageError\"\n            >\n          </button>\n        </div>\n      </div>\n      <div\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <div\n          class=\"d-emoji-picker__tab \"\n          data-qa=\"filtered-emojis\"\n        >\n          <button\n            v-for=\"(emoji, index) in filteredEmojis\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setFilteredRef(el, index) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            :class=\"{\n              'hover-emoji': (index === 0 && hoverFirstEmoji),\n            }\"\n            @click=\"event => selectEmoji(emoji, event)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"hoverEmoji(emoji)\"\n            @mouseleave=\"hoverEmoji(null)\"\n            @keydown=\"event => handleKeyDownFilteredEmojis(event, index, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"`${CDN_URL + emoji.unicode_character}.png`\"\n            >\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\n/* eslint-disable max-len */\n/* eslint-disable max-lines */\nimport { emojisGrouped as emojis } from '@dialpad/dialtone-emojis';\nimport { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue';\nimport { CDN_URL, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\nimport { useKeyboardNavigation } from '@/components/emoji_picker/composables/useKeyboardNavigation';\n\nconst props = defineProps({\n  /**\n   * The filter to apply to the emoji list\n   * @type {String}\n   * @default ''\n   */\n  emojiFilter: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * The skin tone to apply to the emoji list\n   * @type {String}\n   * @required\n   */\n  skinTone: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The labels for the tabset\n   * @type {Array}\n   * @required\n   */\n  tabsetLabels: {\n    type: Array,\n    required: true,\n  },\n\n  selectedTabset: {\n    type: Object,\n    required: true,\n  },\n\n  /**\n   * The label for the search results tab\n   * @type {String}\n   * @required\n   */\n  searchResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  searchNoResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The list of recently used emojis\n   * @type {Array}\n   */\n  recentlyUsedEmojis: {\n    type: Array,\n    default: () => [],\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * Emitted when the user hover over an emoji\n   * @event highlighted-emoji\n   * @param {Object} emoji - The emoji data that was hovered\n    */\n  'highlighted-emoji',\n\n  /**\n   * Emitted when the user select an emoji\n   * @event selected-emoji\n   * @param {Object} emoji - The emoji data that was selected\n    */\n  'selected-emoji',\n\n  /**\n   * Emitted when the user scroll into an emoji tab\n   * @event scroll-into-tab\n   * @param {Number} tab-index - The tab that was scrolled into\n    */\n  'scroll-into-tab',\n\n  /**\n   * Emitted when the user reach the end of the emoji list\n   * @event focus-skin-selector\n    */\n  'focus-skin-selector',\n\n  /**\n   * Emitted when the user shift tab in first tab of emoji selector\n   * @event focus-search-input\n    */\n  'focus-search-input',\n]);\n\nconst {\n  emojiFilteredRefs,\n  isFiltering,\n  hoverFirstEmoji,\n  setEmojiRef,\n  setFilteredRef,\n  focusEmoji,\n  handleArrowNavigationFiltered,\n  handleArrowNavigation,\n} = useKeyboardNavigation();\n\n/**\n * The ref for the tab category\n * This is used to display the fixed label\n */\nconst tabCategoryRef = ref(null);\n\n/**\n * The ref for the list\n * This is used to display the tabs\n */\nconst listRef = ref(null);\n\n/**\n * The ref for the tab label observer\n * This is used to update the fixed label\n */\nconst tabLabelObserver = ref(null);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n */\nconst TABS_DATA = ['Recently used', 'People', 'Nature', 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags'];\n\n/**\n * The list of tab labels\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n */\nconst tabLabels = computed(() => {\n  return props.recentlyUsedEmojis.length\n    ? props.tabsetLabels.map((label) => ({ label, ref: ref(null) }))\n    : props.tabsetLabels.slice(1).map((label) => ({ label, ref: ref(null) }));\n});\n\n/**\n * The label of the fixed tab\n * This is used to display the fixed label\n */\nconst fixedLabel = ref(tabLabels.value[0].label);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n * The difference between this and the tab labels is that this one will set the structure of tabs\n * and the tab labels will set the labels\n */\nconst tabs = computed(() => {\n  return props.recentlyUsedEmojis.length ? TABS_DATA : TABS_DATA.slice(1);\n});\n\n/**\n * The list of current emojis that match the filter\n * This will be updated when the emojiFilter changes\n * This is used to display the search results\n * The difference between this and the current emojis list is that this one will not have the skin tone applied\n */\nconst filteredEmojis = ref([]);\n\n/**\n * The current emojis list we are displaying\n * This will be updated when the skin tone changes\n * The difference between this and the emojis list is that this one will have only the skin tone applied\n */\nconst currentEmojis = computed(() => {\n  return [\n    ...emojis[`People${props.skinTone}`],\n    ...emojis.Nature,\n    ...emojis.Food,\n    ...emojis[`Activity${props.skinTone}`],\n    ...emojis.Travel,\n    ...emojis[`Objects${props.skinTone}`],\n    ...emojis.Symbols,\n    ...emojis.Flags,\n  ];\n});\n\n/**\n * This will trigger the searchByNameAndKeywords function with debounce of 300 milliseconds\n */\nconst debouncedSearch = debounce(() => {\n  // We clean the emojiFilteredRefs to have an updated ref list for the search results\n  emojiFilteredRefs.value = [];\n  searchByNameAndKeywords();\n});\n\n/**\n * Update the current emojis list on skin tone changes\n * Also update the filtered emojis list\n * @listens skinTone\n */\nwatch(currentEmojis, () => {\n  searchByNameAndKeywords();\n}, { immediate: true });\n\n/**\n * Update the recently used emojis list on recently used emojis prop changes\n * @listens recentlyUsedEmojis\n */\nwatch(() => props.recentlyUsedEmojis,\n  () => {\n    emojis['Recently used'] = props.recentlyUsedEmojis;\n  }, { immediate: true });\n\n/**\n * Search for emojis by name and keywords\n * Will update the filtered emojis list on emojiFilter update\n * @listens emojiFilter\n */\nwatch(() => props.emojiFilter, () => {\n  resetScroll();\n  if (props.emojiFilter) {\n    isFiltering.value = true;\n  } else {\n    isFiltering.value = false;\n    // If the emoji filter is empty, emit null to remove the highlighted emoji\n    // of the previous search\n    highlightEmoji(null);\n  }\n  debouncedSearch();\n});\n\nwatch(\n  () => props.selectedTabset,\n  (tab) => {\n    scrollToTab(tab.tabId);\n  },\n  { deep: true },\n);\n\nfunction hoverEmoji (emoji, isFirst = false) {\n  hoverFirstEmoji.value = isFirst;\n  emits('highlighted-emoji', emoji);\n}\n\n/**\n * Filters an array of emoji objects based on a search string that matches both the name and keywords.\n * Will update the filtered emojis list\n */\nfunction searchByNameAndKeywords () {\n  const searchStr = props.emojiFilter.toLowerCase();\n  filteredEmojis.value = currentEmojis.value.filter(obj => {\n    const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);\n    const keywordsIncludeSearchStr = obj.keywords.some(keyword => keyword.toLowerCase().includes(searchStr));\n    return nameIncludesSearchStr || keywordsIncludeSearchStr;\n  });\n  nextTick(() => {\n    if (searchStr) {\n      hoverEmoji(filteredEmojis.value[0], true);\n    }\n  });\n}\n\nfunction debounce (fn, delay = 300) {\n  let timeout;\n\n  return (...args) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => fn(...args), delay);\n  };\n}\n\nfunction getImgSrc (emoji) {\n  return `${CDN_URL + emoji}.png`;\n}\n\n/**\n * Handle image error - We hide the entire button if the image is not found\n */\nfunction handleImageError (event) {\n  event.target.parentNode.style.display = 'none';\n}\n\n/**\n * Scroll to the selected tab\n */\nfunction scrollToTab (tabIndex, focusFirstEmoji = true) {\n  const tabLabel = tabLabels.value[tabIndex - 1];\n  const tabElement = tabLabel.ref.value[0];\n\n  nextTick(() => {\n    const container = listRef.value;\n    const offsetTop = tabIndex === 1 ? 0 : tabElement.offsetTop - 15;\n\n    container.scrollTop = offsetTop;\n\n    if (focusFirstEmoji) {\n      focusEmoji((tabIndex - 1), 0);\n    }\n  });\n}\n\nfunction resetScroll () {\n  const container = listRef.value;\n\n  container.scrollTop = 0;\n}\n\n/**\n * This code creates an IntersectionObserver object that monitors the intersection between\n * the root element (tabCategoryRef) and its targets (the child elements of listRef),\n * and updates the value of the fixedLabel variable accordingly.\n */\nfunction setTabLabelObserver () {\n  /**\n   * The code extracts the target element and its index from the IntersectionObserverEntry object,\n   * and checks whether the target intersects with the root and is positioned above or below it.\n   */\n  tabLabelObserver.value = new IntersectionObserver(async (entries) => {\n    // eslint-disable-next-line complexity\n    entries.forEach(entry => {\n      const { target } = entry;\n      const index = parseInt(target.dataset.index);\n\n      /**\n       * If the target is positioned above the root,\n       * the code updates the value of the fixed label to the label of the previous tab,\n       * or the first tab if the current tab is the first one. If the target is positioned below the root, the code\n       * updates the value of the fixed label to the label of the current tab.\n       * If the target stops intersecting with the root and its index is 1 (the second tab),\n       * the code updates the value of the fixed label to the label of the first tab.\n       * NOTES:\n       * This last condition is needed because sometimes it is\n       * not detect the intersection between the root and the target.\n       * We also provide a 50 pixels offset to the root element in the first condition to always get the\n       * first tab if it has fewer emojis, because in some cases if you quickly scroll the observer does not detect it.\n       */\n      if (entry.isIntersecting && target.offsetTop <= tabCategoryRef.value.offsetTop + 50) {\n        fixedLabel.value = tabLabels.value[index - 1]?.label ?? tabLabels.value[0]?.label;\n        emits('scroll-into-tab', index - 1);\n      } else if (entry.boundingClientRect.bottom <= tabCategoryRef.value?.getBoundingClientRect().bottom) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[index]?.label;\n      } else if (index === 1) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[0]?.label;\n      }\n    });\n  });\n\n  /**\n   * The tabLabelObserver is set to observe the root element and all its children elements with\n   * the IntersectionObserver object, and sets their data-index attribute to their index.\n   */\n  tabLabelObserver.value.observe(tabCategoryRef.value);\n\n  Array.from(listRef.value.children).forEach((child, index) => {\n    tabLabelObserver.value.observe(child);\n    child.dataset.index = index;\n  });\n}\n\nconst handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigationFiltered(event.key, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      emits('focus-skin-selector');\n      break;\n    case 'Enter':\n      selectEmoji(emoji, event);\n      break;\n    default:\n      break;\n  }\n};\n\n/* eslint-disable-next-line complexity */\nconst handleKeyDown = (event, indexTab, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigation(event.key, indexTab, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      if (event.shiftKey) {\n        if (focusEmoji(indexTab, 0) && indexTab > 0) {\n          scrollToTab(indexTab, true);\n        } else {\n          scrollToTab(1, false);\n          emits('focus-search-input');\n        }\n      } else {\n        if (focusEmoji(indexTab + 1, 0)) {\n          scrollToTab(indexTab + 1 + 1, false);\n        } else {\n          // We are on the last emoji tabset, jump to the skin selector\n          emits('focus-skin-selector');\n        }\n      }\n      break;\n\n    case 'Enter':\n      selectEmoji(emoji, event);\n      break;\n\n    default:\n      break;\n  }\n};\n\nfunction selectEmoji (emoji, event) {\n  emits('selected-emoji', { ...emoji, shift_key: event.shiftKey });\n}\n\nfunction highlightEmoji (emoji) {\n  emits('highlighted-emoji', emoji);\n}\n\nfunction focusEmojiSelector () {\n  focusEmoji(0, 0);\n}\n\nfunction focusLastEmoji () {\n  scrollToTab(tabs.value.length, true);\n}\n\nonMounted(() => {\n  setTabLabelObserver();\n});\n\nonUnmounted(() => {\n  tabLabelObserver.value.disconnect();\n});\n\ndefineExpose({\n  focusEmojiSelector,\n  focusLastEmoji,\n});\n</script>\n"],"names":["useKeyboardNavigation","ref","computed","emojis","watch","nextTick","CDN_URL","ARROW_KEYS","onMounted","onUnmounted"],"mappings":"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"}

package/dist/vue3/components/emoji_picker/modules/emoji_selector.vue.js

@@ -256,7 +256,7 @@ const _sfc_main = {
           emits("focus-skin-selector");
           break;
         case "Enter":
-          selectEmoji(emoji);
+          selectEmoji(emoji, event);
           break;
       }
     };
@@ -284,12 +284,12 @@ const _sfc_main = {
           }
           break;
         case "Enter":
-          selectEmoji(emoji);
+          selectEmoji(emoji, event);
           break;
       }
     };
-    function selectEmoji(emoji) {
-      emits("selected-emoji", emoji);
+    function selectEmoji(emoji, event) {
+      emits("selected-emoji", { ...emoji, shift_key: event.shiftKey });
     }
     function highlightEmoji(emoji) {
       emits("highlighted-emoji", emoji);
@@ -344,7 +344,7 @@ const _sfc_main = {
                     },
                     type: "button",
                     "aria-label": emoji.name,
-                    onClick: ($event) => selectEmoji(emoji),
+                    onClick: (event) => selectEmoji(emoji, event),
                     onFocusin: ($event) => highlightEmoji(emoji),
                     onFocusout: _cache[0] || (_cache[0] = ($event) => highlightEmoji(null)),
                     onMouseover: ($event) => highlightEmoji(emoji),
@@ -380,7 +380,7 @@ const _sfc_main = {
                   class: normalizeClass({
                     "hover-emoji": index === 0 && unref(hoverFirstEmoji)
                   }),
-                  onClick: ($event) => selectEmoji(emoji),
+                  onClick: (event) => selectEmoji(emoji, event),
                   onFocusin: ($event) => highlightEmoji(emoji),
                   onFocusout: _cache[2] || (_cache[2] = ($event) => highlightEmoji(null)),
                   onMouseover: ($event) => hoverEmoji(emoji),

package/dist/vue3/components/emoji_picker/modules/emoji_selector.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji_selector.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_selector.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-emoji-picker__selector\"\n  >\n    <div\n      id=\"d-emoji-picker-list\"\n      ref=\"listRef\"\n      class=\"d-emoji-picker__list\"\n    >\n      <p\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__search-label d-emoji-picker__alignment\"\n      >\n        {{ filteredEmojis.length > 0 ? searchResultsLabel : searchNoResultsLabel }}\n      </p>\n      <div\n        v-else\n        ref=\"tabCategoryRef\"\n        class=\"d-emoji-picker__category d-emoji-picker__alignment\"\n      >\n        <p>\n          {{ fixedLabel }}\n        </p>\n      </div>\n      <div\n        v-for=\"(tabLabel, indexTab) in tabLabels\"\n        v-show=\"!emojiFilter\"\n        :key=\"indexTab\"\n        :ref=\"tabLabel.ref\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <p\n          v-if=\"indexTab\"\n        >\n          {{ tabLabel.label }}\n        </p>\n        <div\n          class=\"d-emoji-picker__tab\"\n        >\n          <button\n            v-for=\"(emoji, indexEmoji) in\n            (emojis[tabs[indexTab] + skinTone] ? emojis[tabs[indexTab] + skinTone] : emojis[tabs[indexTab]])\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setEmojiRef(el, indexTab, indexEmoji) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            @click=\"selectEmoji(emoji)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"highlightEmoji(emoji)\"\n            @mouseleave=\"highlightEmoji(null)\"\n            @keydown=\"event => handleKeyDown(event, indexTab, indexEmoji, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"getImgSrc(emoji.unicode_character)\"\n              @error=\"handleImageError\"\n            >\n          </button>\n        </div>\n      </div>\n      <div\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <div\n          class=\"d-emoji-picker__tab \"\n          data-qa=\"filtered-emojis\"\n        >\n          <button\n            v-for=\"(emoji, index) in filteredEmojis\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setFilteredRef(el, index) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            :class=\"{\n              'hover-emoji': (index === 0 && hoverFirstEmoji),\n            }\"\n            @click=\"selectEmoji(emoji)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"hoverEmoji(emoji)\"\n            @mouseleave=\"hoverEmoji(null)\"\n            @keydown=\"event => handleKeyDownFilteredEmojis(event, index, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"`${CDN_URL + emoji.unicode_character}.png`\"\n            >\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\n/* eslint-disable max-len */\n/* eslint-disable max-lines */\nimport { emojisGrouped as emojis } from '@dialpad/dialtone-emojis';\nimport { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue';\nimport { CDN_URL, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\nimport { useKeyboardNavigation } from '@/components/emoji_picker/composables/useKeyboardNavigation';\n\nconst props = defineProps({\n  /**\n   * The filter to apply to the emoji list\n   * @type {String}\n   * @default ''\n   */\n  emojiFilter: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * The skin tone to apply to the emoji list\n   * @type {String}\n   * @required\n   */\n  skinTone: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The labels for the tabset\n   * @type {Array}\n   * @required\n   */\n  tabsetLabels: {\n    type: Array,\n    required: true,\n  },\n\n  selectedTabset: {\n    type: Object,\n    required: true,\n  },\n\n  /**\n   * The label for the search results tab\n   * @type {String}\n   * @required\n   */\n  searchResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  searchNoResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The list of recently used emojis\n   * @type {Array}\n   */\n  recentlyUsedEmojis: {\n    type: Array,\n    default: () => [],\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * Emitted when the user hover over an emoji\n   * @event highlighted-emoji\n   * @param {Object} emoji - The emoji data that was hovered\n    */\n  'highlighted-emoji',\n\n  /**\n   * Emitted when the user select an emoji\n   * @event selected-emoji\n   * @param {Object} emoji - The emoji data that was selected\n    */\n  'selected-emoji',\n\n  /**\n   * Emitted when the user scroll into an emoji tab\n   * @event scroll-into-tab\n   * @param {Number} tab-index - The tab that was scrolled into\n    */\n  'scroll-into-tab',\n\n  /**\n   * Emitted when the user reach the end of the emoji list\n   * @event focus-skin-selector\n    */\n  'focus-skin-selector',\n\n  /**\n   * Emitted when the user shift tab in first tab of emoji selector\n   * @event focus-search-input\n    */\n  'focus-search-input',\n]);\n\nconst {\n  emojiFilteredRefs,\n  isFiltering,\n  hoverFirstEmoji,\n  setEmojiRef,\n  setFilteredRef,\n  focusEmoji,\n  handleArrowNavigationFiltered,\n  handleArrowNavigation,\n} = useKeyboardNavigation();\n\n/**\n * The ref for the tab category\n * This is used to display the fixed label\n */\nconst tabCategoryRef = ref(null);\n\n/**\n * The ref for the list\n * This is used to display the tabs\n */\nconst listRef = ref(null);\n\n/**\n * The ref for the tab label observer\n * This is used to update the fixed label\n */\nconst tabLabelObserver = ref(null);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n */\nconst TABS_DATA = ['Recently used', 'People', 'Nature', 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags'];\n\n/**\n * The list of tab labels\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n */\nconst tabLabels = computed(() => {\n  return props.recentlyUsedEmojis.length\n    ? props.tabsetLabels.map((label) => ({ label, ref: ref(null) }))\n    : props.tabsetLabels.slice(1).map((label) => ({ label, ref: ref(null) }));\n});\n\n/**\n * The label of the fixed tab\n * This is used to display the fixed label\n */\nconst fixedLabel = ref(tabLabels.value[0].label);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n * The difference between this and the tab labels is that this one will set the structure of tabs\n * and the tab labels will set the labels\n */\nconst tabs = computed(() => {\n  return props.recentlyUsedEmojis.length ? TABS_DATA : TABS_DATA.slice(1);\n});\n\n/**\n * The list of current emojis that match the filter\n * This will be updated when the emojiFilter changes\n * This is used to display the search results\n * The difference between this and the current emojis list is that this one will not have the skin tone applied\n */\nconst filteredEmojis = ref([]);\n\n/**\n * The current emojis list we are displaying\n * This will be updated when the skin tone changes\n * The difference between this and the emojis list is that this one will have only the skin tone applied\n */\nconst currentEmojis = computed(() => {\n  return [\n    ...emojis[`People${props.skinTone}`],\n    ...emojis.Nature,\n    ...emojis.Food,\n    ...emojis[`Activity${props.skinTone}`],\n    ...emojis.Travel,\n    ...emojis[`Objects${props.skinTone}`],\n    ...emojis.Symbols,\n    ...emojis.Flags,\n  ];\n});\n\n/**\n * This will trigger the searchByNameAndKeywords function with debounce of 300 milliseconds\n */\nconst debouncedSearch = debounce(() => {\n  // We clean the emojiFilteredRefs to have an updated ref list for the search results\n  emojiFilteredRefs.value = [];\n  searchByNameAndKeywords();\n});\n\n/**\n * Update the current emojis list on skin tone changes\n * Also update the filtered emojis list\n * @listens skinTone\n */\nwatch(currentEmojis, () => {\n  searchByNameAndKeywords();\n}, { immediate: true });\n\n/**\n * Update the recently used emojis list on recently used emojis prop changes\n * @listens recentlyUsedEmojis\n */\nwatch(() => props.recentlyUsedEmojis,\n  () => {\n    emojis['Recently used'] = props.recentlyUsedEmojis;\n  }, { immediate: true });\n\n/**\n * Search for emojis by name and keywords\n * Will update the filtered emojis list on emojiFilter update\n * @listens emojiFilter\n */\nwatch(() => props.emojiFilter, () => {\n  resetScroll();\n  if (props.emojiFilter) {\n    isFiltering.value = true;\n  } else {\n    isFiltering.value = false;\n    // If the emoji filter is empty, emit null to remove the highlighted emoji\n    // of the previous search\n    highlightEmoji(null);\n  }\n  debouncedSearch();\n});\n\nwatch(\n  () => props.selectedTabset,\n  (tab) => {\n    scrollToTab(tab.tabId);\n  },\n  { deep: true },\n);\n\nfunction hoverEmoji (emoji, isFirst = false) {\n  hoverFirstEmoji.value = isFirst;\n  emits('highlighted-emoji', emoji);\n}\n\n/**\n * Filters an array of emoji objects based on a search string that matches both the name and keywords.\n * Will update the filtered emojis list\n */\nfunction searchByNameAndKeywords () {\n  const searchStr = props.emojiFilter.toLowerCase();\n  filteredEmojis.value = currentEmojis.value.filter(obj => {\n    const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);\n    const keywordsIncludeSearchStr = obj.keywords.some(keyword => keyword.toLowerCase().includes(searchStr));\n    return nameIncludesSearchStr || keywordsIncludeSearchStr;\n  });\n  nextTick(() => {\n    if (searchStr) {\n      hoverEmoji(filteredEmojis.value[0], true);\n    }\n  });\n}\n\nfunction debounce (fn, delay = 300) {\n  let timeout;\n\n  return (...args) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => fn(...args), delay);\n  };\n}\n\nfunction getImgSrc (emoji) {\n  return `${CDN_URL + emoji}.png`;\n}\n\n/**\n * Handle image error - We hide the entire button if the image is not found\n */\nfunction handleImageError (event) {\n  event.target.parentNode.style.display = 'none';\n}\n\n/**\n * Scroll to the selected tab\n */\nfunction scrollToTab (tabIndex, focusFirstEmoji = true) {\n  const tabLabel = tabLabels.value[tabIndex - 1];\n  const tabElement = tabLabel.ref.value[0];\n\n  nextTick(() => {\n    const container = listRef.value;\n    const offsetTop = tabIndex === 1 ? 0 : tabElement.offsetTop - 15;\n\n    container.scrollTop = offsetTop;\n\n    if (focusFirstEmoji) {\n      focusEmoji((tabIndex - 1), 0);\n    }\n  });\n}\n\nfunction resetScroll () {\n  const container = listRef.value;\n\n  container.scrollTop = 0;\n}\n\n/**\n * This code creates an IntersectionObserver object that monitors the intersection between\n * the root element (tabCategoryRef) and its targets (the child elements of listRef),\n * and updates the value of the fixedLabel variable accordingly.\n */\nfunction setTabLabelObserver () {\n  /**\n   * The code extracts the target element and its index from the IntersectionObserverEntry object,\n   * and checks whether the target intersects with the root and is positioned above or below it.\n   */\n  tabLabelObserver.value = new IntersectionObserver(async (entries) => {\n    // eslint-disable-next-line complexity\n    entries.forEach(entry => {\n      const { target } = entry;\n      const index = parseInt(target.dataset.index);\n\n      /**\n       * If the target is positioned above the root,\n       * the code updates the value of the fixed label to the label of the previous tab,\n       * or the first tab if the current tab is the first one. If the target is positioned below the root, the code\n       * updates the value of the fixed label to the label of the current tab.\n       * If the target stops intersecting with the root and its index is 1 (the second tab),\n       * the code updates the value of the fixed label to the label of the first tab.\n       * NOTES:\n       * This last condition is needed because sometimes it is\n       * not detect the intersection between the root and the target.\n       * We also provide a 50 pixels offset to the root element in the first condition to always get the\n       * first tab if it has fewer emojis, because in some cases if you quickly scroll the observer does not detect it.\n       */\n      if (entry.isIntersecting && target.offsetTop <= tabCategoryRef.value.offsetTop + 50) {\n        fixedLabel.value = tabLabels.value[index - 1]?.label ?? tabLabels.value[0]?.label;\n        emits('scroll-into-tab', index - 1);\n      } else if (entry.boundingClientRect.bottom <= tabCategoryRef.value?.getBoundingClientRect().bottom) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[index]?.label;\n      } else if (index === 1) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[0]?.label;\n      }\n    });\n  });\n\n  /**\n   * The tabLabelObserver is set to observe the root element and all its children elements with\n   * the IntersectionObserver object, and sets their data-index attribute to their index.\n   */\n  tabLabelObserver.value.observe(tabCategoryRef.value);\n\n  Array.from(listRef.value.children).forEach((child, index) => {\n    tabLabelObserver.value.observe(child);\n    child.dataset.index = index;\n  });\n}\n\nconst handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigationFiltered(event.key, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      emits('focus-skin-selector');\n      break;\n    case 'Enter':\n      selectEmoji(emoji);\n      break;\n    default:\n      break;\n  }\n};\n\n/* eslint-disable-next-line complexity */\nconst handleKeyDown = (event, indexTab, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigation(event.key, indexTab, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      if (event.shiftKey) {\n        if (focusEmoji(indexTab, 0) && indexTab > 0) {\n          scrollToTab(indexTab, true);\n        } else {\n          scrollToTab(1, false);\n          emits('focus-search-input');\n        }\n      } else {\n        if (focusEmoji(indexTab + 1, 0)) {\n          scrollToTab(indexTab + 1 + 1, false);\n        } else {\n          // We are on the last emoji tabset, jump to the skin selector\n          emits('focus-skin-selector');\n        }\n      }\n      break;\n\n    case 'Enter':\n      selectEmoji(emoji);\n      break;\n\n    default:\n      break;\n  }\n};\n\nfunction selectEmoji (emoji) {\n  emits('selected-emoji', emoji);\n}\n\nfunction highlightEmoji (emoji) {\n  emits('highlighted-emoji', emoji);\n}\n\nfunction focusEmojiSelector () {\n  focusEmoji(0, 0);\n}\n\nfunction focusLastEmoji () {\n  scrollToTab(tabs.value.length, true);\n}\n\nonMounted(() => {\n  setTabLabelObserver();\n});\n\nonUnmounted(() => {\n  tabLabelObserver.value.disconnect();\n});\n\ndefineExpose({\n  focusEmojiSelector,\n  focusLastEmoji,\n});\n</script>\n"],"names":["emojis"],"mappings":"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"}
+{"version":3,"file":"emoji_selector.vue.js","sources":["../../../../components/emoji_picker/modules/emoji_selector.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-emoji-picker__selector\"\n  >\n    <div\n      id=\"d-emoji-picker-list\"\n      ref=\"listRef\"\n      class=\"d-emoji-picker__list\"\n    >\n      <p\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__search-label d-emoji-picker__alignment\"\n      >\n        {{ filteredEmojis.length > 0 ? searchResultsLabel : searchNoResultsLabel }}\n      </p>\n      <div\n        v-else\n        ref=\"tabCategoryRef\"\n        class=\"d-emoji-picker__category d-emoji-picker__alignment\"\n      >\n        <p>\n          {{ fixedLabel }}\n        </p>\n      </div>\n      <div\n        v-for=\"(tabLabel, indexTab) in tabLabels\"\n        v-show=\"!emojiFilter\"\n        :key=\"indexTab\"\n        :ref=\"tabLabel.ref\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <p\n          v-if=\"indexTab\"\n        >\n          {{ tabLabel.label }}\n        </p>\n        <div\n          class=\"d-emoji-picker__tab\"\n        >\n          <button\n            v-for=\"(emoji, indexEmoji) in\n            (emojis[tabs[indexTab] + skinTone] ? emojis[tabs[indexTab] + skinTone] : emojis[tabs[indexTab]])\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setEmojiRef(el, indexTab, indexEmoji) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            @click=\"event => selectEmoji(emoji, event)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"highlightEmoji(emoji)\"\n            @mouseleave=\"highlightEmoji(null)\"\n            @keydown=\"event => handleKeyDown(event, indexTab, indexEmoji, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"getImgSrc(emoji.unicode_character)\"\n              @error=\"handleImageError\"\n            >\n          </button>\n        </div>\n      </div>\n      <div\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <div\n          class=\"d-emoji-picker__tab \"\n          data-qa=\"filtered-emojis\"\n        >\n          <button\n            v-for=\"(emoji, index) in filteredEmojis\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setFilteredRef(el, index) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            :class=\"{\n              'hover-emoji': (index === 0 && hoverFirstEmoji),\n            }\"\n            @click=\"event => selectEmoji(emoji, event)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"hoverEmoji(emoji)\"\n            @mouseleave=\"hoverEmoji(null)\"\n            @keydown=\"event => handleKeyDownFilteredEmojis(event, index, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"`${CDN_URL + emoji.unicode_character}.png`\"\n            >\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\n/* eslint-disable max-len */\n/* eslint-disable max-lines */\nimport { emojisGrouped as emojis } from '@dialpad/dialtone-emojis';\nimport { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue';\nimport { CDN_URL, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\nimport { useKeyboardNavigation } from '@/components/emoji_picker/composables/useKeyboardNavigation';\n\nconst props = defineProps({\n  /**\n   * The filter to apply to the emoji list\n   * @type {String}\n   * @default ''\n   */\n  emojiFilter: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * The skin tone to apply to the emoji list\n   * @type {String}\n   * @required\n   */\n  skinTone: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The labels for the tabset\n   * @type {Array}\n   * @required\n   */\n  tabsetLabels: {\n    type: Array,\n    required: true,\n  },\n\n  selectedTabset: {\n    type: Object,\n    required: true,\n  },\n\n  /**\n   * The label for the search results tab\n   * @type {String}\n   * @required\n   */\n  searchResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  searchNoResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The list of recently used emojis\n   * @type {Array}\n   */\n  recentlyUsedEmojis: {\n    type: Array,\n    default: () => [],\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * Emitted when the user hover over an emoji\n   * @event highlighted-emoji\n   * @param {Object} emoji - The emoji data that was hovered\n    */\n  'highlighted-emoji',\n\n  /**\n   * Emitted when the user select an emoji\n   * @event selected-emoji\n   * @param {Object} emoji - The emoji data that was selected\n    */\n  'selected-emoji',\n\n  /**\n   * Emitted when the user scroll into an emoji tab\n   * @event scroll-into-tab\n   * @param {Number} tab-index - The tab that was scrolled into\n    */\n  'scroll-into-tab',\n\n  /**\n   * Emitted when the user reach the end of the emoji list\n   * @event focus-skin-selector\n    */\n  'focus-skin-selector',\n\n  /**\n   * Emitted when the user shift tab in first tab of emoji selector\n   * @event focus-search-input\n    */\n  'focus-search-input',\n]);\n\nconst {\n  emojiFilteredRefs,\n  isFiltering,\n  hoverFirstEmoji,\n  setEmojiRef,\n  setFilteredRef,\n  focusEmoji,\n  handleArrowNavigationFiltered,\n  handleArrowNavigation,\n} = useKeyboardNavigation();\n\n/**\n * The ref for the tab category\n * This is used to display the fixed label\n */\nconst tabCategoryRef = ref(null);\n\n/**\n * The ref for the list\n * This is used to display the tabs\n */\nconst listRef = ref(null);\n\n/**\n * The ref for the tab label observer\n * This is used to update the fixed label\n */\nconst tabLabelObserver = ref(null);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n */\nconst TABS_DATA = ['Recently used', 'People', 'Nature', 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags'];\n\n/**\n * The list of tab labels\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n */\nconst tabLabels = computed(() => {\n  return props.recentlyUsedEmojis.length\n    ? props.tabsetLabels.map((label) => ({ label, ref: ref(null) }))\n    : props.tabsetLabels.slice(1).map((label) => ({ label, ref: ref(null) }));\n});\n\n/**\n * The label of the fixed tab\n * This is used to display the fixed label\n */\nconst fixedLabel = ref(tabLabels.value[0].label);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list is empty\n * If it is empty, it will remove the recently used tab\n * The difference between this and the tab labels is that this one will set the structure of tabs\n * and the tab labels will set the labels\n */\nconst tabs = computed(() => {\n  return props.recentlyUsedEmojis.length ? TABS_DATA : TABS_DATA.slice(1);\n});\n\n/**\n * The list of current emojis that match the filter\n * This will be updated when the emojiFilter changes\n * This is used to display the search results\n * The difference between this and the current emojis list is that this one will not have the skin tone applied\n */\nconst filteredEmojis = ref([]);\n\n/**\n * The current emojis list we are displaying\n * This will be updated when the skin tone changes\n * The difference between this and the emojis list is that this one will have only the skin tone applied\n */\nconst currentEmojis = computed(() => {\n  return [\n    ...emojis[`People${props.skinTone}`],\n    ...emojis.Nature,\n    ...emojis.Food,\n    ...emojis[`Activity${props.skinTone}`],\n    ...emojis.Travel,\n    ...emojis[`Objects${props.skinTone}`],\n    ...emojis.Symbols,\n    ...emojis.Flags,\n  ];\n});\n\n/**\n * This will trigger the searchByNameAndKeywords function with debounce of 300 milliseconds\n */\nconst debouncedSearch = debounce(() => {\n  // We clean the emojiFilteredRefs to have an updated ref list for the search results\n  emojiFilteredRefs.value = [];\n  searchByNameAndKeywords();\n});\n\n/**\n * Update the current emojis list on skin tone changes\n * Also update the filtered emojis list\n * @listens skinTone\n */\nwatch(currentEmojis, () => {\n  searchByNameAndKeywords();\n}, { immediate: true });\n\n/**\n * Update the recently used emojis list on recently used emojis prop changes\n * @listens recentlyUsedEmojis\n */\nwatch(() => props.recentlyUsedEmojis,\n  () => {\n    emojis['Recently used'] = props.recentlyUsedEmojis;\n  }, { immediate: true });\n\n/**\n * Search for emojis by name and keywords\n * Will update the filtered emojis list on emojiFilter update\n * @listens emojiFilter\n */\nwatch(() => props.emojiFilter, () => {\n  resetScroll();\n  if (props.emojiFilter) {\n    isFiltering.value = true;\n  } else {\n    isFiltering.value = false;\n    // If the emoji filter is empty, emit null to remove the highlighted emoji\n    // of the previous search\n    highlightEmoji(null);\n  }\n  debouncedSearch();\n});\n\nwatch(\n  () => props.selectedTabset,\n  (tab) => {\n    scrollToTab(tab.tabId);\n  },\n  { deep: true },\n);\n\nfunction hoverEmoji (emoji, isFirst = false) {\n  hoverFirstEmoji.value = isFirst;\n  emits('highlighted-emoji', emoji);\n}\n\n/**\n * Filters an array of emoji objects based on a search string that matches both the name and keywords.\n * Will update the filtered emojis list\n */\nfunction searchByNameAndKeywords () {\n  const searchStr = props.emojiFilter.toLowerCase();\n  filteredEmojis.value = currentEmojis.value.filter(obj => {\n    const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);\n    const keywordsIncludeSearchStr = obj.keywords.some(keyword => keyword.toLowerCase().includes(searchStr));\n    return nameIncludesSearchStr || keywordsIncludeSearchStr;\n  });\n  nextTick(() => {\n    if (searchStr) {\n      hoverEmoji(filteredEmojis.value[0], true);\n    }\n  });\n}\n\nfunction debounce (fn, delay = 300) {\n  let timeout;\n\n  return (...args) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => fn(...args), delay);\n  };\n}\n\nfunction getImgSrc (emoji) {\n  return `${CDN_URL + emoji}.png`;\n}\n\n/**\n * Handle image error - We hide the entire button if the image is not found\n */\nfunction handleImageError (event) {\n  event.target.parentNode.style.display = 'none';\n}\n\n/**\n * Scroll to the selected tab\n */\nfunction scrollToTab (tabIndex, focusFirstEmoji = true) {\n  const tabLabel = tabLabels.value[tabIndex - 1];\n  const tabElement = tabLabel.ref.value[0];\n\n  nextTick(() => {\n    const container = listRef.value;\n    const offsetTop = tabIndex === 1 ? 0 : tabElement.offsetTop - 15;\n\n    container.scrollTop = offsetTop;\n\n    if (focusFirstEmoji) {\n      focusEmoji((tabIndex - 1), 0);\n    }\n  });\n}\n\nfunction resetScroll () {\n  const container = listRef.value;\n\n  container.scrollTop = 0;\n}\n\n/**\n * This code creates an IntersectionObserver object that monitors the intersection between\n * the root element (tabCategoryRef) and its targets (the child elements of listRef),\n * and updates the value of the fixedLabel variable accordingly.\n */\nfunction setTabLabelObserver () {\n  /**\n   * The code extracts the target element and its index from the IntersectionObserverEntry object,\n   * and checks whether the target intersects with the root and is positioned above or below it.\n   */\n  tabLabelObserver.value = new IntersectionObserver(async (entries) => {\n    // eslint-disable-next-line complexity\n    entries.forEach(entry => {\n      const { target } = entry;\n      const index = parseInt(target.dataset.index);\n\n      /**\n       * If the target is positioned above the root,\n       * the code updates the value of the fixed label to the label of the previous tab,\n       * or the first tab if the current tab is the first one. If the target is positioned below the root, the code\n       * updates the value of the fixed label to the label of the current tab.\n       * If the target stops intersecting with the root and its index is 1 (the second tab),\n       * the code updates the value of the fixed label to the label of the first tab.\n       * NOTES:\n       * This last condition is needed because sometimes it is\n       * not detect the intersection between the root and the target.\n       * We also provide a 50 pixels offset to the root element in the first condition to always get the\n       * first tab if it has fewer emojis, because in some cases if you quickly scroll the observer does not detect it.\n       */\n      if (entry.isIntersecting && target.offsetTop <= tabCategoryRef.value.offsetTop + 50) {\n        fixedLabel.value = tabLabels.value[index - 1]?.label ?? tabLabels.value[0]?.label;\n        emits('scroll-into-tab', index - 1);\n      } else if (entry.boundingClientRect.bottom <= tabCategoryRef.value?.getBoundingClientRect().bottom) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[index]?.label;\n      } else if (index === 1) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[0]?.label;\n      }\n    });\n  });\n\n  /**\n   * The tabLabelObserver is set to observe the root element and all its children elements with\n   * the IntersectionObserver object, and sets their data-index attribute to their index.\n   */\n  tabLabelObserver.value.observe(tabCategoryRef.value);\n\n  Array.from(listRef.value.children).forEach((child, index) => {\n    tabLabelObserver.value.observe(child);\n    child.dataset.index = index;\n  });\n}\n\nconst handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigationFiltered(event.key, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      emits('focus-skin-selector');\n      break;\n    case 'Enter':\n      selectEmoji(emoji, event);\n      break;\n    default:\n      break;\n  }\n};\n\n/* eslint-disable-next-line complexity */\nconst handleKeyDown = (event, indexTab, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigation(event.key, indexTab, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      if (event.shiftKey) {\n        if (focusEmoji(indexTab, 0) && indexTab > 0) {\n          scrollToTab(indexTab, true);\n        } else {\n          scrollToTab(1, false);\n          emits('focus-search-input');\n        }\n      } else {\n        if (focusEmoji(indexTab + 1, 0)) {\n          scrollToTab(indexTab + 1 + 1, false);\n        } else {\n          // We are on the last emoji tabset, jump to the skin selector\n          emits('focus-skin-selector');\n        }\n      }\n      break;\n\n    case 'Enter':\n      selectEmoji(emoji, event);\n      break;\n\n    default:\n      break;\n  }\n};\n\nfunction selectEmoji (emoji, event) {\n  emits('selected-emoji', { ...emoji, shift_key: event.shiftKey });\n}\n\nfunction highlightEmoji (emoji) {\n  emits('highlighted-emoji', emoji);\n}\n\nfunction focusEmojiSelector () {\n  focusEmoji(0, 0);\n}\n\nfunction focusLastEmoji () {\n  scrollToTab(tabs.value.length, true);\n}\n\nonMounted(() => {\n  setTabLabelObserver();\n});\n\nonUnmounted(() => {\n  tabLabelObserver.value.disconnect();\n});\n\ndefineExpose({\n  focusEmojiSelector,\n  focusLastEmoji,\n});\n</script>\n"],"names":["emojis"],"mappings":"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"}

package/dist/vue3/components/emoji_text_wrapper/emoji_text_wrapper.vue.cjs

@@ -3,6 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const common_emoji = require("../../common/emoji.cjs");
 const vue = require("vue");
 const icon_constants = require("../icon/icon_constants.cjs");
+const regexCombinedEmojis = require("regex-combined-emojis");
 const emoji = require("../emoji/emoji.vue.cjs");
 const _sfc_main = {
   name: "DtEmojiTextWrapper",
@@ -44,7 +45,8 @@ const _sfc_main = {
       const regexp = new RegExp(`(${replaceList.join("|")})`, "g");
       const items = textContent.split(regexp);
       return items.filter((item) => item.trim() !== "").map((item) => {
-        if (replaceList.includes(item)) {
+        regexp.lastIndex = 0;
+        if (replaceList.includes(item) || regexp.test(item)) {
           return vue.h(emoji.default, { code: item, size: this.size });
         }
         return vue.h("span", { class: "d-emoji-text-wrapper__text" }, item);
@@ -73,8 +75,7 @@ const _sfc_main = {
      */
     searchCodes(textContent) {
       const shortcodes = common_emoji.findShortCodes(textContent);
-      const emojis = common_emoji.findEmojis(textContent);
-      const replaceList = [...shortcodes, ...emojis];
+      const replaceList = [...shortcodes, regexCombinedEmojis.emojiPattern];
       if (replaceList.length === 0) return textContent;
       return this.replaceDtEmojis(replaceList, textContent);
     }