@chayns-components/emoji-input 5.0.0-beta.1183 → 5.0.0-beta.1185

package/lib/cjs/utils/emoji.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.js","names":["_dataByEmoji","_interopRequireDefault","require","_emoji","e","__esModule","default","convert","unicode","indexOf","parts","s","split","i","length","part","parseInt","hi","Math","floor","lo","String","fromCharCode","push","join","unescapeHTML","text","unescaped","replace","match","exports","escapeHTML","escaped","convertEmojisToUnicode","result","fullMatch","regShortnames","shortname","shortNameList","toUpperCase","regAscii","m1","m2","m3","asciiList","addSkinToneToEmoji","emoji","skinTone","map","rawEmoji","_emojiList$rawEmoji","emojiList","skin_tone_support"],"sources":["../../../src/utils/emoji.ts"],"sourcesContent":["import emojiList from 'unicode-emoji-json/data-by-emoji.json';\nimport { asciiList, regAscii, regShortnames, shortNameList } from '../constants/emoji';\n\nconst convert = (unicode: string) => {\n    if (unicode.indexOf('-') > -1) {\n        const parts = [];\n\n        const s = unicode.split('-');\n\n        for (let i = 0; i < s.length; i++) {\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            let part: number | string = parseInt(s[i]!, 16);\n\n            if (part >= 0x10000 && part <= 0x10ffff) {\n                const hi = Math.floor((part - 0x10000) / 0x400) + 0xd800;\n                const lo = ((part - 0x10000) % 0x400) + 0xdc00;\n\n                part = String.fromCharCode(hi) + String.fromCharCode(lo);\n            } else {\n                part = String.fromCharCode(part);\n            }\n\n            parts.push(part);\n        }\n\n        return parts.join('');\n    }\n\n    const s = parseInt(unicode, 16);\n\n    if (s >= 0x10000 && s <= 0x10ffff) {\n        const hi = Math.floor((s - 0x10000) / 0x400) + 0xd800;\n        const lo = ((s - 0x10000) % 0x400) + 0xdc00;\n\n        return String.fromCharCode(hi) + String.fromCharCode(lo);\n    }\n\n    return String.fromCharCode(s);\n};\n\nexport const unescapeHTML = (text: string) => {\n    const unescaped: { [key: string]: string } = {\n        '&amp;': '&',\n        '&#38;': '&',\n        '&#x26;': '&',\n        '&lt;': '<',\n        '&#60;': '<',\n        '&#x3C;': '<',\n        '&gt;': '>',\n        '&#62;': '>',\n        '&#x3E;': '>',\n        '&quot;': '\"',\n        '&#34;': '\"',\n        '&#x22;': '\"',\n        '&apos;': \"'\",\n        '&#39;': \"'\",\n        '&#x27;': \"'\",\n    };\n\n    return text.replace(\n        /&(?:amp|#38|#x26|lt|#60|#x3C|gt|#62|#x3E|apos|#39|#x27|quot|#34|#x22);/gi,\n        (match) => unescaped[match] ?? match,\n    );\n};\n\nexport const escapeHTML = (text: string) => {\n    const escaped: { [key: string]: string } = {\n        '<': '&lt;',\n        '>': '&gt;',\n        '\"': '&quot;',\n        \"'\": '&apos;',\n    };\n\n    return text.replace(/[&<>\"']/g, (match) => escaped[match] ?? match);\n};\n\nexport const convertEmojisToUnicode = (text: string): string => {\n    let result = text;\n\n    result = result.replace(/https?:\\/\\/.*?(?=$|\\s)/gi, (fullMatch) =>\n        fullMatch.replace(/:/g, '%3A'),\n    );\n\n    result = result.replace(regShortnames, (shortname) => {\n        if (shortname) {\n            const unicode = shortNameList[shortname];\n\n            if (unicode) {\n                return convert(unicode.toUpperCase());\n            }\n        }\n\n        return shortname;\n    });\n\n    result = result.replace(/https?%3A\\/\\/.*?(?=$|\\s)/gi, (fullMatch) =>\n        fullMatch.replace(/%3A/g, ':'),\n    );\n\n    result = result.replace(regAscii, (fullMatch, m1, m2, m3) => {\n        if (typeof m3 === 'string' && m3 !== '') {\n            const unicode = asciiList[unescapeHTML(m3)];\n\n            if (unicode) {\n                return (m2 as string) + convert(unicode.toUpperCase());\n            }\n        }\n\n        return fullMatch;\n    });\n\n    return result;\n};\n\nexport const addSkinToneToEmoji = (emoji: string, skinTone: string): string =>\n    emoji\n        .split('\\u{200D}')\n        .map((rawEmoji) => {\n            const parts = [rawEmoji.replace(/\\ufe0f/, '')];\n\n            // @ts-expect-error: Difficult to type external json file\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n            if (emojiList[rawEmoji]?.skin_tone_support) {\n                parts.push(skinTone);\n            }\n\n            return parts.join('');\n        })\n        .join('\\u{200D}');\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"emoji.js","names":["_emoji","require","convert","unicode","indexOf","parts","s","split","i","length","part","parseInt","hi","Math","floor","lo","String","fromCharCode","push","join","unescapeHTML","text","unescaped","replace","match","exports","escapeHTML","escaped","convertEmojisToUnicode","result","fullMatch","regShortnames","shortname","shortNameList","toUpperCase","regAscii","m1","m2","m3","asciiList","addSkinToneToEmoji","emojiList","emoji","skinTone","map","rawEmoji","_emojiList$rawEmoji","skin_tone_support"],"sources":["../../../src/utils/emoji.ts"],"sourcesContent":["import { asciiList, regAscii, regShortnames, shortNameList } from '../constants/emoji';\n\nconst convert = (unicode: string) => {\n    if (unicode.indexOf('-') > -1) {\n        const parts = [];\n\n        const s = unicode.split('-');\n\n        for (let i = 0; i < s.length; i++) {\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            let part: number | string = parseInt(s[i]!, 16);\n\n            if (part >= 0x10000 && part <= 0x10ffff) {\n                const hi = Math.floor((part - 0x10000) / 0x400) + 0xd800;\n                const lo = ((part - 0x10000) % 0x400) + 0xdc00;\n\n                part = String.fromCharCode(hi) + String.fromCharCode(lo);\n            } else {\n                part = String.fromCharCode(part);\n            }\n\n            parts.push(part);\n        }\n\n        return parts.join('');\n    }\n\n    const s = parseInt(unicode, 16);\n\n    if (s >= 0x10000 && s <= 0x10ffff) {\n        const hi = Math.floor((s - 0x10000) / 0x400) + 0xd800;\n        const lo = ((s - 0x10000) % 0x400) + 0xdc00;\n\n        return String.fromCharCode(hi) + String.fromCharCode(lo);\n    }\n\n    return String.fromCharCode(s);\n};\n\nexport const unescapeHTML = (text: string) => {\n    const unescaped: { [key: string]: string } = {\n        '&amp;': '&',\n        '&#38;': '&',\n        '&#x26;': '&',\n        '&lt;': '<',\n        '&#60;': '<',\n        '&#x3C;': '<',\n        '&gt;': '>',\n        '&#62;': '>',\n        '&#x3E;': '>',\n        '&quot;': '\"',\n        '&#34;': '\"',\n        '&#x22;': '\"',\n        '&apos;': \"'\",\n        '&#39;': \"'\",\n        '&#x27;': \"'\",\n    };\n\n    return text.replace(\n        /&(?:amp|#38|#x26|lt|#60|#x3C|gt|#62|#x3E|apos|#39|#x27|quot|#34|#x22);/gi,\n        (match) => unescaped[match] ?? match,\n    );\n};\n\nexport const escapeHTML = (text: string) => {\n    const escaped: { [key: string]: string } = {\n        '<': '&lt;',\n        '>': '&gt;',\n        '\"': '&quot;',\n        \"'\": '&apos;',\n    };\n\n    return text.replace(/[&<>\"']/g, (match) => escaped[match] ?? match);\n};\n\nexport const convertEmojisToUnicode = (text: string): string => {\n    let result = text;\n\n    result = result.replace(/https?:\\/\\/.*?(?=$|\\s)/gi, (fullMatch) =>\n        fullMatch.replace(/:/g, '%3A'),\n    );\n\n    result = result.replace(regShortnames, (shortname) => {\n        if (shortname) {\n            const unicode = shortNameList[shortname];\n\n            if (unicode) {\n                return convert(unicode.toUpperCase());\n            }\n        }\n\n        return shortname;\n    });\n\n    result = result.replace(/https?%3A\\/\\/.*?(?=$|\\s)/gi, (fullMatch) =>\n        fullMatch.replace(/%3A/g, ':'),\n    );\n\n    result = result.replace(regAscii, (fullMatch, m1, m2, m3) => {\n        if (typeof m3 === 'string' && m3 !== '') {\n            const unicode = asciiList[unescapeHTML(m3)];\n\n            if (unicode) {\n                return (m2 as string) + convert(unicode.toUpperCase());\n            }\n        }\n\n        return fullMatch;\n    });\n\n    return result;\n};\n\nexport const addSkinToneToEmoji = (\n    emojiList: { [x: string]: { skin_tone_support: any } },\n    emoji: string,\n    skinTone: string,\n): string =>\n    emoji\n        .split('\\u{200D}')\n        .map((rawEmoji) => {\n            const parts = [rawEmoji.replace(/\\ufe0f/, '')];\n\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n            if (emojiList[rawEmoji]?.skin_tone_support) {\n                parts.push(skinTone);\n            }\n\n            return parts.join('');\n        })\n        .join('\\u{200D}');\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/emoji-picker/EmojiPicker.js

@@ -1,16 +1,16 @@
 import { Input } from '@chayns-components/core';
 import React, { useCallback, useState } from 'react';
-import emojiCategories from 'unicode-emoji-json/data-by-group.json';
 import EmojiPickerCategories from './emoji-picker-categories/EmojiPickerCategories';
 import EmojiPickerEmojis from './emoji-picker-emojis/EmojiPickerEmojis';
 import { StyledEmojiPicker } from './EmojiPicker.styles';
+const FirstEmojiSlug = 'smileys_emotion';
 const EmojiPicker = ({
   accessToken,
   onSelect,
   personId
 }) => {
   const [searchString, setSearchString] = useState('');
-  const [selectedCategory, setSelectedCategory] = useState(emojiCategories[0]?.slug);
+  const [selectedCategory, setSelectedCategory] = useState(FirstEmojiSlug);
   const handleCategorySelect = useCallback(category => {
     setSearchString('');
     setSelectedCategory(category);

package/lib/esm/components/emoji-picker/EmojiPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.js","names":["Input","React","useCallback","useState","emojiCategories","EmojiPickerCategories","EmojiPickerEmojis","StyledEmojiPicker","EmojiPicker","accessToken","onSelect","personId","searchString","setSearchString","selectedCategory","setSelectedCategory","slug","handleCategorySelect","category","handleSearchChange","event","target","value","createElement","onChange","placeholder","displayName"],"sources":["../../../../src/components/emoji-picker/EmojiPicker.tsx"],"sourcesContent":["import { Input } from '@chayns-components/core';\nimport React, { ChangeEvent, FC, useCallback, useState } from 'react';\nimport emojiCategories from 'unicode-emoji-json/data-by-group.json';\nimport type { Category } from '../../types/category';\nimport EmojiPickerCategories from './emoji-picker-categories/EmojiPickerCategories';\nimport EmojiPickerEmojis from './emoji-picker-emojis/EmojiPickerEmojis';\nimport { StyledEmojiPicker } from './EmojiPicker.styles';\n\nexport type EmojiPickerProps = {\n    /**\n     * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    accessToken?: string;\n    /**\n     * Function executed when an emoji is selected in the popup\n     * @param {string} emoji - Emoji that was selected\n     */\n    onSelect: (emoji: string) => void;\n    /**\n     * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    personId?: string;\n};\nconst EmojiPicker: FC<EmojiPickerProps> = ({ accessToken, onSelect, personId }) => {\n    const [searchString, setSearchString] = useState('');\n    const [selectedCategory, setSelectedCategory] = useState(emojiCategories[0]?.slug as Category);\n\n    const handleCategorySelect = useCallback((category: Category) => {\n        setSearchString('');\n        setSelectedCategory(category);\n    }, []);\n\n    const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n        setSearchString(event.target.value);\n    }, []);\n\n    return (\n        <StyledEmojiPicker>\n            <Input onChange={handleSearchChange} placeholder=\"Suchen\" value={searchString} />\n            <EmojiPickerEmojis\n                accessToken={accessToken}\n                onSelect={onSelect}\n                personId={personId}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n            <EmojiPickerCategories\n                onSelect={handleCategorySelect}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n        </StyledEmojiPicker>\n    );\n};\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,yBAAyB;AAC/C,OAAOC,KAAK,IAAqBC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACrE,OAAOC,eAAe,MAAM,uCAAuC;AAEnE,OAAOC,qBAAqB,MAAM,iDAAiD;AACnF,OAAOC,iBAAiB,MAAM,yCAAyC;AACvE,SAASC,iBAAiB,QAAQ,sBAAsB;AAiBxD,MAAMC,WAAiC,GAAGA,CAAC;EAAEC,WAAW;EAAEC,QAAQ;EAAEC;AAAS,CAAC,KAAK;EAC/E,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGV,QAAQ,CAAC,EAAE,CAAC;EACpD,MAAM,CAACW,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGZ,QAAQ,CAACC,eAAe,CAAC,CAAC,CAAC,EAAEY,IAAgB,CAAC;EAE9F,MAAMC,oBAAoB,GAAGf,WAAW,CAAEgB,QAAkB,IAAK;IAC7DL,eAAe,CAAC,EAAE,CAAC;IACnBE,mBAAmB,CAACG,QAAQ,CAAC;EACjC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,kBAAkB,GAAGjB,WAAW,CAAEkB,KAAoC,IAAK;IAC7EP,eAAe,CAACO,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;EACvC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIrB,KAAA,CAAAsB,aAAA,CAAChB,iBAAiB,qBACdN,KAAA,CAAAsB,aAAA,CAACvB,KAAK;IAACwB,QAAQ,EAAEL,kBAAmB;IAACM,WAAW,EAAC,QAAQ;IAACH,KAAK,EAAEV;EAAa,CAAE,CAAC,eACjFX,KAAA,CAAAsB,aAAA,CAACjB,iBAAiB;IACdG,WAAW,EAAEA,WAAY;IACzBC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBC,YAAY,EAAEA,YAAa;IAC3BE,gBAAgB,EAAEA;EAAiB,CACtC,CAAC,eACFb,KAAA,CAAAsB,aAAA,CAAClB,qBAAqB;IAClBK,QAAQ,EAAEO,oBAAqB;IAC/BL,YAAY,EAAEA,YAAa;IAC3BE,gBAAgB,EAAEA;EAAiB,CACtC,CACc,CAAC;AAE5B,CAAC;AAEDN,WAAW,CAACkB,WAAW,GAAG,aAAa;AAEvC,eAAelB,WAAW","ignoreList":[]}
+{"version":3,"file":"EmojiPicker.js","names":["Input","React","useCallback","useState","EmojiPickerCategories","EmojiPickerEmojis","StyledEmojiPicker","FirstEmojiSlug","EmojiPicker","accessToken","onSelect","personId","searchString","setSearchString","selectedCategory","setSelectedCategory","handleCategorySelect","category","handleSearchChange","event","target","value","createElement","onChange","placeholder","displayName"],"sources":["../../../../src/components/emoji-picker/EmojiPicker.tsx"],"sourcesContent":["import { Input } from '@chayns-components/core';\nimport React, { ChangeEvent, FC, useCallback, useState } from 'react';\nimport type { Category } from '../../types/category';\nimport EmojiPickerCategories from './emoji-picker-categories/EmojiPickerCategories';\nimport EmojiPickerEmojis from './emoji-picker-emojis/EmojiPickerEmojis';\nimport { StyledEmojiPicker } from './EmojiPicker.styles';\n\nexport type EmojiPickerProps = {\n    /**\n     * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    accessToken?: string;\n    /**\n     * Function executed when an emoji is selected in the popup\n     * @param {string} emoji - Emoji that was selected\n     */\n    onSelect: (emoji: string) => void;\n    /**\n     * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    personId?: string;\n};\n\nconst FirstEmojiSlug = 'smileys_emotion';\n\nconst EmojiPicker: FC<EmojiPickerProps> = ({ accessToken, onSelect, personId }) => {\n    const [searchString, setSearchString] = useState('');\n    const [selectedCategory, setSelectedCategory] = useState(FirstEmojiSlug as Category);\n\n    const handleCategorySelect = useCallback((category: Category) => {\n        setSearchString('');\n        setSelectedCategory(category);\n    }, []);\n\n    const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n        setSearchString(event.target.value);\n    }, []);\n\n    return (\n        <StyledEmojiPicker>\n            <Input onChange={handleSearchChange} placeholder=\"Suchen\" value={searchString} />\n            <EmojiPickerEmojis\n                accessToken={accessToken}\n                onSelect={onSelect}\n                personId={personId}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n            <EmojiPickerCategories\n                onSelect={handleCategorySelect}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n        </StyledEmojiPicker>\n    );\n};\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"AAAA,SAASA,KAAK,QAAQ,yBAAyB;AAC/C,OAAOC,KAAK,IAAqBC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAErE,OAAOC,qBAAqB,MAAM,iDAAiD;AACnF,OAAOC,iBAAiB,MAAM,yCAAyC;AACvE,SAASC,iBAAiB,QAAQ,sBAAsB;AAkBxD,MAAMC,cAAc,GAAG,iBAAiB;AAExC,MAAMC,WAAiC,GAAGA,CAAC;EAAEC,WAAW;EAAEC,QAAQ;EAAEC;AAAS,CAAC,KAAK;EAC/E,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGV,QAAQ,CAAC,EAAE,CAAC;EACpD,MAAM,CAACW,gBAAgB,EAAEC,mBAAmB,CAAC,GAAGZ,QAAQ,CAACI,cAA0B,CAAC;EAEpF,MAAMS,oBAAoB,GAAGd,WAAW,CAAEe,QAAkB,IAAK;IAC7DJ,eAAe,CAAC,EAAE,CAAC;IACnBE,mBAAmB,CAACE,QAAQ,CAAC;EACjC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,kBAAkB,GAAGhB,WAAW,CAAEiB,KAAoC,IAAK;IAC7EN,eAAe,CAACM,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;EACvC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIpB,KAAA,CAAAqB,aAAA,CAAChB,iBAAiB,qBACdL,KAAA,CAAAqB,aAAA,CAACtB,KAAK;IAACuB,QAAQ,EAAEL,kBAAmB;IAACM,WAAW,EAAC,QAAQ;IAACH,KAAK,EAAET;EAAa,CAAE,CAAC,eACjFX,KAAA,CAAAqB,aAAA,CAACjB,iBAAiB;IACdI,WAAW,EAAEA,WAAY;IACzBC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBC,YAAY,EAAEA,YAAa;IAC3BE,gBAAgB,EAAEA;EAAiB,CACtC,CAAC,eACFb,KAAA,CAAAqB,aAAA,CAAClB,qBAAqB;IAClBM,QAAQ,EAAEM,oBAAqB;IAC/BJ,YAAY,EAAEA,YAAa;IAC3BE,gBAAgB,EAAEA;EAAiB,CACtC,CACc,CAAC;AAE5B,CAAC;AAEDN,WAAW,CAACiB,WAAW,GAAG,aAAa;AAEvC,eAAejB,WAAW","ignoreList":[]}

package/lib/esm/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.js

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import unicodeEmoji from 'unicode-emoji-json/data-by-group.json';
 import { CATEGORY_EMOJIS } from '../../../constants/categories';
 import { StyledEmojiPickerCategories, StyledMotionEmojiPickerCategory } from './EmojiPickerCategories.styles';
 import { useCombinedRefs, useIsMeasuredClone } from '@chayns-components/core';
@@ -66,29 +65,23 @@ const EmojiPickerCategories = ({
   const handleClick = useCallback(slug => {
     handleSelect(slug);
   }, [handleSelect]);
-  const categories = useMemo(() => {
-    const categorySlugs = unicodeEmoji.map(({
-      slug
-    }) => slug);
-    categorySlugs.unshift('history');
-    return categorySlugs.map(slug => {
-      const isSelected = selectedCategory === slug && !isSearchStringGiven;
-      return /*#__PURE__*/React.createElement(StyledMotionEmojiPickerCategory, {
-        animate: {
-          filter: `grayscale(${isSelected ? 0 : 0.75})`,
-          opacity: isSelected ? 1 : 0.5
-        },
-        className: "prevent-lose-focus",
-        initial: false,
-        key: slug,
-        id: slug,
-        onClick: () => handleClick(slug),
-        transition: {
-          duration: 0.2
-        }
-      }, CATEGORY_EMOJIS[slug]);
-    });
-  }, [handleClick, isSearchStringGiven, selectedCategory]);
+  const categories = useMemo(() => Object.keys(CATEGORY_EMOJIS).map(slug => {
+    const isSelected = selectedCategory === slug && !isSearchStringGiven;
+    return /*#__PURE__*/React.createElement(StyledMotionEmojiPickerCategory, {
+      animate: {
+        filter: `grayscale(${isSelected ? 0 : 0.75})`,
+        opacity: isSelected ? 1 : 0.5
+      },
+      className: "prevent-lose-focus",
+      initial: false,
+      key: slug,
+      id: slug,
+      onClick: () => handleClick(slug),
+      transition: {
+        duration: 0.2
+      }
+    }, CATEGORY_EMOJIS[slug]);
+  }), [handleClick, isSearchStringGiven, selectedCategory]);
   return /*#__PURE__*/React.createElement(StyledEmojiPickerCategories, {
     ref: combinedRef
   }, categories);

package/lib/esm/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerCategories.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","unicodeEmoji","CATEGORY_EMOJIS","StyledEmojiPickerCategories","StyledMotionEmojiPickerCategory","useCombinedRefs","useIsMeasuredClone","EmojiPickerCategories","onSelect","searchString","selectedCategory","focusedIndex","setFocusedIndex","shouldPreventListener","ref","categoryRef","combinedRef","isSearchStringGiven","trim","handleSelect","slug","handleKeyDown","event","key","shiftKey","preventDefault","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","id","document","addEventListener","removeEventListener","handleClick","categories","categorySlugs","map","unshift","isSelected","createElement","animate","filter","opacity","className","initial","onClick","transition","duration","displayName"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport unicodeEmoji from 'unicode-emoji-json/data-by-group.json';\nimport { CATEGORY_EMOJIS } from '../../../constants/categories';\nimport type { Category } from '../../../types/category';\nimport {\n    StyledEmojiPickerCategories,\n    StyledMotionEmojiPickerCategory,\n} from './EmojiPickerCategories.styles';\nimport { useCombinedRefs, useIsMeasuredClone } from '@chayns-components/core';\n\nexport type EmojiPickerCategoriesProps = {\n    onSelect: (category: Category) => void;\n    searchString: string;\n    selectedCategory: Category;\n};\n\nconst EmojiPickerCategories: FC<EmojiPickerCategoriesProps> = ({\n    onSelect,\n    searchString,\n    selectedCategory,\n}) => {\n    const [focusedIndex, setFocusedIndex] = useState(1);\n\n    const [shouldPreventListener, ref] = useIsMeasuredClone();\n\n    const categoryRef = useRef<HTMLDivElement>(null);\n\n    const combinedRef = useCombinedRefs(categoryRef, ref);\n\n    const isSearchStringGiven = searchString.trim() !== '';\n\n    const handleSelect = useCallback(\n        (slug: Category) => {\n            onSelect(slug);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (shouldPreventListener) {\n                return;\n            }\n\n            if (event.key === 'Tab' || (event.key === 'Tab' && event.shiftKey)) {\n                event.preventDefault();\n\n                const children = categoryRef.current?.children;\n                if (children && children.length > 0) {\n                    let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n                    if (event.key === 'Tab' && event.shiftKey) {\n                        newIndex = (newIndex - 1) % children.length;\n                    } else if (event.key === 'Tab') {\n                        newIndex = (newIndex + 1) % children.length;\n                    }\n\n                    // remove focus from the old element\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    if (newIndex < 0) {\n                        newIndex = children.length - 1;\n                    } else if (newIndex > children.length - 1) {\n                        newIndex = 0;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    // Set focus to the element\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n\n                    if (!newElement) {\n                        return;\n                    }\n\n                    const { id } = newElement;\n\n                    handleSelect(id as Category);\n                }\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSelect, shouldPreventListener]);\n\n    const handleClick = useCallback(\n        (slug: Category) => {\n            handleSelect(slug);\n        },\n        [handleSelect],\n    );\n\n    const categories = useMemo(() => {\n        const categorySlugs = unicodeEmoji.map(({ slug }) => slug);\n\n        categorySlugs.unshift('history');\n\n        return categorySlugs.map((slug) => {\n            const isSelected = selectedCategory === slug && !isSearchStringGiven;\n\n            return (\n                <StyledMotionEmojiPickerCategory\n                    animate={{\n                        filter: `grayscale(${isSelected ? 0 : 0.75})`,\n                        opacity: isSelected ? 1 : 0.5,\n                    }}\n                    className=\"prevent-lose-focus\"\n                    initial={false}\n                    key={slug}\n                    id={slug}\n                    onClick={() => handleClick(slug as Category)}\n                    transition={{ duration: 0.2 }}\n                >\n                    {CATEGORY_EMOJIS[slug as Category]}\n                </StyledMotionEmojiPickerCategory>\n            );\n        });\n    }, [handleClick, isSearchStringGiven, selectedCategory]);\n\n    return (\n        <StyledEmojiPickerCategories ref={combinedRef}>{categories}</StyledEmojiPickerCategories>\n    );\n};\n\nEmojiPickerCategories.displayName = 'EmojiPickerCategories';\n\nexport default EmojiPickerCategories;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACpF,OAAOC,YAAY,MAAM,uCAAuC;AAChE,SAASC,eAAe,QAAQ,+BAA+B;AAE/D,SACIC,2BAA2B,EAC3BC,+BAA+B,QAC5B,gCAAgC;AACvC,SAASC,eAAe,EAAEC,kBAAkB,QAAQ,yBAAyB;AAQ7E,MAAMC,qBAAqD,GAAGA,CAAC;EAC3DC,QAAQ;EACRC,YAAY;EACZC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGZ,QAAQ,CAAC,CAAC,CAAC;EAEnD,MAAM,CAACa,qBAAqB,EAAEC,GAAG,CAAC,GAAGR,kBAAkB,CAAC,CAAC;EAEzD,MAAMS,WAAW,GAAGhB,MAAM,CAAiB,IAAI,CAAC;EAEhD,MAAMiB,WAAW,GAAGX,eAAe,CAACU,WAAW,EAAED,GAAG,CAAC;EAErD,MAAMG,mBAAmB,GAAGR,YAAY,CAACS,IAAI,CAAC,CAAC,KAAK,EAAE;EAEtD,MAAMC,YAAY,GAAGvB,WAAW,CAC3BwB,IAAc,IAAK;IAChBZ,QAAQ,CAACY,IAAI,CAAC;EAClB,CAAC,EACD,CAACZ,QAAQ,CACb,CAAC;EAEDX,SAAS,CAAC,MAAM;IACZ,MAAMwB,aAAa,GAAIC,KAAoB,IAAK;MAC5C,IAAIT,qBAAqB,EAAE;QACvB;MACJ;MAEA,IAAIS,KAAK,CAACC,GAAG,KAAK,KAAK,IAAKD,KAAK,CAACC,GAAG,KAAK,KAAK,IAAID,KAAK,CAACE,QAAS,EAAE;QAChEF,KAAK,CAACG,cAAc,CAAC,CAAC;QAEtB,MAAMC,QAAQ,GAAGX,WAAW,CAACY,OAAO,EAAED,QAAQ;QAC9C,IAAIA,QAAQ,IAAIA,QAAQ,CAACE,MAAM,GAAG,CAAC,EAAE;UACjC,IAAIC,QAAQ,GAAGlB,YAAY,KAAK,IAAI,GAAGA,YAAY,GAAG,CAAC;UAEvD,IAAIW,KAAK,CAACC,GAAG,KAAK,KAAK,IAAID,KAAK,CAACE,QAAQ,EAAE;YACvCK,QAAQ,GAAG,CAACA,QAAQ,GAAG,CAAC,IAAIH,QAAQ,CAACE,MAAM;UAC/C,CAAC,MAAM,IAAIN,KAAK,CAACC,GAAG,KAAK,KAAK,EAAE;YAC5BM,QAAQ,GAAG,CAACA,QAAQ,GAAG,CAAC,IAAIH,QAAQ,CAACE,MAAM;UAC/C;;UAEA;UACA,IAAIjB,YAAY,KAAK,IAAI,EAAE;YACvB,MAAMmB,WAAW,GAAGJ,QAAQ,CAACf,YAAY,CAAmB;YAC5DmB,WAAW,CAACC,QAAQ,GAAG,CAAC,CAAC;UAC7B;UAEA,IAAIF,QAAQ,GAAG,CAAC,EAAE;YACdA,QAAQ,GAAGH,QAAQ,CAACE,MAAM,GAAG,CAAC;UAClC,CAAC,MAAM,IAAIC,QAAQ,GAAGH,QAAQ,CAACE,MAAM,GAAG,CAAC,EAAE;YACvCC,QAAQ,GAAG,CAAC;UAChB;UAEAjB,eAAe,CAACiB,QAAQ,CAAC;;UAEzB;UACA,MAAMG,UAAU,GAAGN,QAAQ,CAACG,QAAQ,CAAmB;UACvDG,UAAU,CAACD,QAAQ,GAAG,CAAC;UACvBC,UAAU,CAACC,KAAK,CAAC,CAAC;UAElB,IAAI,CAACD,UAAU,EAAE;YACb;UACJ;UAEA,MAAM;YAAEE;UAAG,CAAC,GAAGF,UAAU;UAEzBb,YAAY,CAACe,EAAc,CAAC;QAChC;MACJ;IACJ,CAAC;IAEDC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEf,aAAa,CAAC;IAEnD,OAAO,MAAM;MACTc,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEhB,aAAa,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,CAACV,YAAY,EAAEQ,YAAY,EAAEN,qBAAqB,CAAC,CAAC;EAEvD,MAAMyB,WAAW,GAAG1C,WAAW,CAC1BwB,IAAc,IAAK;IAChBD,YAAY,CAACC,IAAI,CAAC;EACtB,CAAC,EACD,CAACD,YAAY,CACjB,CAAC;EAED,MAAMoB,UAAU,GAAGzC,OAAO,CAAC,MAAM;IAC7B,MAAM0C,aAAa,GAAGvC,YAAY,CAACwC,GAAG,CAAC,CAAC;MAAErB;IAAK,CAAC,KAAKA,IAAI,CAAC;IAE1DoB,aAAa,CAACE,OAAO,CAAC,SAAS,CAAC;IAEhC,OAAOF,aAAa,CAACC,GAAG,CAAErB,IAAI,IAAK;MAC/B,MAAMuB,UAAU,GAAGjC,gBAAgB,KAAKU,IAAI,IAAI,CAACH,mBAAmB;MAEpE,oBACItB,KAAA,CAAAiD,aAAA,CAACxC,+BAA+B;QAC5ByC,OAAO,EAAE;UACLC,MAAM,EAAE,aAAaH,UAAU,GAAG,CAAC,GAAG,IAAI,GAAG;UAC7CI,OAAO,EAAEJ,UAAU,GAAG,CAAC,GAAG;QAC9B,CAAE;QACFK,SAAS,EAAC,oBAAoB;QAC9BC,OAAO,EAAE,KAAM;QACf1B,GAAG,EAAEH,IAAK;QACVc,EAAE,EAAEd,IAAK;QACT8B,OAAO,EAAEA,CAAA,KAAMZ,WAAW,CAAClB,IAAgB,CAAE;QAC7C+B,UAAU,EAAE;UAAEC,QAAQ,EAAE;QAAI;MAAE,GAE7BlD,eAAe,CAACkB,IAAI,CACQ,CAAC;IAE1C,CAAC,CAAC;EACN,CAAC,EAAE,CAACkB,WAAW,EAAErB,mBAAmB,EAAEP,gBAAgB,CAAC,CAAC;EAExD,oBACIf,KAAA,CAAAiD,aAAA,CAACzC,2BAA2B;IAACW,GAAG,EAAEE;EAAY,GAAEuB,UAAwC,CAAC;AAEjG,CAAC;AAEDhC,qBAAqB,CAAC8C,WAAW,GAAG,uBAAuB;AAE3D,eAAe9C,qBAAqB","ignoreList":[]}
+{"version":3,"file":"EmojiPickerCategories.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","CATEGORY_EMOJIS","StyledEmojiPickerCategories","StyledMotionEmojiPickerCategory","useCombinedRefs","useIsMeasuredClone","EmojiPickerCategories","onSelect","searchString","selectedCategory","focusedIndex","setFocusedIndex","shouldPreventListener","ref","categoryRef","combinedRef","isSearchStringGiven","trim","handleSelect","slug","handleKeyDown","event","key","shiftKey","preventDefault","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","id","document","addEventListener","removeEventListener","handleClick","categories","Object","keys","map","isSelected","createElement","animate","filter","opacity","className","initial","onClick","transition","duration","displayName"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { CATEGORY_EMOJIS } from '../../../constants/categories';\nimport type { Category } from '../../../types/category';\nimport {\n    StyledEmojiPickerCategories,\n    StyledMotionEmojiPickerCategory,\n} from './EmojiPickerCategories.styles';\nimport { useCombinedRefs, useIsMeasuredClone } from '@chayns-components/core';\n\nexport type EmojiPickerCategoriesProps = {\n    onSelect: (category: Category) => void;\n    searchString: string;\n    selectedCategory: Category;\n};\n\nconst EmojiPickerCategories: FC<EmojiPickerCategoriesProps> = ({\n    onSelect,\n    searchString,\n    selectedCategory,\n}) => {\n    const [focusedIndex, setFocusedIndex] = useState(1);\n\n    const [shouldPreventListener, ref] = useIsMeasuredClone();\n\n    const categoryRef = useRef<HTMLDivElement>(null);\n\n    const combinedRef = useCombinedRefs(categoryRef, ref);\n\n    const isSearchStringGiven = searchString.trim() !== '';\n\n    const handleSelect = useCallback(\n        (slug: Category) => {\n            onSelect(slug);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (shouldPreventListener) {\n                return;\n            }\n\n            if (event.key === 'Tab' || (event.key === 'Tab' && event.shiftKey)) {\n                event.preventDefault();\n\n                const children = categoryRef.current?.children;\n                if (children && children.length > 0) {\n                    let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n                    if (event.key === 'Tab' && event.shiftKey) {\n                        newIndex = (newIndex - 1) % children.length;\n                    } else if (event.key === 'Tab') {\n                        newIndex = (newIndex + 1) % children.length;\n                    }\n\n                    // remove focus from the old element\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    if (newIndex < 0) {\n                        newIndex = children.length - 1;\n                    } else if (newIndex > children.length - 1) {\n                        newIndex = 0;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    // Set focus to the element\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n\n                    if (!newElement) {\n                        return;\n                    }\n\n                    const { id } = newElement;\n\n                    handleSelect(id as Category);\n                }\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSelect, shouldPreventListener]);\n\n    const handleClick = useCallback(\n        (slug: Category) => {\n            handleSelect(slug);\n        },\n        [handleSelect],\n    );\n\n    const categories = useMemo(\n        () =>\n            Object.keys(CATEGORY_EMOJIS).map((slug) => {\n                const isSelected = selectedCategory === slug && !isSearchStringGiven;\n\n                return (\n                    <StyledMotionEmojiPickerCategory\n                        animate={{\n                            filter: `grayscale(${isSelected ? 0 : 0.75})`,\n                            opacity: isSelected ? 1 : 0.5,\n                        }}\n                        className=\"prevent-lose-focus\"\n                        initial={false}\n                        key={slug}\n                        id={slug}\n                        onClick={() => handleClick(slug as Category)}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {CATEGORY_EMOJIS[slug as Category]}\n                    </StyledMotionEmojiPickerCategory>\n                );\n            }),\n        [handleClick, isSearchStringGiven, selectedCategory],\n    );\n\n    return (\n        <StyledEmojiPickerCategories ref={combinedRef}>{categories}</StyledEmojiPickerCategories>\n    );\n};\n\nEmojiPickerCategories.displayName = 'EmojiPickerCategories';\n\nexport default EmojiPickerCategories;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.js

@@ -1,9 +1,9 @@
+// @ts-nocheck
+
 import { useCombinedRefs, useIsMeasuredClone } from '@chayns-components/core';
 import { getDevice } from 'chayns-api';
 import emojiLib from 'emojilib';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import emojiList from 'unicode-emoji-json/data-by-emoji.json';
-import emojiCategories from 'unicode-emoji-json/data-by-group.json';
 import germanEmojiLib from '../../../constants/emoji-de-DE.json';
 import { useEmojiHistory } from '../../../hooks/emojiHistory';
 import Emoji from './emoji/Emoji';
@@ -18,6 +18,20 @@ const EmojiPickerEmojis = ({
   const [shouldPreventScroll, setShouldPreventScroll] = useState(false);
   const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = useState(false);
   const [focusedIndex, setFocusedIndex] = useState(0);
+  const [emojiCategories, setEmojiCategories] = useState([]);
+  const [emojiList, setEmojiList] = useState([]);
+  useEffect(() => {
+    void import('unicode-emoji-json/data-by-group.json').then(({
+      default: categories
+    }) => {
+      setEmojiCategories(categories);
+    });
+    void import('unicode-emoji-json/data-by-emoji.json').then(({
+      default: emojis
+    }) => {
+      setEmojiList(emojis);
+    });
+  }, []);
   const [shouldPreventListener, ref] = useIsMeasuredClone();
   const emojiRef = useRef(null);
   const shouldPreventEmojiControlsRef = useRef(false);
@@ -168,7 +182,8 @@ const EmojiPickerEmojis = ({
               name,
               skin_tone_support,
               index
-            })
+            }),
+            emojiList: emojiList
           }));
         }
       });
@@ -194,7 +209,8 @@ const EmojiPickerEmojis = ({
           skin_tone_support,
           index
         }),
-        isSkinToneSupported: false
+        isSkinToneSupported: false,
+        emojiList: emojiList
       }));
     }
     return emojiCategories.find(({
@@ -218,7 +234,8 @@ const EmojiPickerEmojis = ({
         name,
         skin_tone_support,
         index
-      })
+      }),
+      emojiList: emojiList
     }));
   }, [searchString, selectedCategory, focusedIndex, shouldShowSkinTonePopup, handleRightClick, handlePopupVisibilityChange, handleSelect, historyEmojis]);
   const shouldShowNoContentInfo = !emojis || emojis.length === 0;

package/lib/esm/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerEmojis.js","names":["useCombinedRefs","useIsMeasuredClone","getDevice","emojiLib","React","useCallback","useEffect","useMemo","useRef","useState","emojiList","emojiCategories","germanEmojiLib","useEmojiHistory","Emoji","StyledEmojiPickerEmojis","StyledEmojiPickerEmojisNoContentInfo","EmojiPickerEmojis","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","shouldShowSkinTonePopup","setShouldShowSkinTonePopup","focusedIndex","setFocusedIndex","shouldPreventListener","ref","emojiRef","shouldPreventEmojiControlsRef","combinedRef","browser","addOrUpdateEmojiInHistory","historyEmojis","handlePopupVisibilityChange","isVisible","current","handleSelect","emoji","name","skin_tone_support","index","container","scrollTop","handleKeyDown","event","key","preventDefault","children","length","newIndex","ctrlKey","prevElement","tabIndex","newElement","containerRect","getBoundingClientRect","elementRect","bottom","top","dataset","skinToneSupport","document","addEventListener","removeEventListener","handleRightClick","emojis","trim","lowerSearchString","toLowerCase","searchResults","Object","entries","forEach","keywords","germanKeywords","includes","some","keyword","push","createElement","isSelected","onRightClick","isSkinToneSupported","onPopupVisibilityChange","e","map","find","slug","shouldShowNoContentInfo","$browser","$shouldPreventScroll","$shouldShowNoContentInfo","displayName"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.tsx"],"sourcesContent":["import { BrowserName, useCombinedRefs, useIsMeasuredClone } from '@chayns-components/core';\nimport { getDevice } from 'chayns-api';\nimport emojiLib from 'emojilib';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport emojiList from 'unicode-emoji-json/data-by-emoji.json';\nimport emojiCategories from 'unicode-emoji-json/data-by-group.json';\nimport germanEmojiLib from '../../../constants/emoji-de-DE.json';\nimport { useEmojiHistory } from '../../../hooks/emojiHistory';\nimport type { Category } from '../../../types/category';\nimport Emoji from './emoji/Emoji';\nimport {\n    StyledEmojiPickerEmojis,\n    StyledEmojiPickerEmojisNoContentInfo,\n} from './EmojiPickerEmojis.styles';\n\nexport type EmojiPickerEmojisProps = {\n    accessToken?: string;\n    onSelect: (emoji: string) => void;\n    personId?: string;\n    searchString: string;\n    selectedCategory: Category;\n};\n\nconst EmojiPickerEmojis: FC<EmojiPickerEmojisProps> = ({\n    accessToken,\n    onSelect,\n    personId,\n    searchString,\n    selectedCategory,\n}) => {\n    const [shouldPreventScroll, setShouldPreventScroll] = useState(false);\n    const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = useState(false);\n    const [focusedIndex, setFocusedIndex] = useState<number>(0);\n\n    const [shouldPreventListener, ref] = useIsMeasuredClone();\n\n    const emojiRef = useRef<HTMLDivElement>(null);\n    const shouldPreventEmojiControlsRef = useRef(false);\n\n    const combinedRef = useCombinedRefs(emojiRef, ref);\n\n    const { browser } = getDevice();\n\n    const { addOrUpdateEmojiInHistory, historyEmojis } = useEmojiHistory({\n        accessToken,\n        personId,\n        selectedCategory,\n    });\n\n    const handlePopupVisibilityChange = useCallback((isVisible: boolean) => {\n        setShouldShowSkinTonePopup(isVisible);\n        shouldPreventEmojiControlsRef.current = isVisible;\n        setShouldPreventScroll(isVisible);\n    }, []);\n\n    const handleSelect = useCallback(\n        ({\n            emoji,\n            name,\n            skin_tone_support,\n            index,\n        }: {\n            emoji: string;\n            name: string;\n            skin_tone_support: boolean;\n            index?: number;\n        }) => {\n            onSelect(emoji);\n\n            if (index) {\n                setFocusedIndex(index);\n            }\n\n            void addOrUpdateEmojiInHistory({ emoji, name, skin_tone_support });\n        },\n        [addOrUpdateEmojiInHistory, onSelect],\n    );\n\n    useEffect(() => {\n        if (selectedCategory) {\n            setFocusedIndex(0);\n\n            const container = emojiRef.current;\n\n            if (!container) {\n                return;\n            }\n\n            container.scrollTop = 0;\n        }\n    }, [selectedCategory]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (shouldPreventListener) {\n                return;\n            }\n\n            if (\n                !shouldPreventEmojiControlsRef.current &&\n                (event.key === 'ArrowUp' ||\n                    event.key === 'ArrowDown' ||\n                    event.key === 'ArrowLeft' ||\n                    event.key === 'ArrowRight')\n            ) {\n                event.preventDefault();\n                const children = emojiRef.current?.children;\n                if (children && children.length > 0) {\n                    const container = emojiRef.current;\n                    let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n                    if (event.ctrlKey) {\n                        return;\n                    }\n\n                    if (event.key === 'ArrowUp') {\n                        newIndex = (newIndex - 6) % children.length;\n                    } else if (event.key === 'ArrowDown') {\n                        newIndex = (newIndex + 6) % children.length;\n                    } else if (event.key === 'ArrowLeft') {\n                        newIndex = (newIndex - 1) % children.length;\n                    } else if (event.key === 'ArrowRight') {\n                        newIndex = (newIndex + 1) % children.length;\n                    }\n\n                    // remove focus from the old element\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    if (newIndex < 0) {\n                        newIndex = children.length - 1;\n                    } else if (newIndex > children.length - 1) {\n                        newIndex = 0;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    // Set focus to the element\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n\n                    const containerRect = container.getBoundingClientRect();\n                    const elementRect = newElement.getBoundingClientRect();\n\n                    if (elementRect.bottom > containerRect.bottom) {\n                        container.scrollTop += elementRect.bottom - containerRect.bottom;\n                    } else if (elementRect.top < containerRect.top) {\n                        container.scrollTop -= containerRect.top - elementRect.top;\n                    }\n                }\n            } else if (\n                event.key === 'Enter' &&\n                !shouldPreventEmojiControlsRef.current &&\n                focusedIndex !== null\n            ) {\n                if (event.ctrlKey) {\n                    setShouldShowSkinTonePopup(true);\n\n                    return;\n                }\n\n                const { dataset } = emojiRef.current?.children[focusedIndex] as HTMLDivElement;\n\n                const { emoji, name, skinToneSupport } = dataset;\n\n                if (!emoji || !name || !skinToneSupport) {\n                    return;\n                }\n\n                handleSelect({ emoji, name, skin_tone_support: skinToneSupport === 'true' });\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSelect, shouldPreventListener]);\n\n    const handleRightClick = useCallback((index: number) => {\n        setFocusedIndex(index);\n    }, []);\n\n    const emojis = useMemo(() => {\n        if (searchString.trim() !== '') {\n            const lowerSearchString = searchString.toLowerCase();\n\n            const searchResults: JSX.Element[] = [];\n\n            Object.entries(emojiList).forEach(([emoji, { name, skin_tone_support }], index) => {\n                const keywords = (emojiLib as { [key: string]: string[] })[emoji] as\n                    | string[]\n                    | undefined;\n\n                const germanKeywords = (germanEmojiLib as { [key: string]: string[] })[emoji] as\n                    | string[]\n                    | undefined;\n\n                if (\n                    name.includes(lowerSearchString) ||\n                    keywords?.some((keyword) => keyword.includes(lowerSearchString)) ||\n                    germanKeywords?.some((keyword) => keyword.includes(lowerSearchString))\n                ) {\n                    searchResults.push(\n                        <Emoji\n                            shouldShowSkinTonePopup={\n                                index === focusedIndex &&\n                                skin_tone_support &&\n                                shouldShowSkinTonePopup\n                            }\n                            isSelected={index === focusedIndex}\n                            emoji={emoji}\n                            index={index}\n                            onRightClick={handleRightClick}\n                            isSkinToneSupported={skin_tone_support}\n                            key={name}\n                            name={name}\n                            onPopupVisibilityChange={handlePopupVisibilityChange}\n                            onSelect={(e) =>\n                                handleSelect({ emoji: e, name, skin_tone_support, index })\n                            }\n                        />,\n                    );\n                }\n            });\n\n            return searchResults;\n        }\n\n        if (selectedCategory === 'history') {\n            return historyEmojis.map(({ emoji, name, skin_tone_support }, index) => (\n                <Emoji\n                    isSelected={index === focusedIndex}\n                    shouldShowSkinTonePopup={\n                        index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n                    }\n                    emoji={emoji}\n                    name={name}\n                    key={name}\n                    index={index}\n                    onRightClick={handleRightClick}\n                    onPopupVisibilityChange={handlePopupVisibilityChange}\n                    onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n                    isSkinToneSupported={false}\n                />\n            ));\n        }\n\n        return emojiCategories\n            .find(({ slug }) => slug === selectedCategory)\n            ?.emojis.map(({ emoji, name, skin_tone_support }, index) => (\n                <Emoji\n                    isSelected={index === focusedIndex}\n                    shouldShowSkinTonePopup={\n                        index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n                    }\n                    emoji={emoji}\n                    name={name}\n                    index={index}\n                    onRightClick={handleRightClick}\n                    isSkinToneSupported={skin_tone_support}\n                    key={name}\n                    onPopupVisibilityChange={handlePopupVisibilityChange}\n                    onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n                />\n            ));\n    }, [\n        searchString,\n        selectedCategory,\n        focusedIndex,\n        shouldShowSkinTonePopup,\n        handleRightClick,\n        handlePopupVisibilityChange,\n        handleSelect,\n        historyEmojis,\n    ]);\n\n    const shouldShowNoContentInfo = !emojis || emojis.length === 0;\n\n    return (\n        <StyledEmojiPickerEmojis\n            $browser={browser?.name as BrowserName}\n            $shouldPreventScroll={shouldPreventScroll}\n            $shouldShowNoContentInfo={shouldShowNoContentInfo}\n            ref={combinedRef}\n        >\n            {emojis}\n            {shouldShowNoContentInfo && (\n                <StyledEmojiPickerEmojisNoContentInfo>\n                    Hier werden die zuletzt verwendeten Emojis angezeigt, die über diese Auswahl\n                    gewählt wurden.\n                </StyledEmojiPickerEmojisNoContentInfo>\n            )}\n        </StyledEmojiPickerEmojis>\n    );\n};\n\nEmojiPickerEmojis.displayName = 'EmojiPickerEmojis';\n\nexport default EmojiPickerEmojis;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"EmojiPickerEmojis.js","names":["useCombinedRefs","useIsMeasuredClone","getDevice","emojiLib","React","useCallback","useEffect","useMemo","useRef","useState","germanEmojiLib","useEmojiHistory","Emoji","StyledEmojiPickerEmojis","StyledEmojiPickerEmojisNoContentInfo","EmojiPickerEmojis","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","shouldShowSkinTonePopup","setShouldShowSkinTonePopup","focusedIndex","setFocusedIndex","emojiCategories","setEmojiCategories","emojiList","setEmojiList","then","default","categories","emojis","shouldPreventListener","ref","emojiRef","shouldPreventEmojiControlsRef","combinedRef","browser","addOrUpdateEmojiInHistory","historyEmojis","handlePopupVisibilityChange","isVisible","current","handleSelect","emoji","name","skin_tone_support","index","container","scrollTop","handleKeyDown","event","key","preventDefault","children","length","newIndex","ctrlKey","prevElement","tabIndex","newElement","containerRect","getBoundingClientRect","elementRect","bottom","top","dataset","skinToneSupport","document","addEventListener","removeEventListener","handleRightClick","trim","lowerSearchString","toLowerCase","searchResults","Object","entries","forEach","keywords","germanKeywords","includes","some","keyword","push","createElement","isSelected","onRightClick","isSkinToneSupported","onPopupVisibilityChange","e","map","find","slug","shouldShowNoContentInfo","$browser","$shouldPreventScroll","$shouldShowNoContentInfo","displayName"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.tsx"],"sourcesContent":["// @ts-nocheck\n\nimport { BrowserName, useCombinedRefs, useIsMeasuredClone } from '@chayns-components/core';\nimport { getDevice } from 'chayns-api';\nimport emojiLib from 'emojilib';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport germanEmojiLib from '../../../constants/emoji-de-DE.json';\nimport { useEmojiHistory } from '../../../hooks/emojiHistory';\nimport type { Category } from '../../../types/category';\nimport Emoji from './emoji/Emoji';\nimport {\n    StyledEmojiPickerEmojis,\n    StyledEmojiPickerEmojisNoContentInfo,\n} from './EmojiPickerEmojis.styles';\n\nexport type EmojiPickerEmojisProps = {\n    accessToken?: string;\n    onSelect: (emoji: string) => void;\n    personId?: string;\n    searchString: string;\n    selectedCategory: Category;\n};\n\ninterface EmojiType {\n    emoji: string;\n    skin_tone_support: boolean;\n    name: string;\n    slug: string;\n    unicode_version: string;\n    emoji_version: string;\n    group?: string;\n}\n\ninterface EmojiCategory {\n    name: string;\n    slug: string;\n    emojis: EmojiType[];\n}\n\ntype EmojiData = EmojiCategory[];\ninterface EmojiDictionary {\n    [key: string]: EmojiType;\n}\n\nconst EmojiPickerEmojis: FC<EmojiPickerEmojisProps> = ({\n    accessToken,\n    onSelect,\n    personId,\n    searchString,\n    selectedCategory,\n}) => {\n    const [shouldPreventScroll, setShouldPreventScroll] = useState(false);\n    const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = useState(false);\n    const [focusedIndex, setFocusedIndex] = useState<number>(0);\n    const [emojiCategories, setEmojiCategories] = useState<EmojiData>([]);\n    const [emojiList, setEmojiList] = useState<EmojiDictionary[]>([]);\n\n    useEffect(() => {\n        void import('unicode-emoji-json/data-by-group.json').then(({ default: categories }) => {\n            setEmojiCategories(categories);\n        });\n        void import('unicode-emoji-json/data-by-emoji.json').then(({ default: emojis }) => {\n            setEmojiList(emojis);\n        });\n    }, []);\n\n    const [shouldPreventListener, ref] = useIsMeasuredClone();\n\n    const emojiRef = useRef<HTMLDivElement>(null);\n    const shouldPreventEmojiControlsRef = useRef(false);\n\n    const combinedRef = useCombinedRefs(emojiRef, ref);\n\n    const { browser } = getDevice();\n\n    const { addOrUpdateEmojiInHistory, historyEmojis } = useEmojiHistory({\n        accessToken,\n        personId,\n        selectedCategory,\n    });\n\n    const handlePopupVisibilityChange = useCallback((isVisible: boolean) => {\n        setShouldShowSkinTonePopup(isVisible);\n        shouldPreventEmojiControlsRef.current = isVisible;\n        setShouldPreventScroll(isVisible);\n    }, []);\n\n    const handleSelect = useCallback(\n        ({\n            emoji,\n            name,\n            skin_tone_support,\n            index,\n        }: {\n            emoji: string;\n            name: string;\n            skin_tone_support: boolean;\n            index?: number;\n        }) => {\n            onSelect(emoji);\n\n            if (index) {\n                setFocusedIndex(index);\n            }\n\n            void addOrUpdateEmojiInHistory({ emoji, name, skin_tone_support });\n        },\n        [addOrUpdateEmojiInHistory, onSelect],\n    );\n\n    useEffect(() => {\n        if (selectedCategory) {\n            setFocusedIndex(0);\n\n            const container = emojiRef.current;\n\n            if (!container) {\n                return;\n            }\n\n            container.scrollTop = 0;\n        }\n    }, [selectedCategory]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (shouldPreventListener) {\n                return;\n            }\n\n            if (\n                !shouldPreventEmojiControlsRef.current &&\n                (event.key === 'ArrowUp' ||\n                    event.key === 'ArrowDown' ||\n                    event.key === 'ArrowLeft' ||\n                    event.key === 'ArrowRight')\n            ) {\n                event.preventDefault();\n                const children = emojiRef.current?.children;\n                if (children && children.length > 0) {\n                    const container = emojiRef.current;\n                    let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n                    if (event.ctrlKey) {\n                        return;\n                    }\n\n                    if (event.key === 'ArrowUp') {\n                        newIndex = (newIndex - 6) % children.length;\n                    } else if (event.key === 'ArrowDown') {\n                        newIndex = (newIndex + 6) % children.length;\n                    } else if (event.key === 'ArrowLeft') {\n                        newIndex = (newIndex - 1) % children.length;\n                    } else if (event.key === 'ArrowRight') {\n                        newIndex = (newIndex + 1) % children.length;\n                    }\n\n                    // remove focus from the old element\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    if (newIndex < 0) {\n                        newIndex = children.length - 1;\n                    } else if (newIndex > children.length - 1) {\n                        newIndex = 0;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    // Set focus to the element\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n\n                    const containerRect = container.getBoundingClientRect();\n                    const elementRect = newElement.getBoundingClientRect();\n\n                    if (elementRect.bottom > containerRect.bottom) {\n                        container.scrollTop += elementRect.bottom - containerRect.bottom;\n                    } else if (elementRect.top < containerRect.top) {\n                        container.scrollTop -= containerRect.top - elementRect.top;\n                    }\n                }\n            } else if (\n                event.key === 'Enter' &&\n                !shouldPreventEmojiControlsRef.current &&\n                focusedIndex !== null\n            ) {\n                if (event.ctrlKey) {\n                    setShouldShowSkinTonePopup(true);\n\n                    return;\n                }\n\n                const { dataset } = emojiRef.current?.children[focusedIndex] as HTMLDivElement;\n\n                const { emoji, name, skinToneSupport } = dataset;\n\n                if (!emoji || !name || !skinToneSupport) {\n                    return;\n                }\n\n                handleSelect({ emoji, name, skin_tone_support: skinToneSupport === 'true' });\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSelect, shouldPreventListener]);\n\n    const handleRightClick = useCallback((index: number) => {\n        setFocusedIndex(index);\n    }, []);\n\n    const emojis = useMemo(() => {\n        if (searchString.trim() !== '') {\n            const lowerSearchString = searchString.toLowerCase();\n\n            const searchResults: JSX.Element[] = [];\n\n            Object.entries(emojiList).forEach(([emoji, { name, skin_tone_support }], index) => {\n                const keywords = (emojiLib as { [key: string]: string[] })[emoji] as\n                    | string[]\n                    | undefined;\n\n                const germanKeywords = (germanEmojiLib as { [key: string]: string[] })[emoji] as\n                    | string[]\n                    | undefined;\n\n                if (\n                    name.includes(lowerSearchString) ||\n                    keywords?.some((keyword) => keyword.includes(lowerSearchString)) ||\n                    germanKeywords?.some((keyword) => keyword.includes(lowerSearchString))\n                ) {\n                    searchResults.push(\n                        <Emoji\n                            shouldShowSkinTonePopup={\n                                index === focusedIndex &&\n                                skin_tone_support &&\n                                shouldShowSkinTonePopup\n                            }\n                            isSelected={index === focusedIndex}\n                            emoji={emoji}\n                            index={index}\n                            onRightClick={handleRightClick}\n                            isSkinToneSupported={skin_tone_support}\n                            key={name}\n                            name={name}\n                            onPopupVisibilityChange={handlePopupVisibilityChange}\n                            onSelect={(e) =>\n                                handleSelect({ emoji: e, name, skin_tone_support, index })\n                            }\n                            emojiList={emojiList}\n                        />,\n                    );\n                }\n            });\n\n            return searchResults;\n        }\n\n        if (selectedCategory === 'history') {\n            return historyEmojis.map(({ emoji, name, skin_tone_support }, index) => (\n                <Emoji\n                    isSelected={index === focusedIndex}\n                    shouldShowSkinTonePopup={\n                        index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n                    }\n                    emoji={emoji}\n                    name={name}\n                    key={name}\n                    index={index}\n                    onRightClick={handleRightClick}\n                    onPopupVisibilityChange={handlePopupVisibilityChange}\n                    onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n                    isSkinToneSupported={false}\n                    emojiList={emojiList}\n                />\n            ));\n        }\n\n        return emojiCategories\n            .find(({ slug }) => slug === selectedCategory)\n            ?.emojis.map(({ emoji, name, skin_tone_support }, index) => (\n                <Emoji\n                    isSelected={index === focusedIndex}\n                    shouldShowSkinTonePopup={\n                        index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n                    }\n                    emoji={emoji}\n                    name={name}\n                    index={index}\n                    onRightClick={handleRightClick}\n                    isSkinToneSupported={skin_tone_support}\n                    key={name}\n                    onPopupVisibilityChange={handlePopupVisibilityChange}\n                    onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n                    emojiList={emojiList}\n                />\n            ));\n    }, [\n        searchString,\n        selectedCategory,\n        focusedIndex,\n        shouldShowSkinTonePopup,\n        handleRightClick,\n        handlePopupVisibilityChange,\n        handleSelect,\n        historyEmojis,\n    ]);\n\n    const shouldShowNoContentInfo = !emojis || emojis.length === 0;\n\n    return (\n        <StyledEmojiPickerEmojis\n            $browser={browser?.name as BrowserName}\n            $shouldPreventScroll={shouldPreventScroll}\n            $shouldShowNoContentInfo={shouldShowNoContentInfo}\n            ref={combinedRef}\n        >\n            {emojis}\n            {shouldShowNoContentInfo && (\n                <StyledEmojiPickerEmojisNoContentInfo>\n                    Hier werden die zuletzt verwendeten Emojis angezeigt, die über diese Auswahl\n                    gewählt wurden.\n                </StyledEmojiPickerEmojisNoContentInfo>\n            )}\n        </StyledEmojiPickerEmojis>\n    );\n};\n\nEmojiPickerEmojis.displayName = 'EmojiPickerEmojis';\n\nexport default EmojiPickerEmojis;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.js

@@ -13,7 +13,8 @@ const Emoji = ({
   onSelect,
   shouldShowSkinTonePopup,
   onRightClick,
-  index
+  index,
+  emojiList
 }) => {
   const [shouldShowPopup, setShouldShowPopup] = useState(false);
   const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = useState(AnchorAlignment.Top);
@@ -127,7 +128,8 @@ const Emoji = ({
     onHidePopup: handleHidePopup,
     onSelect: onSelect,
     overlayPosition: skinTonePopupOverlayPosition,
-    position: skinTonePopupPosition
+    position: skinTonePopupPosition,
+    emojiList: emojiList
   })));
 };
 Emoji.displayName = 'Emoji';

package/lib/esm/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.js.map

@@ -1 +1 @@
-{"version":3,"file":"Emoji.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","AnchorAlignment","StyledEmoji","SkinTonePopup","skinTonePopupContentSize","Emoji","emoji","isSelected","name","isSkinToneSupported","onPopupVisibilityChange","onSelect","shouldShowSkinTonePopup","onRightClick","index","shouldShowPopup","setShouldShowPopup","skinTonePopupAnchorAlignment","setSkinTonePopupAnchorAlignment","Top","skinTonePopupAnchorOffset","setSkinTonePopupAnchorOffset","skinTonePopupOverlayPosition","setSkinTonePopupOverlayPosition","top","skinTonePopupPosition","setSkinTonePopupPosition","left","emojiRef","handleClick","calculatePopupPosition","current","element","parentElement","height","elementHeight","elementLeft","elementTop","width","elementWidth","getBoundingClientRect","parentHeight","parentLeft","parentTop","parentWidth","scrollTop","anchorAlignment","anchorOffset","maxLeft","minLeft","Bottom","handleContextMenu","event","preventDefault","stopPropagation","handleHidePopup","createElement","ref","$isSelected","className","onClick","onContextMenu","initial","key","onHidePopup","overlayPosition","position","displayName"],"sources":["../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { AnchorAlignment } from '../../../../constants/alignment';\nimport { StyledEmoji } from './Emoji.styles';\nimport SkinTonePopup, { SkinTonePopupProps } from './skin-tone-popup/SkinTonePopup';\nimport { skinTonePopupContentSize } from './skin-tone-popup/SkinTonePopup.styles';\n\nexport type EmojiProps = {\n    emoji: string;\n    isSelected: boolean;\n    name: string;\n    index: number;\n    isSkinToneSupported: boolean;\n    onPopupVisibilityChange: (isVisible: boolean) => void;\n    onSelect: (emoji: string) => void;\n    onRightClick: (newIndex: number) => void;\n    shouldShowSkinTonePopup: boolean;\n};\n\nconst Emoji: FC<EmojiProps> = ({\n    emoji,\n    isSelected,\n    name,\n    isSkinToneSupported,\n    onPopupVisibilityChange,\n    onSelect,\n    shouldShowSkinTonePopup,\n    onRightClick,\n    index,\n}) => {\n    const [shouldShowPopup, setShouldShowPopup] = useState(false);\n    const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = useState(\n        AnchorAlignment.Top,\n    );\n    const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = useState(0);\n    const [skinTonePopupOverlayPosition, setSkinTonePopupOverlayPosition] = useState<\n        SkinTonePopupProps['overlayPosition']\n    >({ top: 0 });\n    const [skinTonePopupPosition, setSkinTonePopupPosition] = useState<\n        SkinTonePopupProps['position']\n    >({ left: 0, top: 0 });\n\n    const emojiRef = useRef<HTMLDivElement>(null);\n\n    const handleClick = useCallback(() => {\n        onSelect(emoji);\n    }, [emoji, onSelect]);\n\n    const calculatePopupPosition = useCallback(() => {\n        if (!emojiRef.current) {\n            return;\n        }\n\n        const element = emojiRef.current;\n        const { parentElement } = emojiRef.current;\n\n        if (parentElement) {\n            const {\n                height: elementHeight,\n                left: elementLeft,\n                top: elementTop,\n                width: elementWidth,\n            } = element.getBoundingClientRect();\n\n            const {\n                height: parentHeight,\n                left: parentLeft,\n                top: parentTop,\n                width: parentWidth,\n            } = parentElement.getBoundingClientRect();\n\n            const { scrollTop } = parentElement;\n\n            let anchorAlignment = AnchorAlignment.Top;\n            let anchorOffset = 0;\n\n            let left =\n                elementLeft - parentLeft - skinTonePopupContentSize.width / 2 + elementWidth / 2;\n\n            let top = elementTop - parentTop + elementHeight + scrollTop;\n\n            const maxLeft = parentWidth - skinTonePopupContentSize.width - 12;\n            const minLeft = 12;\n\n            if (left < minLeft) {\n                anchorOffset = left - minLeft;\n                left = minLeft;\n            } else if (left > maxLeft) {\n                anchorOffset = left - maxLeft;\n                left = maxLeft;\n            }\n\n            if (top + skinTonePopupContentSize.height > parentHeight + scrollTop) {\n                anchorAlignment = AnchorAlignment.Bottom;\n                top -= elementHeight + skinTonePopupContentSize.height;\n            }\n\n            if (isSkinToneSupported) {\n                setSkinTonePopupAnchorAlignment(anchorAlignment);\n                setSkinTonePopupAnchorOffset(anchorOffset);\n                setSkinTonePopupPosition({ left, top });\n                setSkinTonePopupOverlayPosition({ top: scrollTop });\n                setShouldShowPopup(true);\n            }\n        }\n    }, [isSkinToneSupported]);\n\n    const handleContextMenu = useCallback(\n        (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            if (isSkinToneSupported) {\n                onRightClick(index);\n                calculatePopupPosition();\n            }\n        },\n        [calculatePopupPosition, index, isSkinToneSupported, onRightClick],\n    );\n\n    useEffect(() => {\n        if (\n            emojiRef.current &&\n            shouldShowSkinTonePopup &&\n            skinTonePopupPosition.top === 0 &&\n            skinTonePopupPosition.left === 0\n        ) {\n            calculatePopupPosition();\n        }\n    }, [\n        calculatePopupPosition,\n        index,\n        isSkinToneSupported,\n        shouldShowSkinTonePopup,\n        skinTonePopupPosition,\n    ]);\n\n    useEffect(() => {\n        if (shouldShowSkinTonePopup) {\n            setShouldShowPopup(shouldShowSkinTonePopup);\n        }\n    }, [shouldShowSkinTonePopup]);\n\n    const handleHidePopup = useCallback(() => {\n        setShouldShowPopup(false);\n    }, []);\n\n    useEffect(() => {\n        onPopupVisibilityChange(shouldShowPopup);\n    }, [onPopupVisibilityChange, shouldShowPopup]);\n\n    return (\n        <StyledEmoji\n            ref={emojiRef}\n            $isSelected={isSelected}\n            data-emoji={emoji}\n            data-name={name}\n            data-skin-tone-support={isSkinToneSupported}\n            className=\"prevent-lose-focus\"\n            onClick={handleClick}\n            onContextMenu={handleContextMenu}\n        >\n            {emoji}\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <SkinTonePopup\n                        anchorAlignment={skinTonePopupAnchorAlignment}\n                        anchorOffset={skinTonePopupAnchorOffset}\n                        emoji={emoji}\n                        key={emoji}\n                        onHidePopup={handleHidePopup}\n                        onSelect={onSelect}\n                        overlayPosition={skinTonePopupOverlayPosition}\n                        position={skinTonePopupPosition}\n                    />\n                )}\n            </AnimatePresence>\n        </StyledEmoji>\n    );\n};\n\nEmoji.displayName = 'Emoji';\n\nexport default Emoji;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Emoji.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","AnchorAlignment","StyledEmoji","SkinTonePopup","skinTonePopupContentSize","Emoji","emoji","isSelected","name","isSkinToneSupported","onPopupVisibilityChange","onSelect","shouldShowSkinTonePopup","onRightClick","index","emojiList","shouldShowPopup","setShouldShowPopup","skinTonePopupAnchorAlignment","setSkinTonePopupAnchorAlignment","Top","skinTonePopupAnchorOffset","setSkinTonePopupAnchorOffset","skinTonePopupOverlayPosition","setSkinTonePopupOverlayPosition","top","skinTonePopupPosition","setSkinTonePopupPosition","left","emojiRef","handleClick","calculatePopupPosition","current","element","parentElement","height","elementHeight","elementLeft","elementTop","width","elementWidth","getBoundingClientRect","parentHeight","parentLeft","parentTop","parentWidth","scrollTop","anchorAlignment","anchorOffset","maxLeft","minLeft","Bottom","handleContextMenu","event","preventDefault","stopPropagation","handleHidePopup","createElement","ref","$isSelected","className","onClick","onContextMenu","initial","key","onHidePopup","overlayPosition","position","displayName"],"sources":["../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { AnchorAlignment } from '../../../../constants/alignment';\nimport { StyledEmoji } from './Emoji.styles';\nimport SkinTonePopup, { SkinTonePopupProps } from './skin-tone-popup/SkinTonePopup';\nimport { skinTonePopupContentSize } from './skin-tone-popup/SkinTonePopup.styles';\n\nexport type EmojiProps = {\n    emoji: string;\n    isSelected: boolean;\n    name: string;\n    index: number;\n    isSkinToneSupported: boolean;\n    onPopupVisibilityChange: (isVisible: boolean) => void;\n    onSelect: (emoji: string) => void;\n    onRightClick: (newIndex: number) => void;\n    shouldShowSkinTonePopup: boolean;\n    emojiList: { [x: string]: { skin_tone_support: any } };\n};\n\nconst Emoji: FC<EmojiProps> = ({\n    emoji,\n    isSelected,\n    name,\n    isSkinToneSupported,\n    onPopupVisibilityChange,\n    onSelect,\n    shouldShowSkinTonePopup,\n    onRightClick,\n    index,\n    emojiList,\n}) => {\n    const [shouldShowPopup, setShouldShowPopup] = useState(false);\n    const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = useState(\n        AnchorAlignment.Top,\n    );\n    const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = useState(0);\n    const [skinTonePopupOverlayPosition, setSkinTonePopupOverlayPosition] = useState<\n        SkinTonePopupProps['overlayPosition']\n    >({ top: 0 });\n    const [skinTonePopupPosition, setSkinTonePopupPosition] = useState<\n        SkinTonePopupProps['position']\n    >({ left: 0, top: 0 });\n\n    const emojiRef = useRef<HTMLDivElement>(null);\n\n    const handleClick = useCallback(() => {\n        onSelect(emoji);\n    }, [emoji, onSelect]);\n\n    const calculatePopupPosition = useCallback(() => {\n        if (!emojiRef.current) {\n            return;\n        }\n\n        const element = emojiRef.current;\n        const { parentElement } = emojiRef.current;\n\n        if (parentElement) {\n            const {\n                height: elementHeight,\n                left: elementLeft,\n                top: elementTop,\n                width: elementWidth,\n            } = element.getBoundingClientRect();\n\n            const {\n                height: parentHeight,\n                left: parentLeft,\n                top: parentTop,\n                width: parentWidth,\n            } = parentElement.getBoundingClientRect();\n\n            const { scrollTop } = parentElement;\n\n            let anchorAlignment = AnchorAlignment.Top;\n            let anchorOffset = 0;\n\n            let left =\n                elementLeft - parentLeft - skinTonePopupContentSize.width / 2 + elementWidth / 2;\n\n            let top = elementTop - parentTop + elementHeight + scrollTop;\n\n            const maxLeft = parentWidth - skinTonePopupContentSize.width - 12;\n            const minLeft = 12;\n\n            if (left < minLeft) {\n                anchorOffset = left - minLeft;\n                left = minLeft;\n            } else if (left > maxLeft) {\n                anchorOffset = left - maxLeft;\n                left = maxLeft;\n            }\n\n            if (top + skinTonePopupContentSize.height > parentHeight + scrollTop) {\n                anchorAlignment = AnchorAlignment.Bottom;\n                top -= elementHeight + skinTonePopupContentSize.height;\n            }\n\n            if (isSkinToneSupported) {\n                setSkinTonePopupAnchorAlignment(anchorAlignment);\n                setSkinTonePopupAnchorOffset(anchorOffset);\n                setSkinTonePopupPosition({ left, top });\n                setSkinTonePopupOverlayPosition({ top: scrollTop });\n                setShouldShowPopup(true);\n            }\n        }\n    }, [isSkinToneSupported]);\n\n    const handleContextMenu = useCallback(\n        (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            if (isSkinToneSupported) {\n                onRightClick(index);\n                calculatePopupPosition();\n            }\n        },\n        [calculatePopupPosition, index, isSkinToneSupported, onRightClick],\n    );\n\n    useEffect(() => {\n        if (\n            emojiRef.current &&\n            shouldShowSkinTonePopup &&\n            skinTonePopupPosition.top === 0 &&\n            skinTonePopupPosition.left === 0\n        ) {\n            calculatePopupPosition();\n        }\n    }, [\n        calculatePopupPosition,\n        index,\n        isSkinToneSupported,\n        shouldShowSkinTonePopup,\n        skinTonePopupPosition,\n    ]);\n\n    useEffect(() => {\n        if (shouldShowSkinTonePopup) {\n            setShouldShowPopup(shouldShowSkinTonePopup);\n        }\n    }, [shouldShowSkinTonePopup]);\n\n    const handleHidePopup = useCallback(() => {\n        setShouldShowPopup(false);\n    }, []);\n\n    useEffect(() => {\n        onPopupVisibilityChange(shouldShowPopup);\n    }, [onPopupVisibilityChange, shouldShowPopup]);\n\n    return (\n        <StyledEmoji\n            ref={emojiRef}\n            $isSelected={isSelected}\n            data-emoji={emoji}\n            data-name={name}\n            data-skin-tone-support={isSkinToneSupported}\n            className=\"prevent-lose-focus\"\n            onClick={handleClick}\n            onContextMenu={handleContextMenu}\n        >\n            {emoji}\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <SkinTonePopup\n                        anchorAlignment={skinTonePopupAnchorAlignment}\n                        anchorOffset={skinTonePopupAnchorOffset}\n                        emoji={emoji}\n                        key={emoji}\n                        onHidePopup={handleHidePopup}\n                        onSelect={onSelect}\n                        overlayPosition={skinTonePopupOverlayPosition}\n                        position={skinTonePopupPosition}\n                        emojiList={emojiList}\n                    />\n                )}\n            </AnimatePresence>\n        </StyledEmoji>\n    );\n};\n\nEmoji.displayName = 'Emoji';\n\nexport default Emoji;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.js

@@ -9,7 +9,8 @@ const SkinTonePopup = ({
   onHidePopup,
   onSelect,
   overlayPosition,
-  position
+  position,
+  emojiList
 }) => {
   const [focusedIndex, setFocusedIndex] = useState(0);
   const skinToneRef = useRef(null);
@@ -74,7 +75,7 @@ const SkinTonePopup = ({
     const result = [];
     Object.entries(emojiComponents).forEach(([key, value], index) => {
       if (key.includes('skin_tone')) {
-        const emojiWithSkinTone = addSkinToneToEmoji(emoji, value);
+        const emojiWithSkinTone = addSkinToneToEmoji(emojiList, emoji, value);
         const handleClick = event => {
           event.preventDefault();
           event.stopPropagation();
@@ -90,7 +91,7 @@ const SkinTonePopup = ({
       }
     });
     return result;
-  }, [emoji, focusedIndex, onHidePopup, onSelect]);
+  }, [emoji, emojiList, focusedIndex, onHidePopup, onSelect]);
   return /*#__PURE__*/React.createElement(StyledMotionSkinTonePopup, {
     animate: {
       opacity: 1

package/lib/esm/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkinTonePopup.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","emojiComponents","addSkinToneToEmoji","StyledMotionSkinTonePopup","StyledSkinTonePopupContent","StyledSkinTonePopupContentEmoji","StyledSkinTonePopupOverlay","SkinTonePopup","anchorAlignment","anchorOffset","emoji","onHidePopup","onSelect","overlayPosition","position","focusedIndex","setFocusedIndex","skinToneRef","handleOverlayClick","event","preventDefault","stopPropagation","handleKeyDown","key","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","dataset","skinTone","shiftKey","document","addEventListener","removeEventListener","emojis","result","Object","entries","forEach","value","index","includes","emojiWithSkinTone","handleClick","push","createElement","$isSelected","onClick","animate","opacity","exit","initial","transition","duration","ref","$anchorAlignment","$anchorOffset","style","displayName"],"sources":["../../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.tsx"],"sourcesContent":["import React, { FC, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport emojiComponents from 'unicode-emoji-json/data-emoji-components.json';\nimport type { AnchorAlignment } from '../../../../../constants/alignment';\nimport { addSkinToneToEmoji } from '../../../../../utils/emoji';\nimport {\n    StyledMotionSkinTonePopup,\n    StyledSkinTonePopupContent,\n    StyledSkinTonePopupContentEmoji,\n    StyledSkinTonePopupOverlay,\n} from './SkinTonePopup.styles';\n\nexport type SkinTonePopupProps = {\n    anchorAlignment: AnchorAlignment;\n    anchorOffset: number;\n    emoji: string;\n    onHidePopup: VoidFunction;\n    onSelect: (emojiWithSkinTone: string) => void;\n    overlayPosition: { top: number };\n    position: { left: number; top: number };\n};\n\nconst SkinTonePopup: FC<SkinTonePopupProps> = ({\n    anchorAlignment,\n    anchorOffset,\n    emoji,\n    onHidePopup,\n    onSelect,\n    overlayPosition,\n    position,\n}) => {\n    const [focusedIndex, setFocusedIndex] = useState<number>(0);\n\n    const skinToneRef = useRef<HTMLDivElement>(null);\n\n    const handleOverlayClick = useCallback(\n        (event: MouseEvent<HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            onHidePopup();\n        },\n        [onHidePopup],\n    );\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n                event.preventDefault();\n                const children = skinToneRef.current?.children;\n                if (children && children.length > 0) {\n                    let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n                    if (event.key === 'ArrowLeft') {\n                        newIndex = (newIndex - 1) % children.length;\n                    } else if (event.key === 'ArrowRight') {\n                        newIndex = (newIndex + 1) % children.length;\n                    }\n\n                    // remove focus from the old element\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    if (newIndex < 0) {\n                        newIndex = children.length - 1;\n                    } else if (newIndex > children.length - 1) {\n                        newIndex = 0;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    // Set focus to the element\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (event.key === 'Enter' && focusedIndex !== null) {\n                const { dataset } = skinToneRef.current?.children[focusedIndex] as HTMLDivElement;\n\n                const { skinTone } = dataset;\n\n                if (!skinTone) {\n                    return;\n                }\n\n                onSelect(skinTone);\n\n                onHidePopup();\n            } else if (event.key === 'Escape' && event.shiftKey) {\n                event.preventDefault();\n\n                onHidePopup();\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, onHidePopup, onSelect]);\n\n    const emojis = useMemo(() => {\n        const result: JSX.Element[] = [];\n\n        Object.entries(emojiComponents).forEach(([key, value], index) => {\n            if (key.includes('skin_tone')) {\n                const emojiWithSkinTone = addSkinToneToEmoji(emoji, value);\n\n                const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    onSelect(emojiWithSkinTone);\n\n                    onHidePopup();\n                };\n\n                result.push(\n                    <StyledSkinTonePopupContentEmoji\n                        key={key}\n                        data-skin-tone={emojiWithSkinTone}\n                        $isSelected={index === focusedIndex}\n                        onClick={handleClick}\n                    >\n                        {emojiWithSkinTone}\n                    </StyledSkinTonePopupContentEmoji>,\n                );\n            }\n        });\n\n        return result;\n    }, [emoji, focusedIndex, onHidePopup, onSelect]);\n\n    return (\n        <StyledMotionSkinTonePopup\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            initial={{ opacity: 0 }}\n            transition={{ duration: 0.1 }}\n        >\n            <StyledSkinTonePopupContent\n                ref={skinToneRef}\n                $anchorAlignment={anchorAlignment}\n                $anchorOffset={anchorOffset}\n                style={position}\n            >\n                {emojis}\n            </StyledSkinTonePopupContent>\n            <StyledSkinTonePopupOverlay onClick={handleOverlayClick} style={overlayPosition} />\n        </StyledMotionSkinTonePopup>\n    );\n};\n\nSkinTonePopup.displayName = 'SkinTonePopup';\n\nexport default SkinTonePopup;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SkinTonePopup.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","emojiComponents","addSkinToneToEmoji","StyledMotionSkinTonePopup","StyledSkinTonePopupContent","StyledSkinTonePopupContentEmoji","StyledSkinTonePopupOverlay","SkinTonePopup","anchorAlignment","anchorOffset","emoji","onHidePopup","onSelect","overlayPosition","position","emojiList","focusedIndex","setFocusedIndex","skinToneRef","handleOverlayClick","event","preventDefault","stopPropagation","handleKeyDown","key","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","dataset","skinTone","shiftKey","document","addEventListener","removeEventListener","emojis","result","Object","entries","forEach","value","index","includes","emojiWithSkinTone","handleClick","push","createElement","$isSelected","onClick","animate","opacity","exit","initial","transition","duration","ref","$anchorAlignment","$anchorOffset","style","displayName"],"sources":["../../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.tsx"],"sourcesContent":["import React, { FC, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport emojiComponents from 'unicode-emoji-json/data-emoji-components.json';\nimport type { AnchorAlignment } from '../../../../../constants/alignment';\nimport { addSkinToneToEmoji } from '../../../../../utils/emoji';\nimport {\n    StyledMotionSkinTonePopup,\n    StyledSkinTonePopupContent,\n    StyledSkinTonePopupContentEmoji,\n    StyledSkinTonePopupOverlay,\n} from './SkinTonePopup.styles';\n\nexport type SkinTonePopupProps = {\n    anchorAlignment: AnchorAlignment;\n    anchorOffset: number;\n    emoji: string;\n    onHidePopup: VoidFunction;\n    onSelect: (emojiWithSkinTone: string) => void;\n    overlayPosition: { top: number };\n    position: { left: number; top: number };\n    emojiList: { [x: string]: { skin_tone_support: any } };\n};\n\nconst SkinTonePopup: FC<SkinTonePopupProps> = ({\n    anchorAlignment,\n    anchorOffset,\n    emoji,\n    onHidePopup,\n    onSelect,\n    overlayPosition,\n    position,\n    emojiList,\n}) => {\n    const [focusedIndex, setFocusedIndex] = useState<number>(0);\n\n    const skinToneRef = useRef<HTMLDivElement>(null);\n\n    const handleOverlayClick = useCallback(\n        (event: MouseEvent<HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            onHidePopup();\n        },\n        [onHidePopup],\n    );\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n                event.preventDefault();\n                const children = skinToneRef.current?.children;\n                if (children && children.length > 0) {\n                    let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n                    if (event.key === 'ArrowLeft') {\n                        newIndex = (newIndex - 1) % children.length;\n                    } else if (event.key === 'ArrowRight') {\n                        newIndex = (newIndex + 1) % children.length;\n                    }\n\n                    // remove focus from the old element\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    if (newIndex < 0) {\n                        newIndex = children.length - 1;\n                    } else if (newIndex > children.length - 1) {\n                        newIndex = 0;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    // Set focus to the element\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (event.key === 'Enter' && focusedIndex !== null) {\n                const { dataset } = skinToneRef.current?.children[focusedIndex] as HTMLDivElement;\n\n                const { skinTone } = dataset;\n\n                if (!skinTone) {\n                    return;\n                }\n\n                onSelect(skinTone);\n\n                onHidePopup();\n            } else if (event.key === 'Escape' && event.shiftKey) {\n                event.preventDefault();\n\n                onHidePopup();\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, onHidePopup, onSelect]);\n\n    const emojis = useMemo(() => {\n        const result: JSX.Element[] = [];\n\n        Object.entries(emojiComponents).forEach(([key, value], index) => {\n            if (key.includes('skin_tone')) {\n                const emojiWithSkinTone = addSkinToneToEmoji(emojiList, emoji, value);\n\n                const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    onSelect(emojiWithSkinTone);\n\n                    onHidePopup();\n                };\n\n                result.push(\n                    <StyledSkinTonePopupContentEmoji\n                        key={key}\n                        data-skin-tone={emojiWithSkinTone}\n                        $isSelected={index === focusedIndex}\n                        onClick={handleClick}\n                    >\n                        {emojiWithSkinTone}\n                    </StyledSkinTonePopupContentEmoji>,\n                );\n            }\n        });\n\n        return result;\n    }, [emoji, emojiList, focusedIndex, onHidePopup, onSelect]);\n\n    return (\n        <StyledMotionSkinTonePopup\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            initial={{ opacity: 0 }}\n            transition={{ duration: 0.1 }}\n        >\n            <StyledSkinTonePopupContent\n                ref={skinToneRef}\n                $anchorAlignment={anchorAlignment}\n                $anchorOffset={anchorOffset}\n                style={position}\n            >\n                {emojis}\n            </StyledSkinTonePopupContent>\n            <StyledSkinTonePopupOverlay onClick={handleOverlayClick} style={overlayPosition} />\n        </StyledMotionSkinTonePopup>\n    );\n};\n\nSkinTonePopup.displayName = 'SkinTonePopup';\n\nexport default SkinTonePopup;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/utils/emoji.js

@@ -1,4 +1,3 @@
-import emojiList from 'unicode-emoji-json/data-by-emoji.json';
 import { asciiList, regAscii, regShortnames, shortNameList } from '../constants/emoji';
 const convert = unicode => {
   if (unicode.indexOf('-') > -1) {
@@ -79,10 +78,9 @@ export const convertEmojisToUnicode = text => {
   });
   return result;
 };
-export const addSkinToneToEmoji = (emoji, skinTone) => emoji.split('\u{200D}').map(rawEmoji => {
+export const addSkinToneToEmoji = (emojiList, emoji, skinTone) => emoji.split('\u{200D}').map(rawEmoji => {
   const parts = [rawEmoji.replace(/\ufe0f/, '')];
 
-  // @ts-expect-error: Difficult to type external json file
   // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   if (emojiList[rawEmoji]?.skin_tone_support) {
     parts.push(skinTone);

package/lib/esm/utils/emoji.js.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.js","names":["emojiList","asciiList","regAscii","regShortnames","shortNameList","convert","unicode","indexOf","parts","s","split","i","length","part","parseInt","hi","Math","floor","lo","String","fromCharCode","push","join","unescapeHTML","text","unescaped","replace","match","escapeHTML","escaped","convertEmojisToUnicode","result","fullMatch","shortname","toUpperCase","m1","m2","m3","addSkinToneToEmoji","emoji","skinTone","map","rawEmoji","skin_tone_support"],"sources":["../../../src/utils/emoji.ts"],"sourcesContent":["import emojiList from 'unicode-emoji-json/data-by-emoji.json';\nimport { asciiList, regAscii, regShortnames, shortNameList } from '../constants/emoji';\n\nconst convert = (unicode: string) => {\n    if (unicode.indexOf('-') > -1) {\n        const parts = [];\n\n        const s = unicode.split('-');\n\n        for (let i = 0; i < s.length; i++) {\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            let part: number | string = parseInt(s[i]!, 16);\n\n            if (part >= 0x10000 && part <= 0x10ffff) {\n                const hi = Math.floor((part - 0x10000) / 0x400) + 0xd800;\n                const lo = ((part - 0x10000) % 0x400) + 0xdc00;\n\n                part = String.fromCharCode(hi) + String.fromCharCode(lo);\n            } else {\n                part = String.fromCharCode(part);\n            }\n\n            parts.push(part);\n        }\n\n        return parts.join('');\n    }\n\n    const s = parseInt(unicode, 16);\n\n    if (s >= 0x10000 && s <= 0x10ffff) {\n        const hi = Math.floor((s - 0x10000) / 0x400) + 0xd800;\n        const lo = ((s - 0x10000) % 0x400) + 0xdc00;\n\n        return String.fromCharCode(hi) + String.fromCharCode(lo);\n    }\n\n    return String.fromCharCode(s);\n};\n\nexport const unescapeHTML = (text: string) => {\n    const unescaped: { [key: string]: string } = {\n        '&amp;': '&',\n        '&#38;': '&',\n        '&#x26;': '&',\n        '&lt;': '<',\n        '&#60;': '<',\n        '&#x3C;': '<',\n        '&gt;': '>',\n        '&#62;': '>',\n        '&#x3E;': '>',\n        '&quot;': '\"',\n        '&#34;': '\"',\n        '&#x22;': '\"',\n        '&apos;': \"'\",\n        '&#39;': \"'\",\n        '&#x27;': \"'\",\n    };\n\n    return text.replace(\n        /&(?:amp|#38|#x26|lt|#60|#x3C|gt|#62|#x3E|apos|#39|#x27|quot|#34|#x22);/gi,\n        (match) => unescaped[match] ?? match,\n    );\n};\n\nexport const escapeHTML = (text: string) => {\n    const escaped: { [key: string]: string } = {\n        '<': '&lt;',\n        '>': '&gt;',\n        '\"': '&quot;',\n        \"'\": '&apos;',\n    };\n\n    return text.replace(/[&<>\"']/g, (match) => escaped[match] ?? match);\n};\n\nexport const convertEmojisToUnicode = (text: string): string => {\n    let result = text;\n\n    result = result.replace(/https?:\\/\\/.*?(?=$|\\s)/gi, (fullMatch) =>\n        fullMatch.replace(/:/g, '%3A'),\n    );\n\n    result = result.replace(regShortnames, (shortname) => {\n        if (shortname) {\n            const unicode = shortNameList[shortname];\n\n            if (unicode) {\n                return convert(unicode.toUpperCase());\n            }\n        }\n\n        return shortname;\n    });\n\n    result = result.replace(/https?%3A\\/\\/.*?(?=$|\\s)/gi, (fullMatch) =>\n        fullMatch.replace(/%3A/g, ':'),\n    );\n\n    result = result.replace(regAscii, (fullMatch, m1, m2, m3) => {\n        if (typeof m3 === 'string' && m3 !== '') {\n            const unicode = asciiList[unescapeHTML(m3)];\n\n            if (unicode) {\n                return (m2 as string) + convert(unicode.toUpperCase());\n            }\n        }\n\n        return fullMatch;\n    });\n\n    return result;\n};\n\nexport const addSkinToneToEmoji = (emoji: string, skinTone: string): string =>\n    emoji\n        .split('\\u{200D}')\n        .map((rawEmoji) => {\n            const parts = [rawEmoji.replace(/\\ufe0f/, '')];\n\n            // @ts-expect-error: Difficult to type external json file\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n            if (emojiList[rawEmoji]?.skin_tone_support) {\n                parts.push(skinTone);\n            }\n\n            return parts.join('');\n        })\n        .join('\\u{200D}');\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,uCAAuC;AAC7D,SAASC,SAAS,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,aAAa,QAAQ,oBAAoB;AAEtF,MAAMC,OAAO,GAAIC,OAAe,IAAK;EACjC,IAAIA,OAAO,CAACC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE;IAC3B,MAAMC,KAAK,GAAG,EAAE;IAEhB,MAAMC,CAAC,GAAGH,OAAO,CAACI,KAAK,CAAC,GAAG,CAAC;IAE5B,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,CAAC,CAACG,MAAM,EAAED,CAAC,EAAE,EAAE;MAC/B;MACA,IAAIE,IAAqB,GAAGC,QAAQ,CAACL,CAAC,CAACE,CAAC,CAAC,EAAG,EAAE,CAAC;MAE/C,IAAIE,IAAI,IAAI,OAAO,IAAIA,IAAI,IAAI,QAAQ,EAAE;QACrC,MAAME,EAAE,GAAGC,IAAI,CAACC,KAAK,CAAC,CAACJ,IAAI,GAAG,OAAO,IAAI,KAAK,CAAC,GAAG,MAAM;QACxD,MAAMK,EAAE,GAAI,CAACL,IAAI,GAAG,OAAO,IAAI,KAAK,GAAI,MAAM;QAE9CA,IAAI,GAAGM,MAAM,CAACC,YAAY,CAACL,EAAE,CAAC,GAAGI,MAAM,CAACC,YAAY,CAACF,EAAE,CAAC;MAC5D,CAAC,MAAM;QACHL,IAAI,GAAGM,MAAM,CAACC,YAAY,CAACP,IAAI,CAAC;MACpC;MAEAL,KAAK,CAACa,IAAI,CAACR,IAAI,CAAC;IACpB;IAEA,OAAOL,KAAK,CAACc,IAAI,CAAC,EAAE,CAAC;EACzB;EAEA,MAAMb,CAAC,GAAGK,QAAQ,CAACR,OAAO,EAAE,EAAE,CAAC;EAE/B,IAAIG,CAAC,IAAI,OAAO,IAAIA,CAAC,IAAI,QAAQ,EAAE;IAC/B,MAAMM,EAAE,GAAGC,IAAI,CAACC,KAAK,CAAC,CAACR,CAAC,GAAG,OAAO,IAAI,KAAK,CAAC,GAAG,MAAM;IACrD,MAAMS,EAAE,GAAI,CAACT,CAAC,GAAG,OAAO,IAAI,KAAK,GAAI,MAAM;IAE3C,OAAOU,MAAM,CAACC,YAAY,CAACL,EAAE,CAAC,GAAGI,MAAM,CAACC,YAAY,CAACF,EAAE,CAAC;EAC5D;EAEA,OAAOC,MAAM,CAACC,YAAY,CAACX,CAAC,CAAC;AACjC,CAAC;AAED,OAAO,MAAMc,YAAY,GAAIC,IAAY,IAAK;EAC1C,MAAMC,SAAoC,GAAG;IACzC,OAAO,EAAE,GAAG;IACZ,OAAO,EAAE,GAAG;IACZ,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,GAAG;IACX,OAAO,EAAE,GAAG;IACZ,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,GAAG;IACX,OAAO,EAAE,GAAG;IACZ,QAAQ,EAAE,GAAG;IACb,QAAQ,EAAE,GAAG;IACb,OAAO,EAAE,GAAG;IACZ,QAAQ,EAAE,GAAG;IACb,QAAQ,EAAE,GAAG;IACb,OAAO,EAAE,GAAG;IACZ,QAAQ,EAAE;EACd,CAAC;EAED,OAAOD,IAAI,CAACE,OAAO,CACf,0EAA0E,EACzEC,KAAK,IAAKF,SAAS,CAACE,KAAK,CAAC,IAAIA,KACnC,CAAC;AACL,CAAC;AAED,OAAO,MAAMC,UAAU,GAAIJ,IAAY,IAAK;EACxC,MAAMK,OAAkC,GAAG;IACvC,GAAG,EAAE,MAAM;IACX,GAAG,EAAE,MAAM;IACX,GAAG,EAAE,QAAQ;IACb,GAAG,EAAE;EACT,CAAC;EAED,OAAOL,IAAI,CAACE,OAAO,CAAC,UAAU,EAAGC,KAAK,IAAKE,OAAO,CAACF,KAAK,CAAC,IAAIA,KAAK,CAAC;AACvE,CAAC;AAED,OAAO,MAAMG,sBAAsB,GAAIN,IAAY,IAAa;EAC5D,IAAIO,MAAM,GAAGP,IAAI;EAEjBO,MAAM,GAAGA,MAAM,CAACL,OAAO,CAAC,0BAA0B,EAAGM,SAAS,IAC1DA,SAAS,CAACN,OAAO,CAAC,IAAI,EAAE,KAAK,CACjC,CAAC;EAEDK,MAAM,GAAGA,MAAM,CAACL,OAAO,CAACvB,aAAa,EAAG8B,SAAS,IAAK;IAClD,IAAIA,SAAS,EAAE;MACX,MAAM3B,OAAO,GAAGF,aAAa,CAAC6B,SAAS,CAAC;MAExC,IAAI3B,OAAO,EAAE;QACT,OAAOD,OAAO,CAACC,OAAO,CAAC4B,WAAW,CAAC,CAAC,CAAC;MACzC;IACJ;IAEA,OAAOD,SAAS;EACpB,CAAC,CAAC;EAEFF,MAAM,GAAGA,MAAM,CAACL,OAAO,CAAC,4BAA4B,EAAGM,SAAS,IAC5DA,SAAS,CAACN,OAAO,CAAC,MAAM,EAAE,GAAG,CACjC,CAAC;EAEDK,MAAM,GAAGA,MAAM,CAACL,OAAO,CAACxB,QAAQ,EAAE,CAAC8B,SAAS,EAAEG,EAAE,EAAEC,EAAE,EAAEC,EAAE,KAAK;IACzD,IAAI,OAAOA,EAAE,KAAK,QAAQ,IAAIA,EAAE,KAAK,EAAE,EAAE;MACrC,MAAM/B,OAAO,GAAGL,SAAS,CAACsB,YAAY,CAACc,EAAE,CAAC,CAAC;MAE3C,IAAI/B,OAAO,EAAE;QACT,OAAQ8B,EAAE,GAAc/B,OAAO,CAACC,OAAO,CAAC4B,WAAW,CAAC,CAAC,CAAC;MAC1D;IACJ;IAEA,OAAOF,SAAS;EACpB,CAAC,CAAC;EAEF,OAAOD,MAAM;AACjB,CAAC;AAED,OAAO,MAAMO,kBAAkB,GAAGA,CAACC,KAAa,EAAEC,QAAgB,KAC9DD,KAAK,CACA7B,KAAK,CAAC,UAAU,CAAC,CACjB+B,GAAG,CAAEC,QAAQ,IAAK;EACf,MAAMlC,KAAK,GAAG,CAACkC,QAAQ,CAAChB,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;;EAE9C;EACA;EACA,IAAI1B,SAAS,CAAC0C,QAAQ,CAAC,EAAEC,iBAAiB,EAAE;IACxCnC,KAAK,CAACa,IAAI,CAACmB,QAAQ,CAAC;EACxB;EAEA,OAAOhC,KAAK,CAACc,IAAI,CAAC,EAAE,CAAC;AACzB,CAAC,CAAC,CACDA,IAAI,CAAC,UAAU,CAAC","ignoreList":[]}
+{"version":3,"file":"emoji.js","names":["asciiList","regAscii","regShortnames","shortNameList","convert","unicode","indexOf","parts","s","split","i","length","part","parseInt","hi","Math","floor","lo","String","fromCharCode","push","join","unescapeHTML","text","unescaped","replace","match","escapeHTML","escaped","convertEmojisToUnicode","result","fullMatch","shortname","toUpperCase","m1","m2","m3","addSkinToneToEmoji","emojiList","emoji","skinTone","map","rawEmoji","skin_tone_support"],"sources":["../../../src/utils/emoji.ts"],"sourcesContent":["import { asciiList, regAscii, regShortnames, shortNameList } from '../constants/emoji';\n\nconst convert = (unicode: string) => {\n    if (unicode.indexOf('-') > -1) {\n        const parts = [];\n\n        const s = unicode.split('-');\n\n        for (let i = 0; i < s.length; i++) {\n            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n            let part: number | string = parseInt(s[i]!, 16);\n\n            if (part >= 0x10000 && part <= 0x10ffff) {\n                const hi = Math.floor((part - 0x10000) / 0x400) + 0xd800;\n                const lo = ((part - 0x10000) % 0x400) + 0xdc00;\n\n                part = String.fromCharCode(hi) + String.fromCharCode(lo);\n            } else {\n                part = String.fromCharCode(part);\n            }\n\n            parts.push(part);\n        }\n\n        return parts.join('');\n    }\n\n    const s = parseInt(unicode, 16);\n\n    if (s >= 0x10000 && s <= 0x10ffff) {\n        const hi = Math.floor((s - 0x10000) / 0x400) + 0xd800;\n        const lo = ((s - 0x10000) % 0x400) + 0xdc00;\n\n        return String.fromCharCode(hi) + String.fromCharCode(lo);\n    }\n\n    return String.fromCharCode(s);\n};\n\nexport const unescapeHTML = (text: string) => {\n    const unescaped: { [key: string]: string } = {\n        '&amp;': '&',\n        '&#38;': '&',\n        '&#x26;': '&',\n        '&lt;': '<',\n        '&#60;': '<',\n        '&#x3C;': '<',\n        '&gt;': '>',\n        '&#62;': '>',\n        '&#x3E;': '>',\n        '&quot;': '\"',\n        '&#34;': '\"',\n        '&#x22;': '\"',\n        '&apos;': \"'\",\n        '&#39;': \"'\",\n        '&#x27;': \"'\",\n    };\n\n    return text.replace(\n        /&(?:amp|#38|#x26|lt|#60|#x3C|gt|#62|#x3E|apos|#39|#x27|quot|#34|#x22);/gi,\n        (match) => unescaped[match] ?? match,\n    );\n};\n\nexport const escapeHTML = (text: string) => {\n    const escaped: { [key: string]: string } = {\n        '<': '&lt;',\n        '>': '&gt;',\n        '\"': '&quot;',\n        \"'\": '&apos;',\n    };\n\n    return text.replace(/[&<>\"']/g, (match) => escaped[match] ?? match);\n};\n\nexport const convertEmojisToUnicode = (text: string): string => {\n    let result = text;\n\n    result = result.replace(/https?:\\/\\/.*?(?=$|\\s)/gi, (fullMatch) =>\n        fullMatch.replace(/:/g, '%3A'),\n    );\n\n    result = result.replace(regShortnames, (shortname) => {\n        if (shortname) {\n            const unicode = shortNameList[shortname];\n\n            if (unicode) {\n                return convert(unicode.toUpperCase());\n            }\n        }\n\n        return shortname;\n    });\n\n    result = result.replace(/https?%3A\\/\\/.*?(?=$|\\s)/gi, (fullMatch) =>\n        fullMatch.replace(/%3A/g, ':'),\n    );\n\n    result = result.replace(regAscii, (fullMatch, m1, m2, m3) => {\n        if (typeof m3 === 'string' && m3 !== '') {\n            const unicode = asciiList[unescapeHTML(m3)];\n\n            if (unicode) {\n                return (m2 as string) + convert(unicode.toUpperCase());\n            }\n        }\n\n        return fullMatch;\n    });\n\n    return result;\n};\n\nexport const addSkinToneToEmoji = (\n    emojiList: { [x: string]: { skin_tone_support: any } },\n    emoji: string,\n    skinTone: string,\n): string =>\n    emoji\n        .split('\\u{200D}')\n        .map((rawEmoji) => {\n            const parts = [rawEmoji.replace(/\\ufe0f/, '')];\n\n            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n            if (emojiList[rawEmoji]?.skin_tone_support) {\n                parts.push(skinTone);\n            }\n\n            return parts.join('');\n        })\n        .join('\\u{200D}');\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.d.ts

@@ -9,6 +9,11 @@ export type EmojiProps = {
     onSelect: (emoji: string) => void;
     onRightClick: (newIndex: number) => void;
     shouldShowSkinTonePopup: boolean;
+    emojiList: {
+        [x: string]: {
+            skin_tone_support: any;
+        };
+    };
 };
 declare const Emoji: FC<EmojiProps>;
 export default Emoji;