npm - @chayns-components/emoji-input - Versions diffs - 5.5.30 → 5.5.31-alpha.0 - Mend

@chayns-components/emoji-input 5.5.30 → 5.5.31-alpha.0

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 (28) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiPickerEmojis.js","names":["_core","require","_emojilib","_interopRequireDefault","_react","_interopRequireWildcard","_emojiDeDE","_emojiHistory","_Emoji","_EmojiPickerEmojis","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EmojiPickerEmojis","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","useState","shouldShowSkinTonePopup","setShouldShowSkinTonePopup","focusedIndex","setFocusedIndex","emojiCategories","setEmojiCategories","emojiList","setEmojiList","useEffect","Promise","resolve","then","categories","emojis","shouldPreventListener","ref","useIsMeasuredClone","emojiRef","useRef","shouldPreventEmojiControlsRef","combinedRef","useCombinedRefs","addOrUpdateEmojiInHistory","historyEmojis","useEmojiHistory","handlePopupVisibilityChange","useCallback","isVisible","current","handleSelect","emoji","name","skin_tone_support","index","container","scrollTop","handleKeyDown","event","key","_emojiRef$current","preventDefault","children","length","newIndex","ctrlKey","prevElement","tabIndex","newElement","containerRect","getBoundingClientRect","elementRect","bottom","top","_emojiRef$current2","dataset","skinToneSupport","document","addEventListener","removeEventListener","handleRightClick","useMemo","_emojiCategories$find","trim","lowerSearchString","toLowerCase","searchResults","entries","forEach","keywords","emojiLib","germanKeywords","germanEmojiLib","includes","some","keyword","push","createElement","isSelected","onRightClick","isSkinToneSupported","onPopupVisibilityChange","map","find","slug","shouldShowNoContentInfo","StyledEmojiPickerEmojis","className","$shouldPreventScroll","$shouldShowNoContentInfo","StyledEmojiPickerEmojisNoContentInfo","displayName","_default","exports"],"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) => 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 emoji,\n name,\n skin_tone_support,\n index,\n }: {\n emoji: string;\n name: string;\n skin_tone_support: boolean;\n index?: number;\n }) => {\n onSelect(emoji);\n\n if (index) {\n setFocusedIndex(index);\n }\n\n void addOrUpdateEmojiInHistory({ emoji, name, skin_tone_support });\n },\n [addOrUpdateEmojiInHistory, onSelect],\n );\n\n useEffect(() => {\n if (selectedCategory) {\n setFocusedIndex(0);\n\n const container = emojiRef.current;\n\n if (!container) {\n return;\n }\n\n container.scrollTop = 0;\n }\n }, [selectedCategory]);\n\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (shouldPreventListener) {\n return;\n }\n\n if (\n !shouldPreventEmojiControlsRef.current &&\n (event.key === 'ArrowUp' \|\|\n event.key === 'ArrowDown' \|\|\n event.key === 'ArrowLeft' \|\|\n event.key === 'ArrowRight')\n ) {\n event.preventDefault();\n const children = emojiRef.current?.children;\n if (children && children.length > 0) {\n const container = emojiRef.current;\n let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n if (event.ctrlKey) {\n return;\n }\n\n if (event.key === 'ArrowUp') {\n newIndex = (newIndex - 6) % children.length;\n } else if (event.key === 'ArrowDown') {\n newIndex = (newIndex + 6) % children.length;\n } else if (event.key === 'ArrowLeft') {\n newIndex = (newIndex - 1) % children.length;\n } else if (event.key === 'ArrowRight') {\n newIndex = (newIndex + 1) % children.length;\n }\n\n // remove focus from the old element\n if (focusedIndex !== null) {\n const prevElement = children[focusedIndex] as HTMLDivElement;\n prevElement.tabIndex = -1;\n }\n\n if (newIndex < 0) {\n newIndex = children.length - 1;\n } else if (newIndex > children.length - 1) {\n newIndex = 0;\n }\n\n setFocusedIndex(newIndex);\n\n // Set focus to the element\n const newElement = children[newIndex] as HTMLDivElement;\n newElement.tabIndex = 0;\n\n const containerRect = container.getBoundingClientRect();\n const elementRect = newElement.getBoundingClientRect();\n\n if (elementRect.bottom > containerRect.bottom) {\n container.scrollTop += elementRect.bottom - containerRect.bottom;\n } else if (elementRect.top < containerRect.top) {\n container.scrollTop -= containerRect.top - elementRect.top;\n }\n }\n } else if (\n event.key === 'Enter' &&\n !shouldPreventEmojiControlsRef.current &&\n focusedIndex !== null\n ) {\n if (event.ctrlKey) {\n setShouldShowSkinTonePopup(true);\n\n return;\n }\n\n const { dataset } = emojiRef.current?.children[focusedIndex] as HTMLDivElement;\n\n const { emoji, name, skinToneSupport } = dataset;\n\n if (!emoji \|\| !name \|\| !skinToneSupport) {\n return;\n }\n\n handleSelect({ emoji, name, skin_tone_support: skinToneSupport === 'true' });\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown);\n };\n }, [focusedIndex, handleSelect, shouldPreventListener]);\n\n const handleRightClick = useCallback((index: number) => {\n setFocusedIndex(index);\n }, []);\n\n const emojis = useMemo(() => {\n if (searchString.trim() !== '') {\n const lowerSearchString = searchString.toLowerCase();\n\n const searchResults: JSX.Element[] = [];\n\n Object.entries(emojiList).forEach(([emoji, { name, skin_tone_support }], index) => {\n const keywords = (emojiLib as { [key: string]: string[] })[emoji] as\n \| string[]\n \| undefined;\n\n const germanKeywords = (germanEmojiLib as { [key: string]: string[] })[emoji] as\n \| string[]\n \| undefined;\n\n if (\n name.includes(lowerSearchString) \|\|\n keywords?.some((keyword) => keyword.includes(lowerSearchString)) \|\|\n germanKeywords?.some((keyword) => keyword.includes(lowerSearchString))\n ) {\n searchResults.push(\n <Emoji\n shouldShowSkinTonePopup={\n index === focusedIndex &&\n skin_tone_support &&\n shouldShowSkinTonePopup\n }\n isSelected={index === focusedIndex}\n emoji={emoji}\n index={index}\n onRightClick={handleRightClick}\n isSkinToneSupported={skin_tone_support}\n key={name}\n name={name}\n onPopupVisibilityChange={handlePopupVisibilityChange}\n onSelect={(e) =>\n handleSelect({ emoji: e, name, skin_tone_support, index })\n }\n emojiList={emojiList}\n />,\n );\n }\n });\n\n return searchResults;\n }\n\n if (selectedCategory === 'history') {\n return historyEmojis.map(({ emoji, name, skin_tone_support }, index) => (\n <Emoji\n isSelected={index === focusedIndex}\n shouldShowSkinTonePopup={\n index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n }\n emoji={emoji}\n name={name}\n key={name}\n index={index}\n onRightClick={handleRightClick}\n onPopupVisibilityChange={handlePopupVisibilityChange}\n onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n isSkinToneSupported={false}\n emojiList={emojiList}\n />\n ));\n }\n\n return emojiCategories\n .find(({ slug }) => slug === selectedCategory)\n ?.emojis.map(({ emoji, name, skin_tone_support }, index) => (\n <Emoji\n isSelected={index === focusedIndex}\n shouldShowSkinTonePopup={\n index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n }\n emoji={emoji}\n name={name}\n index={index}\n onRightClick={handleRightClick}\n isSkinToneSupported={skin_tone_support}\n key={name}\n onPopupVisibilityChange={handlePopupVisibilityChange}\n onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n emojiList={emojiList}\n />\n ));\n }, [\n searchString,\n selectedCategory,\n focusedIndex,\n shouldShowSkinTonePopup,\n handleRightClick,\n handlePopupVisibilityChange,\n handleSelect,\n historyEmojis,\n ]);\n\n const shouldShowNoContentInfo = !emojis \|\| emojis.length === 0;\n\n return (\n <StyledEmojiPickerEmojis\n 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":[]}
1	+ {"version":3,"file":"EmojiPickerEmojis.js","names":["_core","require","_emojilib","_interopRequireDefault","_react","_interopRequireWildcard","_emojiDeDE","_emojiHistory","_Emoji","_EmojiPickerEmojis","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EmojiPickerEmojis","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","useState","shouldShowSkinTonePopup","setShouldShowSkinTonePopup","focusedIndex","setFocusedIndex","emojiCategories","setEmojiCategories","emojiList","setEmojiList","useEffect","Promise","resolve","then","categories","emojis","shouldPreventListener","ref","useIsMeasuredClone","emojiRef","useRef","shouldPreventEmojiControlsRef","combinedRef","useCombinedRefs","addOrUpdateEmojiInHistory","historyEmojis","useEmojiHistory","handlePopupVisibilityChange","useCallback","isVisible","current","handleSelect","emoji","name","skin_tone_support","index","shouldRestoreInputFocus","container","scrollTop","handleKeyDown","event","key","_emojiRef$current","preventDefault","children","length","newIndex","ctrlKey","prevElement","tabIndex","newElement","containerRect","getBoundingClientRect","elementRect","bottom","top","_emojiRef$current2","dataset","skinToneSupport","document","addEventListener","removeEventListener","handleRightClick","useMemo","_emojiCategories$find","trim","lowerSearchString","toLowerCase","searchResults","entries","forEach","keywords","emojiLib","germanKeywords","germanEmojiLib","includes","some","keyword","push","createElement","isSelected","onRightClick","isSkinToneSupported","onPopupVisibilityChange","map","find","slug","shouldShowNoContentInfo","StyledEmojiPickerEmojis","className","$shouldPreventScroll","$shouldShowNoContentInfo","StyledEmojiPickerEmojisNoContentInfo","displayName","_default","exports"],"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":[]}

package/lib/cjs/components/emoji-picker-popup/EmojiPickerPopup.js CHANGED Viewed

@@ -13,24 +13,52 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 const EmojiPickerPopup = ({
   accessToken,
   container,
+  isDisabled,
   onPopupVisibilityChange,
   onSelect,
-  personId
+  onSelectWithKeyboard,
+  personId,
+  shouldEnableKeyboardHighlighting
 }) => {
   const popupRef = (0, _react.useRef)(null);
+  const triggerRef = (0, _react.useRef)(null);
+  const shouldShowKeyboardHighlighting = (0, _core.useKeyboardFocusHighlighting)(isDisabled ? false : shouldEnableKeyboardHighlighting);
+  (0, _core.useFocusRingPortal)(triggerRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    shape: 'circle',
+    padding: 4
+  });
   const handleKeyPress = (0, _react.useCallback)(event => {
     if (event.key === 'Escape' && !event.shiftKey) {
       var _popupRef$current;
       (_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 || _popupRef$current.hide();
     }
   }, []);
+  const handleTriggerKeyDown = (0, _react.useCallback)(event => {
+    if (isDisabled) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      var _popupRef$current2;
+      event.preventDefault();
+      (_popupRef$current2 = popupRef.current) === null || _popupRef$current2 === void 0 || _popupRef$current2.show();
+    }
+  }, [isDisabled]);
+  const handleSelect = (0, _react.useCallback)((emoji, shouldRestoreInputFocus) => {
+    onSelect(emoji);
+    if (shouldRestoreInputFocus) {
+      onSelectWithKeyboard === null || onSelectWithKeyboard === void 0 || onSelectWithKeyboard(emoji);
+    }
+  }, [onSelect, onSelectWithKeyboard]);
   (0, _react.useEffect)(() => {
     document.addEventListener('keydown', handleKeyPress);
     return () => {
       document.removeEventListener('keydown', handleKeyPress);
     };
   }, [handleKeyPress]);
-  return /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.StyledEmojiPickerPopup, null, /*#__PURE__*/_react.default.createElement(_core.Popup, {
+  return /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.StyledEmojiPickerPopup, {
+    "aria-hidden": isDisabled
+  }, /*#__PURE__*/_react.default.createElement(_core.Popup, {
     container: container,
     ref: popupRef,
     onHide: () => typeof onPopupVisibilityChange === 'function' ? onPopupVisibilityChange(false) : undefined,
@@ -39,14 +67,26 @@ const EmojiPickerPopup = ({
       shouldChangeColor: false
     }, /*#__PURE__*/_react.default.createElement(_EmojiPicker.default, {
       accessToken: accessToken,
-      onSelect: onSelect,
+      onSelect: handleSelect,
       personId: personId
     }))
-  }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    "aria-label": "Open emoji picker",
     className: "prevent-lose-focus",
+    disabled: isDisabled,
+    onClick: event => {
+      if (isDisabled) {
+        event.stopPropagation();
+      }
+    },
+    onKeyDown: handleTriggerKeyDown,
+    ref: triggerRef,
+    tabIndex: isDisabled ? -1 : 0,
+    type: "button"
+  }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
     icons: ['far fa-smile'],
     size: 18
-  })));
+  }))));
 };
 EmojiPickerPopup.displayName = 'EmojiPickerPopup';
 var _default = exports.default = EmojiPickerPopup;

package/lib/cjs/components/emoji-picker-popup/EmojiPickerPopup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiPickerPopup.js","names":["_core","require","_react","_interopRequireWildcard","_EmojiPicker","_interopRequireDefault","_EmojiPickerPopup","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EmojiPickerPopup","accessToken","container","onPopupVisibilityChange","onSelect","personId","popupRef","useRef","handleKeyPress","useCallback","event","key","shiftKey","_popupRef$current","current","hide","useEffect","document","addEventListener","removeEventListener","createElement","StyledEmojiPickerPopup","Popup","ref","onHide","undefined","onShow","content","AreaProvider","shouldChangeColor","Icon","className","icons","size","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import { AreaProvider, Icon, Popup, PopupAlignment, type PopupRef } from '@chayns-components/core';\nimport React, { FC, useCallback, useEffect, useRef } from 'react';\nimport EmojiPicker from '../emoji-picker/EmojiPicker';\nimport { StyledEmojiPickerPopup } from './EmojiPickerPopup.styles';\n\nexport type EmojiPickerPopupProps = {\n /*\n Access token of the logged-in user. Is needed to load and save the history of the emojis.\n /\n accessToken?: string;\n /\n The DOM element that should receive the popup portal.\n /\n container?: Element;\n /\n Function that is executed when the visibility of the popup changes.\n * @param {boolean} isVisible - Whether the popup is visible or not\n /\n onPopupVisibilityChange?: (isVisible: boolean) => void;\n /\n Person id of the logged-in user. Is needed to load and save the history of the emojis.\n /\n personId?: string;\n /\n Function executed when an emoji is selected in the popup\n * @param {string} emoji - Emoji that was selected\n */\n onSelect: (emoji: string) => void;\n};\n\nconst EmojiPickerPopup: FC<EmojiPickerPopupProps> = ({\n accessToken,\n container,\n onPopupVisibilityChange,\n onSelect,\n personId,\n}) => {\n const popupRef = useRef<PopupRef>(null);\n\n const handleKeyPress = useCallback((event: KeyboardEvent) => {\n if (event.key === 'Escape' && !event.shiftKey) {\n popupRef.current?.hide();\n }\n }, []);\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyPress);\n\n return () => {\n document.removeEventListener('keydown', handleKeyPress);\n };\n }, [handleKeyPress]);\n\n return (\n <StyledEmojiPickerPopup>\n <Popup\n container={container}\n ref={popupRef}\n onHide={() =>\n typeof onPopupVisibilityChange === 'function'\n ? onPopupVisibilityChange(false)\n : undefined\n }\n onShow={() =>\n typeof onPopupVisibilityChange === 'function'\n ? onPopupVisibilityChange(true)\n : undefined\n }\n content={\n <AreaProvider shouldChangeColor={false}>\n <EmojiPicker\n accessToken={accessToken}\n onSelect={onSelect}\n personId={personId}\n />\n </AreaProvider>\n }\n >\n <Icon className=\"prevent-lose-focus\" icons={['far fa-smile']} size={18} />\n </Popup>\n </StyledEmojiPickerPopup>\n );\n};\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"EmojiPickerPopup.js","names":["_core","require","_react","_interopRequireWildcard","_EmojiPicker","_interopRequireDefault","_EmojiPickerPopup","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EmojiPickerPopup","accessToken","container","isDisabled","onPopupVisibilityChange","onSelect","onSelectWithKeyboard","personId","shouldEnableKeyboardHighlighting","popupRef","useRef","triggerRef","shouldShowKeyboardHighlighting","useKeyboardFocusHighlighting","useFocusRingPortal","isEnabled","shape","padding","handleKeyPress","useCallback","event","key","shiftKey","_popupRef$current","current","hide","handleTriggerKeyDown","_popupRef$current2","preventDefault","show","handleSelect","emoji","shouldRestoreInputFocus","useEffect","document","addEventListener","removeEventListener","createElement","StyledEmojiPickerPopup","Popup","ref","onHide","undefined","onShow","content","AreaProvider","shouldChangeColor","className","disabled","onClick","stopPropagation","onKeyDown","tabIndex","type","Icon","icons","size","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import {\n AreaProvider,\n Icon,\n Popup,\n PopupAlignment,\n useFocusRingPortal,\n useKeyboardFocusHighlighting,\n type PopupRef,\n} from '@chayns-components/core';\nimport React, { FC, KeyboardEventHandler, useCallback, useEffect, useRef } from 'react';\nimport EmojiPicker from '../emoji-picker/EmojiPicker';\nimport { StyledEmojiPickerPopup } from './EmojiPickerPopup.styles';\n\nexport type EmojiPickerPopupProps = {\n /*\n Access token of the logged-in user. Is needed to load and save the history of the emojis.\n /\n accessToken?: string;\n /\n The DOM element that should receive the popup portal.\n /\n container?: Element;\n /\n Whether the picker trigger is disabled.\n /\n isDisabled?: boolean;\n /\n Function that is executed when the visibility of the popup changes.\n * @param {boolean} isVisible - Whether the popup is visible or not\n /\n onPopupVisibilityChange?: (isVisible: boolean) => void;\n /\n Person id of the logged-in user. Is needed to load and save the history of the emojis.\n /\n personId?: string;\n /\n Function executed when an emoji is selected in the popup\n * @param {string} emoji - Emoji that was selected\n /\n onSelect: (emoji: string) => void;\n /\n Enables keyboard-only focus highlighting for the picker trigger.\n /\n shouldEnableKeyboardHighlighting?: boolean;\n /\n Receives focus after an emoji is selected with the keyboard.\n */\n onSelectWithKeyboard?: (emoji: string) => void;\n};\n\nconst EmojiPickerPopup: FC<EmojiPickerPopupProps> = ({\n accessToken,\n container,\n isDisabled,\n onPopupVisibilityChange,\n onSelect,\n onSelectWithKeyboard,\n personId,\n shouldEnableKeyboardHighlighting,\n}) => {\n const popupRef = useRef<PopupRef>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(\n isDisabled ? false : shouldEnableKeyboardHighlighting,\n );\n\n useFocusRingPortal(triggerRef, {\n isEnabled: shouldShowKeyboardHighlighting,\n shape: 'circle',\n padding: 4,\n });\n\n const handleKeyPress = useCallback((event: KeyboardEvent) => {\n if (event.key === 'Escape' && !event.shiftKey) {\n popupRef.current?.hide();\n }\n }, []);\n\n const handleTriggerKeyDown = useCallback<KeyboardEventHandler<HTMLButtonElement>>(\n (event) => {\n if (isDisabled) {\n return;\n }\n\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n popupRef.current?.show();\n }\n },\n [isDisabled],\n );\n\n const handleSelect = useCallback(\n (emoji: string, shouldRestoreInputFocus?: boolean) => {\n onSelect(emoji);\n\n if (shouldRestoreInputFocus) {\n onSelectWithKeyboard?.(emoji);\n }\n },\n [onSelect, onSelectWithKeyboard],\n );\n\n useEffect(() => {\n document.addEventListener('keydown', handleKeyPress);\n\n return () => {\n document.removeEventListener('keydown', handleKeyPress);\n };\n }, [handleKeyPress]);\n\n return (\n <StyledEmojiPickerPopup aria-hidden={isDisabled}>\n <Popup\n container={container}\n ref={popupRef}\n onHide={() =>\n typeof onPopupVisibilityChange === 'function'\n ? onPopupVisibilityChange(false)\n : undefined\n }\n onShow={() =>\n typeof onPopupVisibilityChange === 'function'\n ? onPopupVisibilityChange(true)\n : undefined\n }\n content={\n <AreaProvider shouldChangeColor={false}>\n <EmojiPicker\n accessToken={accessToken}\n onSelect={handleSelect}\n personId={personId}\n />\n </AreaProvider>\n }\n >\n <button\n aria-label=\"Open emoji picker\"\n className=\"prevent-lose-focus\"\n disabled={isDisabled}\n onClick={(event) => {\n if (isDisabled) {\n event.stopPropagation();\n }\n }}\n onKeyDown={handleTriggerKeyDown}\n ref={triggerRef}\n tabIndex={isDisabled ? -1 : 0}\n type=\"button\"\n >\n <Icon icons={['far fa-smile']} size={18} />\n </button>\n </Popup>\n </StyledEmojiPickerPopup>\n );\n};\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/emoji-picker-popup/EmojiPickerPopup.styles.js CHANGED Viewed

@@ -11,5 +11,19 @@ const StyledEmojiPickerPopup = exports.StyledEmojiPickerPopup = _styledComponent
     display: flex;
     height: ${() => getComputedStyle(document.body).getPropertyValue('line-height')};
     position: relative;
+    button {
+        background: none;
+        border: 0;
+        color: inherit;
+        cursor: pointer;
+        font: inherit;
+        padding: 0;
+        &:disabled {
+            cursor: default;
+            opacity: 0.5;
+        }
+    }
 `;
 //# sourceMappingURL=EmojiPickerPopup.styles.js.map

package/lib/cjs/components/emoji-picker-popup/EmojiPickerPopup.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiPickerPopup.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledEmojiPickerPopup","exports","styled","div","getComputedStyle","document","body","getPropertyValue"],"sources":["../../../../src/components/emoji-picker-popup/EmojiPickerPopup.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledEmojiPickerPopup = styled.div`\n align-items: center;\n display: flex;\n height: ${() => getComputedStyle(document.body).getPropertyValue('line-height')};\n position: relative;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAGE,yBAAM,CAACC,GAAG;AAChD;AACA;AACA,cAAc,MAAMC,gBAAgB,CAACC,QAAQ,CAACC,IAAI,CAAC,CAACC,gBAAgB,CAAC,aAAa,CAAC;AACnF;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"EmojiPickerPopup.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledEmojiPickerPopup","exports","styled","div","getComputedStyle","document","body","getPropertyValue"],"sources":["../../../../src/components/emoji-picker-popup/EmojiPickerPopup.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledEmojiPickerPopup = styled.div`\n align-items: center;\n display: flex;\n height: ${() => getComputedStyle(document.body).getPropertyValue('line-height')};\n position: relative;\n\n button {\n background: none;\n border: 0;\n color: inherit;\n cursor: pointer;\n font: inherit;\n padding: 0;\n\n &:disabled {\n cursor: default;\n opacity: 0.5;\n }\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAGE,yBAAM,CAACC,GAAG;AAChD;AACA;AACA,cAAc,MAAMC,gBAAgB,CAACC,QAAQ,CAACC,IAAI,CAAC,CAACC,gBAAgB,CAAC,aAAa,CAAC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/emoji-input/EmojiInput.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { AreaContext, useIsTouch } from '@chayns-components/core';
+import { AreaContext, useFocusRingPortal, useIsTouch, useKeyboardFocusHighlighting } from '@chayns-components/core';
 import { AnimatePresence } from 'motion/react';
 import React, { forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { convertEmojisToUnicode, escapeHTML } from '../../utils/emoji';
@@ -32,6 +32,8 @@ const EmojiInput = /*#__PURE__*/forwardRef(({
   prefixElement,
   rightElement,
   shouldHidePlaceholderOnFocus = false,
+  shouldEnableKeyboardHighlighting,
+  shouldDisableEditorKeyboardHighlighting,
   shouldRevertAsciiSmileyConversionOnBackspace = false,
   shouldPreventEmojiPicker,
   value,
@@ -49,6 +51,7 @@ const EmojiInput = /*#__PURE__*/forwardRef(({
   const [emojiRegShortNames, setEmojiRegShortNames] = useState(/./);
   const areaProvider = useContext(AreaContext);
   const editorRef = useRef(null);
+  const inputRef = useRef(null);
   const prefixElementRef = useRef(null);
   const hasPrefixRendered = useRef(false);
   const hasPrefixChanged = useRef(false);
@@ -422,6 +425,9 @@ const EmojiInput = /*#__PURE__*/forwardRef(({
   useIsomorphicLayoutEffect(() => {
     handleUpdateHTML(valueRef.current);
   }, [handleUpdateHTML]);
+  const handlePopupKeyboardSelect = useCallback(() => {
+    editorRef.current?.focus();
+  }, []);
   const handleInsertTextAtCursorPosition = useCallback(text => {
     if (editorRef.current) {
       insertTextAtCursorPosition({
@@ -577,7 +583,13 @@ const EmojiInput = /*#__PURE__*/forwardRef(({
       document.removeEventListener('focus', blurElement, true);
     };
   }, [isDisabled]);
+  const shouldShowKeyboardHighlighting = useKeyboardFocusHighlighting(shouldDisableEditorKeyboardHighlighting ? false : shouldEnableKeyboardHighlighting);
+  useFocusRingPortal(editorRef, {
+    isEnabled: shouldShowKeyboardHighlighting,
+    overlayRef: inputRef
+  });
   return /*#__PURE__*/React.createElement(StyledEmojiInput, {
+    ref: inputRef,
     $isDisabled: isDisabled,
     $shouldChangeColor: shouldChangeColor
   }, /*#__PURE__*/React.createElement(AnimatePresence, {
@@ -614,7 +626,8 @@ const EmojiInput = /*#__PURE__*/forwardRef(({
       maxHeight: height ?? maxHeight,
       minHeight: height ?? '26px'
     },
-    contentEditable: true,
+    contentEditable: !isDisabled,
+    "aria-disabled": isDisabled,
     role: "textbox",
     "aria-multiline": "true",
     inputMode: "text",
@@ -630,6 +643,7 @@ const EmojiInput = /*#__PURE__*/forwardRef(({
     onPaste: handlePaste,
     onDrop: handleDrop,
     ref: editorRef,
+    tabIndex: isDisabled ? -1 : undefined,
     $shouldShowContent: isPrefixAnimationFinished,
     transition: {
       type: 'tween',
@@ -641,9 +655,12 @@ const EmojiInput = /*#__PURE__*/forwardRef(({
   }, placeholder), !isTouch && !shouldPreventEmojiPicker && /*#__PURE__*/React.createElement(EmojiPickerPopup, {
     accessToken: accessToken,
     container: container,
+    isDisabled: isDisabled,
     onSelect: handlePopupSelect,
+    onSelectWithKeyboard: handlePopupKeyboardSelect,
     onPopupVisibilityChange: handlePopupVisibility,
-    personId: personId
+    personId: personId,
+    shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlighting
   })), rightElement && /*#__PURE__*/React.createElement(StyledEmojiInputRightWrapper, null, rightElement));
 });
 EmojiInput.displayName = 'EmojiInput';