@chayns-components/emoji-input 5.6.6 → 5.6.9

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

@@ -1,12 +1,8 @@
-// @ts-nocheck
-
-import { useCombinedRefs, useIsMeasuredClone } from '@chayns-components/core';
+import React, { useCallback, useEffect, useState } from 'react';
 import emojiLib from 'emojilib';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import germanEmojiLib from '../../../constants/emoji-de-DE.json';
 import { useEmojiHistory } from '../../../hooks/emojiHistory';
-import Emoji from './emoji/Emoji';
-import { StyledEmojiPickerEmojis, StyledEmojiPickerEmojisNoContentInfo } from './EmojiPickerEmojis.styles';
+import EmojiPickerEmojiList from './emoji-picker-emoji-list/EmojiPickerEmojiList';
 const EmojiPickerEmojis = ({
   accessToken,
   onSelect,
@@ -14,11 +10,20 @@ const EmojiPickerEmojis = ({
   searchString,
   selectedCategory
 }) => {
-  const [shouldPreventScroll, setShouldPreventScroll] = useState(false);
-  const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = useState(false);
-  const [focusedIndex, setFocusedIndex] = useState(0);
   const [emojiCategories, setEmojiCategories] = useState([]);
-  const [emojiList, setEmojiList] = useState([]);
+  const [emojiList, setEmojiList] = useState({});
+  const {
+    addOrUpdateEmojiInHistory,
+    historyEmojis
+  } = useEmojiHistory({
+    accessToken,
+    personId,
+    selectedCategory
+  });
+  const handleSelect = useCallback((emoji, shouldRestoreInputFocus = false) => {
+    onSelect(emoji.emoji, shouldRestoreInputFocus);
+    void addOrUpdateEmojiInHistory(emoji);
+  }, [addOrUpdateEmojiInHistory, onSelect]);
   useEffect(() => {
     void import('unicode-emoji-json/data-by-group.json').then(({
       default: categories
@@ -31,216 +36,40 @@ const EmojiPickerEmojis = ({
       setEmojiList(emojis);
     });
   }, []);
-  const [shouldPreventListener, ref] = useIsMeasuredClone();
-  const emojiRef = useRef(null);
-  const shouldPreventEmojiControlsRef = useRef(false);
-  const combinedRef = useCombinedRefs(emojiRef, ref);
-  const {
-    addOrUpdateEmojiInHistory,
-    historyEmojis
-  } = useEmojiHistory({
-    accessToken,
-    personId,
-    selectedCategory
-  });
-  const handlePopupVisibilityChange = useCallback(isVisible => {
-    setShouldShowSkinTonePopup(isVisible);
-    shouldPreventEmojiControlsRef.current = isVisible;
-    setShouldPreventScroll(isVisible);
-  }, []);
-  const handleSelect = useCallback(({
-    emoji,
-    name,
-    skin_tone_support,
-    index
-  }, shouldRestoreInputFocus = false) => {
-    onSelect(emoji, shouldRestoreInputFocus);
-    if (index) {
-      setFocusedIndex(index);
-    }
-    void addOrUpdateEmojiInHistory({
+  let visibleEmojis;
+  if (searchString.trim() !== '') {
+    const lowerSearchString = searchString.toLowerCase();
+    visibleEmojis = Object.entries(emojiList).filter(([emoji, {
+      name
+    }]) => {
+      const keywords = emojiLib[emoji];
+      const germanKeywords = germanEmojiLib[emoji];
+      return name.includes(lowerSearchString) || keywords?.some(keyword => keyword.includes(lowerSearchString)) || germanKeywords?.some(keyword => keyword.includes(lowerSearchString));
+    }).map(([emoji, data]) => ({
       emoji,
-      name,
-      skin_tone_support
-    });
-  }, [addOrUpdateEmojiInHistory, onSelect]);
-  useEffect(() => {
-    if (selectedCategory) {
-      setFocusedIndex(0);
-      const container = emojiRef.current;
-      if (!container) {
-        return;
-      }
-      container.scrollTop = 0;
-    }
-  }, [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;
-        if (children && children.length > 0) {
-          const container = emojiRef.current;
-          let newIndex = focusedIndex !== null ? focusedIndex : 0;
-          if (event.ctrlKey) {
-            return;
-          }
-          if (event.key === 'ArrowUp') {
-            newIndex = (newIndex - 6) % children.length;
-          } else if (event.key === 'ArrowDown') {
-            newIndex = (newIndex + 6) % children.length;
-          } else if (event.key === 'ArrowLeft') {
-            newIndex = (newIndex - 1) % children.length;
-          } else if (event.key === 'ArrowRight') {
-            newIndex = (newIndex + 1) % children.length;
-          }
-
-          // remove focus from the old element
-          if (focusedIndex !== null) {
-            const prevElement = children[focusedIndex];
-            prevElement.tabIndex = -1;
-          }
-          if (newIndex < 0) {
-            newIndex = children.length - 1;
-          } else if (newIndex > children.length - 1) {
-            newIndex = 0;
-          }
-          setFocusedIndex(newIndex);
-
-          // Set focus to the element
-          const newElement = children[newIndex];
-          newElement.tabIndex = 0;
-          const containerRect = container.getBoundingClientRect();
-          const elementRect = newElement.getBoundingClientRect();
-          if (elementRect.bottom > containerRect.bottom) {
-            container.scrollTop += elementRect.bottom - containerRect.bottom;
-          } else if (elementRect.top < containerRect.top) {
-            container.scrollTop -= containerRect.top - elementRect.top;
-          }
-        }
-      } else if (event.key === 'Enter' && !shouldPreventEmojiControlsRef.current && focusedIndex !== null) {
-        if (event.ctrlKey) {
-          setShouldShowSkinTonePopup(true);
-          return;
-        }
-        const {
-          dataset
-        } = emojiRef.current?.children[focusedIndex];
-        const {
-          emoji,
-          name,
-          skinToneSupport
-        } = dataset;
-        if (!emoji || !name || !skinToneSupport) {
-          return;
-        }
-        handleSelect({
-          emoji,
-          name,
-          skin_tone_support: skinToneSupport === 'true'
-        }, true);
-      }
-    };
-    document.addEventListener('keydown', handleKeyDown);
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [focusedIndex, handleSelect, shouldPreventListener]);
-  const handleRightClick = useCallback(index => {
-    setFocusedIndex(index);
-  }, []);
-  const emojis = useMemo(() => {
-    if (searchString.trim() !== '') {
-      const lowerSearchString = searchString.toLowerCase();
-      const searchResults = [];
-      Object.entries(emojiList).forEach(([emoji, {
-        name,
-        skin_tone_support
-      }], index) => {
-        const keywords = emojiLib[emoji];
-        const germanKeywords = germanEmojiLib[emoji];
-        if (name.includes(lowerSearchString) || keywords?.some(keyword => keyword.includes(lowerSearchString)) || germanKeywords?.some(keyword => keyword.includes(lowerSearchString))) {
-          searchResults.push(/*#__PURE__*/React.createElement(Emoji, {
-            shouldShowSkinTonePopup: index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup,
-            isSelected: index === focusedIndex,
-            emoji: emoji,
-            index: index,
-            onRightClick: handleRightClick,
-            isSkinToneSupported: skin_tone_support,
-            key: name,
-            name: name,
-            onPopupVisibilityChange: handlePopupVisibilityChange,
-            onSelect: e => handleSelect({
-              emoji: e,
-              name,
-              skin_tone_support,
-              index
-            }),
-            emojiList: emojiList
-          }));
-        }
-      });
-      return searchResults;
-    }
-    if (selectedCategory === 'history') {
-      return historyEmojis.map(({
-        emoji,
-        name,
-        skin_tone_support
-      }, index) => /*#__PURE__*/React.createElement(Emoji, {
-        isSelected: index === focusedIndex,
-        shouldShowSkinTonePopup: index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup,
-        emoji: emoji,
-        name: name,
-        key: name,
-        index: index,
-        onRightClick: handleRightClick,
-        onPopupVisibilityChange: handlePopupVisibilityChange,
-        onSelect: e => handleSelect({
-          emoji: e,
-          name,
-          skin_tone_support,
-          index
-        }),
-        isSkinToneSupported: false,
-        emojiList: emojiList
-      }));
-    }
-    return emojiCategories.find(({
-      slug
-    }) => slug === selectedCategory)?.emojis.map(({
-      emoji,
-      name,
-      skin_tone_support
-    }, index) => /*#__PURE__*/React.createElement(Emoji, {
-      isSelected: index === focusedIndex,
-      shouldShowSkinTonePopup: index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup,
-      emoji: emoji,
-      name: name,
-      index: index,
-      onRightClick: handleRightClick,
-      isSkinToneSupported: skin_tone_support,
-      key: name,
-      onPopupVisibilityChange: handlePopupVisibilityChange,
-      onSelect: e => handleSelect({
-        emoji: e,
-        name,
-        skin_tone_support,
-        index
-      }),
-      emojiList: emojiList
+      ...data
     }));
-  }, [searchString, selectedCategory, focusedIndex, shouldShowSkinTonePopup, handleRightClick, handlePopupVisibilityChange, handleSelect, historyEmojis]);
-  const shouldShowNoContentInfo = !emojis || emojis.length === 0;
-  return /*#__PURE__*/React.createElement(StyledEmojiPickerEmojis, {
-    className: "chayns-scrollbar",
-    $shouldPreventScroll: shouldPreventScroll,
-    $shouldShowNoContentInfo: shouldShowNoContentInfo,
-    ref: combinedRef
-  }, emojis, shouldShowNoContentInfo && /*#__PURE__*/React.createElement(StyledEmojiPickerEmojisNoContentInfo, null, "Hier werden die zuletzt verwendeten Emojis angezeigt, die \xFCber diese Auswahl gew\xE4hlt wurden."));
+  } else if (selectedCategory === 'history') {
+    visibleEmojis = historyEmojis;
+  } else {
+    visibleEmojis = emojiCategories.find(({
+      slug
+    }) => slug === selectedCategory)?.emojis ?? [];
+  }
+
+  // Reset navigation and dismiss popups when the displayed identities or their order change,
+  // following the existing category-change rule without taking focus from the search field.
+  const isHistory = searchString.trim() === '' && selectedCategory === 'history';
+  const listKey = JSON.stringify([selectedCategory, isHistory, visibleEmojis.map(({
+    emoji
+  }) => emoji)]);
+  return /*#__PURE__*/React.createElement(EmojiPickerEmojiList, {
+    key: listKey,
+    emojis: visibleEmojis,
+    emojiList: emojiList,
+    isHistory: isHistory,
+    onSelect: handleSelect
+  });
 };
 EmojiPickerEmojis.displayName = 'EmojiPickerEmojis';
 export default EmojiPickerEmojis;

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerEmojis.js","names":["useCombinedRefs","useIsMeasuredClone","emojiLib","React","useCallback","useEffect","useMemo","useRef","useState","germanEmojiLib","useEmojiHistory","Emoji","StyledEmojiPickerEmojis","StyledEmojiPickerEmojisNoContentInfo","EmojiPickerEmojis","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","shouldShowSkinTonePopup","setShouldShowSkinTonePopup","focusedIndex","setFocusedIndex","emojiCategories","setEmojiCategories","emojiList","setEmojiList","then","default","categories","emojis","shouldPreventListener","ref","emojiRef","shouldPreventEmojiControlsRef","combinedRef","addOrUpdateEmojiInHistory","historyEmojis","handlePopupVisibilityChange","isVisible","current","handleSelect","emoji","name","skin_tone_support","index","shouldRestoreInputFocus","container","scrollTop","handleKeyDown","event","key","preventDefault","children","length","newIndex","ctrlKey","prevElement","tabIndex","newElement","containerRect","getBoundingClientRect","elementRect","bottom","top","dataset","skinToneSupport","document","addEventListener","removeEventListener","handleRightClick","trim","lowerSearchString","toLowerCase","searchResults","Object","entries","forEach","keywords","germanKeywords","includes","some","keyword","push","createElement","isSelected","onRightClick","isSkinToneSupported","onPopupVisibilityChange","e","map","find","slug","shouldShowNoContentInfo","className","$shouldPreventScroll","$shouldShowNoContentInfo","displayName"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.tsx"],"sourcesContent":["// @ts-nocheck\n\nimport { useCombinedRefs, useIsMeasuredClone } from '@chayns-components/core';\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, shouldRestoreInputFocus?: boolean) => 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 { 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            {\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            shouldRestoreInputFocus = false,\n        ) => {\n            onSelect(emoji, shouldRestoreInputFocus);\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' }, 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            className=\"chayns-scrollbar\"\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":["React","useCallback","useEffect","useState","emojiLib","germanEmojiLib","useEmojiHistory","EmojiPickerEmojiList","EmojiPickerEmojis","accessToken","onSelect","personId","searchString","selectedCategory","emojiCategories","setEmojiCategories","emojiList","setEmojiList","addOrUpdateEmojiInHistory","historyEmojis","handleSelect","emoji","shouldRestoreInputFocus","then","default","categories","emojis","visibleEmojis","trim","lowerSearchString","toLowerCase","Object","entries","filter","name","keywords","germanKeywords","includes","some","keyword","map","data","find","slug","isHistory","listKey","JSON","stringify","createElement","key","displayName"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useState } from 'react';\nimport emojiLib from 'emojilib';\nimport germanEmojiLib from '../../../constants/emoji-de-DE.json';\nimport { useEmojiHistory } from '../../../hooks/emojiHistory';\nimport type { Category } from '../../../types/category';\nimport EmojiPickerEmojiList, {\n    type PickerEmoji,\n} from './emoji-picker-emoji-list/EmojiPickerEmojiList';\n\nexport type EmojiPickerEmojisProps = {\n    accessToken?: string;\n    onSelect: (emoji: string, shouldRestoreInputFocus?: boolean) => void;\n    personId?: string;\n    searchString: string;\n    selectedCategory: Category;\n};\n\ntype EmojiDictionary = Record<string, Omit<PickerEmoji, 'emoji'>>;\ntype EmojiCategory = { slug: string; emojis: PickerEmoji[] };\n\nconst EmojiPickerEmojis: FC<EmojiPickerEmojisProps> = ({\n    accessToken,\n    onSelect,\n    personId,\n    searchString,\n    selectedCategory,\n}) => {\n    const [emojiCategories, setEmojiCategories] = useState<EmojiCategory[]>([]);\n    const [emojiList, setEmojiList] = useState<EmojiDictionary>({});\n\n    const { addOrUpdateEmojiInHistory, historyEmojis } = useEmojiHistory({\n        accessToken,\n        personId,\n        selectedCategory,\n    });\n\n    const handleSelect = useCallback(\n        (emoji: PickerEmoji, shouldRestoreInputFocus = false) => {\n            onSelect(emoji.emoji, shouldRestoreInputFocus);\n            void addOrUpdateEmojiInHistory(emoji);\n        },\n        [addOrUpdateEmojiInHistory, onSelect],\n    );\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    let visibleEmojis: PickerEmoji[];\n\n    if (searchString.trim() !== '') {\n        const lowerSearchString = searchString.toLowerCase();\n        visibleEmojis = Object.entries(emojiList)\n            .filter(([emoji, { name }]) => {\n                const keywords = (emojiLib as Record<string, string[]>)[emoji];\n                const germanKeywords = (germanEmojiLib as Record<string, string[]>)[emoji];\n\n                return (\n                    name.includes(lowerSearchString) ||\n                    keywords?.some((keyword) => keyword.includes(lowerSearchString)) ||\n                    germanKeywords?.some((keyword) => keyword.includes(lowerSearchString))\n                );\n            })\n            .map(([emoji, data]) => ({ emoji, ...data }));\n    } else if (selectedCategory === 'history') {\n        visibleEmojis = historyEmojis;\n    } else {\n        visibleEmojis = emojiCategories.find(({ slug }) => slug === selectedCategory)?.emojis ?? [];\n    }\n\n    // Reset navigation and dismiss popups when the displayed identities or their order change,\n    // following the existing category-change rule without taking focus from the search field.\n    const isHistory = searchString.trim() === '' && selectedCategory === 'history';\n    const listKey = JSON.stringify([\n        selectedCategory,\n        isHistory,\n        visibleEmojis.map(({ emoji }) => emoji),\n    ]);\n\n    return (\n        <EmojiPickerEmojiList\n            key={listKey}\n            emojis={visibleEmojis}\n            emojiList={emojiList}\n            isHistory={isHistory}\n            onSelect={handleSelect}\n        />\n    );\n};\n\nEmojiPickerEmojis.displayName = 'EmojiPickerEmojis';\n\nexport default EmojiPickerEmojis;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,312 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import EmojiPickerEmojis from './EmojiPickerEmojis';
+const fixtures = vi.hoisted(() => ({
+  emojis: [{
+    emoji: '😀',
+    name: 'grinning face',
+    skin_tone_support: false
+  }, {
+    emoji: '😃',
+    name: 'smiling face',
+    skin_tone_support: false
+  }, {
+    emoji: '😄',
+    name: 'laughing face',
+    skin_tone_support: false
+  }, {
+    emoji: '🐈',
+    name: 'cat',
+    skin_tone_support: false
+  }, {
+    emoji: '👍',
+    name: 'thumbs up',
+    skin_tone_support: true
+  }, {
+    emoji: '👎',
+    name: 'thumbs down',
+    skin_tone_support: true
+  }, {
+    emoji: '👋',
+    name: 'waving hand',
+    skin_tone_support: true
+  }, {
+    emoji: '🤝',
+    name: 'handshake',
+    skin_tone_support: true
+  }],
+  addHistory: vi.fn(),
+  history: []
+}));
+vi.mock('unicode-emoji-json/data-by-group.json', () => ({
+  default: [{
+    slug: 'smileys_emotion',
+    emojis: fixtures.emojis
+  }, {
+    slug: 'people_body',
+    emojis: fixtures.emojis.slice(4)
+  }]
+}));
+vi.mock('unicode-emoji-json/data-by-emoji.json', () => ({
+  default: Object.fromEntries(fixtures.emojis.map(({
+    emoji,
+    ...data
+  }) => [emoji, data]))
+}));
+vi.mock('../../../hooks/emojiHistory', () => ({
+  useEmojiHistory: () => ({
+    addOrUpdateEmojiInHistory: fixtures.addHistory,
+    historyEmojis: fixtures.history.slice()
+  })
+}));
+vi.mock('@chayns-components/core', async () => {
+  const {
+    useRef
+  } = await import('react');
+  return {
+    ...(await import('../../../../../core/src/hooks/ref')),
+    useIsMeasuredClone: () => [false, useRef(null)]
+  };
+});
+const setup = async () => {
+  const onSelect = vi.fn();
+  const renderPicker = (searchString = '', selectedCategory = 'smileys_emotion') => /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: {
+      'secondary-102': 'rgb(255, 0, 0)'
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    "aria-label": "Search"
+  }), /*#__PURE__*/React.createElement(EmojiPickerEmojis, {
+    onSelect: onSelect,
+    searchString: searchString,
+    selectedCategory: selectedCategory
+  }));
+  const view = render(renderPicker());
+  await waitFor(() => expect(view.container.querySelectorAll('[data-emoji]')).toHaveLength(8));
+  return {
+    ...view,
+    onSelect,
+    update: (search = '', category) => view.rerender(renderPicker(search, category))
+  };
+};
+const key = (key, ctrlKey = false) => fireEvent.keyDown(document, {
+  key,
+  ctrlKey
+});
+const navigate = () => {
+  for (let index = 0; index < 7; index += 1) key('ArrowRight');
+};
+const selected = element => expect(getComputedStyle(element).backgroundColor).toBe('rgb(255, 0, 0)');
+beforeEach(() => {
+  fixtures.addHistory.mockReset();
+  fixtures.history = [];
+});
+describe('EmojiPickerEmojis changing results', () => {
+  it('resets to the first result before Enter after narrowing the search', async () => {
+    const {
+      onSelect,
+      update
+    } = await setup();
+    navigate();
+    screen.getByRole('textbox', {
+      name: 'Search'
+    }).focus();
+    update('thumbs');
+    key('Enter');
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith('👍', true);
+    expect(document.activeElement).toBe(screen.getByRole('textbox', {
+      name: 'Search'
+    }));
+  });
+  it('does not select the hint or throw on Enter and Ctrl+Enter without results', async () => {
+    const {
+      onSelect,
+      update,
+      container
+    } = await setup();
+    navigate();
+    update('no-matching-emoji-9284');
+    key('Enter');
+    key('Enter', true);
+    expect(onSelect).not.toHaveBeenCalled();
+    expect(container.querySelector('[data-emoji]')).toBeNull();
+    expect(container.querySelector('[tabindex="0"]')).toBeNull();
+  });
+  it.each(['thumbs', 'no-matching-emoji-9284'])('handles every arrow after searching for %s', async search => {
+    const {
+      onSelect,
+      update,
+      container
+    } = await setup();
+    navigate();
+    update(search);
+    for (const direction of ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown']) key(direction);
+    key('Enter');
+    if (search === 'thumbs') {
+      expect(onSelect).toHaveBeenCalledTimes(1);
+      expect(onSelect).toHaveBeenCalledWith('👍', true);
+      selected(container.querySelector('[data-emoji="👍"]'));
+    } else expect(onSelect).not.toHaveBeenCalled();
+  });
+  it('recovers after clearing an empty search', async () => {
+    const {
+      onSelect,
+      update,
+      container
+    } = await setup();
+    navigate();
+    update('no-matching-emoji-9284');
+    key('ArrowRight');
+    update('');
+    key('ArrowRight');
+    key('Enter');
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith('😃', true);
+    selected(container.querySelector('[data-emoji="😃"]'));
+  });
+  it('resets on category changes and keeps an empty history unselectable', async () => {
+    const {
+      onSelect,
+      update
+    } = await setup();
+    navigate();
+    update('', 'people_body');
+    key('Enter');
+    expect(onSelect).toHaveBeenLastCalledWith('👍', true);
+    onSelect.mockClear();
+    update('', 'history');
+    key('ArrowRight');
+    key('ArrowDown');
+    key('Enter');
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+  it('uses visible positions for highlight, keyboard selection, and mouse selection including index zero', async () => {
+    const {
+      onSelect,
+      update,
+      container
+    } = await setup();
+    update('thumbs');
+    selected(container.querySelector('[data-emoji="👍"]'));
+    key('ArrowRight');
+    selected(container.querySelector('[data-emoji="👎"]'));
+    key('Enter');
+    expect(onSelect).toHaveBeenLastCalledWith('👎', true);
+    fireEvent.click(container.querySelector('[data-emoji="👍"]'));
+    selected(container.querySelector('[data-emoji="👍"]'));
+    expect(onSelect).toHaveBeenLastCalledWith('👍', false);
+  });
+  it('opens the skin tone popup for the visible right-clicked emoji after filtering', async () => {
+    const {
+      update,
+      onSelect,
+      container
+    } = await setup();
+    update('thumbs');
+    fireEvent.contextMenu(container.querySelector('[data-emoji="👎"]'));
+    selected(container.querySelector('[data-emoji="👎"]'));
+    key('ArrowRight');
+    key('Enter');
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith('👎🏼', false);
+  });
+  it('closes a stale popup on result changes and resumes grid controls', async () => {
+    const {
+      update,
+      onSelect,
+      container
+    } = await setup();
+    update('thumbs');
+    key('Enter', true);
+    expect(container.querySelector('[data-skin-tone]')).not.toBeNull();
+    update('cat');
+    expect(container.querySelector('[data-skin-tone]')).toBeNull();
+    key('ArrowRight');
+    key('Enter');
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith('🐈', true);
+  });
+  it('dismisses the old popup even when its emoji remains in a smaller result list', async () => {
+    const {
+      update,
+      onSelect,
+      container
+    } = await setup();
+    update('thumbs');
+    fireEvent.contextMenu(container.querySelector('[data-emoji="👍"]'));
+    expect(container.querySelector('[data-skin-tone]')).not.toBeNull();
+    update('thumbs up');
+    expect(container.querySelector('[data-skin-tone]')).toBeNull();
+    selected(container.querySelector('[data-emoji="👍"]'));
+    key('Enter');
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith('👍', true);
+  });
+  it('does not carry an unsupported Ctrl+Enter popup request to the next emoji', async () => {
+    const {
+      update,
+      onSelect,
+      container
+    } = await setup();
+    update('cat');
+    key('Enter', true);
+    update('thumbs');
+    expect(container.querySelector('[data-skin-tone]')).toBeNull();
+    key('ArrowRight');
+    key('Enter');
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith('👎', true);
+  });
+  it('keeps navigation stable when history is returned as a fresh array', async () => {
+    fixtures.history = fixtures.emojis.slice(0, 3);
+    const {
+      update,
+      onSelect,
+      container
+    } = await setup();
+    update('', 'history');
+    key('ArrowRight');
+    update('', 'history');
+    key('ArrowRight');
+    selected(container.querySelector('[data-emoji="😄"]'));
+    expect(container.querySelectorAll('[data-emoji][tabindex="0"]')).toHaveLength(1);
+    key('Enter');
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith('😄', true);
+  });
+  it('clears a search popup when returning to history with the same visible emoji', async () => {
+    fixtures.history = [fixtures.emojis[4]];
+    const {
+      update,
+      container
+    } = await setup();
+    update('thumbs up', 'history');
+    key('Enter', true);
+    expect(container.querySelector('[data-skin-tone]')).not.toBeNull();
+    update('', 'history');
+    expect(container.querySelector('[data-skin-tone]')).toBeNull();
+    key('Enter', true);
+    expect(container.querySelector('[data-skin-tone]')).toBeNull();
+  });
+  it('keeps normal six-column keyboard navigation and history callbacks', async () => {
+    const {
+      onSelect,
+      container
+    } = await setup();
+    key('ArrowDown');
+    selected(container.querySelector('[data-emoji="👋"]'));
+    key('Enter');
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith('👋', true);
+    expect(fixtures.addHistory).toHaveBeenCalledTimes(1);
+    expect(fixtures.addHistory).toHaveBeenCalledWith({
+      emoji: '👋',
+      name: 'waving hand',
+      skin_tone_support: true
+    });
+  });
+});
+//# sourceMappingURL=EmojiPickerEmojis.test.js.map