@chayns-components/emoji-input 5.0.0-beta.1152 → 5.0.0-beta.1155

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

@@ -8,6 +8,7 @@ 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 = ({
@@ -16,13 +17,18 @@ const EmojiPickerCategories = ({
   selectedCategory
 }) => {
   const [focusedIndex, setFocusedIndex] = (0, _react.useState)(1);
+  const [shouldPreventListener, ref] = (0, _core.useIsMeasuredClone)();
   const categoryRef = (0, _react.useRef)(null);
+  const combinedRef = (0, _core.useCombinedRefs)(categoryRef, ref);
   const isSearchStringGiven = searchString.trim() !== '';
   const handleSelect = (0, _react.useCallback)(slug => {
     onSelect(slug);
   }, [onSelect]);
   (0, _react.useEffect)(() => {
     const handleKeyDown = event => {
+      if (shouldPreventListener) {
+        return;
+      }
       if (event.key === 'Tab' || event.key === 'Tab' && event.shiftKey) {
         var _categoryRef$current;
         event.preventDefault();
@@ -65,7 +71,7 @@ const EmojiPickerCategories = ({
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [focusedIndex, handleSelect]);
+  }, [focusedIndex, handleSelect, shouldPreventListener]);
   const handleClick = (0, _react.useCallback)(slug => {
     handleSelect(slug);
   }, [handleSelect]);
@@ -93,7 +99,7 @@ const EmojiPickerCategories = ({
     });
   }, [handleClick, isSearchStringGiven, selectedCategory]);
   return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledEmojiPickerCategories, {
-    ref: categoryRef
+    ref: combinedRef
   }, categories);
 };
 EmojiPickerCategories.displayName = 'EmojiPickerCategories';

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","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","categoryRef","useRef","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","ref","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';\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 categoryRef = useRef<HTMLDivElement>(null);\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 (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]);\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={categoryRef}>{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","_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":[]}

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _core = require("@chayns-components/core");
 var _chaynsApi = require("chayns-api");
 var _emojilib = _interopRequireDefault(require("emojilib"));
 var _react = _interopRequireWildcard(require("react"));
@@ -25,8 +26,10 @@ const EmojiPickerEmojis = ({
   const [shouldPreventScroll, setShouldPreventScroll] = (0, _react.useState)(false);
   const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = (0, _react.useState)(false);
   const [focusedIndex, setFocusedIndex] = (0, _react.useState)(0);
+  const [shouldPreventListener, ref] = (0, _core.useIsMeasuredClone)();
   const emojiRef = (0, _react.useRef)(null);
   const shouldPreventEmojiControlsRef = (0, _react.useRef)(false);
+  const combinedRef = (0, _core.useCombinedRefs)(emojiRef, ref);
   const {
     browser
   } = (0, _chaynsApi.getDevice)();
@@ -71,6 +74,9 @@ const EmojiPickerEmojis = ({
   }, [selectedCategory]);
   (0, _react.useEffect)(() => {
     const handleKeyDown = event => {
+      if (shouldPreventListener) {
+        return;
+      }
       if (!shouldPreventEmojiControlsRef.current && (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
         var _emojiRef$current;
         event.preventDefault();
@@ -142,7 +148,7 @@ const EmojiPickerEmojis = ({
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [focusedIndex, handleSelect]);
+  }, [focusedIndex, handleSelect, shouldPreventListener]);
   const handleRightClick = (0, _react.useCallback)(index => {
     setFocusedIndex(index);
   }, []);
@@ -231,7 +237,7 @@ const EmojiPickerEmojis = ({
     $browser: browser === null || browser === void 0 ? void 0 : browser.name,
     $shouldPreventScroll: shouldPreventScroll,
     $shouldShowNoContentInfo: shouldShowNoContentInfo,
-    ref: emojiRef
+    ref: combinedRef
   }, emojis, shouldShowNoContentInfo && /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.StyledEmojiPickerEmojisNoContentInfo, null, "Hier werden die zuletzt verwendeten Emojis angezeigt, die \xFCber diese Auswahl gew\xE4hlt wurden."));
 };
 EmojiPickerEmojis.displayName = 'EmojiPickerEmojis';

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerEmojis.js","names":["_chaynsApi","require","_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","emojiRef","useRef","shouldPreventEmojiControlsRef","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","ref","StyledEmojiPickerEmojisNoContentInfo","displayName","_default","exports"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.tsx"],"sourcesContent":["import { BrowserName } 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 emojiRef = useRef<HTMLDivElement>(null);\n    const shouldPreventEmojiControlsRef = useRef(false);\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 (\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]);\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={emojiRef}\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","_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":[]}

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

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import unicodeEmoji from 'unicode-emoji-json/data-by-group.json';
 import { CATEGORY_EMOJIS } from '../../../constants/categories';
 import { StyledEmojiPickerCategories, StyledMotionEmojiPickerCategory } from './EmojiPickerCategories.styles';
+import { useCombinedRefs, useIsMeasuredClone } from '@chayns-components/core';
 const EmojiPickerCategories = _ref => {
   let {
     onSelect,
@@ -9,13 +10,18 @@ const EmojiPickerCategories = _ref => {
     selectedCategory
   } = _ref;
   const [focusedIndex, setFocusedIndex] = useState(1);
+  const [shouldPreventListener, ref] = useIsMeasuredClone();
   const categoryRef = useRef(null);
+  const combinedRef = useCombinedRefs(categoryRef, ref);
   const isSearchStringGiven = searchString.trim() !== '';
   const handleSelect = useCallback(slug => {
     onSelect(slug);
   }, [onSelect]);
   useEffect(() => {
     const handleKeyDown = event => {
+      if (shouldPreventListener) {
+        return;
+      }
       if (event.key === 'Tab' || event.key === 'Tab' && event.shiftKey) {
         event.preventDefault();
         const children = categoryRef.current?.children;
@@ -57,7 +63,7 @@ const EmojiPickerCategories = _ref => {
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [focusedIndex, handleSelect]);
+  }, [focusedIndex, handleSelect, shouldPreventListener]);
   const handleClick = useCallback(slug => {
     handleSelect(slug);
   }, [handleSelect]);
@@ -88,7 +94,7 @@ const EmojiPickerCategories = _ref => {
     });
   }, [handleClick, isSearchStringGiven, selectedCategory]);
   return /*#__PURE__*/React.createElement(StyledEmojiPickerCategories, {
-    ref: categoryRef
+    ref: combinedRef
   }, categories);
 };
 EmojiPickerCategories.displayName = 'EmojiPickerCategories';

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerCategories.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","unicodeEmoji","CATEGORY_EMOJIS","StyledEmojiPickerCategories","StyledMotionEmojiPickerCategory","EmojiPickerCategories","_ref","onSelect","searchString","selectedCategory","focusedIndex","setFocusedIndex","categoryRef","isSearchStringGiven","trim","handleSelect","slug","handleKeyDown","event","key","shiftKey","preventDefault","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","id","document","addEventListener","removeEventListener","handleClick","categories","categorySlugs","map","_ref2","unshift","isSelected","createElement","animate","filter","opacity","className","initial","onClick","transition","duration","ref","displayName"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport unicodeEmoji from 'unicode-emoji-json/data-by-group.json';\nimport { CATEGORY_EMOJIS } from '../../../constants/categories';\nimport type { Category } from '../../../types/category';\nimport {\n    StyledEmojiPickerCategories,\n    StyledMotionEmojiPickerCategory,\n} from './EmojiPickerCategories.styles';\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 categoryRef = useRef<HTMLDivElement>(null);\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 (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]);\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={categoryRef}>{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","useCallback","useEffect","useMemo","useRef","useState","unicodeEmoji","CATEGORY_EMOJIS","StyledEmojiPickerCategories","StyledMotionEmojiPickerCategory","useCombinedRefs","useIsMeasuredClone","EmojiPickerCategories","_ref","onSelect","searchString","selectedCategory","focusedIndex","setFocusedIndex","shouldPreventListener","ref","categoryRef","combinedRef","isSearchStringGiven","trim","handleSelect","slug","handleKeyDown","event","key","shiftKey","preventDefault","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","id","document","addEventListener","removeEventListener","handleClick","categories","categorySlugs","map","_ref2","unshift","isSelected","createElement","animate","filter","opacity","className","initial","onClick","transition","duration","displayName"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport unicodeEmoji from 'unicode-emoji-json/data-by-group.json';\nimport { CATEGORY_EMOJIS } from '../../../constants/categories';\nimport type { Category } from '../../../types/category';\nimport {\n    StyledEmojiPickerCategories,\n    StyledMotionEmojiPickerCategory,\n} from './EmojiPickerCategories.styles';\nimport { useCombinedRefs, useIsMeasuredClone } from '@chayns-components/core';\n\nexport type EmojiPickerCategoriesProps = {\n    onSelect: (category: Category) => void;\n    searchString: string;\n    selectedCategory: Category;\n};\n\nconst EmojiPickerCategories: FC<EmojiPickerCategoriesProps> = ({\n    onSelect,\n    searchString,\n    selectedCategory,\n}) => {\n    const [focusedIndex, setFocusedIndex] = useState(1);\n\n    const [shouldPreventListener, ref] = useIsMeasuredClone();\n\n    const categoryRef = useRef<HTMLDivElement>(null);\n\n    const combinedRef = useCombinedRefs(categoryRef, ref);\n\n    const isSearchStringGiven = searchString.trim() !== '';\n\n    const handleSelect = useCallback(\n        (slug: Category) => {\n            onSelect(slug);\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (shouldPreventListener) {\n                return;\n            }\n\n            if (event.key === 'Tab' || (event.key === 'Tab' && event.shiftKey)) {\n                event.preventDefault();\n\n                const children = categoryRef.current?.children;\n                if (children && children.length > 0) {\n                    let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n                    if (event.key === 'Tab' && event.shiftKey) {\n                        newIndex = (newIndex - 1) % children.length;\n                    } else if (event.key === 'Tab') {\n                        newIndex = (newIndex + 1) % children.length;\n                    }\n\n                    // remove focus from the old element\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    if (newIndex < 0) {\n                        newIndex = children.length - 1;\n                    } else if (newIndex > children.length - 1) {\n                        newIndex = 0;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    // Set focus to the element\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n\n                    if (!newElement) {\n                        return;\n                    }\n\n                    const { id } = newElement;\n\n                    handleSelect(id as Category);\n                }\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSelect, shouldPreventListener]);\n\n    const handleClick = useCallback(\n        (slug: Category) => {\n            handleSelect(slug);\n        },\n        [handleSelect],\n    );\n\n    const categories = useMemo(() => {\n        const categorySlugs = unicodeEmoji.map(({ slug }) => slug);\n\n        categorySlugs.unshift('history');\n\n        return categorySlugs.map((slug) => {\n            const isSelected = selectedCategory === slug && !isSearchStringGiven;\n\n            return (\n                <StyledMotionEmojiPickerCategory\n                    animate={{\n                        filter: `grayscale(${isSelected ? 0 : 0.75})`,\n                        opacity: isSelected ? 1 : 0.5,\n                    }}\n                    className=\"prevent-lose-focus\"\n                    initial={false}\n                    key={slug}\n                    id={slug}\n                    onClick={() => handleClick(slug as Category)}\n                    transition={{ duration: 0.2 }}\n                >\n                    {CATEGORY_EMOJIS[slug as Category]}\n                </StyledMotionEmojiPickerCategory>\n            );\n        });\n    }, [handleClick, isSearchStringGiven, selectedCategory]);\n\n    return (\n        <StyledEmojiPickerCategories ref={combinedRef}>{categories}</StyledEmojiPickerCategories>\n    );\n};\n\nEmojiPickerCategories.displayName = 'EmojiPickerCategories';\n\nexport default EmojiPickerCategories;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,3 +1,4 @@
+import { useCombinedRefs, useIsMeasuredClone } from '@chayns-components/core';
 import { getDevice } from 'chayns-api';
 import emojiLib from 'emojilib';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -18,8 +19,10 @@ const EmojiPickerEmojis = _ref => {
   const [shouldPreventScroll, setShouldPreventScroll] = useState(false);
   const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = useState(false);
   const [focusedIndex, setFocusedIndex] = useState(0);
+  const [shouldPreventListener, ref] = useIsMeasuredClone();
   const emojiRef = useRef(null);
   const shouldPreventEmojiControlsRef = useRef(false);
+  const combinedRef = useCombinedRefs(emojiRef, ref);
   const {
     browser
   } = getDevice();
@@ -65,6 +68,9 @@ const EmojiPickerEmojis = _ref => {
   }, [selectedCategory]);
   useEffect(() => {
     const handleKeyDown = event => {
+      if (shouldPreventListener) {
+        return;
+      }
       if (!shouldPreventEmojiControlsRef.current && (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
         event.preventDefault();
         const children = emojiRef.current?.children;
@@ -134,7 +140,7 @@ const EmojiPickerEmojis = _ref => {
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [focusedIndex, handleSelect]);
+  }, [focusedIndex, handleSelect, shouldPreventListener]);
   const handleRightClick = useCallback(index => {
     setFocusedIndex(index);
   }, []);
@@ -232,7 +238,7 @@ const EmojiPickerEmojis = _ref => {
     $browser: browser?.name,
     $shouldPreventScroll: shouldPreventScroll,
     $shouldShowNoContentInfo: shouldShowNoContentInfo,
-    ref: emojiRef
+    ref: combinedRef
   }, emojis, shouldShowNoContentInfo && /*#__PURE__*/React.createElement(StyledEmojiPickerEmojisNoContentInfo, null, "Hier werden die zuletzt verwendeten Emojis angezeigt, die \xFCber diese Auswahl gew\xE4hlt wurden."));
 };
 EmojiPickerEmojis.displayName = 'EmojiPickerEmojis';

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.0.0-beta.1152",
+    "version": "5.0.0-beta.1155",
     "description": "Input field that supports HTML elements and emojis",
     "sideEffects": false,
     "browserslist": [
@@ -72,7 +72,7 @@
         "typescript": "^5.8.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.1152",
+        "@chayns-components/core": "^5.0.0-beta.1155",
         "emojilib": "^3.0.12",
         "unicode-emoji-json": "^0.8.0"
     },
@@ -86,5 +86,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "139238bcb64a9499270aa4bc2779219cdca03c1a"
+    "gitHead": "091a8a8f38322a11c07601efb47912877982c858"
 }