@chayns-components/emoji-input 5.0.0-beta.94 → 5.0.0-beta.940

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiInput.js","names":["_core","require","_chaynsApi","_framerMotion","_react","_interopRequireWildcard","_emoji","_insert","_selection","_text","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","_PrefixElement","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","useIsomorphicLayoutEffect","window","useLayoutEffect","useEffect","EmojiInput","forwardRef","accessToken","height","inputId","isDisabled","maxHeight","onBlur","onFocus","onInput","onKeyDown","onPrefixElementRemove","onPopupVisibilityChange","personId","placeholder","popupAlignment","prefixElement","rightElement","shouldHidePlaceholderOnFocus","shouldPreventEmojiPicker","value","ref","isTouch","useState","getIsTouch","plainTextValue","setPlainTextValue","hasFocus","setHasFocus","progressDuration","setProgressDuration","labelWidth","setLabelWidth","isPopupVisible","setIsPopupVisible","isPrefixAnimationFinished","setIsPrefixAnimationFinished","prefixElementWidth","setPrefixElementWidth","textLength","setTextLength","areaProvider","useContext","AreaContext","editorRef","useRef","prefixElementRef","hasPrefixRendered","hasPrefixChanged","shouldDeleteOneMoreBackwards","shouldDeleteOneMoreForwards","valueRef","browser","getDevice","shouldChangeColor","useMemo","handleUpdateHTML","useCallback","html","current","newInnerHTML","convertEmojisToUnicode","convertTextToHTML","innerHTML","saveSelection","shouldIgnoreEmptyTextNodes","restoreSelection","handleBeforeInput","event","preventDefault","stopPropagation","data","type","nativeEvent","includes","text","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handleInput","insertInvisibleCursorMarker","document","execCommand","convertHTMLToText","handleKeyDown","key","isPropagationStopped","charCodeThatWillBeDeleted","getCharCodeThatWillBeDeleted","handlePopupVisibility","isVisible","handlePaste","clipboardData","getData","handleDrop","_event$dataTransfer","dataTransfer","handlePopupSelect","emoji","shouldUseSavedSelection","_editorRef$current","convertedText","replace","convertedPrefix","length","handleInsertTextAtCursorPosition","handleReplaceText","searchText","pasteText","replaceText","handleStartProgress","duration","handleStopProgress","useImperativeHandle","startProgress","stopProgress","handlePreventLoseFocus","_element$parentElemen","_element$parentElemen2","element","target","classList","contains","parentElement","body","addEventListener","removeEventListener","shouldShowPlaceholder","_editorRef$current2","isJustPrefixElement","shouldRenderPlaceholder","handleFocus","handleBlur","_editorRef$current3","offsetWidth","undefined","handleResize","resizeObserver","ResizeObserver","observe","disconnect","blurElement","activeElement","blur","createElement","StyledEmojiInput","$isDisabled","$shouldChangeColor","AnimatePresence","initial","StyledMotionEmojiInputProgress","animate","width","exit","opacity","transition","ease","StyledEmojiInputContent","StyledMotionEmojiInputEditor","$browser","name","minHeight","contentEditable","id","onBeforeInput","onPaste","onDrop","$shouldShowContent","StyledEmojiInputLabel","$maxWidth","$offsetWidth","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import { AreaContext, getIsTouch } from '@chayns-components/core';\nimport { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    ClipboardEvent,\n    CSSProperties,\n    FocusEvent,\n    FocusEventHandler,\n    forwardRef,\n    KeyboardEvent as TmpKeyboardEvent,\n    KeyboardEventHandler,\n    ReactElement,\n    ReactNode,\n    useCallback,\n    useContext,\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 { insertTextAtCursorPosition, replaceText } from '../../utils/insert';\nimport {\n    getCharCodeThatWillBeDeleted,\n    insertInvisibleCursorMarker,\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\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;\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     * Element that is rendered before the input field but the placeholder is still visible.\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    insertTextAtCursorPosition: (text: string) => void;\n    replaceText: (searchText: string, replaceText: string) => void;\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 [isTouch] = useState(getIsTouch());\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        const [textLength, setTextLength] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const editorRef = useRef<HTMLDivElement>(null);\n        const prefixElementRef = useRef<HTMLDivElement>(null);\n        const hasPrefixRendered = useRef(false);\n        const hasPrefixChanged = useRef(false);\n        const shouldDeleteOneMoreBackwards = useRef(false);\n        const shouldDeleteOneMoreForwards = useRef(false);\n\n        const valueRef = useRef(value);\n\n        const { browser } = getDevice();\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\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(\n            (event: FormEvent<HTMLDivElement>) => {\n                if (!editorRef.current) {\n                    return;\n                }\n\n                if (isDisabled) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\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            [isDisabled],\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 (isDisabled) {\n                    event.stopPropagation();\n                    event.preventDefault();\n                }\n\n                if (shouldDeleteOneMoreBackwards.current) {\n                    shouldDeleteOneMoreBackwards.current = false;\n                    shouldDeleteOneMoreForwards.current = false;\n\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    // Remove content and set cursor to the right position\n                    insertInvisibleCursorMarker();\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                    // noinspection JSDeprecatedSymbols\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, isDisabled, onInput],\n        );\n\n        const handleKeyDown = useCallback(\n            (event: TmpKeyboardEvent<HTMLDivElement>) => {\n                if (isDisabled) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    return;\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                    // noinspection JSDeprecatedSymbols\n                    document.execCommand('insertLineBreak', false);\n                }\n\n                if (\n                    event.key === 'Backspace' ||\n                    event.key === 'Delete' ||\n                    event.key === 'Unidentified'\n                ) {\n                    const charCodeThatWillBeDeleted = getCharCodeThatWillBeDeleted(event);\n\n                    if (charCodeThatWillBeDeleted === 8203) {\n                        if (event.key === 'Backspace' || event.key === 'Unidentified') {\n                            shouldDeleteOneMoreBackwards.current = true;\n                        } else {\n                            shouldDeleteOneMoreForwards.current = true;\n                        }\n                    }\n                }\n            },\n            [isDisabled, isPopupVisible, onKeyDown],\n        );\n\n        const handlePopupVisibility = useCallback(\n            (isVisible: boolean) => {\n                setIsPopupVisible(isVisible);\n\n                if (editorRef.current && isVisible) {\n                    saveSelection(editorRef.current);\n                }\n\n                if (typeof onPopupVisibilityChange === 'function') {\n                    onPopupVisibilityChange(isVisible);\n                }\n            },\n            [onPopupVisibilityChange],\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 document.execCommand('insertHTML')\n         */\n        const handlePaste = useCallback(\n            (event: ClipboardEvent<HTMLDivElement>) => {\n                if (editorRef.current) {\n                    event.preventDefault();\n\n                    if (isDisabled) {\n                        event.stopPropagation();\n\n                        return;\n                    }\n\n                    let text = event.clipboardData.getData('text/plain');\n\n                    text = convertEmojisToUnicode(text);\n\n                    // This deprecated function is used, because it causes the inserted content to be added to the undo stack.\n                    // If the text were to be inserted directly into the 'innerHTML' of the editor element, the undo stack would not be updated.\n                    // In that case on CTRL+Z the inserted text would not be removed.\n                    document.execCommand('insertHTML', false, text);\n\n                    const newEvent = new Event('input', { bubbles: true });\n\n                    editorRef.current.dispatchEvent(newEvent);\n                }\n            },\n            [isDisabled],\n        );\n\n        /**\n         * This function prevents formatting from being adopted when texts are dropped. 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 document.execCommand('insertHTML')\n         */\n        const handleDrop = useCallback(\n            (event: React.DragEvent<HTMLDivElement>) => {\n                if (editorRef.current) {\n                    event.preventDefault();\n\n                    if (isDisabled) {\n                        event.stopPropagation();\n\n                        return;\n                    }\n\n                    let text = event.dataTransfer?.getData('text');\n\n                    if (!text) {\n                        return;\n                    }\n\n                    text = convertEmojisToUnicode(text);\n\n                    // This deprecated function is used, because it causes the inserted content to be added to the undo stack.\n                    // If the text were to be inserted directly into the 'innerHTML' of the editor element, the undo stack would not be updated.\n                    // In that case on CTRL+Z the inserted text would not be removed.\n                    document.execCommand('insertHTML', false, text);\n\n                    const newEvent = new Event('input', { bubbles: true });\n\n                    editorRef.current.dispatchEvent(newEvent);\n                }\n            },\n            [isDisabled],\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({\n                    editorElement: editorRef.current,\n                    text: emoji,\n                    shouldUseSavedSelection: true,\n                });\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            if (hasPrefixChanged.current) {\n                hasPrefixChanged.current = false;\n\n                return;\n            }\n\n            onPrefixElementRemove();\n            hasPrefixRendered.current = false;\n        }, [onPrefixElementRemove, plainTextValue.length, prefixElement]);\n\n        useEffect(() => {\n            if (typeof prefixElement === 'string') {\n                hasPrefixChanged.current = true;\n            }\n        }, [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        useIsomorphicLayoutEffect(() => {\n            handleUpdateHTML(valueRef.current);\n        }, [handleUpdateHTML]);\n\n        const handleInsertTextAtCursorPosition = useCallback((text: string) => {\n            if (editorRef.current) {\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        const handleReplaceText = useCallback((searchText: string, pasteText: string) => {\n            if (editorRef.current) {\n                replaceText({ editorElement: editorRef.current, searchText, pasteText });\n\n                const newEvent = new Event('input', { bubbles: true });\n\n                editorRef.current.dispatchEvent(newEvent);\n            }\n        }, []);\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                insertTextAtCursorPosition: handleInsertTextAtCursorPosition,\n                replaceText: handleReplaceText,\n                startProgress: handleStartProgress,\n                stopProgress: handleStopProgress,\n            }),\n            [\n                handleInsertTextAtCursorPosition,\n                handleReplaceText,\n                handleStartProgress,\n                handleStopProgress,\n            ],\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 && convertTextToHTML(prefixElement) === 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' && !isDisabled) {\n                onFocus(event);\n            }\n\n            setHasFocus(true);\n        };\n\n        const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n            if (typeof onBlur === 'function' && !isDisabled) {\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                convertTextToHTML(prefixElement) === 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        useEffect(() => {\n            const blurElement = () => {\n                if (\n                    editorRef.current &&\n                    document.activeElement === editorRef.current &&\n                    isDisabled\n                ) {\n                    editorRef.current.blur();\n                }\n            };\n\n            document.addEventListener('focus', blurElement, true);\n\n            return () => {\n                document.removeEventListener('focus', blurElement, true);\n            };\n        }, [isDisabled]);\n\n        return (\n            <StyledEmojiInput $isDisabled={isDisabled} $shouldChangeColor={shouldChangeColor}>\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>\n                    {prefixElement && (\n                        <PrefixElement\n                            key={prefixElement}\n                            element={prefixElement}\n                            prefixElementRef={prefixElementRef}\n                            setIsPrefixAnimationFinished={setIsPrefixAnimationFinished}\n                        />\n                    )}\n                    <StyledMotionEmojiInputEditor\n                        $browser={browser?.name}\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                        onDrop={handleDrop}\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                    {!isTouch && !shouldPreventEmojiPicker && (\n                        <EmojiPickerPopup\n                            accessToken={accessToken}\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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","ignoreList":[]}

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

@@ -0,0 +1,132 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionEmojiInputProgress = exports.StyledMotionEmojiInputEditor = exports.StyledEmojiInputRightWrapper = exports.StyledEmojiInputLabel = exports.StyledEmojiInputContent = exports.StyledEmojiInput = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _font = require("../../utils/font");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledEmojiInput = exports.StyledEmojiInput = _styledComponents.default.div`
+    align-items: center;
+    background-color: ${({
+  theme,
+  $shouldChangeColor
+}) => theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
+    border-radius: 3px;
+    display: flex;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    min-height: 42px;
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    pointer-events: ${({
+  $isDisabled
+}) => $isDisabled ? 'none' : 'initial'};
+    position: relative;
+    transition: opacity 0.3s ease;
+`;
+const StyledMotionEmojiInputProgress = exports.StyledMotionEmojiInputProgress = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    background-color: ${({
+  theme
+}) => theme['402']};
+    height: 100%;
+    position: absolute;
+    z-index: 2;
+    border-radius: 3px;
+`;
+const StyledEmojiInputContent = exports.StyledEmojiInputContent = _styledComponents.default.div`
+    align-items: end;
+    border-radius: 3px;
+    display: flex;
+    flex: 1 1 auto;
+    gap: 10px;
+    padding: 8px 10px;
+    z-index: 3;
+`;
+const StyledMotionEmojiInputEditor = exports.StyledMotionEmojiInputEditor = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    color: ${({
+  theme,
+  $shouldShowContent
+}) => $shouldShowContent ? theme.text : theme['100']};
+    flex: 1 1 auto;
+    font-family: ${_font.getFontFamily};
+    overflow-y: scroll;
+    overflow-x: hidden;
+    word-break: break-word;
+
+    // This fixes a bug where the field is not editable in certain browsers.
+    // This is for example the case on iOS 15 or older.
+    -webkit-user-modify: read-write;
+    -webkit-user-select: text;
+
+    lc_mention,
+    nerIgnore,
+    nerReplace {
+        font-weight: bold;
+
+        span {
+            opacity: 0.5;
+        }
+    }
+
+    // Styles for custom scrollbar
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? (0, _styledComponents.css)`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : (0, _styledComponents.css)`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                  }
+              `}
+`;
+const StyledEmojiInputRightWrapper = exports.StyledEmojiInputRightWrapper = _styledComponents.default.div`
+    align-self: stretch;
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+    flex: 0 0 auto;
+    overflow: hidden;
+`;
+const StyledEmojiInputLabel = exports.StyledEmojiInputLabel = _styledComponents.default.label`
+    color: rgba(${({
+  theme
+}) => theme['text-rgb']}, 0.45);
+    left: ${({
+  $offsetWidth
+}) => $offsetWidth ? `${$offsetWidth + 10}px` : '10px'};
+    top: 12px;
+    align-items: baseline;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 4px;
+    line-height: 1.3;
+    pointer-events: none;
+    position: absolute;
+    user-select: none;
+    white-space: nowrap;
+    max-width: ${({
+  $maxWidth,
+  $offsetWidth
+}) => `${$maxWidth - ($offsetWidth ?? 0)}px`};
+    overflow: hidden;
+`;
+//# sourceMappingURL=EmojiInput.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiInput.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_font","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledEmojiInput","exports","styled","div","theme","$shouldChangeColor","colorMode","$isDisabled","StyledMotionEmojiInputProgress","motion","StyledEmojiInputContent","StyledMotionEmojiInputEditor","$shouldShowContent","text","getFontFamily","$browser","css","StyledEmojiInputRightWrapper","StyledEmojiInputLabel","label","$offsetWidth","$maxWidth"],"sources":["../../../../src/components/emoji-input/EmojiInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { getFontFamily } from '../../utils/font';\n\ntype StyledEmojiInputProps = WithTheme<{ $isDisabled?: boolean; $shouldChangeColor: boolean }>;\n\nexport const StyledEmojiInput = styled.div<StyledEmojiInputProps>`\n    align-items: center;\n    background-color: ${({ theme, $shouldChangeColor }: StyledEmojiInputProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    border-radius: 3px;\n    display: flex;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    min-height: 42px;\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    pointer-events: ${({ $isDisabled }) => ($isDisabled ? 'none' : 'initial')};\n    position: relative;\n    transition: opacity 0.3s ease;\n`;\n\ntype StyledMotionEmojiInputProgressProps = WithTheme<unknown>;\n\nexport const StyledMotionEmojiInputProgress = styled(\n    motion.div,\n)<StyledMotionEmojiInputProgressProps>`\n    background-color: ${({ theme }: StyledMotionEmojiInputProgressProps) => theme['402']};\n    height: 100%;\n    position: absolute;\n    z-index: 2;\n    border-radius: 3px;\n`;\n\nexport const StyledEmojiInputContent = styled.div`\n    align-items: end;\n    border-radius: 3px;\n    display: flex;\n    flex: 1 1 auto;\n    gap: 10px;\n    padding: 8px 10px;\n    z-index: 3;\n`;\n\ntype StyledEmojiInputEditorProps = WithTheme<{\n    $shouldShowContent: boolean;\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledMotionEmojiInputEditor = styled(motion.div)<StyledEmojiInputEditorProps>`\n    color: ${({ theme, $shouldShowContent }: StyledEmojiInputEditorProps) =>\n        $shouldShowContent ? theme.text : theme['100']};\n    flex: 1 1 auto;\n    font-family: ${getFontFamily};\n    overflow-y: scroll;\n    overflow-x: hidden;\n    word-break: break-word;\n\n    // This fixes a bug where the field is not editable in certain browsers.\n    // This is for example the case on iOS 15 or older.\n    -webkit-user-modify: read-write;\n    -webkit-user-select: text;\n\n    lc_mention,\n    nerIgnore,\n    nerReplace {\n        font-weight: bold;\n\n        span {\n            opacity: 0.5;\n        }\n    }\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledEmojiInputEditorProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n\nexport const StyledEmojiInputRightWrapper = styled.div`\n    align-self: stretch;\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    flex: 0 0 auto;\n    overflow: hidden;\n`;\n\ntype StyledEmojiInputLabelProps = WithTheme<{\n    $maxWidth: number;\n    $offsetWidth?: number;\n}>;\n\nexport const StyledEmojiInputLabel = styled.label<StyledEmojiInputLabelProps>`\n    color: rgba(${({ theme }: StyledEmojiInputLabelProps) => theme['text-rgb']}, 0.45);\n    left: ${({ $offsetWidth }) => ($offsetWidth ? `${$offsetWidth + 10}px` : '10px')};\n    top: 12px;\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    white-space: nowrap;\n    max-width: ${({ $maxWidth, $offsetWidth }) => `${$maxWidth - ($offsetWidth ?? 0)}px`};\n    overflow: hidden;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/emoji-input/prefix-element/PrefixElement.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _text = require("../../../utils/text");
+var _PrefixElement = require("./PrefixElement.styles");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const PrefixElement = ({
+  prefixElementRef,
+  element,
+  setIsPrefixAnimationFinished
+}) => {
+  const [shouldShow, setShouldShow] = (0, _react.useState)(true);
+  const [prefixText, setPrefixText] = (0, _react.useState)('');
+  (0, _react.useEffect)(() => {
+    if (prefixElementRef.current) {
+      setPrefixText(prefixElementRef.current.textContent ?? '');
+    }
+  }, [prefixElementRef]);
+  const handleAnimationEnd = (0, _react.useCallback)(index => {
+    if (index === prefixText.length - 1) {
+      setShouldShow(false);
+      setIsPrefixAnimationFinished(true);
+    }
+  }, [prefixText.length, setIsPrefixAnimationFinished]);
+  const content = (0, _react.useMemo)(() => prefixText.split('').map((letter, index) => /*#__PURE__*/_react.default.createElement(_PrefixElement.StyledPrefixElementLetter, {
+    onAnimationEnd: () => handleAnimationEnd(index),
+    $index: index
+  }, letter)), [handleAnimationEnd, prefixText]);
+  return /*#__PURE__*/_react.default.createElement(_PrefixElement.StyledPrefixElement, {
+    $shouldShow: shouldShow
+  }, /*#__PURE__*/_react.default.createElement(_PrefixElement.StyledPrefixElementPseudo, {
+    ref: prefixElementRef,
+    dangerouslySetInnerHTML: {
+      __html: (0, _text.convertTextToHTML)(element)
+    }
+  }), shouldShow && /*#__PURE__*/_react.default.createElement(_PrefixElement.StyledPrefixElementLetterWrapper, null, content));
+};
+PrefixElement.displayName = 'PrefixElement';
+var _default = exports.default = PrefixElement;
+//# sourceMappingURL=PrefixElement.js.map

package/lib/cjs/components/emoji-input/prefix-element/PrefixElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrefixElement.js","names":["_react","_interopRequireWildcard","require","_text","_PrefixElement","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","PrefixElement","prefixElementRef","element","setIsPrefixAnimationFinished","shouldShow","setShouldShow","useState","prefixText","setPrefixText","useEffect","current","textContent","handleAnimationEnd","useCallback","index","length","content","useMemo","split","map","letter","createElement","StyledPrefixElementLetter","onAnimationEnd","$index","StyledPrefixElement","$shouldShow","StyledPrefixElementPseudo","ref","dangerouslySetInnerHTML","__html","convertTextToHTML","StyledPrefixElementLetterWrapper","displayName","_default","exports"],"sources":["../../../../../src/components/emoji-input/prefix-element/PrefixElement.tsx"],"sourcesContent":["import React, {\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n    type Dispatch,\n    type FC,\n    type RefObject,\n    type SetStateAction,\n} from 'react';\nimport { convertTextToHTML } from '../../../utils/text';\nimport {\n    StyledPrefixElement,\n    StyledPrefixElementLetter,\n    StyledPrefixElementLetterWrapper,\n    StyledPrefixElementPseudo,\n} from './PrefixElement.styles';\n\nexport type PrefixElementProps = {\n    prefixElementRef: RefObject<HTMLDivElement>;\n    element: string;\n    setIsPrefixAnimationFinished: Dispatch<SetStateAction<boolean>>;\n};\n\nconst PrefixElement: FC<PrefixElementProps> = ({\n    prefixElementRef,\n    element,\n    setIsPrefixAnimationFinished,\n}) => {\n    const [shouldShow, setShouldShow] = useState(true);\n    const [prefixText, setPrefixText] = useState('');\n\n    useEffect(() => {\n        if (prefixElementRef.current) {\n            setPrefixText(prefixElementRef.current.textContent ?? '');\n        }\n    }, [prefixElementRef]);\n\n    const handleAnimationEnd = useCallback(\n        (index: number) => {\n            if (index === prefixText.length - 1) {\n                setShouldShow(false);\n                setIsPrefixAnimationFinished(true);\n            }\n        },\n        [prefixText.length, setIsPrefixAnimationFinished],\n    );\n\n    const content = useMemo(\n        () =>\n            prefixText.split('').map((letter, index) => (\n                <StyledPrefixElementLetter\n                    onAnimationEnd={() => handleAnimationEnd(index)}\n                    $index={index}\n                >\n                    {letter}\n                </StyledPrefixElementLetter>\n            )),\n        [handleAnimationEnd, prefixText],\n    );\n\n    return (\n        <StyledPrefixElement $shouldShow={shouldShow}>\n            <StyledPrefixElementPseudo\n                ref={prefixElementRef}\n                dangerouslySetInnerHTML={{ __html: convertTextToHTML(element) }}\n            />\n            {shouldShow && (\n                <StyledPrefixElementLetterWrapper>{content}</StyledPrefixElementLetterWrapper>\n            )}\n        </StyledPrefixElement>\n    );\n};\n\nPrefixElement.displayName = 'PrefixElement';\n\nexport default PrefixElement;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAUA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AAKgC,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,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQhC,MAAMW,aAAqC,GAAGA,CAAC;EAC3CC,gBAAgB;EAChBC,OAAO;EACPC;AACJ,CAAC,KAAK;EACF,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAC,IAAI,CAAC;EAClD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAF,eAAQ,EAAC,EAAE,CAAC;EAEhD,IAAAG,gBAAS,EAAC,MAAM;IACZ,IAAIR,gBAAgB,CAACS,OAAO,EAAE;MAC1BF,aAAa,CAACP,gBAAgB,CAACS,OAAO,CAACC,WAAW,IAAI,EAAE,CAAC;IAC7D;EACJ,CAAC,EAAE,CAACV,gBAAgB,CAAC,CAAC;EAEtB,MAAMW,kBAAkB,GAAG,IAAAC,kBAAW,EACjCC,KAAa,IAAK;IACf,IAAIA,KAAK,KAAKP,UAAU,CAACQ,MAAM,GAAG,CAAC,EAAE;MACjCV,aAAa,CAAC,KAAK,CAAC;MACpBF,4BAA4B,CAAC,IAAI,CAAC;IACtC;EACJ,CAAC,EACD,CAACI,UAAU,CAACQ,MAAM,EAAEZ,4BAA4B,CACpD,CAAC;EAED,MAAMa,OAAO,GAAG,IAAAC,cAAO,EACnB,MACIV,UAAU,CAACW,KAAK,CAAC,EAAE,CAAC,CAACC,GAAG,CAAC,CAACC,MAAM,EAAEN,KAAK,kBACnCvC,MAAA,CAAAW,OAAA,CAAAmC,aAAA,CAAC1C,cAAA,CAAA2C,yBAAyB;IACtBC,cAAc,EAAEA,CAAA,KAAMX,kBAAkB,CAACE,KAAK,CAAE;IAChDU,MAAM,EAAEV;EAAM,GAEbM,MACsB,CAC9B,CAAC,EACN,CAACR,kBAAkB,EAAEL,UAAU,CACnC,CAAC;EAED,oBACIhC,MAAA,CAAAW,OAAA,CAAAmC,aAAA,CAAC1C,cAAA,CAAA8C,mBAAmB;IAACC,WAAW,EAAEtB;EAAW,gBACzC7B,MAAA,CAAAW,OAAA,CAAAmC,aAAA,CAAC1C,cAAA,CAAAgD,yBAAyB;IACtBC,GAAG,EAAE3B,gBAAiB;IACtB4B,uBAAuB,EAAE;MAAEC,MAAM,EAAE,IAAAC,uBAAiB,EAAC7B,OAAO;IAAE;EAAE,CACnE,CAAC,EACDE,UAAU,iBACP7B,MAAA,CAAAW,OAAA,CAAAmC,aAAA,CAAC1C,cAAA,CAAAqD,gCAAgC,QAAEhB,OAA0C,CAEhE,CAAC;AAE9B,CAAC;AAEDhB,aAAa,CAACiC,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAjD,OAAA,GAE7Bc,aAAa","ignoreList":[]}

package/lib/cjs/components/emoji-input/prefix-element/PrefixElement.styles.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledPrefixElementPseudo = exports.StyledPrefixElementLetterWrapper = exports.StyledPrefixElementLetter = exports.StyledPrefixElement = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledPrefixElement = exports.StyledPrefixElement = _styledComponents.default.div`
+    position: absolute;
+`;
+const StyledPrefixElementPseudo = exports.StyledPrefixElementPseudo = _styledComponents.default.div`
+    visibility: hidden;
+`;
+const StyledPrefixElementLetterWrapper = exports.StyledPrefixElementLetterWrapper = _styledComponents.default.div`
+    transform: translateY(-2px);
+`;
+const waviy = (0, _styledComponents.keyframes)`
+    0%, 40% {
+        background: linear-gradient(to right, rgb(15, 109, 126), rgb(15, 109, 126), rgb(115, 190, 204), rgb(15, 109, 126));
+        background-clip: text;
+        transform: translateY(0) scale(1);
+        opacity: 1;
+    }
+    20% {
+        transform: translateY(-2px) scale(1.2);
+        opacity: 1;
+    }
+    100% {
+        -webkit-text-fill-color: ${({
+  theme
+}) => theme.text};
+        transform: translateY(0) scale(1);
+        opacity: 1;
+    }
+`;
+const backgroundPan = (0, _styledComponents.keyframes)`
+    0% {
+        background-position: 0 center;
+    }
+    100% {
+        background-position: -200% center;
+    }
+`;
+const StyledPrefixElementLetter = exports.StyledPrefixElementLetter = _styledComponents.default.span`
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-color: ${({
+  theme
+}) => theme.text};
+    opacity: 0;
+
+    animation:
+        ${waviy} 0.4s forwards,
+        ${backgroundPan} 0.1s linear infinite;
+    animation-delay: calc(0.03s * ${({
+  $index
+}) => $index});
+
+    font-weight: ${({
+  $index
+}) => $index > 0 ? 'bold' : 'normal'};
+`;
+//# sourceMappingURL=PrefixElement.styles.js.map

package/lib/cjs/components/emoji-input/prefix-element/PrefixElement.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrefixElement.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledPrefixElement","exports","styled","div","StyledPrefixElementPseudo","StyledPrefixElementLetterWrapper","waviy","keyframes","theme","text","backgroundPan","StyledPrefixElementLetter","span","$index"],"sources":["../../../../../src/components/emoji-input/prefix-element/PrefixElement.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { keyframes } from 'styled-components';\n\ntype StyledPrefixElementProps = WithTheme<{\n    $shouldShow: boolean;\n}>;\n\nexport const StyledPrefixElement = styled.div<StyledPrefixElementProps>`\n    position: absolute;\n`;\n\nexport const StyledPrefixElementPseudo = styled.div`\n    visibility: hidden;\n`;\n\nexport const StyledPrefixElementLetterWrapper = styled.div`\n    transform: translateY(-2px);\n`;\n\ntype StyledPrefixElementLetterProps = WithTheme<{\n    $index: number;\n}>;\n\nconst waviy = keyframes`\n    0%, 40% {\n        background: linear-gradient(to right, rgb(15, 109, 126), rgb(15, 109, 126), rgb(115, 190, 204), rgb(15, 109, 126));\n        background-clip: text;\n        transform: translateY(0) scale(1);\n        opacity: 1;\n    }\n    20% {\n        transform: translateY(-2px) scale(1.2);\n        opacity: 1;\n    }\n    100% {\n        -webkit-text-fill-color: ${({ theme }: WithTheme<unknown>) => theme.text};\n        transform: translateY(0) scale(1);\n        opacity: 1;\n    }\n`;\n\nconst backgroundPan = keyframes`\n    0% {\n        background-position: 0 center;\n    }\n    100% {\n        background-position: -200% center;\n    }\n`;\n\nexport const StyledPrefixElementLetter = styled.span<StyledPrefixElementLetterProps>`\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-color: ${({ theme }: StyledPrefixElementLetterProps) => theme.text};\n    opacity: 0;\n\n    animation:\n        ${waviy} 0.4s forwards,\n        ${backgroundPan} 0.1s linear infinite;\n    animation-delay: calc(0.03s * ${({ $index }) => $index});\n\n    font-weight: ${({ $index }) => ($index > 0 ? 'bold' : 'normal')};\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAsD,SAAAC,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,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAM/C,MAAMW,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA6B;AACvE;AACA,CAAC;AAEM,MAAMC,yBAAyB,GAAAH,OAAA,CAAAG,yBAAA,GAAGF,yBAAM,CAACC,GAAG;AACnD;AACA,CAAC;AAEM,MAAME,gCAAgC,GAAAJ,OAAA,CAAAI,gCAAA,GAAGH,yBAAM,CAACC,GAAG;AAC1D;AACA,CAAC;AAMD,MAAMG,KAAK,GAAG,IAAAC,2BAAS;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mCAAmC,CAAC;EAAEC;AAA0B,CAAC,KAAKA,KAAK,CAACC,IAAI;AAChF;AACA;AACA;AACA,CAAC;AAED,MAAMC,aAAa,GAAG,IAAAH,2BAAS;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMI,yBAAyB,GAAAV,OAAA,CAAAU,yBAAA,GAAGT,yBAAM,CAACU,IAAoC;AACpF;AACA;AACA,wBAAwB,CAAC;EAAEJ;AAAsC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACjF;AACA;AACA;AACA,UAAUH,KAAK;AACf,UAAUI,aAAa;AACvB,oCAAoC,CAAC;EAAEG;AAAO,CAAC,KAAKA,MAAM;AAC1D;AACA,mBAAmB,CAAC;EAAEA;AAAO,CAAC,KAAMA,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,QAAS;AACnE,CAAC","ignoreList":[]}

package/lib/{components → cjs/components}/emoji-picker/EmojiPicker.js

@@ -10,16 +10,15 @@ var _dataByGroup = _interopRequireDefault(require("unicode-emoji-json/data-by-gr
 var _EmojiPickerCategories = _interopRequireDefault(require("./emoji-picker-categories/EmojiPickerCategories"));
 var _EmojiPickerEmojis = _interopRequireDefault(require("./emoji-picker-emojis/EmojiPickerEmojis"));
 var _EmojiPicker = require("./EmojiPicker.styles");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const EmojiPicker = _ref => {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const EmojiPicker = ({
+  accessToken,
+  onSelect,
+  personId
+}) => {
   var _emojiCategories$;
-  let {
-    accessToken,
-    onSelect,
-    personId
-  } = _ref;
   const [searchString, setSearchString] = (0, _react.useState)('');
   const [selectedCategory, setSelectedCategory] = (0, _react.useState)((_emojiCategories$ = _dataByGroup.default[0]) === null || _emojiCategories$ === void 0 ? void 0 : _emojiCategories$.slug);
   const handleCategorySelect = (0, _react.useCallback)(category => {
@@ -46,6 +45,5 @@ const EmojiPicker = _ref => {
   }));
 };
 EmojiPicker.displayName = 'EmojiPicker';
-var _default = EmojiPicker;
-exports.default = _default;
+var _default = exports.default = EmojiPicker;
 //# sourceMappingURL=EmojiPicker.js.map

package/lib/cjs/components/emoji-picker/EmojiPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.js","names":["_core","require","_react","_interopRequireWildcard","_dataByGroup","_interopRequireDefault","_EmojiPickerCategories","_EmojiPickerEmojis","_EmojiPicker","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","EmojiPicker","accessToken","onSelect","personId","_emojiCategories$","searchString","setSearchString","useState","selectedCategory","setSelectedCategory","emojiCategories","slug","handleCategorySelect","useCallback","category","handleSearchChange","event","target","value","createElement","StyledEmojiPicker","Input","onChange","placeholder","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker/EmojiPicker.tsx"],"sourcesContent":["import { Input } from '@chayns-components/core';\nimport React, { ChangeEvent, FC, useCallback, useState } from 'react';\nimport emojiCategories from 'unicode-emoji-json/data-by-group.json';\nimport type { Category } from '../../types/category';\nimport EmojiPickerCategories from './emoji-picker-categories/EmojiPickerCategories';\nimport EmojiPickerEmojis from './emoji-picker-emojis/EmojiPickerEmojis';\nimport { StyledEmojiPicker } from './EmojiPicker.styles';\n\nexport type EmojiPickerProps = {\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     * Function executed when an emoji is selected in the popup\n     * @param {string} emoji - Emoji that was selected\n     */\n    onSelect: (emoji: string) => void;\n    /**\n     * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    personId?: string;\n};\nconst EmojiPicker: FC<EmojiPickerProps> = ({ accessToken, onSelect, personId }) => {\n    const [searchString, setSearchString] = useState('');\n    const [selectedCategory, setSelectedCategory] = useState(emojiCategories[0]?.slug as Category);\n\n    const handleCategorySelect = useCallback((category: Category) => {\n        setSearchString('');\n        setSelectedCategory(category);\n    }, []);\n\n    const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n        setSearchString(event.target.value);\n    }, []);\n\n    return (\n        <StyledEmojiPicker>\n            <Input onChange={handleSearchChange} placeholder=\"Suchen\" value={searchString} />\n            <EmojiPickerEmojis\n                accessToken={accessToken}\n                onSelect={onSelect}\n                personId={personId}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n            <EmojiPickerCategories\n                onSelect={handleCategorySelect}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n        </StyledEmojiPicker>\n    );\n};\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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","ignoreList":[]}

package/lib/{components → cjs/components}/emoji-picker/EmojiPicker.styles.js

@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.emojiPickerSize = exports.StyledEmojiPicker = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const emojiPickerSize = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const emojiPickerSize = exports.emojiPickerSize = {
   height: 285,
   width: 350
 };
-exports.emojiPickerSize = emojiPickerSize;
-const StyledEmojiPicker = _styledComponents.default.div`
+const StyledEmojiPicker = exports.StyledEmojiPicker = _styledComponents.default.div`
     align-items: center;
     display: flex;
     flex-direction: column;
@@ -21,5 +20,4 @@ const StyledEmojiPicker = _styledComponents.default.div`
     width: ${emojiPickerSize.width}px;
     user-select: none;
 `;
-exports.StyledEmojiPicker = StyledEmojiPicker;
 //# sourceMappingURL=EmojiPicker.styles.js.map

package/lib/cjs/components/emoji-picker/EmojiPicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","emojiPickerSize","exports","height","width","StyledEmojiPicker","styled","div"],"sources":["../../../../src/components/emoji-picker/EmojiPicker.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const emojiPickerSize = {\n    height: 285,\n    width: 350,\n};\n\nexport const StyledEmojiPicker = styled.div`\n    align-items: center;\n    display: flex;\n    flex-direction: column;\n    height: ${emojiPickerSize.height}px;\n    justify-content: center;\n    padding: 10px 22px;\n    width: ${emojiPickerSize.width}px;\n    user-select: none;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG;EAC3BE,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE;AACX,CAAC;AAEM,MAAMC,iBAAiB,GAAAH,OAAA,CAAAG,iBAAA,GAAGC,yBAAM,CAACC,GAAG;AAC3C;AACA;AACA;AACA,cAAcN,eAAe,CAACE,MAAM;AACpC;AACA;AACA,aAAaF,eAAe,CAACG,KAAK;AAClC;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dataByGroup = _interopRequireDefault(require("unicode-emoji-json/data-by-group.json"));
+var _categories = require("../../../constants/categories");
+var _EmojiPickerCategories = require("./EmojiPickerCategories.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const EmojiPickerCategories = ({
+  onSelect,
+  searchString,
+  selectedCategory
+}) => {
+  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.key === 'Tab' && event.shiftKey) {
+        var _categoryRef$current;
+        event.preventDefault();
+        const children = (_categoryRef$current = categoryRef.current) === null || _categoryRef$current === void 0 ? void 0 : _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(({
+      slug
+    }) => slug);
+    categorySlugs.unshift('history');
+    return categorySlugs.map(slug => {
+      const isSelected = selectedCategory === slug && !isSearchStringGiven;
+      return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledMotionEmojiPickerCategory, {
+        animate: {
+          filter: `grayscale(${isSelected ? 0 : 0.75})`,
+          opacity: isSelected ? 1 : 0.5
+        },
+        className: "prevent-lose-focus",
+        initial: false,
+        key: slug,
+        id: slug,
+        onClick: () => handleClick(slug),
+        transition: {
+          duration: 0.2
+        }
+      }, _categories.CATEGORY_EMOJIS[slug]);
+    });
+  }, [handleClick, isSearchStringGiven, selectedCategory]);
+  return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledEmojiPickerCategories, {
+    ref: categoryRef
+  }, categories);
+};
+EmojiPickerCategories.displayName = 'EmojiPickerCategories';
+var _default = exports.default = EmojiPickerCategories;
+//# sourceMappingURL=EmojiPickerCategories.js.map

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

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