@chayns-components/emoji-input 5.0.0-beta.397 → 5.0.0-beta.398

package/lib/components/emoji-input/EmojiInput.js

@@ -44,6 +44,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const [hasFocus, setHasFocus] = (0, _react.useState)(false);
   const [progressDuration, setProgressDuration] = (0, _react.useState)(0);
   const [labelWidth, setLabelWidth] = (0, _react.useState)(0);
+  const [isPopupVisible, setIsPopupVisible] = (0, _react.useState)(false);
   const [isPrefixAnimationFinished, setIsPrefixAnimationFinished] = (0, _react.useState)(!prefixElement);
   const [prefixElementWidth, setPrefixElementWidth] = (0, _react.useState)();
   const editorRef = (0, _react.useRef)(null);
@@ -134,6 +135,10 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       event.preventDefault();
       event.stopPropagation();
     }
+    if (event.key === 'Enter' && isPopupVisible) {
+      event.preventDefault();
+      return;
+    }
     if (typeof onKeyDown === 'function') {
       onKeyDown(event);
     }
@@ -151,7 +156,13 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         }
       }
     }
-  }, [isDisabled, onKeyDown]);
+  }, [isDisabled, isPopupVisible, onKeyDown]);
+  const handlePopupVisibility = isVisible => {
+    setIsPopupVisible(isVisible);
+    if (typeof onPopupVisibilityChange === 'function') {
+      onPopupVisibilityChange(isVisible);
+    }
+  };
 
   /**
    * This function prevents formatting from being adopted when texts are inserted. To do this, the
@@ -376,7 +387,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     accessToken: accessToken,
     alignment: popupAlignment,
     onSelect: handlePopupSelect,
-    onPopupVisibilityChange: onPopupVisibilityChange,
+    onPopupVisibilityChange: handlePopupVisibility,
     personId: personId
   })), rightElement && /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputRightWrapper, null, rightElement));
 });

package/lib/components/emoji-input/EmojiInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_emoji","_environment","_insert","_selection","_text","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","_PrefixElement","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","EmojiInput","forwardRef","_ref","ref","accessToken","height","inputId","isDisabled","maxHeight","onBlur","onFocus","onInput","onKeyDown","onPrefixElementRemove","onPopupVisibilityChange","personId","placeholder","popupAlignment","prefixElement","rightElement","shouldHidePlaceholderOnFocus","shouldPreventEmojiPicker","value","isMobile","useState","getIsMobile","plainTextValue","setPlainTextValue","hasFocus","setHasFocus","progressDuration","setProgressDuration","labelWidth","setLabelWidth","isPrefixAnimationFinished","setIsPrefixAnimationFinished","prefixElementWidth","setPrefixElementWidth","editorRef","useRef","prefixElementRef","hasPrefixRendered","shouldDeleteOneMoreBackwards","shouldDeleteOneMoreForwards","valueRef","handleUpdateHTML","useCallback","html","current","newInnerHTML","convertEmojisToUnicode","convertTextToHTML","innerHTML","saveSelection","shouldIgnoreEmptyTextNodes","restoreSelection","handleBeforeInput","event","data","type","nativeEvent","includes","preventDefault","stopPropagation","text","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handleInput","document","execCommand","convertHTMLToText","handleKeyDown","key","isPropagationStopped","charCodeThatWillBeDeleted","getCharCodeThatWillBeDeleted","handlePaste","clipboardData","getData","handlePopupSelect","emoji","useEffect","convertedText","replace","convertedPrefix","length","useLayoutEffect","handleStartProgress","duration","handleStopProgress","useImperativeHandle","startProgress","stopProgress","handlePreventLoseFocus","element","target","classList","contains","parentElement","body","addEventListener","removeEventListener","shouldShowPlaceholder","useMemo","isJustPrefixElement","shouldRenderPlaceholder","handleFocus","handleBlur","offsetWidth","undefined","handleResize","resizeObserver","ResizeObserver","observe","disconnect","createElement","StyledEmojiInput","AnimatePresence","initial","StyledMotionEmojiInputProgress","animate","width","exit","opacity","transition","ease","StyledEmojiInputContent","isRightElementGiven","StyledMotionEmojiInputEditor","minHeight","contentEditable","id","onBeforeInput","onPaste","shouldShowContent","StyledEmojiInputLabel","maxWidth","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ClipboardEvent,\n    CSSProperties,\n    FocusEvent,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEvent,\n    KeyboardEventHandler,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n    type FormEvent,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertEmojisToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { insertTextAtCursorPosition } from '../../utils/insert';\nimport {\n    getCharCodeThatWillBeDeleted,\n    restoreSelection,\n    saveSelection,\n} from '../../utils/selection';\nimport { convertHTMLToText, convertTextToHTML } from '../../utils/text';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport {\n    StyledEmojiInput,\n    StyledEmojiInputContent,\n    StyledEmojiInputLabel,\n    StyledEmojiInputRightWrapper,\n    StyledMotionEmojiInputEditor,\n    StyledMotionEmojiInputProgress,\n} from './EmojiInput.styles';\nimport PrefixElement from './prefix-element/PrefixElement';\n\nexport type EmojiInputProps = {\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     * Sets the height of the input field to a fixed value. If this value is not set, the component will use the needed height until the maximum height is reached.\n     */\n    height?: CSSProperties['height'];\n    /**\n     * HTML id of the input element\n     */\n    inputId?: string;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Sets the maximum height of the input field.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that is executed when the input field loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the input field gets the focus.\n     */\n    onFocus?: FocusEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the text of the input changes. In addition to the original\n     * event, the original text is returned as second parameter, in which the internally used HTML\n     * elements have been converted back to BB codes.\n     */\n    onInput?: (event: ChangeEvent<HTMLDivElement>, originalText: string) => void;\n    /**\n     * Function that is executed when a key is pressed down.\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed if the prefixElement is removed.\n     */\n    onPrefixElementRemove?: () => void;\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     * Placeholder for the input field\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n     * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n     * value.\n     */\n    popupAlignment?: PopupAlignment;\n    /**\n     * An Element that is pre wirten inside the input but the placeholder is still displaying.\n     */\n    prefixElement?: string;\n    /**\n     * Element that is rendered inside the EmojiInput on the right side.\n     */\n    rightElement?: ReactNode;\n    /**\n     * Whether the placeholder should be shown after the input has focus.\n     */\n    shouldHidePlaceholderOnFocus?: boolean;\n    /**\n     * Prevents the EmojiPickerPopup icon from being displayed\n     */\n    shouldPreventEmojiPicker?: boolean;\n    /**\n     * The plain text value of the input field. Instead of HTML elements BB codes must be used at\n     * this point. These are then converted by the input field into corresponding HTML elements.\n     */\n    value: string;\n};\n\nexport type EmojiInputRef = {\n    startProgress: (durationInSeconds: number) => void;\n    stopProgress: () => void;\n};\n\nconst EmojiInput = forwardRef<EmojiInputRef, EmojiInputProps>(\n    (\n        {\n            accessToken,\n            height,\n            inputId,\n            isDisabled,\n            maxHeight = '190px',\n            onBlur,\n            onFocus,\n            onInput,\n            onKeyDown,\n            onPrefixElementRemove,\n            onPopupVisibilityChange,\n            personId,\n            placeholder,\n            popupAlignment,\n            prefixElement,\n            rightElement,\n            shouldHidePlaceholderOnFocus = true,\n            shouldPreventEmojiPicker,\n            value,\n        },\n        ref,\n    ) => {\n        const [isMobile] = useState(getIsMobile());\n        const [plainTextValue, setPlainTextValue] = useState(value);\n        const [hasFocus, setHasFocus] = useState(false);\n        const [progressDuration, setProgressDuration] = useState(0);\n        const [labelWidth, setLabelWidth] = useState(0);\n        const [isPrefixAnimationFinished, setIsPrefixAnimationFinished] = useState(!prefixElement);\n        const [prefixElementWidth, setPrefixElementWidth] = useState<number | undefined>();\n\n        const editorRef = useRef<HTMLDivElement>(null);\n        const prefixElementRef = useRef<HTMLDivElement>(null);\n        const hasPrefixRendered = useRef(false);\n        const shouldDeleteOneMoreBackwards = useRef(false);\n        const shouldDeleteOneMoreForwards = useRef(false);\n\n        const valueRef = useRef(value);\n\n        /**\n         * This function updates the content of the 'contentEditable' element if the new text is\n         * different from the previous content. So this is only true if, for example, a text like \":-)\"\n         * has been replaced to the corresponding emoji.\n         *\n         * When updating the HTML, the current cursor position is saved before replacing the content, so\n         * that it can be set again afterward.\n         */\n        const handleUpdateHTML = useCallback((html: string) => {\n            if (!editorRef.current) {\n                return;\n            }\n\n            let newInnerHTML = convertEmojisToUnicode(html);\n\n            newInnerHTML = convertTextToHTML(newInnerHTML);\n\n            if (newInnerHTML !== editorRef.current.innerHTML) {\n                saveSelection(editorRef.current, { shouldIgnoreEmptyTextNodes: true });\n\n                editorRef.current.innerHTML = newInnerHTML;\n\n                restoreSelection(editorRef.current);\n            }\n        }, []);\n\n        const handleBeforeInput = useCallback((event: FormEvent<HTMLDivElement>) => {\n            if (!editorRef.current) {\n                return;\n            }\n\n            const { data, type } = event.nativeEvent as InputEvent;\n\n            if (type === 'textInput' && data && data.includes('\\n')) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const text = convertEmojisToUnicode(data);\n\n                insertTextAtCursorPosition({ editorElement: editorRef.current, text });\n\n                const newEvent = new Event('input', { bubbles: true });\n\n                editorRef.current.dispatchEvent(newEvent);\n            }\n        }, []);\n\n        /**\n         * This function handles the 'input' events of the 'contentEditable' element and also passes the\n         * respective event up accordingly if the 'onInput' property is a function.\n         */\n        const handleInput = useCallback(\n            (event: ChangeEvent<HTMLDivElement>) => {\n                if (!editorRef.current) {\n                    return;\n                }\n\n                if (shouldDeleteOneMoreBackwards.current) {\n                    shouldDeleteOneMoreBackwards.current = false;\n                    shouldDeleteOneMoreForwards.current = false;\n\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    document.execCommand('delete', false);\n\n                    return;\n                }\n\n                if (shouldDeleteOneMoreForwards.current) {\n                    shouldDeleteOneMoreBackwards.current = false;\n                    shouldDeleteOneMoreForwards.current = false;\n\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    document.execCommand('forwardDelete', false);\n\n                    return;\n                }\n\n                handleUpdateHTML(editorRef.current.innerHTML);\n\n                const text = convertHTMLToText(editorRef.current.innerHTML);\n\n                setPlainTextValue(text);\n\n                if (typeof onInput === 'function') {\n                    onInput(event, text);\n                }\n            },\n            [handleUpdateHTML, onInput],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLDivElement>) => {\n                if (isDisabled) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                if (typeof onKeyDown === 'function') {\n                    onKeyDown(event);\n                }\n\n                if (event.key === 'Enter' && !event.isPropagationStopped() && editorRef.current) {\n                    event.preventDefault();\n\n                    document.execCommand('insertLineBreak', false);\n                }\n\n                if (event.key === 'Backspace' || event.key === 'Delete') {\n                    const charCodeThatWillBeDeleted = getCharCodeThatWillBeDeleted(event);\n\n                    if (charCodeThatWillBeDeleted === 8203) {\n                        if (event.key === 'Backspace') {\n                            shouldDeleteOneMoreBackwards.current = true;\n                        } else {\n                            shouldDeleteOneMoreForwards.current = true;\n                        }\n                    }\n                }\n            },\n            [isDisabled, onKeyDown],\n        );\n\n        /**\n         * This function prevents formatting from being adopted when texts are inserted. To do this, the\n         * plain text is read from the event after the default behavior has been prevented. The plain\n         * text is then inserted at the correct position in the input field using the\n         * 'insertTextAtCursorPosition' function.\n         */\n        const handlePaste = useCallback((event: ClipboardEvent<HTMLDivElement>) => {\n            if (editorRef.current) {\n                event.preventDefault();\n\n                let text = event.clipboardData.getData('text/plain');\n\n                text = convertEmojisToUnicode(text);\n\n                insertTextAtCursorPosition({ editorElement: editorRef.current, text });\n\n                const newEvent = new Event('input', { bubbles: true });\n\n                editorRef.current.dispatchEvent(newEvent);\n            }\n        }, []);\n\n        /**\n         * This function uses the 'insertTextAtCursorPosition' function to insert the emoji at the\n         * correct position in the editor element.\n         *\n         * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,\n         * which in turn executes the 'onInput' function from the props. So this serves to ensure that\n         * the event is also passed through to the top when inserting via the popup.\n         */\n        const handlePopupSelect = useCallback((emoji: string) => {\n            if (editorRef.current) {\n                insertTextAtCursorPosition({ editorElement: editorRef.current, text: emoji });\n\n                const event = new Event('input', { bubbles: true });\n\n                editorRef.current.dispatchEvent(event);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (typeof onPrefixElementRemove !== 'function') {\n                return;\n            }\n\n            if (!hasPrefixRendered.current) {\n                return;\n            }\n\n            const convertedText = convertHTMLToText(editorRef.current?.innerHTML ?? '').replace(\n                '&nbsp;',\n                ' ',\n            );\n            const convertedPrefix = prefixElement && prefixElement.replace('&nbsp;', ' ');\n\n            if (\n                (convertedPrefix &&\n                    convertedText.includes(convertedPrefix) &&\n                    convertedText.length > convertedPrefix.length) ||\n                convertedPrefix === convertedText\n            ) {\n                return;\n            }\n\n            onPrefixElementRemove();\n            hasPrefixRendered.current = false;\n        }, [onPrefixElementRemove, plainTextValue.length, prefixElement]);\n\n        useEffect(() => {\n            if (value !== plainTextValue) {\n                setPlainTextValue(value);\n\n                handleUpdateHTML(value);\n            }\n        }, [handleUpdateHTML, plainTextValue, value]);\n\n        // This effect is used to call the 'handleUpdateHTML' function once after the component has been\n        // rendered. This is necessary because the 'contentEditable' element otherwise does not display\n        // the HTML content correctly when the component is rendered for the first time.\n        useLayoutEffect(() => {\n            handleUpdateHTML(valueRef.current);\n        }, [handleUpdateHTML]);\n\n        const handleStartProgress = useCallback((duration: number) => {\n            setProgressDuration(duration);\n        }, []);\n\n        const handleStopProgress = useCallback(() => {\n            setProgressDuration(0);\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                startProgress: handleStartProgress,\n                stopProgress: handleStopProgress,\n            }),\n            [handleStartProgress, handleStopProgress],\n        );\n\n        useEffect(() => {\n            /**\n             * This function ensures that the input field does not lose focus when the popup is opened\n             * or an emoji is selected in it. For this purpose the corresponding elements get the class\n             * 'prevent-lose-focus'.\n             *\n             * The class can also be set to any other elements that should also not cause the input\n             * field to lose focus.\n             */\n            const handlePreventLoseFocus = (event: MouseEvent) => {\n                const element = event.target as Element;\n\n                if (\n                    element.classList.contains('prevent-lose-focus') ||\n                    element.parentElement?.classList.contains('prevent-lose-focus') ||\n                    element.parentElement?.parentElement?.classList.contains('prevent-lose-focus')\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n            };\n\n            document.body.addEventListener('mousedown', handlePreventLoseFocus);\n\n            return () => {\n                document.body.removeEventListener('mousedown', handlePreventLoseFocus);\n            };\n        }, []);\n\n        const shouldShowPlaceholder = useMemo(() => {\n            if (!isPrefixAnimationFinished) {\n                return false;\n            }\n\n            const isJustPrefixElement =\n                prefixElement &&\n                prefixElement === convertHTMLToText(editorRef.current?.innerHTML ?? '');\n\n            const shouldRenderPlaceholder =\n                (prefixElement && !plainTextValue) ||\n                (prefixElement ? prefixElementWidth && prefixElementWidth > 0 : true);\n\n            switch (true) {\n                case (!plainTextValue || isJustPrefixElement) &&\n                    shouldHidePlaceholderOnFocus &&\n                    !hasFocus:\n                case (!plainTextValue || isJustPrefixElement) && !shouldHidePlaceholderOnFocus:\n                    return shouldRenderPlaceholder;\n                case (!plainTextValue || isJustPrefixElement) &&\n                    shouldHidePlaceholderOnFocus &&\n                    hasFocus:\n                    return false;\n                default:\n                    return false;\n            }\n        }, [\n            isPrefixAnimationFinished,\n            hasFocus,\n            plainTextValue,\n            prefixElement,\n            shouldHidePlaceholderOnFocus,\n            prefixElementWidth,\n        ]);\n\n        useEffect(() => {\n            if (prefixElement) {\n                setIsPrefixAnimationFinished(false);\n            }\n        }, [prefixElement]);\n\n        const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n            if (typeof onFocus === 'function') {\n                onFocus(event);\n            }\n\n            setHasFocus(true);\n        };\n\n        const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n            if (typeof onBlur === 'function') {\n                onBlur(event);\n            }\n\n            setHasFocus(false);\n        };\n\n        useEffect(() => {\n            if (editorRef.current && prefixElement) {\n                const text = convertEmojisToUnicode(prefixElement);\n\n                insertTextAtCursorPosition({ editorElement: editorRef.current, text });\n\n                handleUpdateHTML(prefixElement);\n                hasPrefixRendered.current = true;\n            }\n        }, [handleUpdateHTML, prefixElement]);\n\n        useEffect(() => {\n            if (\n                prefixElementRef.current &&\n                prefixElement &&\n                prefixElement === convertHTMLToText(editorRef.current?.innerHTML ?? '')\n            ) {\n                setPrefixElementWidth(prefixElementRef.current.offsetWidth + 2);\n            } else {\n                setPrefixElementWidth(undefined);\n            }\n        }, [plainTextValue, prefixElement]);\n\n        useEffect(() => {\n            const handleResize = () => {\n                if (editorRef.current) {\n                    setLabelWidth(editorRef.current.offsetWidth);\n                }\n            };\n\n            const resizeObserver = new ResizeObserver(handleResize);\n\n            if (editorRef.current) {\n                resizeObserver.observe(editorRef.current);\n            }\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }, []);\n\n        return (\n            <StyledEmojiInput isDisabled={isDisabled}>\n                <AnimatePresence initial>\n                    {progressDuration > 0 && (\n                        <StyledMotionEmojiInputProgress\n                            animate={{ width: '100%' }}\n                            exit={{ opacity: 0 }}\n                            initial={{ opacity: 1, width: '0%' }}\n                            transition={{\n                                width: {\n                                    ease: 'linear',\n                                    duration: progressDuration,\n                                },\n                                opacity: {\n                                    type: 'tween',\n                                    duration: 0.3,\n                                },\n                            }}\n                        />\n                    )}\n                </AnimatePresence>\n                <StyledEmojiInputContent isRightElementGiven={!!rightElement}>\n                    {prefixElement && (\n                        <PrefixElement\n                            element={prefixElement}\n                            prefixElementRef={prefixElementRef}\n                            setIsPrefixAnimationFinished={setIsPrefixAnimationFinished}\n                        />\n                    )}\n                    <StyledMotionEmojiInputEditor\n                        animate={{ maxHeight: height ?? maxHeight, minHeight: height ?? '26px' }}\n                        contentEditable={!isDisabled}\n                        id={inputId}\n                        onBeforeInput={handleBeforeInput}\n                        onBlur={handleBlur}\n                        onFocus={handleFocus}\n                        onInput={handleInput}\n                        onKeyDown={handleKeyDown}\n                        onPaste={handlePaste}\n                        ref={editorRef}\n                        shouldShowContent={isPrefixAnimationFinished}\n                        transition={{ type: 'tween', duration: 0.2 }}\n                    />\n\n                    {shouldShowPlaceholder && (\n                        <StyledEmojiInputLabel\n                            maxWidth={labelWidth}\n                            offsetWidth={prefixElementWidth}\n                        >\n                            {placeholder}\n                        </StyledEmojiInputLabel>\n                    )}\n                    {!isMobile && !shouldPreventEmojiPicker && (\n                        <EmojiPickerPopup\n                            accessToken={accessToken}\n                            alignment={popupAlignment}\n                            onSelect={handlePopupSelect}\n                            onPopupVisibilityChange={onPopupVisibilityChange}\n                            personId={personId}\n                        />\n                    )}\n                </StyledEmojiInputContent>\n                {rightElement && (\n                    <StyledEmojiInputRightWrapper>{rightElement}</StyledEmojiInputRightWrapper>\n                )}\n            </StyledEmojiInput>\n        );\n    },\n);\n\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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"}
+{"version":3,"file":"EmojiInput.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_emoji","_environment","_insert","_selection","_text","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","_PrefixElement","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","EmojiInput","forwardRef","_ref","ref","accessToken","height","inputId","isDisabled","maxHeight","onBlur","onFocus","onInput","onKeyDown","onPrefixElementRemove","onPopupVisibilityChange","personId","placeholder","popupAlignment","prefixElement","rightElement","shouldHidePlaceholderOnFocus","shouldPreventEmojiPicker","value","isMobile","useState","getIsMobile","plainTextValue","setPlainTextValue","hasFocus","setHasFocus","progressDuration","setProgressDuration","labelWidth","setLabelWidth","isPopupVisible","setIsPopupVisible","isPrefixAnimationFinished","setIsPrefixAnimationFinished","prefixElementWidth","setPrefixElementWidth","editorRef","useRef","prefixElementRef","hasPrefixRendered","shouldDeleteOneMoreBackwards","shouldDeleteOneMoreForwards","valueRef","handleUpdateHTML","useCallback","html","current","newInnerHTML","convertEmojisToUnicode","convertTextToHTML","innerHTML","saveSelection","shouldIgnoreEmptyTextNodes","restoreSelection","handleBeforeInput","event","data","type","nativeEvent","includes","preventDefault","stopPropagation","text","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handleInput","document","execCommand","convertHTMLToText","handleKeyDown","key","isPropagationStopped","charCodeThatWillBeDeleted","getCharCodeThatWillBeDeleted","handlePopupVisibility","isVisible","handlePaste","clipboardData","getData","handlePopupSelect","emoji","useEffect","convertedText","replace","convertedPrefix","length","useLayoutEffect","handleStartProgress","duration","handleStopProgress","useImperativeHandle","startProgress","stopProgress","handlePreventLoseFocus","element","target","classList","contains","parentElement","body","addEventListener","removeEventListener","shouldShowPlaceholder","useMemo","isJustPrefixElement","shouldRenderPlaceholder","handleFocus","handleBlur","offsetWidth","undefined","handleResize","resizeObserver","ResizeObserver","observe","disconnect","createElement","StyledEmojiInput","AnimatePresence","initial","StyledMotionEmojiInputProgress","animate","width","exit","opacity","transition","ease","StyledEmojiInputContent","isRightElementGiven","StyledMotionEmojiInputEditor","minHeight","contentEditable","id","onBeforeInput","onPaste","shouldShowContent","StyledEmojiInputLabel","maxWidth","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ClipboardEvent,\n    CSSProperties,\n    FocusEvent,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEvent,\n    KeyboardEventHandler,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n    type FormEvent,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertEmojisToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { insertTextAtCursorPosition } from '../../utils/insert';\nimport {\n    getCharCodeThatWillBeDeleted,\n    restoreSelection,\n    saveSelection,\n} from '../../utils/selection';\nimport { convertHTMLToText, convertTextToHTML } from '../../utils/text';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport {\n    StyledEmojiInput,\n    StyledEmojiInputContent,\n    StyledEmojiInputLabel,\n    StyledEmojiInputRightWrapper,\n    StyledMotionEmojiInputEditor,\n    StyledMotionEmojiInputProgress,\n} from './EmojiInput.styles';\nimport PrefixElement from './prefix-element/PrefixElement';\n\nexport type EmojiInputProps = {\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     * Sets the height of the input field to a fixed value. If this value is not set, the component will use the needed height until the maximum height is reached.\n     */\n    height?: CSSProperties['height'];\n    /**\n     * HTML id of the input element\n     */\n    inputId?: string;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Sets the maximum height of the input field.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that is executed when the input field loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the input field gets the focus.\n     */\n    onFocus?: FocusEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the text of the input changes. In addition to the original\n     * event, the original text is returned as second parameter, in which the internally used HTML\n     * elements have been converted back to BB codes.\n     */\n    onInput?: (event: ChangeEvent<HTMLDivElement>, originalText: string) => void;\n    /**\n     * Function that is executed when a key is pressed down.\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed if the prefixElement is removed.\n     */\n    onPrefixElementRemove?: () => void;\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     * Placeholder for the input field\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n     * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n     * value.\n     */\n    popupAlignment?: PopupAlignment;\n    /**\n     * An Element that is pre wirten inside the input but the placeholder is still displaying.\n     */\n    prefixElement?: string;\n    /**\n     * Element that is rendered inside the EmojiInput on the right side.\n     */\n    rightElement?: ReactNode;\n    /**\n     * Whether the placeholder should be shown after the input has focus.\n     */\n    shouldHidePlaceholderOnFocus?: boolean;\n    /**\n     * Prevents the EmojiPickerPopup icon from being displayed\n     */\n    shouldPreventEmojiPicker?: boolean;\n    /**\n     * The plain text value of the input field. Instead of HTML elements BB codes must be used at\n     * this point. These are then converted by the input field into corresponding HTML elements.\n     */\n    value: string;\n};\n\nexport type EmojiInputRef = {\n    startProgress: (durationInSeconds: number) => void;\n    stopProgress: () => void;\n};\n\nconst EmojiInput = forwardRef<EmojiInputRef, EmojiInputProps>(\n    (\n        {\n            accessToken,\n            height,\n            inputId,\n            isDisabled,\n            maxHeight = '190px',\n            onBlur,\n            onFocus,\n            onInput,\n            onKeyDown,\n            onPrefixElementRemove,\n            onPopupVisibilityChange,\n            personId,\n            placeholder,\n            popupAlignment,\n            prefixElement,\n            rightElement,\n            shouldHidePlaceholderOnFocus = true,\n            shouldPreventEmojiPicker,\n            value,\n        },\n        ref,\n    ) => {\n        const [isMobile] = useState(getIsMobile());\n        const [plainTextValue, setPlainTextValue] = useState(value);\n        const [hasFocus, setHasFocus] = useState(false);\n        const [progressDuration, setProgressDuration] = useState(0);\n        const [labelWidth, setLabelWidth] = useState(0);\n        const [isPopupVisible, setIsPopupVisible] = useState(false);\n        const [isPrefixAnimationFinished, setIsPrefixAnimationFinished] = useState(!prefixElement);\n        const [prefixElementWidth, setPrefixElementWidth] = useState<number | undefined>();\n\n        const editorRef = useRef<HTMLDivElement>(null);\n        const prefixElementRef = useRef<HTMLDivElement>(null);\n        const hasPrefixRendered = useRef(false);\n        const shouldDeleteOneMoreBackwards = useRef(false);\n        const shouldDeleteOneMoreForwards = useRef(false);\n\n        const valueRef = useRef(value);\n\n        /**\n         * This function updates the content of the 'contentEditable' element if the new text is\n         * different from the previous content. So this is only true if, for example, a text like \":-)\"\n         * has been replaced to the corresponding emoji.\n         *\n         * When updating the HTML, the current cursor position is saved before replacing the content, so\n         * that it can be set again afterward.\n         */\n        const handleUpdateHTML = useCallback((html: string) => {\n            if (!editorRef.current) {\n                return;\n            }\n\n            let newInnerHTML = convertEmojisToUnicode(html);\n\n            newInnerHTML = convertTextToHTML(newInnerHTML);\n\n            if (newInnerHTML !== editorRef.current.innerHTML) {\n                saveSelection(editorRef.current, { shouldIgnoreEmptyTextNodes: true });\n\n                editorRef.current.innerHTML = newInnerHTML;\n\n                restoreSelection(editorRef.current);\n            }\n        }, []);\n\n        const handleBeforeInput = useCallback((event: FormEvent<HTMLDivElement>) => {\n            if (!editorRef.current) {\n                return;\n            }\n\n            const { data, type } = event.nativeEvent as InputEvent;\n\n            if (type === 'textInput' && data && data.includes('\\n')) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                const text = convertEmojisToUnicode(data);\n\n                insertTextAtCursorPosition({ editorElement: editorRef.current, text });\n\n                const newEvent = new Event('input', { bubbles: true });\n\n                editorRef.current.dispatchEvent(newEvent);\n            }\n        }, []);\n\n        /**\n         * This function handles the 'input' events of the 'contentEditable' element and also passes the\n         * respective event up accordingly if the 'onInput' property is a function.\n         */\n        const handleInput = useCallback(\n            (event: ChangeEvent<HTMLDivElement>) => {\n                if (!editorRef.current) {\n                    return;\n                }\n\n                if (shouldDeleteOneMoreBackwards.current) {\n                    shouldDeleteOneMoreBackwards.current = false;\n                    shouldDeleteOneMoreForwards.current = false;\n\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    document.execCommand('delete', false);\n\n                    return;\n                }\n\n                if (shouldDeleteOneMoreForwards.current) {\n                    shouldDeleteOneMoreBackwards.current = false;\n                    shouldDeleteOneMoreForwards.current = false;\n\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    document.execCommand('forwardDelete', false);\n\n                    return;\n                }\n\n                handleUpdateHTML(editorRef.current.innerHTML);\n\n                const text = convertHTMLToText(editorRef.current.innerHTML);\n\n                setPlainTextValue(text);\n\n                if (typeof onInput === 'function') {\n                    onInput(event, text);\n                }\n            },\n            [handleUpdateHTML, onInput],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: KeyboardEvent<HTMLDivElement>) => {\n                if (isDisabled) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                if (event.key === 'Enter' && isPopupVisible) {\n                    event.preventDefault();\n\n                    return;\n                }\n\n                if (typeof onKeyDown === 'function') {\n                    onKeyDown(event);\n                }\n\n                if (event.key === 'Enter' && !event.isPropagationStopped() && editorRef.current) {\n                    event.preventDefault();\n\n                    document.execCommand('insertLineBreak', false);\n                }\n\n                if (event.key === 'Backspace' || event.key === 'Delete') {\n                    const charCodeThatWillBeDeleted = getCharCodeThatWillBeDeleted(event);\n\n                    if (charCodeThatWillBeDeleted === 8203) {\n                        if (event.key === 'Backspace') {\n                            shouldDeleteOneMoreBackwards.current = true;\n                        } else {\n                            shouldDeleteOneMoreForwards.current = true;\n                        }\n                    }\n                }\n            },\n            [isDisabled, isPopupVisible, onKeyDown],\n        );\n\n        const handlePopupVisibility = (isVisible: boolean) => {\n            setIsPopupVisible(isVisible);\n\n            if (typeof onPopupVisibilityChange === 'function') {\n                onPopupVisibilityChange(isVisible);\n            }\n        };\n\n        /**\n         * This function prevents formatting from being adopted when texts are inserted. To do this, the\n         * plain text is read from the event after the default behavior has been prevented. The plain\n         * text is then inserted at the correct position in the input field using the\n         * 'insertTextAtCursorPosition' function.\n         */\n        const handlePaste = useCallback((event: ClipboardEvent<HTMLDivElement>) => {\n            if (editorRef.current) {\n                event.preventDefault();\n\n                let text = event.clipboardData.getData('text/plain');\n\n                text = convertEmojisToUnicode(text);\n\n                insertTextAtCursorPosition({ editorElement: editorRef.current, text });\n\n                const newEvent = new Event('input', { bubbles: true });\n\n                editorRef.current.dispatchEvent(newEvent);\n            }\n        }, []);\n\n        /**\n         * This function uses the 'insertTextAtCursorPosition' function to insert the emoji at the\n         * correct position in the editor element.\n         *\n         * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,\n         * which in turn executes the 'onInput' function from the props. So this serves to ensure that\n         * the event is also passed through to the top when inserting via the popup.\n         */\n        const handlePopupSelect = useCallback((emoji: string) => {\n            if (editorRef.current) {\n                insertTextAtCursorPosition({ editorElement: editorRef.current, text: emoji });\n\n                const event = new Event('input', { bubbles: true });\n\n                editorRef.current.dispatchEvent(event);\n            }\n        }, []);\n\n        useEffect(() => {\n            if (typeof onPrefixElementRemove !== 'function') {\n                return;\n            }\n\n            if (!hasPrefixRendered.current) {\n                return;\n            }\n\n            const convertedText = convertHTMLToText(editorRef.current?.innerHTML ?? '').replace(\n                '&nbsp;',\n                ' ',\n            );\n            const convertedPrefix = prefixElement && prefixElement.replace('&nbsp;', ' ');\n\n            if (\n                (convertedPrefix &&\n                    convertedText.includes(convertedPrefix) &&\n                    convertedText.length > convertedPrefix.length) ||\n                convertedPrefix === convertedText\n            ) {\n                return;\n            }\n\n            onPrefixElementRemove();\n            hasPrefixRendered.current = false;\n        }, [onPrefixElementRemove, plainTextValue.length, prefixElement]);\n\n        useEffect(() => {\n            if (value !== plainTextValue) {\n                setPlainTextValue(value);\n\n                handleUpdateHTML(value);\n            }\n        }, [handleUpdateHTML, plainTextValue, value]);\n\n        // This effect is used to call the 'handleUpdateHTML' function once after the component has been\n        // rendered. This is necessary because the 'contentEditable' element otherwise does not display\n        // the HTML content correctly when the component is rendered for the first time.\n        useLayoutEffect(() => {\n            handleUpdateHTML(valueRef.current);\n        }, [handleUpdateHTML]);\n\n        const handleStartProgress = useCallback((duration: number) => {\n            setProgressDuration(duration);\n        }, []);\n\n        const handleStopProgress = useCallback(() => {\n            setProgressDuration(0);\n        }, []);\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                startProgress: handleStartProgress,\n                stopProgress: handleStopProgress,\n            }),\n            [handleStartProgress, handleStopProgress],\n        );\n\n        useEffect(() => {\n            /**\n             * This function ensures that the input field does not lose focus when the popup is opened\n             * or an emoji is selected in it. For this purpose the corresponding elements get the class\n             * 'prevent-lose-focus'.\n             *\n             * The class can also be set to any other elements that should also not cause the input\n             * field to lose focus.\n             */\n            const handlePreventLoseFocus = (event: MouseEvent) => {\n                const element = event.target as Element;\n\n                if (\n                    element.classList.contains('prevent-lose-focus') ||\n                    element.parentElement?.classList.contains('prevent-lose-focus') ||\n                    element.parentElement?.parentElement?.classList.contains('prevent-lose-focus')\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n            };\n\n            document.body.addEventListener('mousedown', handlePreventLoseFocus);\n\n            return () => {\n                document.body.removeEventListener('mousedown', handlePreventLoseFocus);\n            };\n        }, []);\n\n        const shouldShowPlaceholder = useMemo(() => {\n            if (!isPrefixAnimationFinished) {\n                return false;\n            }\n\n            const isJustPrefixElement =\n                prefixElement &&\n                prefixElement === convertHTMLToText(editorRef.current?.innerHTML ?? '');\n\n            const shouldRenderPlaceholder =\n                (prefixElement && !plainTextValue) ||\n                (prefixElement ? prefixElementWidth && prefixElementWidth > 0 : true);\n\n            switch (true) {\n                case (!plainTextValue || isJustPrefixElement) &&\n                    shouldHidePlaceholderOnFocus &&\n                    !hasFocus:\n                case (!plainTextValue || isJustPrefixElement) && !shouldHidePlaceholderOnFocus:\n                    return shouldRenderPlaceholder;\n                case (!plainTextValue || isJustPrefixElement) &&\n                    shouldHidePlaceholderOnFocus &&\n                    hasFocus:\n                    return false;\n                default:\n                    return false;\n            }\n        }, [\n            isPrefixAnimationFinished,\n            hasFocus,\n            plainTextValue,\n            prefixElement,\n            shouldHidePlaceholderOnFocus,\n            prefixElementWidth,\n        ]);\n\n        useEffect(() => {\n            if (prefixElement) {\n                setIsPrefixAnimationFinished(false);\n            }\n        }, [prefixElement]);\n\n        const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n            if (typeof onFocus === 'function') {\n                onFocus(event);\n            }\n\n            setHasFocus(true);\n        };\n\n        const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n            if (typeof onBlur === 'function') {\n                onBlur(event);\n            }\n\n            setHasFocus(false);\n        };\n\n        useEffect(() => {\n            if (editorRef.current && prefixElement) {\n                const text = convertEmojisToUnicode(prefixElement);\n\n                insertTextAtCursorPosition({ editorElement: editorRef.current, text });\n\n                handleUpdateHTML(prefixElement);\n                hasPrefixRendered.current = true;\n            }\n        }, [handleUpdateHTML, prefixElement]);\n\n        useEffect(() => {\n            if (\n                prefixElementRef.current &&\n                prefixElement &&\n                prefixElement === convertHTMLToText(editorRef.current?.innerHTML ?? '')\n            ) {\n                setPrefixElementWidth(prefixElementRef.current.offsetWidth + 2);\n            } else {\n                setPrefixElementWidth(undefined);\n            }\n        }, [plainTextValue, prefixElement]);\n\n        useEffect(() => {\n            const handleResize = () => {\n                if (editorRef.current) {\n                    setLabelWidth(editorRef.current.offsetWidth);\n                }\n            };\n\n            const resizeObserver = new ResizeObserver(handleResize);\n\n            if (editorRef.current) {\n                resizeObserver.observe(editorRef.current);\n            }\n\n            return () => {\n                resizeObserver.disconnect();\n            };\n        }, []);\n\n        return (\n            <StyledEmojiInput isDisabled={isDisabled}>\n                <AnimatePresence initial>\n                    {progressDuration > 0 && (\n                        <StyledMotionEmojiInputProgress\n                            animate={{ width: '100%' }}\n                            exit={{ opacity: 0 }}\n                            initial={{ opacity: 1, width: '0%' }}\n                            transition={{\n                                width: {\n                                    ease: 'linear',\n                                    duration: progressDuration,\n                                },\n                                opacity: {\n                                    type: 'tween',\n                                    duration: 0.3,\n                                },\n                            }}\n                        />\n                    )}\n                </AnimatePresence>\n                <StyledEmojiInputContent isRightElementGiven={!!rightElement}>\n                    {prefixElement && (\n                        <PrefixElement\n                            element={prefixElement}\n                            prefixElementRef={prefixElementRef}\n                            setIsPrefixAnimationFinished={setIsPrefixAnimationFinished}\n                        />\n                    )}\n                    <StyledMotionEmojiInputEditor\n                        animate={{ maxHeight: height ?? maxHeight, minHeight: height ?? '26px' }}\n                        contentEditable={!isDisabled}\n                        id={inputId}\n                        onBeforeInput={handleBeforeInput}\n                        onBlur={handleBlur}\n                        onFocus={handleFocus}\n                        onInput={handleInput}\n                        onKeyDown={handleKeyDown}\n                        onPaste={handlePaste}\n                        ref={editorRef}\n                        shouldShowContent={isPrefixAnimationFinished}\n                        transition={{ type: 'tween', duration: 0.2 }}\n                    />\n\n                    {shouldShowPlaceholder && (\n                        <StyledEmojiInputLabel\n                            maxWidth={labelWidth}\n                            offsetWidth={prefixElementWidth}\n                        >\n                            {placeholder}\n                        </StyledEmojiInputLabel>\n                    )}\n                    {!isMobile && !shouldPreventEmojiPicker && (\n                        <EmojiPickerPopup\n                            accessToken={accessToken}\n                            alignment={popupAlignment}\n                            onSelect={handlePopupSelect}\n                            onPopupVisibilityChange={handlePopupVisibility}\n                            personId={personId}\n                        />\n                    )}\n                </StyledEmojiInputContent>\n                {rightElement && (\n                    <StyledEmojiInputRightWrapper>{rightElement}</StyledEmojiInputRightWrapper>\n                )}\n            </StyledEmojiInput>\n        );\n    },\n);\n\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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"}

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

@@ -17,7 +17,59 @@ const EmojiPickerCategories = _ref => {
     searchString,
     selectedCategory
   } = _ref;
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(1);
+  const categoryRef = (0, _react.useRef)(null);
   const isSearchStringGiven = searchString.trim() !== '';
+  const handleSelect = (0, _react.useCallback)(slug => {
+    onSelect(slug);
+  }, [onSelect]);
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'Tab' || event.shiftKey) {
+        event.preventDefault();
+        const children = categoryRef.current?.children;
+        if (children && children.length > 0) {
+          let newIndex = focusedIndex !== null ? focusedIndex : 0;
+          if (event.key === 'Tab' && event.shiftKey) {
+            newIndex = (newIndex - 1) % children.length;
+          } else if (event.key === 'Tab') {
+            newIndex = (newIndex + 1) % children.length;
+          }
+
+          // remove focus from the old element
+          if (focusedIndex !== null) {
+            const prevElement = children[focusedIndex];
+            prevElement.tabIndex = -1;
+          }
+          if (newIndex < 0) {
+            newIndex = children.length - 1;
+          } else if (newIndex > children.length - 1) {
+            newIndex = 0;
+          }
+          setFocusedIndex(newIndex);
+
+          // Set focus to the element
+          const newElement = children[newIndex];
+          newElement.tabIndex = 0;
+          newElement.focus();
+          if (!newElement) {
+            return;
+          }
+          const {
+            id
+          } = newElement;
+          handleSelect(id);
+        }
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [focusedIndex, handleSelect]);
+  const handleClick = (0, _react.useCallback)(slug => {
+    handleSelect(slug);
+  }, [handleSelect]);
   const categories = (0, _react.useMemo)(() => {
     const categorySlugs = _dataByGroup.default.map(_ref2 => {
       let {
@@ -36,14 +88,17 @@ const EmojiPickerCategories = _ref => {
         className: "prevent-lose-focus",
         initial: false,
         key: slug,
-        onClick: () => onSelect(slug),
+        id: slug,
+        onClick: () => handleClick(slug),
         transition: {
           duration: 0.2
         }
       }, _categories.CATEGORY_EMOJIS[slug]);
     });
-  }, [isSearchStringGiven, onSelect, selectedCategory]);
-  return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledEmojiPickerCategories, null, categories);
+  }, [handleClick, isSearchStringGiven, selectedCategory]);
+  return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledEmojiPickerCategories, {
+    ref: categoryRef
+  }, categories);
 };
 EmojiPickerCategories.displayName = 'EmojiPickerCategories';
 var _default = exports.default = EmojiPickerCategories;

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

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

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

@@ -24,6 +24,10 @@ const EmojiPickerEmojis = _ref => {
     selectedCategory
   } = _ref;
   const [shouldPreventScroll, setShouldPreventScroll] = (0, _react.useState)(false);
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(0);
+  const emojiRef = (0, _react.useRef)(null);
+  const shouldPreventEmojiControlsRef = (0, _react.useRef)(false);
+  const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = (0, _react.useState)(false);
   const {
     addOrUpdateEmojiInHistory,
     historyEmojis
@@ -32,24 +36,118 @@ const EmojiPickerEmojis = _ref => {
     personId,
     selectedCategory
   });
+  const handlePopupVisibilityChange = (0, _react.useCallback)(isVisible => {
+    setShouldShowSkinTonePopup(isVisible);
+    shouldPreventEmojiControlsRef.current = isVisible;
+    setShouldPreventScroll(isVisible);
+  }, []);
   const handleSelect = (0, _react.useCallback)(_ref2 => {
     let {
       emoji,
       name,
-      skin_tone_support
+      skin_tone_support,
+      index
     } = _ref2;
     onSelect(emoji);
+    if (index) {
+      setFocusedIndex(index);
+    }
     void addOrUpdateEmojiInHistory({
       emoji,
       name,
       skin_tone_support
     });
   }, [addOrUpdateEmojiInHistory, onSelect]);
+  (0, _react.useEffect)(() => {
+    if (selectedCategory) {
+      setFocusedIndex(0);
+      const container = emojiRef.current;
+      if (!container) {
+        return;
+      }
+      container.scrollTop = 0;
+    }
+  }, [selectedCategory]);
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = event => {
+      if (!shouldPreventEmojiControlsRef.current && (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+        event.preventDefault();
+        const children = emojiRef.current?.children;
+        if (children && children.length > 0) {
+          const container = emojiRef.current;
+          let newIndex = focusedIndex !== null ? focusedIndex : 0;
+          if (event.ctrlKey) {
+            return;
+          }
+          if (event.key === 'ArrowUp') {
+            newIndex = (newIndex - 6) % children.length;
+          } else if (event.key === 'ArrowDown') {
+            newIndex = (newIndex + 6) % children.length;
+          } else if (event.key === 'ArrowLeft') {
+            newIndex = (newIndex - 1) % children.length;
+          } else if (event.key === 'ArrowRight') {
+            newIndex = (newIndex + 1) % children.length;
+          }
+
+          // remove focus from the old element
+          if (focusedIndex !== null) {
+            const prevElement = children[focusedIndex];
+            prevElement.tabIndex = -1;
+          }
+          if (newIndex < 0) {
+            newIndex = children.length - 1;
+          } else if (newIndex > children.length - 1) {
+            newIndex = 0;
+          }
+          setFocusedIndex(newIndex);
+
+          // Set focus to the element
+          const newElement = children[newIndex];
+          newElement.tabIndex = 0;
+          const containerRect = container.getBoundingClientRect();
+          const elementRect = newElement.getBoundingClientRect();
+          if (elementRect.bottom > containerRect.bottom) {
+            container.scrollTop += elementRect.bottom - containerRect.bottom;
+          } else if (elementRect.top < containerRect.top) {
+            container.scrollTop -= containerRect.top - elementRect.top;
+          }
+        }
+      } else if (event.key === 'Enter' && !shouldPreventEmojiControlsRef.current && focusedIndex !== null) {
+        if (event.ctrlKey) {
+          setShouldShowSkinTonePopup(true);
+          return;
+        }
+        const {
+          dataset
+        } = emojiRef.current?.children[focusedIndex];
+        const {
+          emoji,
+          name,
+          skinToneSupport
+        } = dataset;
+        if (!emoji || !name || !skinToneSupport) {
+          return;
+        }
+        handleSelect({
+          emoji,
+          name,
+          skin_tone_support: skinToneSupport === 'true'
+        });
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [focusedIndex, handleSelect]);
+  const handleRightClick = (0, _react.useCallback)(index => {
+    setFocusedIndex(index);
+  }, []);
   const emojis = (0, _react.useMemo)(() => {
     if (searchString.trim() !== '') {
       const lowerSearchString = searchString.toLowerCase();
       const searchResults = [];
-      Object.entries(_dataByEmoji.default).forEach(_ref3 => {
+      Object.entries(_dataByEmoji.default).forEach((_ref3, index) => {
         let [emoji, {
           name,
           skin_tone_support
@@ -60,14 +158,20 @@ const EmojiPickerEmojis = _ref => {
         const germanKeywords = _emojiDeDE.default[emoji];
         if (name.includes(lowerSearchString) || keywords?.some(keyword => keyword.includes(lowerSearchString)) || germanKeywords?.some(keyword => keyword.includes(lowerSearchString))) {
           searchResults.push( /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+            shouldShowSkinTonePopup: index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup,
+            isSelected: index === focusedIndex,
             emoji: emoji,
+            index: index,
+            onRightClick: handleRightClick,
             isSkinToneSupported: skin_tone_support,
             key: name,
-            onPopupVisibilityChange: setShouldPreventScroll,
+            name: name,
+            onPopupVisibilityChange: handlePopupVisibilityChange,
             onSelect: e => handleSelect({
               emoji: e,
               name,
-              skin_tone_support
+              skin_tone_support,
+              index
             })
           }));
         }
@@ -75,20 +179,26 @@ const EmojiPickerEmojis = _ref => {
       return searchResults;
     }
     if (selectedCategory === 'history') {
-      return historyEmojis.map(_ref4 => {
+      return historyEmojis.map((_ref4, index) => {
         let {
           emoji,
           name,
           skin_tone_support
         } = _ref4;
         return /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+          isSelected: index === focusedIndex,
+          shouldShowSkinTonePopup: index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup,
           emoji: emoji,
+          name: name,
           key: name,
-          onPopupVisibilityChange: setShouldPreventScroll,
+          index: index,
+          onRightClick: handleRightClick,
+          onPopupVisibilityChange: handlePopupVisibilityChange,
           onSelect: e => handleSelect({
             emoji: e,
             name,
-            skin_tone_support
+            skin_tone_support,
+            index
           }),
           isSkinToneSupported: false
         });
@@ -99,29 +209,36 @@ const EmojiPickerEmojis = _ref => {
         slug
       } = _ref5;
       return slug === selectedCategory;
-    })?.emojis.map(_ref6 => {
+    })?.emojis.map((_ref6, index) => {
       let {
         emoji,
         name,
         skin_tone_support
       } = _ref6;
       return /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+        isSelected: index === focusedIndex,
+        shouldShowSkinTonePopup: index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup,
         emoji: emoji,
+        name: name,
+        index: index,
+        onRightClick: handleRightClick,
         isSkinToneSupported: skin_tone_support,
         key: name,
-        onPopupVisibilityChange: setShouldPreventScroll,
+        onPopupVisibilityChange: handlePopupVisibilityChange,
         onSelect: e => handleSelect({
           emoji: e,
           name,
-          skin_tone_support
+          skin_tone_support,
+          index
         })
       });
     });
-  }, [handleSelect, historyEmojis, searchString, selectedCategory]);
+  }, [searchString, selectedCategory, focusedIndex, shouldShowSkinTonePopup, handleRightClick, handlePopupVisibilityChange, handleSelect, historyEmojis]);
   const shouldShowNoContentInfo = !emojis || emojis.length === 0;
   return /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.StyledEmojiPickerEmojis, {
     shouldPreventScroll: shouldPreventScroll,
-    shouldShowNoContentInfo: shouldShowNoContentInfo
+    shouldShowNoContentInfo: shouldShowNoContentInfo,
+    ref: emojiRef
   }, emojis, shouldShowNoContentInfo && /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.StyledEmojiPickerEmojisNoContentInfo, null, "Hier werden die zuletzt verwendeten Emojis angezeigt, die \xFCber diese Auswahl gew\xE4hlt wurden."));
 };
 EmojiPickerEmojis.displayName = 'EmojiPickerEmojis';

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerEmojis.js","names":["_emojilib","_interopRequireDefault","require","_react","_interopRequireWildcard","_dataByEmoji","_dataByGroup","_emojiDeDE","_emojiHistory","_Emoji","_EmojiPickerEmojis","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","EmojiPickerEmojis","_ref","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","useState","addOrUpdateEmojiInHistory","historyEmojis","useEmojiHistory","handleSelect","useCallback","_ref2","emoji","name","skin_tone_support","emojis","useMemo","trim","lowerSearchString","toLowerCase","searchResults","entries","emojiList","forEach","_ref3","keywords","emojiLib","germanKeywords","germanEmojiLib","includes","some","keyword","push","createElement","isSkinToneSupported","key","onPopupVisibilityChange","map","_ref4","emojiCategories","find","_ref5","slug","_ref6","shouldShowNoContentInfo","length","StyledEmojiPickerEmojis","StyledEmojiPickerEmojisNoContentInfo","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.tsx"],"sourcesContent":["import emojiLib from 'emojilib';\nimport React, { FC, useCallback, useMemo, 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\n    const { addOrUpdateEmojiInHistory, historyEmojis } = useEmojiHistory({\n        accessToken,\n        personId,\n        selectedCategory,\n    });\n\n    const handleSelect = useCallback(\n        ({\n            emoji,\n            name,\n            skin_tone_support,\n        }: {\n            emoji: string;\n            name: string;\n            skin_tone_support: boolean;\n        }) => {\n            onSelect(emoji);\n\n            void addOrUpdateEmojiInHistory({ emoji, name, skin_tone_support });\n        },\n        [addOrUpdateEmojiInHistory, onSelect]\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 }]) => {\n                // @ts-expect-error: Type is correct here\n                const keywords = emojiLib[emoji] as string[] | undefined;\n                // @ts-expect-error: Type is correct here\n                const germanKeywords = germanEmojiLib[emoji] as string[] | 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                            emoji={emoji}\n                            isSkinToneSupported={skin_tone_support}\n                            key={name}\n                            onPopupVisibilityChange={setShouldPreventScroll}\n                            onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support })}\n                        />\n                    );\n                }\n            });\n\n            return searchResults;\n        }\n\n        if (selectedCategory === 'history') {\n            return historyEmojis.map(({ emoji, name, skin_tone_support }) => (\n                <Emoji\n                    emoji={emoji}\n                    key={name}\n                    onPopupVisibilityChange={setShouldPreventScroll}\n                    onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support })}\n                    isSkinToneSupported={false}\n                />\n            ));\n        }\n\n        return emojiCategories\n            .find(({ slug }) => slug === selectedCategory)\n            ?.emojis.map(({ emoji, name, skin_tone_support }) => (\n                <Emoji\n                    emoji={emoji}\n                    isSkinToneSupported={skin_tone_support}\n                    key={name}\n                    onPopupVisibilityChange={setShouldPreventScroll}\n                    onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support })}\n                />\n            ));\n    }, [handleSelect, historyEmojis, searchString, selectedCategory]);\n\n    const shouldShowNoContentInfo = !emojis || emojis.length === 0;\n\n    return (\n        <StyledEmojiPickerEmojis\n            shouldPreventScroll={shouldPreventScroll}\n            shouldShowNoContentInfo={shouldShowNoContentInfo}\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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"}
+{"version":3,"file":"EmojiPickerEmojis.js","names":["_emojilib","_interopRequireDefault","require","_react","_interopRequireWildcard","_dataByEmoji","_dataByGroup","_emojiDeDE","_emojiHistory","_Emoji","_EmojiPickerEmojis","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","EmojiPickerEmojis","_ref","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","useState","focusedIndex","setFocusedIndex","emojiRef","useRef","shouldPreventEmojiControlsRef","shouldShowSkinTonePopup","setShouldShowSkinTonePopup","addOrUpdateEmojiInHistory","historyEmojis","useEmojiHistory","handlePopupVisibilityChange","useCallback","isVisible","current","handleSelect","_ref2","emoji","name","skin_tone_support","index","useEffect","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","useMemo","trim","lowerSearchString","toLowerCase","searchResults","entries","emojiList","forEach","_ref3","keywords","emojiLib","germanKeywords","germanEmojiLib","includes","some","keyword","push","createElement","isSelected","onRightClick","isSkinToneSupported","onPopupVisibilityChange","map","_ref4","emojiCategories","find","_ref5","slug","_ref6","shouldShowNoContentInfo","StyledEmojiPickerEmojis","ref","StyledEmojiPickerEmojisNoContentInfo","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.tsx"],"sourcesContent":["import 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 [focusedIndex, setFocusedIndex] = useState<number>(0);\n\n    const emojiRef = useRef<HTMLDivElement>(null);\n    const shouldPreventEmojiControlsRef = useRef(false);\n    const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = useState(false);\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                // @ts-expect-error: Type is correct here\n                const keywords = emojiLib[emoji] as string[] | undefined;\n                // @ts-expect-error: Type is correct here\n                const germanKeywords = germanEmojiLib[emoji] as string[] | 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            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,SAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,YAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,UAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,aAAA,GAAAN,OAAA;AAEA,IAAAO,MAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,kBAAA,GAAAR,OAAA;AAGoC,SAAAS,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,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAnB,uBAAA+B,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAhB,UAAA,GAAAgB,GAAA,KAAAf,OAAA,EAAAe,GAAA;AAUpC,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,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EACrE,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAF,eAAQ,EAAS,CAAC,CAAC;EAE3D,MAAMG,QAAQ,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAC7C,MAAMC,6BAA6B,GAAG,IAAAD,aAAM,EAAC,KAAK,CAAC;EACnD,MAAM,CAACE,uBAAuB,EAAEC,0BAA0B,CAAC,GAAG,IAAAP,eAAQ,EAAC,KAAK,CAAC;EAE7E,MAAM;IAAEQ,yBAAyB;IAAEC;EAAc,CAAC,GAAG,IAAAC,6BAAe,EAAC;IACjEjB,WAAW;IACXE,QAAQ;IACRE;EACJ,CAAC,CAAC;EAEF,MAAMc,2BAA2B,GAAG,IAAAC,kBAAW,EAAEC,SAAkB,IAAK;IACpEN,0BAA0B,CAACM,SAAS,CAAC;IACrCR,6BAA6B,CAACS,OAAO,GAAGD,SAAS;IACjDd,sBAAsB,CAACc,SAAS,CAAC;EACrC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,YAAY,GAAG,IAAAH,kBAAW,EAC5BI,KAAA,IAUM;IAAA,IAVL;MACGC,KAAK;MACLC,IAAI;MACJC,iBAAiB;MACjBC;IAMJ,CAAC,GAAAJ,KAAA;IACGtB,QAAQ,CAACuB,KAAK,CAAC;IAEf,IAAIG,KAAK,EAAE;MACPlB,eAAe,CAACkB,KAAK,CAAC;IAC1B;IAEA,KAAKZ,yBAAyB,CAAC;MAAES,KAAK;MAAEC,IAAI;MAAEC;IAAkB,CAAC,CAAC;EACtE,CAAC,EACD,CAACX,yBAAyB,EAAEd,QAAQ,CACxC,CAAC;EAED,IAAA2B,gBAAS,EAAC,MAAM;IACZ,IAAIxB,gBAAgB,EAAE;MAClBK,eAAe,CAAC,CAAC,CAAC;MAElB,MAAMoB,SAAS,GAAGnB,QAAQ,CAACW,OAAO;MAElC,IAAI,CAACQ,SAAS,EAAE;QACZ;MACJ;MAEAA,SAAS,CAACC,SAAS,GAAG,CAAC;IAC3B;EACJ,CAAC,EAAE,CAAC1B,gBAAgB,CAAC,CAAC;EAEtB,IAAAwB,gBAAS,EAAC,MAAM;IACZ,MAAMG,aAAa,GAAIC,KAAoB,IAAK;MAC5C,IACI,CAACpB,6BAA6B,CAACS,OAAO,KACrCW,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,GAAGzB,QAAQ,CAACW,OAAO,EAAEc,QAAQ;QAC3C,IAAIA,QAAQ,IAAIA,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;UACjC,MAAMP,SAAS,GAAGnB,QAAQ,CAACW,OAAO;UAClC,IAAIgB,QAAQ,GAAG7B,YAAY,KAAK,IAAI,GAAGA,YAAY,GAAG,CAAC;UAEvD,IAAIwB,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,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,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,CAACrB,6BAA6B,CAACS,OAAO,IACtCb,YAAY,KAAK,IAAI,EACvB;QACE,IAAIwB,KAAK,CAACM,OAAO,EAAE;UACfxB,0BAA0B,CAAC,IAAI,CAAC;UAEhC;QACJ;QAEA,MAAM;UAAEiC;QAAQ,CAAC,GAAGrC,QAAQ,CAACW,OAAO,EAAEc,QAAQ,CAAC3B,YAAY,CAAmB;QAE9E,MAAM;UAAEgB,KAAK;UAAEC,IAAI;UAAEuB;QAAgB,CAAC,GAAGD,OAAO;QAEhD,IAAI,CAACvB,KAAK,IAAI,CAACC,IAAI,IAAI,CAACuB,eAAe,EAAE;UACrC;QACJ;QAEA1B,YAAY,CAAC;UAAEE,KAAK;UAAEC,IAAI;UAAEC,iBAAiB,EAAEsB,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,CAACvB,YAAY,EAAEc,YAAY,CAAC,CAAC;EAEhC,MAAM8B,gBAAgB,GAAG,IAAAjC,kBAAW,EAAEQ,KAAa,IAAK;IACpDlB,eAAe,CAACkB,KAAK,CAAC;EAC1B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM0B,MAAM,GAAG,IAAAC,cAAO,EAAC,MAAM;IACzB,IAAInD,YAAY,CAACoD,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE;MAC5B,MAAMC,iBAAiB,GAAGrD,YAAY,CAACsD,WAAW,CAAC,CAAC;MAEpD,MAAMC,aAA4B,GAAG,EAAE;MAEvCtE,MAAM,CAACuE,OAAO,CAACC,oBAAS,CAAC,CAACC,OAAO,CAAC,CAAAC,KAAA,EAAuCnC,KAAK,KAAK;QAAA,IAAhD,CAACH,KAAK,EAAE;UAAEC,IAAI;UAAEC;QAAkB,CAAC,CAAC,GAAAoC,KAAA;QACnE;QACA,MAAMC,QAAQ,GAAGC,iBAAQ,CAACxC,KAAK,CAAyB;QACxD;QACA,MAAMyC,cAAc,GAAGC,kBAAc,CAAC1C,KAAK,CAAyB;QAEpE,IACIC,IAAI,CAAC0C,QAAQ,CAACX,iBAAiB,CAAC,IAChCO,QAAQ,EAAEK,IAAI,CAAEC,OAAO,IAAKA,OAAO,CAACF,QAAQ,CAACX,iBAAiB,CAAC,CAAC,IAChES,cAAc,EAAEG,IAAI,CAAEC,OAAO,IAAKA,OAAO,CAACF,QAAQ,CAACX,iBAAiB,CAAC,CAAC,EACxE;UACEE,aAAa,CAACY,IAAI,eACdtG,MAAA,CAAAc,OAAA,CAAAyF,aAAA,CAACjG,MAAA,CAAAQ,OAAK;YACF+B,uBAAuB,EACnBc,KAAK,KAAKnB,YAAY,IACtBkB,iBAAiB,IACjBb,uBACH;YACD2D,UAAU,EAAE7C,KAAK,KAAKnB,YAAa;YACnCgB,KAAK,EAAEA,KAAM;YACbG,KAAK,EAAEA,KAAM;YACb8C,YAAY,EAAErB,gBAAiB;YAC/BsB,mBAAmB,EAAEhD,iBAAkB;YACvCO,GAAG,EAAER,IAAK;YACVA,IAAI,EAAEA,IAAK;YACXkD,uBAAuB,EAAEzD,2BAA4B;YACrDjB,QAAQ,EAAGxB,CAAC,IACR6C,YAAY,CAAC;cAAEE,KAAK,EAAE/C,CAAC;cAAEgD,IAAI;cAAEC,iBAAiB;cAAEC;YAAM,CAAC;UAC5D,CACJ,CACL,CAAC;QACL;MACJ,CAAC,CAAC;MAEF,OAAO+B,aAAa;IACxB;IAEA,IAAItD,gBAAgB,KAAK,SAAS,EAAE;MAChC,OAAOY,aAAa,CAAC4D,GAAG,CAAC,CAAAC,KAAA,EAAqClD,KAAK;QAAA,IAAzC;UAAEH,KAAK;UAAEC,IAAI;UAAEC;QAAkB,CAAC,GAAAmD,KAAA;QAAA,oBACxD7G,MAAA,CAAAc,OAAA,CAAAyF,aAAA,CAACjG,MAAA,CAAAQ,OAAK;UACF0F,UAAU,EAAE7C,KAAK,KAAKnB,YAAa;UACnCK,uBAAuB,EACnBc,KAAK,KAAKnB,YAAY,IAAIkB,iBAAiB,IAAIb,uBAClD;UACDW,KAAK,EAAEA,KAAM;UACbC,IAAI,EAAEA,IAAK;UACXQ,GAAG,EAAER,IAAK;UACVE,KAAK,EAAEA,KAAM;UACb8C,YAAY,EAAErB,gBAAiB;UAC/BuB,uBAAuB,EAAEzD,2BAA4B;UACrDjB,QAAQ,EAAGxB,CAAC,IAAK6C,YAAY,CAAC;YAAEE,KAAK,EAAE/C,CAAC;YAAEgD,IAAI;YAAEC,iBAAiB;YAAEC;UAAM,CAAC,CAAE;UAC5E+C,mBAAmB,EAAE;QAAM,CAC9B,CAAC;MAAA,CACL,CAAC;IACN;IAEA,OAAOI,oBAAe,CACjBC,IAAI,CAACC,KAAA;MAAA,IAAC;QAAEC;MAAK,CAAC,GAAAD,KAAA;MAAA,OAAKC,IAAI,KAAK7E,gBAAgB;IAAA,EAAC,EAC5CiD,MAAM,CAACuB,GAAG,CAAC,CAAAM,KAAA,EAAqCvD,KAAK;MAAA,IAAzC;QAAEH,KAAK;QAAEC,IAAI;QAAEC;MAAkB,CAAC,GAAAwD,KAAA;MAAA,oBAC5ClH,MAAA,CAAAc,OAAA,CAAAyF,aAAA,CAACjG,MAAA,CAAAQ,OAAK;QACF0F,UAAU,EAAE7C,KAAK,KAAKnB,YAAa;QACnCK,uBAAuB,EACnBc,KAAK,KAAKnB,YAAY,IAAIkB,iBAAiB,IAAIb,uBAClD;QACDW,KAAK,EAAEA,KAAM;QACbC,IAAI,EAAEA,IAAK;QACXE,KAAK,EAAEA,KAAM;QACb8C,YAAY,EAAErB,gBAAiB;QAC/BsB,mBAAmB,EAAEhD,iBAAkB;QACvCO,GAAG,EAAER,IAAK;QACVkD,uBAAuB,EAAEzD,2BAA4B;QACrDjB,QAAQ,EAAGxB,CAAC,IAAK6C,YAAY,CAAC;UAAEE,KAAK,EAAE/C,CAAC;UAAEgD,IAAI;UAAEC,iBAAiB;UAAEC;QAAM,CAAC;MAAE,CAC/E,CAAC;IAAA,CACL,CAAC;EACV,CAAC,EAAE,CACCxB,YAAY,EACZC,gBAAgB,EAChBI,YAAY,EACZK,uBAAuB,EACvBuC,gBAAgB,EAChBlC,2BAA2B,EAC3BI,YAAY,EACZN,aAAa,CAChB,CAAC;EAEF,MAAMmE,uBAAuB,GAAG,CAAC9B,MAAM,IAAIA,MAAM,CAACjB,MAAM,KAAK,CAAC;EAE9D,oBACIpE,MAAA,CAAAc,OAAA,CAAAyF,aAAA,CAAChG,kBAAA,CAAA6G,uBAAuB;IACpB/E,mBAAmB,EAAEA,mBAAoB;IACzC8E,uBAAuB,EAAEA,uBAAwB;IACjDE,GAAG,EAAE3E;EAAS,GAEb2C,MAAM,EACN8B,uBAAuB,iBACpBnH,MAAA,CAAAc,OAAA,CAAAyF,aAAA,CAAChG,kBAAA,CAAA+G,oCAAoC,QAAC,oGAGA,CAErB,CAAC;AAElC,CAAC;AAEDxF,iBAAiB,CAACyF,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3G,OAAA,GAErCgB,iBAAiB"}

package/lib/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.d.ts

@@ -1,9 +1,14 @@
 import { FC } from 'react';
 export type EmojiProps = {
     emoji: string;
+    isSelected: boolean;
+    name: string;
+    index: number;
     isSkinToneSupported: boolean;
     onPopupVisibilityChange: (isVisible: boolean) => void;
     onSelect: (emoji: string) => void;
+    onRightClick: (newIndex: number) => void;
+    shouldShowSkinTonePopup: boolean;
 };
 declare const Emoji: FC<EmojiProps>;
 export default Emoji;

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

@@ -16,9 +16,14 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const Emoji = _ref => {
   let {
     emoji,
+    isSelected,
+    name,
     isSkinToneSupported,
     onPopupVisibilityChange,
-    onSelect
+    onSelect,
+    shouldShowSkinTonePopup,
+    onRightClick,
+    index
   } = _ref;
   const [shouldShowPopup, setShouldShowPopup] = (0, _react.useState)(false);
   const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = (0, _react.useState)(_alignment.AnchorAlignment.Top);
@@ -86,14 +91,26 @@ const Emoji = _ref => {
           top: scrollTop
         });
         setShouldShowPopup(true);
+        onRightClick(index);
       }
     }
-  }, [isSkinToneSupported]);
-  const handleHidePopup = (0, _react.useCallback)(() => setShouldShowPopup(false), []);
+  }, [index, isSkinToneSupported, onRightClick]);
+  (0, _react.useEffect)(() => {
+    if (shouldShowSkinTonePopup) {
+      setShouldShowPopup(shouldShowSkinTonePopup);
+    }
+  }, [shouldShowSkinTonePopup]);
+  const handleHidePopup = (0, _react.useCallback)(() => {
+    setShouldShowPopup(false);
+  }, []);
   (0, _react.useEffect)(() => {
     onPopupVisibilityChange(shouldShowPopup);
   }, [onPopupVisibilityChange, shouldShowPopup]);
   return /*#__PURE__*/_react.default.createElement(_Emoji.StyledEmoji, {
+    isSelected: isSelected,
+    "data-emoji": emoji,
+    "data-name": name,
+    "data-skin-tone-support": isSkinToneSupported,
     className: "prevent-lose-focus",
     onClick: handleClick,
     onContextMenu: handleContextMenu

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

@@ -1 +1 @@
-{"version":3,"file":"Emoji.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_alignment","_Emoji","_SkinTonePopup","_interopRequireDefault","_SkinTonePopup2","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Emoji","_ref","emoji","isSkinToneSupported","onPopupVisibilityChange","onSelect","shouldShowPopup","setShouldShowPopup","useState","skinTonePopupAnchorAlignment","setSkinTonePopupAnchorAlignment","AnchorAlignment","Top","skinTonePopupAnchorOffset","setSkinTonePopupAnchorOffset","skinTonePopupOverlayPosition","setSkinTonePopupOverlayPosition","top","skinTonePopupPosition","setSkinTonePopupPosition","left","handleClick","useCallback","handleContextMenu","event","preventDefault","stopPropagation","currentTarget","element","parentElement","height","elementHeight","elementLeft","elementTop","width","elementWidth","getBoundingClientRect","parentHeight","parentLeft","parentTop","parentWidth","scrollTop","anchorAlignment","anchorOffset","skinTonePopupContentSize","maxLeft","minLeft","Bottom","handleHidePopup","useEffect","createElement","StyledEmoji","className","onClick","onContextMenu","AnimatePresence","initial","key","onHidePopup","overlayPosition","position","displayName","_default","exports"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEvent, useCallback, useEffect, useState } from 'react';\nimport { AnchorAlignment } from '../../../../constants/alignment';\nimport { StyledEmoji } from './Emoji.styles';\nimport SkinTonePopup, { SkinTonePopupProps } from './skin-tone-popup/SkinTonePopup';\nimport { skinTonePopupContentSize } from './skin-tone-popup/SkinTonePopup.styles';\n\nexport type EmojiProps = {\n    emoji: string;\n    isSkinToneSupported: boolean;\n    onPopupVisibilityChange: (isVisible: boolean) => void;\n    onSelect: (emoji: string) => void;\n};\n\nconst Emoji: FC<EmojiProps> = ({\n    emoji,\n    isSkinToneSupported,\n    onPopupVisibilityChange,\n    onSelect,\n}) => {\n    const [shouldShowPopup, setShouldShowPopup] = useState(false);\n    const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = useState(\n        AnchorAlignment.Top\n    );\n    const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = useState(0);\n    const [skinTonePopupOverlayPosition, setSkinTonePopupOverlayPosition] = useState<\n        SkinTonePopupProps['overlayPosition']\n    >({ top: 0 });\n    const [skinTonePopupPosition, setSkinTonePopupPosition] = useState<\n        SkinTonePopupProps['position']\n    >({ left: 0, top: 0 });\n\n    const handleClick = useCallback(() => {\n        onSelect(emoji);\n    }, [emoji, onSelect]);\n\n    const handleContextMenu = useCallback(\n        (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            const {\n                currentTarget: element,\n                currentTarget: { parentElement },\n            } = event;\n\n            if (parentElement) {\n                const {\n                    height: elementHeight,\n                    left: elementLeft,\n                    top: elementTop,\n                    width: elementWidth,\n                } = element.getBoundingClientRect();\n\n                const {\n                    height: parentHeight,\n                    left: parentLeft,\n                    top: parentTop,\n                    width: parentWidth,\n                } = parentElement.getBoundingClientRect();\n\n                const { scrollTop } = parentElement;\n\n                let anchorAlignment = AnchorAlignment.Top;\n                let anchorOffset = 0;\n\n                let left =\n                    elementLeft -\n                    parentLeft -\n                    skinTonePopupContentSize.width / 2 +\n                    elementWidth / 2;\n\n                let top = elementTop - parentTop + elementHeight + scrollTop;\n\n                const maxLeft = parentWidth - skinTonePopupContentSize.width - 12;\n                const minLeft = 12;\n\n                if (left < minLeft) {\n                    anchorOffset = left - minLeft;\n                    left = minLeft;\n                } else if (left > maxLeft) {\n                    anchorOffset = left - maxLeft;\n                    left = maxLeft;\n                }\n\n                if (top + skinTonePopupContentSize.height > parentHeight + scrollTop) {\n                    anchorAlignment = AnchorAlignment.Bottom;\n                    top -= elementHeight + skinTonePopupContentSize.height;\n                }\n\n                if (isSkinToneSupported) {\n                    setSkinTonePopupAnchorAlignment(anchorAlignment);\n                    setSkinTonePopupAnchorOffset(anchorOffset);\n                    setSkinTonePopupPosition({ left, top });\n                    setSkinTonePopupOverlayPosition({ top: scrollTop });\n                    setShouldShowPopup(true);\n                }\n            }\n        },\n        [isSkinToneSupported]\n    );\n\n    const handleHidePopup = useCallback(() => setShouldShowPopup(false), []);\n\n    useEffect(() => {\n        onPopupVisibilityChange(shouldShowPopup);\n    }, [onPopupVisibilityChange, shouldShowPopup]);\n\n    return (\n        <StyledEmoji\n            className=\"prevent-lose-focus\"\n            onClick={handleClick}\n            onContextMenu={handleContextMenu}\n        >\n            {emoji}\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <SkinTonePopup\n                        anchorAlignment={skinTonePopupAnchorAlignment}\n                        anchorOffset={skinTonePopupAnchorOffset}\n                        emoji={emoji}\n                        key={emoji}\n                        onHidePopup={handleHidePopup}\n                        onSelect={onSelect}\n                        overlayPosition={skinTonePopupOverlayPosition}\n                        position={skinTonePopupPosition}\n                    />\n                )}\n            </AnimatePresence>\n        </StyledEmoji>\n    );\n};\n\nEmoji.displayName = 'Emoji';\n\nexport default Emoji;\n"],"mappings":"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"}
+{"version":3,"file":"Emoji.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_alignment","_Emoji","_SkinTonePopup","_interopRequireDefault","_SkinTonePopup2","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Emoji","_ref","emoji","isSelected","name","isSkinToneSupported","onPopupVisibilityChange","onSelect","shouldShowSkinTonePopup","onRightClick","index","shouldShowPopup","setShouldShowPopup","useState","skinTonePopupAnchorAlignment","setSkinTonePopupAnchorAlignment","AnchorAlignment","Top","skinTonePopupAnchorOffset","setSkinTonePopupAnchorOffset","skinTonePopupOverlayPosition","setSkinTonePopupOverlayPosition","top","skinTonePopupPosition","setSkinTonePopupPosition","left","handleClick","useCallback","handleContextMenu","event","preventDefault","stopPropagation","currentTarget","element","parentElement","height","elementHeight","elementLeft","elementTop","width","elementWidth","getBoundingClientRect","parentHeight","parentLeft","parentTop","parentWidth","scrollTop","anchorAlignment","anchorOffset","skinTonePopupContentSize","maxLeft","minLeft","Bottom","useEffect","handleHidePopup","createElement","StyledEmoji","className","onClick","onContextMenu","AnimatePresence","initial","key","onHidePopup","overlayPosition","position","displayName","_default","exports"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { AnchorAlignment } from '../../../../constants/alignment';\nimport { StyledEmoji } from './Emoji.styles';\nimport SkinTonePopup, { SkinTonePopupProps } from './skin-tone-popup/SkinTonePopup';\nimport { skinTonePopupContentSize } from './skin-tone-popup/SkinTonePopup.styles';\n\nexport type EmojiProps = {\n    emoji: string;\n    isSelected: boolean;\n    name: string;\n    index: number;\n    isSkinToneSupported: boolean;\n    onPopupVisibilityChange: (isVisible: boolean) => void;\n    onSelect: (emoji: string) => void;\n    onRightClick: (newIndex: number) => void;\n    shouldShowSkinTonePopup: boolean;\n};\n\nconst Emoji: FC<EmojiProps> = ({\n    emoji,\n    isSelected,\n    name,\n    isSkinToneSupported,\n    onPopupVisibilityChange,\n    onSelect,\n    shouldShowSkinTonePopup,\n    onRightClick,\n    index,\n}) => {\n    const [shouldShowPopup, setShouldShowPopup] = useState(false);\n    const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = useState(\n        AnchorAlignment.Top,\n    );\n    const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = useState(0);\n    const [skinTonePopupOverlayPosition, setSkinTonePopupOverlayPosition] = useState<\n        SkinTonePopupProps['overlayPosition']\n    >({ top: 0 });\n    const [skinTonePopupPosition, setSkinTonePopupPosition] = useState<\n        SkinTonePopupProps['position']\n    >({ left: 0, top: 0 });\n\n    const handleClick = useCallback(() => {\n        onSelect(emoji);\n    }, [emoji, onSelect]);\n\n    const handleContextMenu = useCallback(\n        (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            const {\n                currentTarget: element,\n                currentTarget: { parentElement },\n            } = event;\n\n            if (parentElement) {\n                const {\n                    height: elementHeight,\n                    left: elementLeft,\n                    top: elementTop,\n                    width: elementWidth,\n                } = element.getBoundingClientRect();\n\n                const {\n                    height: parentHeight,\n                    left: parentLeft,\n                    top: parentTop,\n                    width: parentWidth,\n                } = parentElement.getBoundingClientRect();\n\n                const { scrollTop } = parentElement;\n\n                let anchorAlignment = AnchorAlignment.Top;\n                let anchorOffset = 0;\n\n                let left =\n                    elementLeft -\n                    parentLeft -\n                    skinTonePopupContentSize.width / 2 +\n                    elementWidth / 2;\n\n                let top = elementTop - parentTop + elementHeight + scrollTop;\n\n                const maxLeft = parentWidth - skinTonePopupContentSize.width - 12;\n                const minLeft = 12;\n\n                if (left < minLeft) {\n                    anchorOffset = left - minLeft;\n                    left = minLeft;\n                } else if (left > maxLeft) {\n                    anchorOffset = left - maxLeft;\n                    left = maxLeft;\n                }\n\n                if (top + skinTonePopupContentSize.height > parentHeight + scrollTop) {\n                    anchorAlignment = AnchorAlignment.Bottom;\n                    top -= elementHeight + skinTonePopupContentSize.height;\n                }\n\n                if (isSkinToneSupported) {\n                    setSkinTonePopupAnchorAlignment(anchorAlignment);\n                    setSkinTonePopupAnchorOffset(anchorOffset);\n                    setSkinTonePopupPosition({ left, top });\n                    setSkinTonePopupOverlayPosition({ top: scrollTop });\n                    setShouldShowPopup(true);\n                    onRightClick(index);\n                }\n            }\n        },\n        [index, isSkinToneSupported, onRightClick],\n    );\n\n    useEffect(() => {\n        if (shouldShowSkinTonePopup) {\n            setShouldShowPopup(shouldShowSkinTonePopup);\n        }\n    }, [shouldShowSkinTonePopup]);\n\n    const handleHidePopup = useCallback(() => {\n        setShouldShowPopup(false);\n    }, []);\n\n    useEffect(() => {\n        onPopupVisibilityChange(shouldShowPopup);\n    }, [onPopupVisibilityChange, shouldShowPopup]);\n\n    return (\n        <StyledEmoji\n            isSelected={isSelected}\n            data-emoji={emoji}\n            data-name={name}\n            data-skin-tone-support={isSkinToneSupported}\n            className=\"prevent-lose-focus\"\n            onClick={handleClick}\n            onContextMenu={handleContextMenu}\n        >\n            {emoji}\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <SkinTonePopup\n                        anchorAlignment={skinTonePopupAnchorAlignment}\n                        anchorOffset={skinTonePopupAnchorOffset}\n                        emoji={emoji}\n                        key={emoji}\n                        onHidePopup={handleHidePopup}\n                        onSelect={onSelect}\n                        overlayPosition={skinTonePopupOverlayPosition}\n                        position={skinTonePopupPosition}\n                    />\n                )}\n            </AnimatePresence>\n        </StyledEmoji>\n    );\n};\n\nEmoji.displayName = 'Emoji';\n\nexport default Emoji;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,cAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,eAAA,GAAAP,OAAA;AAAkF,SAAAM,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,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,SAAAV,wBAAAU,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AAclF,MAAMY,KAAqB,GAAGC,IAAA,IAUxB;EAAA,IAVyB;IAC3BC,KAAK;IACLC,UAAU;IACVC,IAAI;IACJC,mBAAmB;IACnBC,uBAAuB;IACvBC,QAAQ;IACRC,uBAAuB;IACvBC,YAAY;IACZC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAM,CAACU,eAAe,EAAEC,kBAAkB,CAAC,GAAG,IAAAC,eAAQ,EAAC,KAAK,CAAC;EAC7D,MAAM,CAACC,4BAA4B,EAAEC,+BAA+B,CAAC,GAAG,IAAAF,eAAQ,EAC5EG,0BAAe,CAACC,GACpB,CAAC;EACD,MAAM,CAACC,yBAAyB,EAAEC,4BAA4B,CAAC,GAAG,IAAAN,eAAQ,EAAC,CAAC,CAAC;EAC7E,MAAM,CAACO,4BAA4B,EAAEC,+BAA+B,CAAC,GAAG,IAAAR,eAAQ,EAE9E;IAAES,GAAG,EAAE;EAAE,CAAC,CAAC;EACb,MAAM,CAACC,qBAAqB,EAAEC,wBAAwB,CAAC,GAAG,IAAAX,eAAQ,EAEhE;IAAEY,IAAI,EAAE,CAAC;IAAEH,GAAG,EAAE;EAAE,CAAC,CAAC;EAEtB,MAAMI,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAClCpB,QAAQ,CAACL,KAAK,CAAC;EACnB,CAAC,EAAE,CAACA,KAAK,EAAEK,QAAQ,CAAC,CAAC;EAErB,MAAMqB,iBAAiB,GAAG,IAAAD,kBAAW,EAChCE,KAAiB,IAAK;IACnBA,KAAK,CAACC,cAAc,CAAC,CAAC;IACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;IAEvB,MAAM;MACFC,aAAa,EAAEC,OAAO;MACtBD,aAAa,EAAE;QAAEE;MAAc;IACnC,CAAC,GAAGL,KAAK;IAET,IAAIK,aAAa,EAAE;MACf,MAAM;QACFC,MAAM,EAAEC,aAAa;QACrBX,IAAI,EAAEY,WAAW;QACjBf,GAAG,EAAEgB,UAAU;QACfC,KAAK,EAAEC;MACX,CAAC,GAAGP,OAAO,CAACQ,qBAAqB,CAAC,CAAC;MAEnC,MAAM;QACFN,MAAM,EAAEO,YAAY;QACpBjB,IAAI,EAAEkB,UAAU;QAChBrB,GAAG,EAAEsB,SAAS;QACdL,KAAK,EAAEM;MACX,CAAC,GAAGX,aAAa,CAACO,qBAAqB,CAAC,CAAC;MAEzC,MAAM;QAAEK;MAAU,CAAC,GAAGZ,aAAa;MAEnC,IAAIa,eAAe,GAAG/B,0BAAe,CAACC,GAAG;MACzC,IAAI+B,YAAY,GAAG,CAAC;MAEpB,IAAIvB,IAAI,GACJY,WAAW,GACXM,UAAU,GACVM,wCAAwB,CAACV,KAAK,GAAG,CAAC,GAClCC,YAAY,GAAG,CAAC;MAEpB,IAAIlB,GAAG,GAAGgB,UAAU,GAAGM,SAAS,GAAGR,aAAa,GAAGU,SAAS;MAE5D,MAAMI,OAAO,GAAGL,WAAW,GAAGI,wCAAwB,CAACV,KAAK,GAAG,EAAE;MACjE,MAAMY,OAAO,GAAG,EAAE;MAElB,IAAI1B,IAAI,GAAG0B,OAAO,EAAE;QAChBH,YAAY,GAAGvB,IAAI,GAAG0B,OAAO;QAC7B1B,IAAI,GAAG0B,OAAO;MAClB,CAAC,MAAM,IAAI1B,IAAI,GAAGyB,OAAO,EAAE;QACvBF,YAAY,GAAGvB,IAAI,GAAGyB,OAAO;QAC7BzB,IAAI,GAAGyB,OAAO;MAClB;MAEA,IAAI5B,GAAG,GAAG2B,wCAAwB,CAACd,MAAM,GAAGO,YAAY,GAAGI,SAAS,EAAE;QAClEC,eAAe,GAAG/B,0BAAe,CAACoC,MAAM;QACxC9B,GAAG,IAAIc,aAAa,GAAGa,wCAAwB,CAACd,MAAM;MAC1D;MAEA,IAAI9B,mBAAmB,EAAE;QACrBU,+BAA+B,CAACgC,eAAe,CAAC;QAChD5B,4BAA4B,CAAC6B,YAAY,CAAC;QAC1CxB,wBAAwB,CAAC;UAAEC,IAAI;UAAEH;QAAI,CAAC,CAAC;QACvCD,+BAA+B,CAAC;UAAEC,GAAG,EAAEwB;QAAU,CAAC,CAAC;QACnDlC,kBAAkB,CAAC,IAAI,CAAC;QACxBH,YAAY,CAACC,KAAK,CAAC;MACvB;IACJ;EACJ,CAAC,EACD,CAACA,KAAK,EAAEL,mBAAmB,EAAEI,YAAY,CAC7C,CAAC;EAED,IAAA4C,gBAAS,EAAC,MAAM;IACZ,IAAI7C,uBAAuB,EAAE;MACzBI,kBAAkB,CAACJ,uBAAuB,CAAC;IAC/C;EACJ,CAAC,EAAE,CAACA,uBAAuB,CAAC,CAAC;EAE7B,MAAM8C,eAAe,GAAG,IAAA3B,kBAAW,EAAC,MAAM;IACtCf,kBAAkB,CAAC,KAAK,CAAC;EAC7B,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAyC,gBAAS,EAAC,MAAM;IACZ/C,uBAAuB,CAACK,eAAe,CAAC;EAC5C,CAAC,EAAE,CAACL,uBAAuB,EAAEK,eAAe,CAAC,CAAC;EAE9C,oBACIxC,MAAA,CAAAS,OAAA,CAAA2E,aAAA,CAACjF,MAAA,CAAAkF,WAAW;IACRrD,UAAU,EAAEA,UAAW;IACvB,cAAYD,KAAM;IAClB,aAAWE,IAAK;IAChB,0BAAwBC,mBAAoB;IAC5CoD,SAAS,EAAC,oBAAoB;IAC9BC,OAAO,EAAEhC,WAAY;IACrBiC,aAAa,EAAE/B;EAAkB,GAEhC1B,KAAK,eACN/B,MAAA,CAAAS,OAAA,CAAA2E,aAAA,CAACtF,aAAA,CAAA2F,eAAe;IAACC,OAAO,EAAE;EAAM,GAC3BlD,eAAe,iBACZxC,MAAA,CAAAS,OAAA,CAAA2E,aAAA,CAAChF,cAAA,CAAAK,OAAa;IACVmE,eAAe,EAAEjC,4BAA6B;IAC9CkC,YAAY,EAAE9B,yBAA0B;IACxChB,KAAK,EAAEA,KAAM;IACb4D,GAAG,EAAE5D,KAAM;IACX6D,WAAW,EAAET,eAAgB;IAC7B/C,QAAQ,EAAEA,QAAS;IACnByD,eAAe,EAAE5C,4BAA6B;IAC9C6C,QAAQ,EAAE1C;EAAsB,CACnC,CAEQ,CACR,CAAC;AAEtB,CAAC;AAEDvB,KAAK,CAACkE,WAAW,GAAG,OAAO;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAxF,OAAA,GAEboB,KAAK"}

package/lib/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.styles.d.ts

@@ -1,2 +1,7 @@
 /// <reference types="react" />
-export declare const StyledEmoji: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+import type { WithTheme } from '@chayns-components/core';
+type StyledEmojiProps = WithTheme<{
+    isSelected: boolean;
+}>;
+export declare const StyledEmoji: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledEmojiProps>>;
+export {};

package/lib/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.styles.js

@@ -16,5 +16,12 @@ const StyledEmoji = exports.StyledEmoji = _styledComponents.default.div`
     justify-content: center;
     width: 48px;
     height: 48px;
+    background-color: ${_ref => {
+  let {
+    theme,
+    isSelected
+  } = _ref;
+  return isSelected ? theme['secondary-102'] : 'none';
+}};
 `;
 //# sourceMappingURL=Emoji.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Emoji.styles.js","names":["_styledComponents","_interopRequireDefault","require","_font","obj","__esModule","default","StyledEmoji","exports","styled","div","getFontFamily"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { getFontFamily } from '../../../../utils/font';\n\nexport const StyledEmoji = styled.div`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    font-family: ${getFontFamily};\n    font-size: 32px;\n    justify-content: center;\n    width: 48px;\n    height: 48px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAAuD,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhD,MAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,GAAI;AACtC;AACA;AACA;AACA,mBAAmBC,mBAAc;AACjC;AACA;AACA;AACA;AACA,CAAC"}
+{"version":3,"file":"Emoji.styles.js","names":["_styledComponents","_interopRequireDefault","require","_font","obj","__esModule","default","StyledEmoji","exports","styled","div","getFontFamily","_ref","theme","isSelected"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { getFontFamily } from '../../../../utils/font';\nimport type { WithTheme } from '@chayns-components/core';\n\ntype StyledEmojiProps = WithTheme<{\n    isSelected: boolean;\n}>;\n\nexport const StyledEmoji = styled.div<StyledEmojiProps>`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    font-family: ${getFontFamily};\n    font-size: 32px;\n    justify-content: center;\n    width: 48px;\n    height: 48px;\n    background-color: ${({ theme, isSelected }: StyledEmojiProps) =>\n        isSelected ? theme['secondary-102'] : 'none'};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAAuD,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAOhD,MAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,GAAsB;AACxD;AACA;AACA;AACA,mBAAmBC,mBAAc;AACjC;AACA;AACA;AACA;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAA6B,CAAC,GAAAF,IAAA;EAAA,OACxDE,UAAU,GAAGD,KAAK,CAAC,eAAe,CAAC,GAAG,MAAM;AAAA,CAAC;AACrD,CAAC"}

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

@@ -21,14 +21,68 @@ const SkinTonePopup = _ref => {
     overlayPosition,
     position
   } = _ref;
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(0);
+  const skinToneRef = (0, _react.useRef)(null);
   const handleOverlayClick = (0, _react.useCallback)(event => {
     event.preventDefault();
     event.stopPropagation();
     onHidePopup();
   }, [onHidePopup]);
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+        event.preventDefault();
+        const children = skinToneRef.current?.children;
+        if (children && children.length > 0) {
+          let newIndex = focusedIndex !== null ? focusedIndex : 0;
+          if (event.key === 'ArrowLeft') {
+            newIndex = (newIndex - 1) % children.length;
+          } else if (event.key === 'ArrowRight') {
+            newIndex = (newIndex + 1) % children.length;
+          }
+
+          // remove focus from the old element
+          if (focusedIndex !== null) {
+            const prevElement = children[focusedIndex];
+            prevElement.tabIndex = -1;
+          }
+          if (newIndex < 0) {
+            newIndex = children.length - 1;
+          } else if (newIndex > children.length - 1) {
+            newIndex = 0;
+          }
+          setFocusedIndex(newIndex);
+
+          // Set focus to the element
+          const newElement = children[newIndex];
+          newElement.tabIndex = 0;
+          newElement.focus();
+        }
+      } else if (event.key === 'Enter' && focusedIndex !== null) {
+        const {
+          dataset
+        } = skinToneRef.current?.children[focusedIndex];
+        const {
+          skinTone
+        } = dataset;
+        if (!skinTone) {
+          return;
+        }
+        onSelect(skinTone);
+        onHidePopup();
+      } else if (event.key === 'Escape') {
+        event.preventDefault();
+        onHidePopup();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [focusedIndex, onHidePopup, onSelect]);
   const emojis = (0, _react.useMemo)(() => {
     const result = [];
-    Object.entries(_dataEmojiComponents.default).forEach(_ref2 => {
+    Object.entries(_dataEmojiComponents.default).forEach((_ref2, index) => {
       let [key, value] = _ref2;
       if (key.includes('skin_tone')) {
         const emojiWithSkinTone = (0, _emoji.addSkinToneToEmoji)(emoji, value);
@@ -40,12 +94,14 @@ const SkinTonePopup = _ref => {
         };
         result.push( /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledSkinTonePopupContentEmoji, {
           key: key,
+          "data-skin-tone": emojiWithSkinTone,
+          isSelected: index === focusedIndex,
           onClick: handleClick
         }, emojiWithSkinTone));
       }
     });
     return result;
-  }, [emoji, onHidePopup, onSelect]);
+  }, [emoji, focusedIndex, onHidePopup, onSelect]);
   return /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledMotionSkinTonePopup, {
     animate: {
       opacity: 1
@@ -60,6 +116,7 @@ const SkinTonePopup = _ref => {
       duration: 0.1
     }
   }, /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledSkinTonePopupContent, {
+    ref: skinToneRef,
     anchorAlignment: anchorAlignment,
     anchorOffset: anchorOffset,
     style: position

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

@@ -1 +1 @@
-{"version":3,"file":"SkinTonePopup.js","names":["_react","_interopRequireWildcard","require","_dataEmojiComponents","_interopRequireDefault","_emoji","_SkinTonePopup","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SkinTonePopup","_ref","anchorAlignment","anchorOffset","emoji","onHidePopup","onSelect","overlayPosition","position","handleOverlayClick","useCallback","event","preventDefault","stopPropagation","emojis","useMemo","result","entries","emojiComponents","forEach","_ref2","key","value","includes","emojiWithSkinTone","addSkinToneToEmoji","handleClick","push","createElement","StyledSkinTonePopupContentEmoji","onClick","StyledMotionSkinTonePopup","animate","opacity","exit","initial","transition","duration","StyledSkinTonePopupContent","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, useMemo } 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 handleOverlayClick = useCallback(\n        (event: MouseEvent<HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            onHidePopup();\n        },\n        [onHidePopup]\n    );\n\n    const emojis = useMemo(() => {\n        const result: JSX.Element[] = [];\n\n        Object.entries(emojiComponents).forEach(([key, value]) => {\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 key={key} onClick={handleClick}>\n                        {emojiWithSkinTone}\n                    </StyledSkinTonePopupContentEmoji>\n                );\n            }\n        });\n\n        return result;\n    }, [emoji, 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                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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"}
+{"version":3,"file":"SkinTonePopup.js","names":["_react","_interopRequireWildcard","require","_dataEmojiComponents","_interopRequireDefault","_emoji","_SkinTonePopup","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","SkinTonePopup","_ref","anchorAlignment","anchorOffset","emoji","onHidePopup","onSelect","overlayPosition","position","focusedIndex","setFocusedIndex","useState","skinToneRef","useRef","handleOverlayClick","useCallback","event","preventDefault","stopPropagation","useEffect","handleKeyDown","key","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","dataset","skinTone","document","addEventListener","removeEventListener","emojis","useMemo","result","entries","emojiComponents","forEach","_ref2","index","value","includes","emojiWithSkinTone","addSkinToneToEmoji","handleClick","push","createElement","StyledSkinTonePopupContentEmoji","isSelected","onClick","StyledMotionSkinTonePopup","animate","opacity","exit","initial","transition","duration","StyledSkinTonePopupContent","ref","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') {\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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"}

package/lib/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.d.ts

@@ -273,6 +273,9 @@ export declare const skinTonePopupContentSize: {
 };
 type StyledSkinTonePopupContentProps = WithTheme<Pick<SkinTonePopupProps, 'anchorAlignment' | 'anchorOffset'>>;
 export declare const StyledSkinTonePopupContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSkinTonePopupContentProps>>;
-export declare const StyledSkinTonePopupContentEmoji: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+type StyledSkinTonePopupContentEmojiProps = WithTheme<{
+    isSelected: boolean;
+}>;
+export declare const StyledSkinTonePopupContentEmoji: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledSkinTonePopupContentEmojiProps>>;
 export declare const StyledSkinTonePopupOverlay: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export {};

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

@@ -87,6 +87,13 @@ const StyledSkinTonePopupContentEmoji = exports.StyledSkinTonePopupContentEmoji
     flex: 1 1 auto;
     font-size: 24px;
     justify-content: center;
+    background-color: ${_ref3 => {
+  let {
+    theme,
+    isSelected
+  } = _ref3;
+  return isSelected ? theme['secondary-102'] : 'none';
+}};
 `;
 const StyledSkinTonePopupOverlay = exports.StyledSkinTonePopupOverlay = _styledComponents.default.div`
     cursor: default;

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

@@ -1 +1 @@
-{"version":3,"file":"SkinTonePopup.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_alignment","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledMotionSkinTonePopup","exports","styled","motion","div","skinTonePopupContentSize","height","width","StyledSkinTonePopupContent","_ref","theme","_ref2","anchorAlignment","anchorOffset","AnchorAlignment","Bottom","css","Top","undefined","StyledSkinTonePopupContentEmoji","StyledSkinTonePopupOverlay"],"sources":["../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { AnchorAlignment } from '../../../../../constants/alignment';\nimport type { SkinTonePopupProps } from './SkinTonePopup';\n\nexport const StyledMotionSkinTonePopup = styled(motion.div)<FramerMotionBugFix>`\n    z-index: 1;\n`;\n\nexport const skinTonePopupContentSize = {\n    height: 48,\n    width: 200,\n};\n\ntype StyledSkinTonePopupContentProps = WithTheme<\n    Pick<SkinTonePopupProps, 'anchorAlignment' | 'anchorOffset'>\n>;\n\nexport const StyledSkinTonePopupContent = styled.div<StyledSkinTonePopupContentProps>`\n    align-items: stretch;\n    background-color: ${({ theme }: StyledSkinTonePopupContentProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    display: flex;\n    height: ${skinTonePopupContentSize.height}px;\n    justify-content: stretch;\n    position: absolute;\n    width: ${skinTonePopupContentSize.width}px;\n    z-index: 2;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-bottom-right-radius: 3px;\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ anchorAlignment, anchorOffset }) => {\n            switch (anchorAlignment) {\n                case AnchorAlignment.Bottom:\n                    return css`\n                        bottom: -7px;\n                        left: calc(50% - 7px + ${anchorOffset}px);\n                        transform: rotate(45deg);\n                    `;\n                case AnchorAlignment.Top:\n                    return css`\n                        top: -7px;\n                        left: calc(50% - 7px + ${anchorOffset}px);\n                        transform: rotate(225deg);\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\nexport const StyledSkinTonePopupContentEmoji = styled.div`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    font-size: 24px;\n    justify-content: center;\n`;\n\nexport const StyledSkinTonePopupOverlay = styled.div`\n    cursor: default;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    width: 100%;\n    z-index: 1;\n`;\n"],"mappings":"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"}
+{"version":3,"file":"SkinTonePopup.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_alignment","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledMotionSkinTonePopup","exports","styled","motion","div","skinTonePopupContentSize","height","width","StyledSkinTonePopupContent","_ref","theme","_ref2","anchorAlignment","anchorOffset","AnchorAlignment","Bottom","css","Top","undefined","StyledSkinTonePopupContentEmoji","_ref3","isSelected","StyledSkinTonePopupOverlay"],"sources":["../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { AnchorAlignment } from '../../../../../constants/alignment';\nimport type { SkinTonePopupProps } from './SkinTonePopup';\n\nexport const StyledMotionSkinTonePopup = styled(motion.div)<FramerMotionBugFix>`\n    z-index: 1;\n`;\n\nexport const skinTonePopupContentSize = {\n    height: 48,\n    width: 200,\n};\n\ntype StyledSkinTonePopupContentProps = WithTheme<\n    Pick<SkinTonePopupProps, 'anchorAlignment' | 'anchorOffset'>\n>;\n\nexport const StyledSkinTonePopupContent = styled.div<StyledSkinTonePopupContentProps>`\n    align-items: stretch;\n    background-color: ${({ theme }: StyledSkinTonePopupContentProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    display: flex;\n    height: ${skinTonePopupContentSize.height}px;\n    justify-content: stretch;\n    position: absolute;\n    width: ${skinTonePopupContentSize.width}px;\n    z-index: 2;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-bottom-right-radius: 3px;\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ anchorAlignment, anchorOffset }) => {\n            switch (anchorAlignment) {\n                case AnchorAlignment.Bottom:\n                    return css`\n                        bottom: -7px;\n                        left: calc(50% - 7px + ${anchorOffset}px);\n                        transform: rotate(45deg);\n                    `;\n                case AnchorAlignment.Top:\n                    return css`\n                        top: -7px;\n                        left: calc(50% - 7px + ${anchorOffset}px);\n                        transform: rotate(225deg);\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\ntype StyledSkinTonePopupContentEmojiProps = WithTheme<{\n    isSelected: boolean;\n}>;\n\nexport const StyledSkinTonePopupContentEmoji = styled.div<StyledSkinTonePopupContentEmojiProps>`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    font-size: 24px;\n    justify-content: center;\n    background-color: ${({ theme, isSelected }: StyledSkinTonePopupContentEmojiProps) =>\n        isSelected ? theme['secondary-102'] : 'none'};\n`;\n\nexport const StyledSkinTonePopupOverlay = styled.div`\n    cursor: default;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    width: 100%;\n    z-index: 1;\n`;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.0.0-beta.397",
+    "version": "5.0.0-beta.398",
     "description": "Input field that supports HTML elements and emojis",
     "keywords": [
         "chayns",
@@ -38,10 +38,10 @@
     "devDependencies": {
         "@babel/cli": "^7.23.4",
         "@babel/core": "^7.23.7",
-        "@babel/preset-env": "^7.23.7",
+        "@babel/preset-env": "^7.23.8",
         "@babel/preset-react": "^7.23.3",
         "@babel/preset-typescript": "^7.23.3",
-        "@types/react": "^18.2.46",
+        "@types/react": "^18.2.48",
         "@types/react-dom": "^18.2.18",
         "@types/styled-components": "^5.1.34",
         "@types/uuid": "^9.0.7",
@@ -49,15 +49,15 @@
         "lerna": "^8.0.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "styled-components": "^6.1.6",
+        "styled-components": "^6.1.8",
         "typescript": "^5.3.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.397",
+        "@chayns-components/core": "^5.0.0-beta.398",
         "@chayns/colors": "^2.0.0",
         "clsx": "^2.1.0",
         "emojilib": "^3.0.11",
-        "framer-motion": "^10.17.8",
+        "framer-motion": "^10.18.0",
         "unicode-emoji-json": "^0.5.0",
         "uuid": "^9.0.1"
     },
@@ -69,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "e96612871ca1fa076b0057cb2fcd14163f410a7b"
+    "gitHead": "94bdafe2a185876107e107674aff56cb91a42a66"
 }