npm - @chayns-components/emoji-input - Versions diffs - 5.0.0-beta.840 → 5.0.0-beta.844 - Mend

@chayns-components/emoji-input 5.0.0-beta.840 → 5.0.0-beta.844

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

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

@@ -159,7 +159,7 @@ const EmojiPickerEmojis = ({
         const keywords = _emojilib.default[emoji];
         const germanKeywords = _emojiDeDE.default[emoji];
         if (name.includes(lowerSearchString) || keywords !== null && keywords !== void 0 && keywords.some(keyword => keyword.includes(lowerSearchString)) || germanKeywords !== null && germanKeywords !== void 0 && germanKeywords.some(keyword => keyword.includes(lowerSearchString))) {
-          searchResults.push( /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+          searchResults.push(/*#__PURE__*/_react.default.createElement(_Emoji.default, {
             shouldShowSkinTonePopup: index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup,
             isSelected: index === focusedIndex,
             emoji: emoji,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiPickerEmojis.js","names":["_chaynsApi","require","_emojilib","_interopRequireDefault","_react","_interopRequireWildcard","_dataByEmoji","_dataByGroup","_emojiDeDE","_emojiHistory","_Emoji","_EmojiPickerEmojis","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","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 { 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}\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":[]}
1	+ {"version":3,"file":"EmojiPickerEmojis.js","names":["_chaynsApi","require","_emojilib","_interopRequireDefault","_react","_interopRequireWildcard","_dataByEmoji","_dataByGroup","_emojiDeDE","_emojiHistory","_Emoji","_EmojiPickerEmojis","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","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 { 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}\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":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,SAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAC,uBAAA,CAAAJ,OAAA;AACA,IAAAK,YAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,YAAA,GAAAJ,sBAAA,CAAAF,OAAA;AACA,IAAAO,UAAA,GAAAL,sBAAA,CAAAF,OAAA;AACA,IAAAQ,aAAA,GAAAR,OAAA;AAEA,IAAAS,MAAA,GAAAP,sBAAA,CAAAF,OAAA;AACA,IAAAU,kBAAA,GAAAV,OAAA;AAGoC,SAAAW,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAlB,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAI,UAAA,GAAAJ,CAAA,KAAAK,OAAA,EAAAL,CAAA;AAUpC,MAAMmB,iBAA6C,GAAGA,CAAC;EACnDC,WAAW;EACXC,QAAQ;EACRC,QAAQ;EACRC,YAAY;EACZC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACrE,MAAM,CAACC,uBAAuB,EAAEC,0BAA0B,CAAC,GAAG,IAAAF,eAAQ,EAAC,KAAK,CAAC;EAC7E,MAAM,CAACG,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAJ,eAAQ,EAAS,CAAC,CAAC;EAE3D,MAAMK,QAAQ,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAC7C,MAAMC,6BAA6B,GAAG,IAAAD,aAAM,EAAC,KAAK,CAAC;EAEnD,MAAM;IAAEE;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE/B,MAAM;IAAEC,yBAAyB;IAAEC;EAAc,CAAC,GAAG,IAAAC,6BAAe,EAAC;IACjEnB,WAAW;IACXE,QAAQ;IACRE;EACJ,CAAC,CAAC;EAEF,MAAMgB,2BAA2B,GAAG,IAAAC,kBAAW,EAAEC,SAAkB,IAAK;IACpEb,0BAA0B,CAACa,SAAS,CAAC;IACrCR,6BAA6B,CAACS,OAAO,GAAGD,SAAS;IACjDhB,sBAAsB,CAACgB,SAAS,CAAC;EACrC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,YAAY,GAAG,IAAAH,kBAAW,EAC5B,CAAC;IACGI,KAAK;IACLC,IAAI;IACJC,iBAAiB;IACjBC;EAMJ,CAAC,KAAK;IACF3B,QAAQ,CAACwB,KAAK,CAAC;IAEf,IAAIG,KAAK,EAAE;MACPjB,eAAe,CAACiB,KAAK,CAAC;IAC1B;IAEA,KAAKX,yBAAyB,CAAC;MAAEQ,KAAK;MAAEC,IAAI;MAAEC;IAAkB,CAAC,CAAC;EACtE,CAAC,EACD,CAACV,yBAAyB,EAAEhB,QAAQ,CACxC,CAAC;EAED,IAAA4B,gBAAS,EAAC,MAAM;IACZ,IAAIzB,gBAAgB,EAAE;MAClBO,eAAe,CAAC,CAAC,CAAC;MAElB,MAAMmB,SAAS,GAAGlB,QAAQ,CAACW,OAAO;MAElC,IAAI,CAACO,SAAS,EAAE;QACZ;MACJ;MAEAA,SAAS,CAACC,SAAS,GAAG,CAAC;IAC3B;EACJ,CAAC,EAAE,CAAC3B,gBAAgB,CAAC,CAAC;EAEtB,IAAAyB,gBAAS,EAAC,MAAM;IACZ,MAAMG,aAAa,GAAIC,KAAoB,IAAK;MAC5C,IACI,CAACnB,6BAA6B,CAACS,OAAO,KACrCU,KAAK,CAACC,GAAG,KAAK,SAAS,IACpBD,KAAK,CAACC,GAAG,KAAK,WAAW,IACzBD,KAAK,CAACC,GAAG,KAAK,WAAW,IACzBD,KAAK,CAACC,GAAG,KAAK,YAAY,CAAC,EACjC;QAAA,IAAAC,iBAAA;QACEF,KAAK,CAACG,cAAc,CAAC,CAAC;QACtB,MAAMC,QAAQ,IAAAF,iBAAA,GAAGvB,QAAQ,CAACW,OAAO,cAAAY,iBAAA,uBAAhBA,iBAAA,CAAkBE,QAAQ;QAC3C,IAAIA,QAAQ,IAAIA,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;UACjC,MAAMR,SAAS,GAAGlB,QAAQ,CAACW,OAAO;UAClC,IAAIgB,QAAQ,GAAG7B,YAAY,KAAK,IAAI,GAAGA,YAAY,GAAG,CAAC;UAEvD,IAAIuB,KAAK,CAACO,OAAO,EAAE;YACf;UACJ;UAEA,IAAIP,KAAK,CAACC,GAAG,KAAK,SAAS,EAAE;YACzBK,QAAQ,GAAG,CAACA,QAAQ,GAAG,CAAC,IAAIF,QAAQ,CAACC,MAAM;UAC/C,CAAC,MAAM,IAAIL,KAAK,CAACC,GAAG,KAAK,WAAW,EAAE;YAClCK,QAAQ,GAAG,CAACA,QAAQ,GAAG,CAAC,IAAIF,QAAQ,CAACC,MAAM;UAC/C,CAAC,MAAM,IAAIL,KAAK,CAACC,GAAG,KAAK,WAAW,EAAE;YAClCK,QAAQ,GAAG,CAACA,QAAQ,GAAG,CAAC,IAAIF,QAAQ,CAACC,MAAM;UAC/C,CAAC,MAAM,IAAIL,KAAK,CAACC,GAAG,KAAK,YAAY,EAAE;YACnCK,QAAQ,GAAG,CAACA,QAAQ,GAAG,CAAC,IAAIF,QAAQ,CAACC,MAAM;UAC/C;;UAEA;UACA,IAAI5B,YAAY,KAAK,IAAI,EAAE;YACvB,MAAM+B,WAAW,GAAGJ,QAAQ,CAAC3B,YAAY,CAAmB;YAC5D+B,WAAW,CAACC,QAAQ,GAAG,CAAC,CAAC;UAC7B;UAEA,IAAIH,QAAQ,GAAG,CAAC,EAAE;YACdA,QAAQ,GAAGF,QAAQ,CAACC,MAAM,GAAG,CAAC;UAClC,CAAC,MAAM,IAAIC,QAAQ,GAAGF,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;YACvCC,QAAQ,GAAG,CAAC;UAChB;UAEA5B,eAAe,CAAC4B,QAAQ,CAAC;;UAEzB;UACA,MAAMI,UAAU,GAAGN,QAAQ,CAACE,QAAQ,CAAmB;UACvDI,UAAU,CAACD,QAAQ,GAAG,CAAC;UAEvB,MAAME,aAAa,GAAGd,SAAS,CAACe,qBAAqB,CAAC,CAAC;UACvD,MAAMC,WAAW,GAAGH,UAAU,CAACE,qBAAqB,CAAC,CAAC;UAEtD,IAAIC,WAAW,CAACC,MAAM,GAAGH,aAAa,CAACG,MAAM,EAAE;YAC3CjB,SAAS,CAACC,SAAS,IAAIe,WAAW,CAACC,MAAM,GAAGH,aAAa,CAACG,MAAM;UACpE,CAAC,MAAM,IAAID,WAAW,CAACE,GAAG,GAAGJ,aAAa,CAACI,GAAG,EAAE;YAC5ClB,SAAS,CAACC,SAAS,IAAIa,aAAa,CAACI,GAAG,GAAGF,WAAW,CAACE,GAAG;UAC9D;QACJ;MACJ,CAAC,MAAM,IACHf,KAAK,CAACC,GAAG,KAAK,OAAO,IACrB,CAACpB,6BAA6B,CAACS,OAAO,IACtCb,YAAY,KAAK,IAAI,EACvB;QAAA,IAAAuC,kBAAA;QACE,IAAIhB,KAAK,CAACO,OAAO,EAAE;UACf/B,0BAA0B,CAAC,IAAI,CAAC;UAEhC;QACJ;QAEA,MAAM;UAAEyC;QAAQ,CAAC,IAAAD,kBAAA,GAAGrC,QAAQ,CAACW,OAAO,cAAA0B,kBAAA,uBAAhBA,kBAAA,CAAkBZ,QAAQ,CAAC3B,YAAY,CAAmB;QAE9E,MAAM;UAAEe,KAAK;UAAEC,IAAI;UAAEyB;QAAgB,CAAC,GAAGD,OAAO;QAEhD,IAAI,CAACzB,KAAK,IAAI,CAACC,IAAI,IAAI,CAACyB,eAAe,EAAE;UACrC;QACJ;QAEA3B,YAAY,CAAC;UAAEC,KAAK;UAAEC,IAAI;UAAEC,iBAAiB,EAAEwB,eAAe,KAAK;QAAO,CAAC,CAAC;MAChF;IACJ,CAAC;IAEDC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAErB,aAAa,CAAC;IAEnD,OAAO,MAAM;MACToB,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEtB,aAAa,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,CAACtB,YAAY,EAAEc,YAAY,CAAC,CAAC;EAEhC,MAAM+B,gBAAgB,GAAG,IAAAlC,kBAAW,EAAEO,KAAa,IAAK;IACpDjB,eAAe,CAACiB,KAAK,CAAC;EAC1B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM4B,MAAM,GAAG,IAAAC,cAAO,EAAC,MAAM;IAAA,IAAAC,qBAAA;IACzB,IAAIvD,YAAY,CAACwD,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;MAC5B,MAAMC,iBAAiB,GAAGzD,YAAY,CAAC0D,WAAW,CAAC,CAAC;MAEpD,MAAMC,aAA4B,GAAG,EAAE;MAEvCvE,MAAM,CAACwE,OAAO,CAACC,oBAAS,CAAC,CAACC,OAAO,CAAC,CAAC,CAACxC,KAAK,EAAE;QAAEC,IAAI;QAAEC;MAAkB,CAAC,CAAC,EAAEC,KAAK,KAAK;QAC/E,MAAMsC,QAAQ,GAAIC,iBAAQ,CAAiC1C,KAAK,CAEjD;QAEf,MAAM2C,cAAc,GAAIC,kBAAc,CAAiC5C,KAAK,CAE7D;QAEf,IACIC,IAAI,CAAC4C,QAAQ,CAACV,iBAAiB,CAAC,IAChCM,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAEK,IAAI,CAAEC,OAAO,IAAKA,OAAO,CAACF,QAAQ,CAACV,iBAAiB,CAAC,CAAC,IAChEQ,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAEG,IAAI,CAAEC,OAAO,IAAKA,OAAO,CAACF,QAAQ,CAACV,iBAAiB,CAAC,CAAC,EACxE;UACEE,aAAa,CAACW,IAAI,cACdtG,MAAA,CAAAc,OAAA,CAAAyF,aAAA,CAACjG,MAAA,CAAAQ,OAAK;YACFuB,uBAAuB,EACnBoB,KAAK,KAAKlB,YAAY,IACtBiB,iBAAiB,IACjBnB,uBACH;YACDmE,UAAU,EAAE/C,KAAK,KAAKlB,YAAa;YACnCe,KAAK,EAAEA,KAAM;YACbG,KAAK,EAAEA,KAAM;YACbgD,YAAY,EAAErB,gBAAiB;YAC/BsB,mBAAmB,EAAElD,iBAAkB;YACvCO,GAAG,EAAER,IAAK;YACVA,IAAI,EAAEA,IAAK;YACXoD,uBAAuB,EAAE1D,2BAA4B;YACrDnB,QAAQ,EAAGrB,CAAC,IACR4C,YAAY,CAAC;cAAEC,KAAK,EAAE7C,CAAC;cAAE8C,IAAI;cAAEC,iBAAiB;cAAEC;YAAM,CAAC;UAC5D,CACJ,CACL,CAAC;QACL;MACJ,CAAC,CAAC;MAEF,OAAOkC,aAAa;IACxB;IAEA,IAAI1D,gBAAgB,KAAK,SAAS,EAAE;MAChC,OAAOc,aAAa,CAAC6D,GAAG,CAAC,CAAC;QAAEtD,KAAK;QAAEC,IAAI;QAAEC;MAAkB,CAAC,EAAEC,KAAK,kBAC/DzD,MAAA,CAAAc,OAAA,CAAAyF,aAAA,CAACjG,MAAA,CAAAQ,OAAK;QACF0F,UAAU,EAAE/C,KAAK,KAAKlB,YAAa;QACnCF,uBAAuB,EACnBoB,KAAK,KAAKlB,YAAY,IAAIiB,iBAAiB,IAAInB,uBAClD;QACDiB,KAAK,EAAEA,KAAM;QACbC,IAAI,EAAEA,IAAK;QACXQ,GAAG,EAAER,IAAK;QACVE,KAAK,EAAEA,KAAM;QACbgD,YAAY,EAAErB,gBAAiB;QAC/BuB,uBAAuB,EAAE1D,2BAA4B;QACrDnB,QAAQ,EAAGrB,CAAC,IAAK4C,YAAY,CAAC;UAAEC,KAAK,EAAE7C,CAAC;UAAE8C,IAAI;UAAEC,iBAAiB;UAAEC;QAAM,CAAC,CAAE;QAC5EiD,mBAAmB,EAAE;MAAM,CAC9B,CACJ,CAAC;IACN;IAEA,QAAAnB,qBAAA,GAAOsB,oBAAe,CACjBC,IAAI,CAAC,CAAC;MAAEC;IAAK,CAAC,KAAKA,IAAI,KAAK9E,gBAAgB,CAAC,cAAAsD,qBAAA,uBAD3CA,qBAAA,CAEDF,MAAM,CAACuB,GAAG,CAAC,CAAC;MAAEtD,KAAK;MAAEC,IAAI;MAAEC;IAAkB,CAAC,EAAEC,KAAK,kBACnDzD,MAAA,CAAAc,OAAA,CAAAyF,aAAA,CAACjG,MAAA,CAAAQ,OAAK;MACF0F,UAAU,EAAE/C,KAAK,KAAKlB,YAAa;MACnCF,uBAAuB,EACnBoB,KAAK,KAAKlB,YAAY,IAAIiB,iBAAiB,IAAInB,uBAClD;MACDiB,KAAK,EAAEA,KAAM;MACbC,IAAI,EAAEA,IAAK;MACXE,KAAK,EAAEA,KAAM;MACbgD,YAAY,EAAErB,gBAAiB;MAC/BsB,mBAAmB,EAAElD,iBAAkB;MACvCO,GAAG,EAAER,IAAK;MACVoD,uBAAuB,EAAE1D,2BAA4B;MACrDnB,QAAQ,EAAGrB,CAAC,IAAK4C,YAAY,CAAC;QAAEC,KAAK,EAAE7C,CAAC;QAAE8C,IAAI;QAAEC,iBAAiB;QAAEC;MAAM,CAAC;IAAE,CAC/E,CACJ,CAAC;EACV,CAAC,EAAE,CACCzB,YAAY,EACZC,gBAAgB,EAChBM,YAAY,EACZF,uBAAuB,EACvB+C,gBAAgB,EAChBnC,2BAA2B,EAC3BI,YAAY,EACZN,aAAa,CAChB,CAAC;EAEF,MAAMiE,uBAAuB,GAAG,CAAC3B,MAAM,IAAIA,MAAM,CAAClB,MAAM,KAAK,CAAC;EAE9D,oBACInE,MAAA,CAAAc,OAAA,CAAAyF,aAAA,CAAChG,kBAAA,CAAA0G,uBAAuB;IACpBC,QAAQ,EAAEtE,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEW,IAAK;IACxB4D,oBAAoB,EAAEjF,mBAAoB;IAC1CkF,wBAAwB,EAAEJ,uBAAwB;IAClDK,GAAG,EAAE5E;EAAS,GAEb4C,MAAM,EACN2B,uBAAuB,iBACpBhH,MAAA,CAAAc,OAAA,CAAAyF,aAAA,CAAChG,kBAAA,CAAA+G,oCAAoC,QAAC,oGAGA,CAErB,CAAC;AAElC,CAAC;AAED1F,iBAAiB,CAAC2F,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3G,OAAA,GAErCc,iBAAiB","ignoreList":[]}

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

@@ -92,7 +92,7 @@ const SkinTonePopup = ({
           onSelect(emojiWithSkinTone);
           onHidePopup();
         };
-        result.push( /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledSkinTonePopupContentEmoji, {
+        result.push(/*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledSkinTonePopupContentEmoji, {
           key: key,
           "data-skin-tone": emojiWithSkinTone,
           $isSelected: index === focusedIndex,

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

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

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

@@ -150,7 +150,7 @@ const EmojiPickerEmojis = _ref => {
         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, {
+          searchResults.push(/*#__PURE__*/React.createElement(Emoji, {
             shouldShowSkinTonePopup: index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup,
             isSelected: index === focusedIndex,
             emoji: emoji,

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

	@@ -1 +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 { 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}\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":[]}
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 { 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}\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":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,QAAQ,MAAM,UAAU;AAC/B,OAAOC,KAAK,IAAQC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACpF,OAAOC,SAAS,MAAM,uCAAuC;AAC7D,OAAOC,eAAe,MAAM,uCAAuC;AACnE,OAAOC,cAAc,MAAM,qCAAqC;AAChE,SAASC,eAAe,QAAQ,6BAA6B;AAE7D,OAAOC,KAAK,MAAM,eAAe;AACjC,SACIC,uBAAuB,EACvBC,oCAAoC,QACjC,4BAA4B;AAUnC,MAAMC,iBAA6C,GAAGC,IAAA,IAMhD;EAAA,IANiD;IACnDC,WAAW;IACXC,QAAQ;IACRC,QAAQ;IACRC,YAAY;IACZC;EACJ,CAAC,GAAAL,IAAA;EACG,MAAM,CAACM,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EACrE,MAAM,CAACiB,uBAAuB,EAAEC,0BAA0B,CAAC,GAAGlB,QAAQ,CAAC,KAAK,CAAC;EAC7E,MAAM,CAACmB,YAAY,EAAEC,eAAe,CAAC,GAAGpB,QAAQ,CAAS,CAAC,CAAC;EAE3D,MAAMqB,QAAQ,GAAGtB,MAAM,CAAiB,IAAI,CAAC;EAC7C,MAAMuB,6BAA6B,GAAGvB,MAAM,CAAC,KAAK,CAAC;EAEnD,MAAM;IAAEwB;EAAQ,CAAC,GAAG9B,SAAS,CAAC,CAAC;EAE/B,MAAM;IAAE+B,yBAAyB;IAAEC;EAAc,CAAC,GAAGrB,eAAe,CAAC;IACjEM,WAAW;IACXE,QAAQ;IACRE;EACJ,CAAC,CAAC;EAEF,MAAMY,2BAA2B,GAAG9B,WAAW,CAAE+B,SAAkB,IAAK;IACpET,0BAA0B,CAACS,SAAS,CAAC;IACrCL,6BAA6B,CAACM,OAAO,GAAGD,SAAS;IACjDX,sBAAsB,CAACW,SAAS,CAAC;EACrC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,YAAY,GAAGjC,WAAW,CAC5BkC,KAAA,IAUM;IAAA,IAVL;MACGC,KAAK;MACLC,IAAI;MACJC,iBAAiB;MACjBC;IAMJ,CAAC,GAAAJ,KAAA;IACGnB,QAAQ,CAACoB,KAAK,CAAC;IAEf,IAAIG,KAAK,EAAE;MACPd,eAAe,CAACc,KAAK,CAAC;IAC1B;IAEA,KAAKV,yBAAyB,CAAC;MAAEO,KAAK;MAAEC,IAAI;MAAEC;IAAkB,CAAC,CAAC;EACtE,CAAC,EACD,CAACT,yBAAyB,EAAEb,QAAQ,CACxC,CAAC;EAEDd,SAAS,CAAC,MAAM;IACZ,IAAIiB,gBAAgB,EAAE;MAClBM,eAAe,CAAC,CAAC,CAAC;MAElB,MAAMe,SAAS,GAAGd,QAAQ,CAACO,OAAO;MAElC,IAAI,CAACO,SAAS,EAAE;QACZ;MACJ;MAEAA,SAAS,CAACC,SAAS,GAAG,CAAC;IAC3B;EACJ,CAAC,EAAE,CAACtB,gBAAgB,CAAC,CAAC;EAEtBjB,SAAS,CAAC,MAAM;IACZ,MAAMwC,aAAa,GAAIC,KAAoB,IAAK;MAC5C,IACI,CAAChB,6BAA6B,CAACM,OAAO,KACrCU,KAAK,CAACC,GAAG,KAAK,SAAS,IACpBD,KAAK,CAACC,GAAG,KAAK,WAAW,IACzBD,KAAK,CAACC,GAAG,KAAK,WAAW,IACzBD,KAAK,CAACC,GAAG,KAAK,YAAY,CAAC,EACjC;QACED,KAAK,CAACE,cAAc,CAAC,CAAC;QACtB,MAAMC,QAAQ,GAAGpB,QAAQ,CAACO,OAAO,EAAEa,QAAQ;QAC3C,IAAIA,QAAQ,IAAIA,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;UACjC,MAAMP,SAAS,GAAGd,QAAQ,CAACO,OAAO;UAClC,IAAIe,QAAQ,GAAGxB,YAAY,KAAK,IAAI,GAAGA,YAAY,GAAG,CAAC;UAEvD,IAAImB,KAAK,CAACM,OAAO,EAAE;YACf;UACJ;UAEA,IAAIN,KAAK,CAACC,GAAG,KAAK,SAAS,EAAE;YACzBI,QAAQ,GAAG,CAACA,QAAQ,GAAG,CAAC,IAAIF,QAAQ,CAACC,MAAM;UAC/C,CAAC,MAAM,IAAIJ,KAAK,CAACC,GAAG,KAAK,WAAW,EAAE;YAClCI,QAAQ,GAAG,CAACA,QAAQ,GAAG,CAAC,IAAIF,QAAQ,CAACC,MAAM;UAC/C,CAAC,MAAM,IAAIJ,KAAK,CAACC,GAAG,KAAK,WAAW,EAAE;YAClCI,QAAQ,GAAG,CAACA,QAAQ,GAAG,CAAC,IAAIF,QAAQ,CAACC,MAAM;UAC/C,CAAC,MAAM,IAAIJ,KAAK,CAACC,GAAG,KAAK,YAAY,EAAE;YACnCI,QAAQ,GAAG,CAACA,QAAQ,GAAG,CAAC,IAAIF,QAAQ,CAACC,MAAM;UAC/C;;UAEA;UACA,IAAIvB,YAAY,KAAK,IAAI,EAAE;YACvB,MAAM0B,WAAW,GAAGJ,QAAQ,CAACtB,YAAY,CAAmB;YAC5D0B,WAAW,CAACC,QAAQ,GAAG,CAAC,CAAC;UAC7B;UAEA,IAAIH,QAAQ,GAAG,CAAC,EAAE;YACdA,QAAQ,GAAGF,QAAQ,CAACC,MAAM,GAAG,CAAC;UAClC,CAAC,MAAM,IAAIC,QAAQ,GAAGF,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;YACvCC,QAAQ,GAAG,CAAC;UAChB;UAEAvB,eAAe,CAACuB,QAAQ,CAAC;;UAEzB;UACA,MAAMI,UAAU,GAAGN,QAAQ,CAACE,QAAQ,CAAmB;UACvDI,UAAU,CAACD,QAAQ,GAAG,CAAC;UAEvB,MAAME,aAAa,GAAGb,SAAS,CAACc,qBAAqB,CAAC,CAAC;UACvD,MAAMC,WAAW,GAAGH,UAAU,CAACE,qBAAqB,CAAC,CAAC;UAEtD,IAAIC,WAAW,CAACC,MAAM,GAAGH,aAAa,CAACG,MAAM,EAAE;YAC3ChB,SAAS,CAACC,SAAS,IAAIc,WAAW,CAACC,MAAM,GAAGH,aAAa,CAACG,MAAM;UACpE,CAAC,MAAM,IAAID,WAAW,CAACE,GAAG,GAAGJ,aAAa,CAACI,GAAG,EAAE;YAC5CjB,SAAS,CAACC,SAAS,IAAIY,aAAa,CAACI,GAAG,GAAGF,WAAW,CAACE,GAAG;UAC9D;QACJ;MACJ,CAAC,MAAM,IACHd,KAAK,CAACC,GAAG,KAAK,OAAO,IACrB,CAACjB,6BAA6B,CAACM,OAAO,IACtCT,YAAY,KAAK,IAAI,EACvB;QACE,IAAImB,KAAK,CAACM,OAAO,EAAE;UACf1B,0BAA0B,CAAC,IAAI,CAAC;UAEhC;QACJ;QAEA,MAAM;UAAEmC;QAAQ,CAAC,GAAGhC,QAAQ,CAACO,OAAO,EAAEa,QAAQ,CAACtB,YAAY,CAAmB;QAE9E,MAAM;UAAEY,KAAK;UAAEC,IAAI;UAAEsB;QAAgB,CAAC,GAAGD,OAAO;QAEhD,IAAI,CAACtB,KAAK,IAAI,CAACC,IAAI,IAAI,CAACsB,eAAe,EAAE;UACrC;QACJ;QAEAzB,YAAY,CAAC;UAAEE,KAAK;UAAEC,IAAI;UAAEC,iBAAiB,EAAEqB,eAAe,KAAK;QAAO,CAAC,CAAC;MAChF;IACJ,CAAC;IAEDC,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEnB,aAAa,CAAC;IAEnD,OAAO,MAAM;MACTkB,QAAQ,CAACE,mBAAmB,CAAC,SAAS,EAAEpB,aAAa,CAAC;IAC1D,CAAC;EACL,CAAC,EAAE,CAAClB,YAAY,EAAEU,YAAY,CAAC,CAAC;EAEhC,MAAM6B,gBAAgB,GAAG9D,WAAW,CAAEsC,KAAa,IAAK;IACpDd,eAAe,CAACc,KAAK,CAAC;EAC1B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMyB,MAAM,GAAG7D,OAAO,CAAC,MAAM;IACzB,IAAIe,YAAY,CAAC+C,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;MAC5B,MAAMC,iBAAiB,GAAGhD,YAAY,CAACiD,WAAW,CAAC,CAAC;MAEpD,MAAMC,aAA4B,GAAG,EAAE;MAEvCC,MAAM,CAACC,OAAO,CAAChE,SAAS,CAAC,CAACiE,OAAO,CAAC,CAAAC,KAAA,EAAuCjC,KAAK,KAAK;QAAA,IAAhD,CAACH,KAAK,EAAE;UAAEC,IAAI;UAAEC;QAAkB,CAAC,CAAC,GAAAkC,KAAA;QACnE,MAAMC,QAAQ,GAAI1E,QAAQ,CAAiCqC,KAAK,CAEjD;QAEf,MAAMsC,cAAc,GAAIlE,cAAc,CAAiC4B,KAAK,CAE7D;QAEf,IACIC,IAAI,CAACsC,QAAQ,CAACT,iBAAiB,CAAC,IAChCO,QAAQ,EAAEG,IAAI,CAAEC,OAAO,IAAKA,OAAO,CAACF,QAAQ,CAACT,iBAAiB,CAAC,CAAC,IAChEQ,cAAc,EAAEE,IAAI,CAAEC,OAAO,IAAKA,OAAO,CAACF,QAAQ,CAACT,iBAAiB,CAAC,CAAC,EACxE;UACEE,aAAa,CAACU,IAAI,cACd9E,KAAA,CAAA+E,aAAA,CAACrE,KAAK;YACFY,uBAAuB,EACnBiB,KAAK,KAAKf,YAAY,IACtBc,iBAAiB,IACjBhB,uBACH;YACD0D,UAAU,EAAEzC,KAAK,KAAKf,YAAa;YACnCY,KAAK,EAAEA,KAAM;YACbG,KAAK,EAAEA,KAAM;YACb0C,YAAY,EAAElB,gBAAiB;YAC/BmB,mBAAmB,EAAE5C,iBAAkB;YACvCM,GAAG,EAAEP,IAAK;YACVA,IAAI,EAAEA,IAAK;YACX8C,uBAAuB,EAAEpD,2BAA4B;YACrDf,QAAQ,EAAGoE,CAAC,IACRlD,YAAY,CAAC;cAAEE,KAAK,EAAEgD,CAAC;cAAE/C,IAAI;cAAEC,iBAAiB;cAAEC;YAAM,CAAC;UAC5D,CACJ,CACL,CAAC;QACL;MACJ,CAAC,CAAC;MAEF,OAAO6B,aAAa;IACxB;IAEA,IAAIjD,gBAAgB,KAAK,SAAS,EAAE;MAChC,OAAOW,aAAa,CAACuD,GAAG,CAAC,CAAAC,KAAA,EAAqC/C,KAAK;QAAA,IAAzC;UAAEH,KAAK;UAAEC,IAAI;UAAEC;QAAkB,CAAC,GAAAgD,KAAA;QAAA,oBACxDtF,KAAA,CAAA+E,aAAA,CAACrE,KAAK;UACFsE,UAAU,EAAEzC,KAAK,KAAKf,YAAa;UACnCF,uBAAuB,EACnBiB,KAAK,KAAKf,YAAY,IAAIc,iBAAiB,IAAIhB,uBAClD;UACDc,KAAK,EAAEA,KAAM;UACbC,IAAI,EAAEA,IAAK;UACXO,GAAG,EAAEP,IAAK;UACVE,KAAK,EAAEA,KAAM;UACb0C,YAAY,EAAElB,gBAAiB;UAC/BoB,uBAAuB,EAAEpD,2BAA4B;UACrDf,QAAQ,EAAGoE,CAAC,IAAKlD,YAAY,CAAC;YAAEE,KAAK,EAAEgD,CAAC;YAAE/C,IAAI;YAAEC,iBAAiB;YAAEC;UAAM,CAAC,CAAE;UAC5E2C,mBAAmB,EAAE;QAAM,CAC9B,CAAC;MAAA,CACL,CAAC;IACN;IAEA,OAAO3E,eAAe,CACjBgF,IAAI,CAACC,KAAA;MAAA,IAAC;QAAEC;MAAK,CAAC,GAAAD,KAAA;MAAA,OAAKC,IAAI,KAAKtE,gBAAgB;IAAA,EAAC,EAC5C6C,MAAM,CAACqB,GAAG,CAAC,CAAAK,KAAA,EAAqCnD,KAAK;MAAA,IAAzC;QAAEH,KAAK;QAAEC,IAAI;QAAEC;MAAkB,CAAC,GAAAoD,KAAA;MAAA,oBAC5C1F,KAAA,CAAA+E,aAAA,CAACrE,KAAK;QACFsE,UAAU,EAAEzC,KAAK,KAAKf,YAAa;QACnCF,uBAAuB,EACnBiB,KAAK,KAAKf,YAAY,IAAIc,iBAAiB,IAAIhB,uBAClD;QACDc,KAAK,EAAEA,KAAM;QACbC,IAAI,EAAEA,IAAK;QACXE,KAAK,EAAEA,KAAM;QACb0C,YAAY,EAAElB,gBAAiB;QAC/BmB,mBAAmB,EAAE5C,iBAAkB;QACvCM,GAAG,EAAEP,IAAK;QACV8C,uBAAuB,EAAEpD,2BAA4B;QACrDf,QAAQ,EAAGoE,CAAC,IAAKlD,YAAY,CAAC;UAAEE,KAAK,EAAEgD,CAAC;UAAE/C,IAAI;UAAEC,iBAAiB;UAAEC;QAAM,CAAC;MAAE,CAC/E,CAAC;IAAA,CACL,CAAC;EACV,CAAC,EAAE,CACCrB,YAAY,EACZC,gBAAgB,EAChBK,YAAY,EACZF,uBAAuB,EACvByC,gBAAgB,EAChBhC,2BAA2B,EAC3BG,YAAY,EACZJ,aAAa,CAChB,CAAC;EAEF,MAAM6D,uBAAuB,GAAG,CAAC3B,MAAM,IAAIA,MAAM,CAACjB,MAAM,KAAK,CAAC;EAE9D,oBACI/C,KAAA,CAAA+E,aAAA,CAACpE,uBAAuB;IACpBiF,QAAQ,EAAEhE,OAAO,EAAES,IAAK;IACxBwD,oBAAoB,EAAEzE,mBAAoB;IAC1C0E,wBAAwB,EAAEH,uBAAwB;IAClDI,GAAG,EAAErE;EAAS,GAEbsC,MAAM,EACN2B,uBAAuB,iBACpB3F,KAAA,CAAA+E,aAAA,CAACnE,oCAAoC,QAAC,oGAGA,CAErB,CAAC;AAElC,CAAC;AAEDC,iBAAiB,CAACmF,WAAW,GAAG,mBAAmB;AAEnD,eAAenF,iBAAiB","ignoreList":[]}

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

@@ -83,7 +83,7 @@ const SkinTonePopup = _ref => {
           onSelect(emojiWithSkinTone);
           onHidePopup();
         };
-        result.push( /*#__PURE__*/React.createElement(StyledSkinTonePopupContentEmoji, {
+        result.push(/*#__PURE__*/React.createElement(StyledSkinTonePopupContentEmoji, {
           key: key,
           "data-skin-tone": emojiWithSkinTone,
           $isSelected: index === focusedIndex,

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

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.0.0-beta.840",
+    "version": "5.0.0-beta.844",
     "description": "Input field that supports HTML elements and emojis",
     "sideEffects": false,
     "browserslist": [
@@ -52,12 +52,12 @@
         "url": "https://github.com/TobitSoftware/chayns-components/issues"
     },
     "devDependencies": {
-        "@babel/cli": "^7.25.6",
-        "@babel/core": "^7.25.2",
-        "@babel/preset-env": "^7.25.4",
-        "@babel/preset-react": "^7.24.7",
-        "@babel/preset-typescript": "^7.24.7",
-        "@types/react": "^18.3.10",
+        "@babel/cli": "^7.25.7",
+        "@babel/core": "^7.25.7",
+        "@babel/preset-env": "^7.25.7",
+        "@babel/preset-react": "^7.25.7",
+        "@babel/preset-typescript": "^7.25.7",
+        "@types/react": "^18.3.11",
         "@types/react-dom": "^18.3.0",
         "@types/styled-components": "^5.1.34",
         "@types/uuid": "^10.0.0",
@@ -67,10 +67,10 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "styled-components": "^6.1.13",
-        "typescript": "^5.6.2"
+        "typescript": "^5.6.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.840",
+        "@chayns-components/core": "^5.0.0-beta.844",
         "emojilib": "^3.0.12",
         "unicode-emoji-json": "^0.8.0"
     },
@@ -84,5 +84,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "3c4c61ed583723172bc62ecc68898ed4110053e8"
+    "gitHead": "4d96c4ab39328c93246cd73a90cf63ffbffcb20a"
 }