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

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

@@ -6,20 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _core = require("@chayns-components/core");
 var _react = _interopRequireWildcard(require("react"));
-var _dataByGroup = _interopRequireDefault(require("unicode-emoji-json/data-by-group.json"));
 var _EmojiPickerCategories = _interopRequireDefault(require("./emoji-picker-categories/EmojiPickerCategories"));
 var _EmojiPickerEmojis = _interopRequireDefault(require("./emoji-picker-emojis/EmojiPickerEmojis"));
 var _EmojiPicker = require("./EmojiPicker.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const FirstEmojiSlug = 'smileys_emotion';
 const EmojiPicker = ({
   accessToken,
   onSelect,
   personId
 }) => {
-  var _emojiCategories$;
   const [searchString, setSearchString] = (0, _react.useState)('');
-  const [selectedCategory, setSelectedCategory] = (0, _react.useState)((_emojiCategories$ = _dataByGroup.default[0]) === null || _emojiCategories$ === void 0 ? void 0 : _emojiCategories$.slug);
+  const [selectedCategory, setSelectedCategory] = (0, _react.useState)(FirstEmojiSlug);
   const handleCategorySelect = (0, _react.useCallback)(category => {
     setSearchString('');
     setSelectedCategory(category);

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.js","names":["_core","require","_react","_interopRequireWildcard","_dataByGroup","_interopRequireDefault","_EmojiPickerCategories","_EmojiPickerEmojis","_EmojiPicker","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EmojiPicker","accessToken","onSelect","personId","_emojiCategories$","searchString","setSearchString","useState","selectedCategory","setSelectedCategory","emojiCategories","slug","handleCategorySelect","useCallback","category","handleSearchChange","event","target","value","createElement","StyledEmojiPicker","Input","onChange","placeholder","displayName","_default","exports"],"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":"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","ignoreList":[]}
+{"version":3,"file":"EmojiPicker.js","names":["_core","require","_react","_interopRequireWildcard","_EmojiPickerCategories","_interopRequireDefault","_EmojiPickerEmojis","_EmojiPicker","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","FirstEmojiSlug","EmojiPicker","accessToken","onSelect","personId","searchString","setSearchString","useState","selectedCategory","setSelectedCategory","handleCategorySelect","useCallback","category","handleSearchChange","event","target","value","createElement","StyledEmojiPicker","Input","onChange","placeholder","displayName","_default","exports"],"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":"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","ignoreList":[]}

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

@@ -5,11 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _dataByGroup = _interopRequireDefault(require("unicode-emoji-json/data-by-group.json"));
 var _categories = require("../../../constants/categories");
 var _EmojiPickerCategories = require("./EmojiPickerCategories.styles");
 var _core = require("@chayns-components/core");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const EmojiPickerCategories = ({
   onSelect,
@@ -75,29 +73,23 @@ const EmojiPickerCategories = ({
   const handleClick = (0, _react.useCallback)(slug => {
     handleSelect(slug);
   }, [handleSelect]);
-  const categories = (0, _react.useMemo)(() => {
-    const categorySlugs = _dataByGroup.default.map(({
-      slug
-    }) => slug);
-    categorySlugs.unshift('history');
-    return categorySlugs.map(slug => {
-      const isSelected = selectedCategory === slug && !isSearchStringGiven;
-      return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.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
-        }
-      }, _categories.CATEGORY_EMOJIS[slug]);
-    });
-  }, [handleClick, isSearchStringGiven, selectedCategory]);
+  const categories = (0, _react.useMemo)(() => Object.keys(_categories.CATEGORY_EMOJIS).map(slug => {
+    const isSelected = selectedCategory === slug && !isSearchStringGiven;
+    return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.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
+      }
+    }, _categories.CATEGORY_EMOJIS[slug]);
+  }), [handleClick, isSearchStringGiven, selectedCategory]);
   return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledEmojiPickerCategories, {
     ref: combinedRef
   }, categories);

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerCategories.js","names":["_react","_interopRequireWildcard","require","_dataByGroup","_interopRequireDefault","_categories","_EmojiPickerCategories","_core","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EmojiPickerCategories","onSelect","searchString","selectedCategory","focusedIndex","setFocusedIndex","useState","shouldPreventListener","ref","useIsMeasuredClone","categoryRef","useRef","combinedRef","useCombinedRefs","isSearchStringGiven","trim","handleSelect","useCallback","slug","useEffect","handleKeyDown","event","key","shiftKey","_categoryRef$current","preventDefault","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","id","document","addEventListener","removeEventListener","handleClick","categories","useMemo","categorySlugs","unicodeEmoji","map","unshift","isSelected","createElement","StyledMotionEmojiPickerCategory","animate","filter","opacity","className","initial","onClick","transition","duration","CATEGORY_EMOJIS","StyledEmojiPickerCategories","displayName","_default","exports"],"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":"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","ignoreList":[]}
+{"version":3,"file":"EmojiPickerCategories.js","names":["_react","_interopRequireWildcard","require","_categories","_EmojiPickerCategories","_core","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EmojiPickerCategories","onSelect","searchString","selectedCategory","focusedIndex","setFocusedIndex","useState","shouldPreventListener","ref","useIsMeasuredClone","categoryRef","useRef","combinedRef","useCombinedRefs","isSearchStringGiven","trim","handleSelect","useCallback","slug","useEffect","handleKeyDown","event","key","shiftKey","_categoryRef$current","preventDefault","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","id","document","addEventListener","removeEventListener","handleClick","categories","useMemo","keys","CATEGORY_EMOJIS","map","isSelected","createElement","StyledMotionEmojiPickerCategory","animate","filter","opacity","className","initial","onClick","transition","duration","StyledEmojiPickerCategories","displayName","_default","exports"],"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/cjs/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.js

@@ -8,14 +8,12 @@ var _core = require("@chayns-components/core");
 var _chaynsApi = require("chayns-api");
 var _emojilib = _interopRequireDefault(require("emojilib"));
 var _react = _interopRequireWildcard(require("react"));
-var _dataByEmoji = _interopRequireDefault(require("unicode-emoji-json/data-by-emoji.json"));
-var _dataByGroup = _interopRequireDefault(require("unicode-emoji-json/data-by-group.json"));
 var _emojiDeDE = _interopRequireDefault(require("../../../constants/emoji-de-DE.json"));
 var _emojiHistory = require("../../../hooks/emojiHistory");
 var _Emoji = _interopRequireDefault(require("./emoji/Emoji"));
 var _EmojiPickerEmojis = require("./EmojiPickerEmojis.styles");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); } // @ts-nocheck
 const EmojiPickerEmojis = ({
   accessToken,
   onSelect,
@@ -26,6 +24,20 @@ const EmojiPickerEmojis = ({
   const [shouldPreventScroll, setShouldPreventScroll] = (0, _react.useState)(false);
   const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = (0, _react.useState)(false);
   const [focusedIndex, setFocusedIndex] = (0, _react.useState)(0);
+  const [emojiCategories, setEmojiCategories] = (0, _react.useState)([]);
+  const [emojiList, setEmojiList] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    void Promise.resolve().then(() => _interopRequireWildcard(require('unicode-emoji-json/data-by-group.json'))).then(({
+      default: categories
+    }) => {
+      setEmojiCategories(categories);
+    });
+    void Promise.resolve().then(() => _interopRequireWildcard(require('unicode-emoji-json/data-by-emoji.json'))).then(({
+      default: emojis
+    }) => {
+      setEmojiList(emojis);
+    });
+  }, []);
   const [shouldPreventListener, ref] = (0, _core.useIsMeasuredClone)();
   const emojiRef = (0, _react.useRef)(null);
   const shouldPreventEmojiControlsRef = (0, _react.useRef)(false);
@@ -157,7 +169,7 @@ const EmojiPickerEmojis = ({
     if (searchString.trim() !== '') {
       const lowerSearchString = searchString.toLowerCase();
       const searchResults = [];
-      Object.entries(_dataByEmoji.default).forEach(([emoji, {
+      Object.entries(emojiList).forEach(([emoji, {
         name,
         skin_tone_support
       }], index) => {
@@ -179,7 +191,8 @@ const EmojiPickerEmojis = ({
               name,
               skin_tone_support,
               index
-            })
+            }),
+            emojiList: emojiList
           }));
         }
       });
@@ -205,10 +218,11 @@ const EmojiPickerEmojis = ({
           skin_tone_support,
           index
         }),
-        isSkinToneSupported: false
+        isSkinToneSupported: false,
+        emojiList: emojiList
       }));
     }
-    return (_emojiCategories$find = _dataByGroup.default.find(({
+    return (_emojiCategories$find = emojiCategories.find(({
       slug
     }) => slug === selectedCategory)) === null || _emojiCategories$find === void 0 ? void 0 : _emojiCategories$find.emojis.map(({
       emoji,
@@ -229,7 +243,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/cjs/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerEmojis.js","names":["_core","require","_chaynsApi","_emojilib","_interopRequireDefault","_react","_interopRequireWildcard","_dataByEmoji","_dataByGroup","_emojiDeDE","_emojiHistory","_Emoji","_EmojiPickerEmojis","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EmojiPickerEmojis","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","useState","shouldShowSkinTonePopup","setShouldShowSkinTonePopup","focusedIndex","setFocusedIndex","shouldPreventListener","ref","useIsMeasuredClone","emojiRef","useRef","shouldPreventEmojiControlsRef","combinedRef","useCombinedRefs","browser","getDevice","addOrUpdateEmojiInHistory","historyEmojis","useEmojiHistory","handlePopupVisibilityChange","useCallback","isVisible","current","handleSelect","emoji","name","skin_tone_support","index","useEffect","container","scrollTop","handleKeyDown","event","key","_emojiRef$current","preventDefault","children","length","newIndex","ctrlKey","prevElement","tabIndex","newElement","containerRect","getBoundingClientRect","elementRect","bottom","top","_emojiRef$current2","dataset","skinToneSupport","document","addEventListener","removeEventListener","handleRightClick","emojis","useMemo","_emojiCategories$find","trim","lowerSearchString","toLowerCase","searchResults","entries","emojiList","forEach","keywords","emojiLib","germanKeywords","germanEmojiLib","includes","some","keyword","push","createElement","isSelected","onRightClick","isSkinToneSupported","onPopupVisibilityChange","map","emojiCategories","find","slug","shouldShowNoContentInfo","StyledEmojiPickerEmojis","$browser","$shouldPreventScroll","$shouldShowNoContentInfo","StyledEmojiPickerEmojisNoContentInfo","displayName","_default","exports"],"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":["_core","require","_chaynsApi","_emojilib","_interopRequireDefault","_react","_interopRequireWildcard","_emojiDeDE","_emojiHistory","_Emoji","_EmojiPickerEmojis","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EmojiPickerEmojis","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","useState","shouldShowSkinTonePopup","setShouldShowSkinTonePopup","focusedIndex","setFocusedIndex","emojiCategories","setEmojiCategories","emojiList","setEmojiList","useEffect","Promise","resolve","then","categories","emojis","shouldPreventListener","ref","useIsMeasuredClone","emojiRef","useRef","shouldPreventEmojiControlsRef","combinedRef","useCombinedRefs","browser","getDevice","addOrUpdateEmojiInHistory","historyEmojis","useEmojiHistory","handlePopupVisibilityChange","useCallback","isVisible","current","handleSelect","emoji","name","skin_tone_support","index","container","scrollTop","handleKeyDown","event","key","_emojiRef$current","preventDefault","children","length","newIndex","ctrlKey","prevElement","tabIndex","newElement","containerRect","getBoundingClientRect","elementRect","bottom","top","_emojiRef$current2","dataset","skinToneSupport","document","addEventListener","removeEventListener","handleRightClick","useMemo","_emojiCategories$find","trim","lowerSearchString","toLowerCase","searchResults","entries","forEach","keywords","emojiLib","germanKeywords","germanEmojiLib","includes","some","keyword","push","createElement","isSelected","onRightClick","isSkinToneSupported","onPopupVisibilityChange","map","find","slug","shouldShowNoContentInfo","StyledEmojiPickerEmojis","$browser","$shouldPreventScroll","$shouldShowNoContentInfo","StyledEmojiPickerEmojisNoContentInfo","displayName","_default","exports"],"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/cjs/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Emoji.js","names":["_react","require","_react2","_interopRequireWildcard","_alignment","_Emoji","_SkinTonePopup","_interopRequireDefault","_SkinTonePopup2","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Emoji","emoji","isSelected","name","isSkinToneSupported","onPopupVisibilityChange","onSelect","shouldShowSkinTonePopup","onRightClick","index","shouldShowPopup","setShouldShowPopup","useState","skinTonePopupAnchorAlignment","setSkinTonePopupAnchorAlignment","AnchorAlignment","Top","skinTonePopupAnchorOffset","setSkinTonePopupAnchorOffset","skinTonePopupOverlayPosition","setSkinTonePopupOverlayPosition","top","skinTonePopupPosition","setSkinTonePopupPosition","left","emojiRef","useRef","handleClick","useCallback","calculatePopupPosition","current","element","parentElement","height","elementHeight","elementLeft","elementTop","width","elementWidth","getBoundingClientRect","parentHeight","parentLeft","parentTop","parentWidth","scrollTop","anchorAlignment","anchorOffset","skinTonePopupContentSize","maxLeft","minLeft","Bottom","handleContextMenu","event","preventDefault","stopPropagation","useEffect","handleHidePopup","createElement","StyledEmoji","ref","$isSelected","className","onClick","onContextMenu","AnimatePresence","initial","key","onHidePopup","overlayPosition","position","displayName","_default","exports"],"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":["_react","require","_react2","_interopRequireWildcard","_alignment","_Emoji","_SkinTonePopup","_interopRequireDefault","_SkinTonePopup2","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Emoji","emoji","isSelected","name","isSkinToneSupported","onPopupVisibilityChange","onSelect","shouldShowSkinTonePopup","onRightClick","index","emojiList","shouldShowPopup","setShouldShowPopup","useState","skinTonePopupAnchorAlignment","setSkinTonePopupAnchorAlignment","AnchorAlignment","Top","skinTonePopupAnchorOffset","setSkinTonePopupAnchorOffset","skinTonePopupOverlayPosition","setSkinTonePopupOverlayPosition","top","skinTonePopupPosition","setSkinTonePopupPosition","left","emojiRef","useRef","handleClick","useCallback","calculatePopupPosition","current","element","parentElement","height","elementHeight","elementLeft","elementTop","width","elementWidth","getBoundingClientRect","parentHeight","parentLeft","parentTop","parentWidth","scrollTop","anchorAlignment","anchorOffset","skinTonePopupContentSize","maxLeft","minLeft","Bottom","handleContextMenu","event","preventDefault","stopPropagation","useEffect","handleHidePopup","createElement","StyledEmoji","ref","$isSelected","className","onClick","onContextMenu","AnimatePresence","initial","key","onHidePopup","overlayPosition","position","displayName","_default","exports"],"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":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,eAAA,GAAAP,OAAA;AAAkF,SAAAM,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AAelF,MAAMgB,KAAqB,GAAGA,CAAC;EAC3BC,KAAK;EACLC,UAAU;EACVC,IAAI;EACJC,mBAAmB;EACnBC,uBAAuB;EACvBC,QAAQ;EACRC,uBAAuB;EACvBC,YAAY;EACZC,KAAK;EACLC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,eAAe,EAAEC,kBAAkB,CAAC,GAAG,IAAAC,gBAAQ,EAAC,KAAK,CAAC;EAC7D,MAAM,CAACC,4BAA4B,EAAEC,+BAA+B,CAAC,GAAG,IAAAF,gBAAQ,EAC5EG,0BAAe,CAACC,GACpB,CAAC;EACD,MAAM,CAACC,yBAAyB,EAAEC,4BAA4B,CAAC,GAAG,IAAAN,gBAAQ,EAAC,CAAC,CAAC;EAC7E,MAAM,CAACO,4BAA4B,EAAEC,+BAA+B,CAAC,GAAG,IAAAR,gBAAQ,EAE9E;IAAES,GAAG,EAAE;EAAE,CAAC,CAAC;EACb,MAAM,CAACC,qBAAqB,EAAEC,wBAAwB,CAAC,GAAG,IAAAX,gBAAQ,EAEhE;IAAEY,IAAI,EAAE,CAAC;IAAEH,GAAG,EAAE;EAAE,CAAC,CAAC;EAEtB,MAAMI,QAAQ,GAAG,IAAAC,cAAM,EAAiB,IAAI,CAAC;EAE7C,MAAMC,WAAW,GAAG,IAAAC,mBAAW,EAAC,MAAM;IAClCvB,QAAQ,CAACL,KAAK,CAAC;EACnB,CAAC,EAAE,CAACA,KAAK,EAAEK,QAAQ,CAAC,CAAC;EAErB,MAAMwB,sBAAsB,GAAG,IAAAD,mBAAW,EAAC,MAAM;IAC7C,IAAI,CAACH,QAAQ,CAACK,OAAO,EAAE;MACnB;IACJ;IAEA,MAAMC,OAAO,GAAGN,QAAQ,CAACK,OAAO;IAChC,MAAM;MAAEE;IAAc,CAAC,GAAGP,QAAQ,CAACK,OAAO;IAE1C,IAAIE,aAAa,EAAE;MACf,MAAM;QACFC,MAAM,EAAEC,aAAa;QACrBV,IAAI,EAAEW,WAAW;QACjBd,GAAG,EAAEe,UAAU;QACfC,KAAK,EAAEC;MACX,CAAC,GAAGP,OAAO,CAACQ,qBAAqB,CAAC,CAAC;MAEnC,MAAM;QACFN,MAAM,EAAEO,YAAY;QACpBhB,IAAI,EAAEiB,UAAU;QAChBpB,GAAG,EAAEqB,SAAS;QACdL,KAAK,EAAEM;MACX,CAAC,GAAGX,aAAa,CAACO,qBAAqB,CAAC,CAAC;MAEzC,MAAM;QAAEK;MAAU,CAAC,GAAGZ,aAAa;MAEnC,IAAIa,eAAe,GAAG9B,0BAAe,CAACC,GAAG;MACzC,IAAI8B,YAAY,GAAG,CAAC;MAEpB,IAAItB,IAAI,GACJW,WAAW,GAAGM,UAAU,GAAGM,wCAAwB,CAACV,KAAK,GAAG,CAAC,GAAGC,YAAY,GAAG,CAAC;MAEpF,IAAIjB,GAAG,GAAGe,UAAU,GAAGM,SAAS,GAAGR,aAAa,GAAGU,SAAS;MAE5D,MAAMI,OAAO,GAAGL,WAAW,GAAGI,wCAAwB,CAACV,KAAK,GAAG,EAAE;MACjE,MAAMY,OAAO,GAAG,EAAE;MAElB,IAAIzB,IAAI,GAAGyB,OAAO,EAAE;QAChBH,YAAY,GAAGtB,IAAI,GAAGyB,OAAO;QAC7BzB,IAAI,GAAGyB,OAAO;MAClB,CAAC,MAAM,IAAIzB,IAAI,GAAGwB,OAAO,EAAE;QACvBF,YAAY,GAAGtB,IAAI,GAAGwB,OAAO;QAC7BxB,IAAI,GAAGwB,OAAO;MAClB;MAEA,IAAI3B,GAAG,GAAG0B,wCAAwB,CAACd,MAAM,GAAGO,YAAY,GAAGI,SAAS,EAAE;QAClEC,eAAe,GAAG9B,0BAAe,CAACmC,MAAM;QACxC7B,GAAG,IAAIa,aAAa,GAAGa,wCAAwB,CAACd,MAAM;MAC1D;MAEA,IAAI9B,mBAAmB,EAAE;QACrBW,+BAA+B,CAAC+B,eAAe,CAAC;QAChD3B,4BAA4B,CAAC4B,YAAY,CAAC;QAC1CvB,wBAAwB,CAAC;UAAEC,IAAI;UAAEH;QAAI,CAAC,CAAC;QACvCD,+BAA+B,CAAC;UAAEC,GAAG,EAAEuB;QAAU,CAAC,CAAC;QACnDjC,kBAAkB,CAAC,IAAI,CAAC;MAC5B;IACJ;EACJ,CAAC,EAAE,CAACR,mBAAmB,CAAC,CAAC;EAEzB,MAAMgD,iBAAiB,GAAG,IAAAvB,mBAAW,EAChCwB,KAAiB,IAAK;IACnBA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvB,IAAInD,mBAAmB,EAAE;MACrBI,YAAY,CAACC,KAAK,CAAC;MACnBqB,sBAAsB,CAAC,CAAC;IAC5B;EACJ,CAAC,EACD,CAACA,sBAAsB,EAAErB,KAAK,EAAEL,mBAAmB,EAAEI,YAAY,CACrE,CAAC;EAED,IAAAgD,iBAAS,EAAC,MAAM;IACZ,IACI9B,QAAQ,CAACK,OAAO,IAChBxB,uBAAuB,IACvBgB,qBAAqB,CAACD,GAAG,KAAK,CAAC,IAC/BC,qBAAqB,CAACE,IAAI,KAAK,CAAC,EAClC;MACEK,sBAAsB,CAAC,CAAC;IAC5B;EACJ,CAAC,EAAE,CACCA,sBAAsB,EACtBrB,KAAK,EACLL,mBAAmB,EACnBG,uBAAuB,EACvBgB,qBAAqB,CACxB,CAAC;EAEF,IAAAiC,iBAAS,EAAC,MAAM;IACZ,IAAIjD,uBAAuB,EAAE;MACzBK,kBAAkB,CAACL,uBAAuB,CAAC;IAC/C;EACJ,CAAC,EAAE,CAACA,uBAAuB,CAAC,CAAC;EAE7B,MAAMkD,eAAe,GAAG,IAAA5B,mBAAW,EAAC,MAAM;IACtCjB,kBAAkB,CAAC,KAAK,CAAC;EAC7B,CAAC,EAAE,EAAE,CAAC;EAEN,IAAA4C,iBAAS,EAAC,MAAM;IACZnD,uBAAuB,CAACM,eAAe,CAAC;EAC5C,CAAC,EAAE,CAACN,uBAAuB,EAAEM,eAAe,CAAC,CAAC;EAE9C,oBACIrC,OAAA,CAAAS,OAAA,CAAA2E,aAAA,CAACjF,MAAA,CAAAkF,WAAW;IACRC,GAAG,EAAElC,QAAS;IACdmC,WAAW,EAAE3D,UAAW;IACxB,cAAYD,KAAM;IAClB,aAAWE,IAAK;IAChB,0BAAwBC,mBAAoB;IAC5C0D,SAAS,EAAC,oBAAoB;IAC9BC,OAAO,EAAEnC,WAAY;IACrBoC,aAAa,EAAEZ;EAAkB,GAEhCnD,KAAK,eACN3B,OAAA,CAAAS,OAAA,CAAA2E,aAAA,CAACtF,MAAA,CAAA6F,eAAe;IAACC,OAAO,EAAE;EAAM,GAC3BvD,eAAe,iBACZrC,OAAA,CAAAS,OAAA,CAAA2E,aAAA,CAAChF,cAAA,CAAAK,OAAa;IACV+D,eAAe,EAAEhC,4BAA6B;IAC9CiC,YAAY,EAAE7B,yBAA0B;IACxCjB,KAAK,EAAEA,KAAM;IACbkE,GAAG,EAAElE,KAAM;IACXmE,WAAW,EAAEX,eAAgB;IAC7BnD,QAAQ,EAAEA,QAAS;IACnB+D,eAAe,EAAEjD,4BAA6B;IAC9CkD,QAAQ,EAAE/C,qBAAsB;IAChCb,SAAS,EAAEA;EAAU,CACxB,CAEQ,CACR,CAAC;AAEtB,CAAC;AAEDV,KAAK,CAACuE,WAAW,GAAG,OAAO;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA1F,OAAA,GAEbiB,KAAK","ignoreList":[]}

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

@@ -17,7 +17,8 @@ const SkinTonePopup = ({
   onHidePopup,
   onSelect,
   overlayPosition,
-  position
+  position,
+  emojiList
 }) => {
   const [focusedIndex, setFocusedIndex] = (0, _react.useState)(0);
   const skinToneRef = (0, _react.useRef)(null);
@@ -84,7 +85,7 @@ const SkinTonePopup = ({
     const result = [];
     Object.entries(_dataEmojiComponents.default).forEach(([key, value], index) => {
       if (key.includes('skin_tone')) {
-        const emojiWithSkinTone = (0, _emoji.addSkinToneToEmoji)(emoji, value);
+        const emojiWithSkinTone = (0, _emoji.addSkinToneToEmoji)(emojiList, emoji, value);
         const handleClick = event => {
           event.preventDefault();
           event.stopPropagation();
@@ -100,7 +101,7 @@ const SkinTonePopup = ({
       }
     });
     return result;
-  }, [emoji, focusedIndex, onHidePopup, onSelect]);
+  }, [emoji, emojiList, focusedIndex, onHidePopup, onSelect]);
   return /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledMotionSkinTonePopup, {
     animate: {
       opacity: 1

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

@@ -1 +1 @@
-{"version":3,"file":"SkinTonePopup.js","names":["_react","_interopRequireWildcard","require","_dataEmojiComponents","_interopRequireDefault","_emoji","_SkinTonePopup","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SkinTonePopup","anchorAlignment","anchorOffset","emoji","onHidePopup","onSelect","overlayPosition","position","focusedIndex","setFocusedIndex","useState","skinToneRef","useRef","handleOverlayClick","useCallback","event","preventDefault","stopPropagation","useEffect","handleKeyDown","key","_skinToneRef$current","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","_skinToneRef$current2","dataset","skinTone","shiftKey","document","addEventListener","removeEventListener","emojis","useMemo","result","entries","emojiComponents","forEach","value","index","includes","emojiWithSkinTone","addSkinToneToEmoji","handleClick","push","createElement","StyledSkinTonePopupContentEmoji","$isSelected","onClick","StyledMotionSkinTonePopup","animate","opacity","exit","initial","transition","duration","StyledSkinTonePopupContent","ref","$anchorAlignment","$anchorOffset","style","StyledSkinTonePopupOverlay","displayName","_default","exports"],"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","_interopRequireWildcard","require","_dataEmojiComponents","_interopRequireDefault","_emoji","_SkinTonePopup","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SkinTonePopup","anchorAlignment","anchorOffset","emoji","onHidePopup","onSelect","overlayPosition","position","emojiList","focusedIndex","setFocusedIndex","useState","skinToneRef","useRef","handleOverlayClick","useCallback","event","preventDefault","stopPropagation","useEffect","handleKeyDown","key","_skinToneRef$current","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","_skinToneRef$current2","dataset","skinTone","shiftKey","document","addEventListener","removeEventListener","emojis","useMemo","result","entries","emojiComponents","forEach","value","index","includes","emojiWithSkinTone","addSkinToneToEmoji","handleClick","push","createElement","StyledSkinTonePopupContentEmoji","$isSelected","onClick","StyledMotionSkinTonePopup","animate","opacity","exit","initial","transition","duration","StyledSkinTonePopupContent","ref","$anchorAlignment","$anchorOffset","style","StyledSkinTonePopupOverlay","displayName","_default","exports"],"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/cjs/utils/emoji.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.unescapeHTML = exports.escapeHTML = exports.convertEmojisToUnicode = exports.addSkinToneToEmoji = void 0;
-var _dataByEmoji = _interopRequireDefault(require("unicode-emoji-json/data-by-emoji.json"));
 var _emoji = require("../constants/emoji");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const convert = unicode => {
   if (unicode.indexOf('-') > -1) {
     const parts = [];
@@ -89,13 +87,12 @@ const convertEmojisToUnicode = text => {
   return result;
 };
 exports.convertEmojisToUnicode = convertEmojisToUnicode;
-const addSkinToneToEmoji = (emoji, skinTone) => emoji.split('\u{200D}').map(rawEmoji => {
+const addSkinToneToEmoji = (emojiList, emoji, skinTone) => emoji.split('\u{200D}').map(rawEmoji => {
   var _emojiList$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 = _dataByEmoji.default[rawEmoji]) !== null && _emojiList$rawEmoji !== void 0 && _emojiList$rawEmoji.skin_tone_support) {
+  if ((_emojiList$rawEmoji = emojiList[rawEmoji]) !== null && _emojiList$rawEmoji !== void 0 && _emojiList$rawEmoji.skin_tone_support) {
     parts.push(skinTone);
   }
   return parts.join('');