@chayns-components/emoji-input 5.0.0-beta.387 → 5.0.0-beta.389

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

@@ -13,6 +13,7 @@ var _selection = require("../../utils/selection");
 var _text = require("../../utils/text");
 var _EmojiPickerPopup = _interopRequireDefault(require("../emoji-picker-popup/EmojiPickerPopup"));
 var _EmojiInput = require("./EmojiInput.styles");
+var _PrefixElement = _interopRequireDefault(require("./prefix-element/PrefixElement"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.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; }
@@ -43,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 [isPrefixAnimationFinished, setIsPrefixAnimationFinished] = (0, _react.useState)(!prefixElement);
   const [prefixElementWidth, setPrefixElementWidth] = (0, _react.useState)();
   const editorRef = (0, _react.useRef)(null);
   const prefixElementRef = (0, _react.useRef)(null);
@@ -253,6 +255,9 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     };
   }, []);
   const shouldShowPlaceholder = (0, _react.useMemo)(() => {
+    if (!isPrefixAnimationFinished) {
+      return false;
+    }
     const isJustPrefixElement = prefixElement && prefixElement === (0, _text.convertHTMLToText)(editorRef.current?.innerHTML ?? '');
     const shouldRenderPlaceholder = prefixElement && !plainTextValue || (prefixElement ? prefixElementWidth && prefixElementWidth > 0 : true);
     switch (true) {
@@ -264,7 +269,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       default:
         return false;
     }
-  }, [hasFocus, plainTextValue, prefixElement, shouldHidePlaceholderOnFocus, prefixElementWidth]);
+  }, [isPrefixAnimationFinished, hasFocus, plainTextValue, prefixElement, shouldHidePlaceholderOnFocus, prefixElementWidth]);
   const handleFocus = event => {
     if (typeof onFocus === 'function') {
       onFocus(event);
@@ -336,11 +341,10 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     }
   })), /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputContent, {
     isRightElementGiven: !!rightElement
-  }, prefixElement && /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputPrefixElement, {
-    ref: prefixElementRef,
-    dangerouslySetInnerHTML: {
-      __html: (0, _text.convertTextToHTML)(prefixElement)
-    }
+  }, prefixElement && /*#__PURE__*/_react.default.createElement(_PrefixElement.default, {
+    element: prefixElement,
+    prefixElementRef: prefixElementRef,
+    setIsPrefixAnimationFinished: setIsPrefixAnimationFinished
   }), /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledMotionEmojiInputEditor, {
     animate: {
       maxHeight: height ?? maxHeight,
@@ -355,6 +359,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onKeyDown: handleKeyDown,
     onPaste: handlePaste,
     ref: editorRef,
+    shouldShowContent: isPrefixAnimationFinished,
     transition: {
       type: 'tween',
       duration: 0.2

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","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","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","StyledEmojiInputPrefixElement","dangerouslySetInnerHTML","__html","StyledMotionEmojiInputEditor","minHeight","contentEditable","id","onBeforeInput","onPaste","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    StyledEmojiInputPrefixElement,\n    StyledEmojiInputRightWrapper,\n    StyledMotionEmojiInputEditor,\n    StyledMotionEmojiInputProgress,\n} from './EmojiInput.styles';\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 [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            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            hasFocus,\n            plainTextValue,\n            prefixElement,\n            shouldHidePlaceholderOnFocus,\n            prefixElementWidth,\n        ]);\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                        <StyledEmojiInputPrefixElement\n                            ref={prefixElementRef}\n                            dangerouslySetInnerHTML={{ __html: convertTextToHTML(prefixElement) }}\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                        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","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        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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"}

package/lib/components/emoji-input/EmojiInput.styles.d.ts

@@ -273,6 +273,9 @@ type StyledEmojiInputContentProps = {
     isRightElementGiven: boolean;
 };
 export declare const StyledEmojiInputContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledEmojiInputContentProps>>;
+type StyledEmojiInputEditorProps = WithTheme<{
+    shouldShowContent: boolean;
+}>;
 export declare const StyledMotionEmojiInputEditor: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
     slot?: string | undefined;
     title?: string | undefined;
@@ -535,11 +538,8 @@ export declare const StyledMotionEmojiInputEditor: import("styled-components").I
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
-} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, {
-    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
-}>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+} & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, StyledEmojiInputEditorProps>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledEmojiInputRightWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-export declare const StyledEmojiInputPrefixElement: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 type StyledEmojiInputLabelProps = WithTheme<{
     maxWidth: number;
     offsetWidth?: number;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMotionEmojiInputProgress = exports.StyledMotionEmojiInputEditor = exports.StyledEmojiInputRightWrapper = exports.StyledEmojiInputPrefixElement = exports.StyledEmojiInputLabel = exports.StyledEmojiInputContent = exports.StyledEmojiInput = void 0;
+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");
@@ -72,9 +72,10 @@ const StyledEmojiInputContent = exports.StyledEmojiInputContent = _styledCompone
 const StyledMotionEmojiInputEditor = exports.StyledMotionEmojiInputEditor = (0, _styledComponents.default)(_framerMotion.motion.div)`
     color: ${_ref6 => {
   let {
-    theme
+    theme,
+    shouldShowContent
   } = _ref6;
-  return theme.text;
+  return shouldShowContent ? theme.text : theme['100'];
 }};
     flex: 1 1 auto;
     font-family: ${_font.getFontFamily};
@@ -146,10 +147,6 @@ const StyledEmojiInputRightWrapper = exports.StyledEmojiInputRightWrapper = _sty
     flex: 0 0 auto;
     overflow: hidden;
 `;
-const StyledEmojiInputPrefixElement = exports.StyledEmojiInputPrefixElement = _styledComponents.default.div`
-    visibility: hidden;
-    position: absolute;
-`;
 const StyledEmojiInputLabel = exports.StyledEmojiInputLabel = _styledComponents.default.label`
     color: rgba(${_ref9 => {
   let {

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

@@ -1 +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","prototype","hasOwnProperty","call","i","set","StyledEmojiInput","exports","styled","div","_ref","theme","_ref2","isDisabled","_ref3","StyledMotionEmojiInputProgress","motion","_ref4","StyledEmojiInputContent","_ref5","isRightElementGiven","css","StyledMotionEmojiInputEditor","_ref6","text","getFontFamily","_ref7","_ref8","StyledEmojiInputRightWrapper","StyledEmojiInputPrefixElement","StyledEmojiInputLabel","label","_ref9","_ref10","offsetWidth","_ref11","maxWidth"],"sources":["../../../src/components/emoji-input/EmojiInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { getFontFamily } from '../../utils/font';\nimport type { EmojiInputProps } from './EmojiInput';\n\ntype StyledEmojiInputProps = WithTheme<Pick<EmojiInputProps, 'isDisabled'>>;\n\nexport const StyledEmojiInput = styled.div<StyledEmojiInputProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledEmojiInputProps) => theme['100']};\n    border-radius: 3px;\n    display: flex;\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\ntype StyledEmojiInputContentProps = {\n    isRightElementGiven: boolean;\n};\n\nexport const StyledEmojiInputContent = styled.div<StyledEmojiInputContentProps>`\n    align-items: end;\n    border: 1px solid rgba(160, 160, 160, 0.3);\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    ${({ isRightElementGiven }) =>\n        isRightElementGiven &&\n        css`\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right-width: 0;\n            padding-right: 0;\n        `}\n`;\n\ntype StyledEmojiInputEditorProps = WithTheme<unknown>;\n\nexport const StyledMotionEmojiInputEditor = styled(motion.div)<StyledEmojiInputEditorProps>`\n    color: ${({ theme }: StyledEmojiInputEditorProps) => theme.text};\n    flex: 1 1 auto;\n    font-family: ${getFontFamily};\n    overflow-y: scroll;\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    &::-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(\n            ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n            0.15\n        );\n        border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n        scrollbar-color: rgba(\n                ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\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\nexport const StyledEmojiInputPrefixElement = styled.div`\n    visibility: hidden;\n    position: absolute;\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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"}
+{"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","prototype","hasOwnProperty","call","i","set","StyledEmojiInput","exports","styled","div","_ref","theme","_ref2","isDisabled","_ref3","StyledMotionEmojiInputProgress","motion","_ref4","StyledEmojiInputContent","_ref5","isRightElementGiven","css","StyledMotionEmojiInputEditor","_ref6","shouldShowContent","text","getFontFamily","_ref7","_ref8","StyledEmojiInputRightWrapper","StyledEmojiInputLabel","label","_ref9","_ref10","offsetWidth","_ref11","maxWidth"],"sources":["../../../src/components/emoji-input/EmojiInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { getFontFamily } from '../../utils/font';\nimport type { EmojiInputProps } from './EmojiInput';\n\ntype StyledEmojiInputProps = WithTheme<Pick<EmojiInputProps, 'isDisabled'>>;\n\nexport const StyledEmojiInput = styled.div<StyledEmojiInputProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledEmojiInputProps) => theme['100']};\n    border-radius: 3px;\n    display: flex;\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\ntype StyledEmojiInputContentProps = {\n    isRightElementGiven: boolean;\n};\n\nexport const StyledEmojiInputContent = styled.div<StyledEmojiInputContentProps>`\n    align-items: end;\n    border: 1px solid rgba(160, 160, 160, 0.3);\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    ${({ isRightElementGiven }) =>\n        isRightElementGiven &&\n        css`\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right-width: 0;\n            padding-right: 0;\n        `}\n`;\n\ntype StyledEmojiInputEditorProps = WithTheme<{\n    shouldShowContent: boolean;\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    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    &::-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(\n            ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n            0.15\n        );\n        border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n        scrollbar-color: rgba(\n                ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\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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"}

package/lib/components/emoji-input/prefix-element/PrefixElement.d.ts

@@ -0,0 +1,8 @@
+import { type Dispatch, type FC, type RefObject, type SetStateAction } from 'react';
+export type PrefixElementProps = {
+    prefixElementRef: RefObject<HTMLDivElement>;
+    element: string;
+    setIsPrefixAnimationFinished: Dispatch<SetStateAction<boolean>>;
+};
+declare const PrefixElement: FC<PrefixElementProps>;
+export default PrefixElement;

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

@@ -0,0 +1,46 @@
+"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 && Object.prototype.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 = _ref => {
+  let {
+    prefixElementRef,
+    element,
+    setIsPrefixAnimationFinished
+  } = _ref;
+  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/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","prototype","hasOwnProperty","call","i","set","PrefixElement","_ref","prefixElementRef","element","setIsPrefixAnimationFinished","shouldShow","setShouldShow","useState","prefixText","setPrefixText","useEffect","current","textContent","handleAnimationEnd","useCallback","index","length","content","useMemo","split","map","letter","createElement","StyledPrefixElementLetter","onAnimationEnd","StyledPrefixElement","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":"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"}

package/lib/components/emoji-input/prefix-element/PrefixElement.styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { WithTheme } from '@chayns-components/core';
+type StyledPrefixElementProps = WithTheme<{
+    shouldShow: boolean;
+}>;
+export declare const StyledPrefixElement: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledPrefixElementProps>>;
+export declare const StyledPrefixElementPseudo: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledPrefixElementLetterWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+type StyledPrefixElementLetterProps = WithTheme<{
+    index: number;
+}>;
+export declare const StyledPrefixElementLetter: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledPrefixElementLetterProps>>;
+export {};

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

@@ -0,0 +1,80 @@
+"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 && Object.prototype.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;
+    position: absolute;
+`;
+const StyledPrefixElementLetterWrapper = exports.StyledPrefixElementLetterWrapper = _styledComponents.default.div`
+    position: absolute;
+    top: -26px;
+    display: flex;
+`;
+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: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return 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: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.text;
+}};
+    opacity: 0;
+
+    animation:
+        ${waviy} 0.4s forwards,
+        ${backgroundPan} 0.1s linear infinite;
+    animation-delay: calc(0.03s * ${_ref3 => {
+  let {
+    index
+  } = _ref3;
+  return index;
+}});
+
+    font-weight: ${_ref4 => {
+  let {
+    index
+  } = _ref4;
+  return index > 0 ? 'bold' : 'normal';
+}};
+`;
+//# sourceMappingURL=PrefixElement.styles.js.map

package/lib/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","prototype","hasOwnProperty","call","i","set","StyledPrefixElement","exports","styled","div","StyledPrefixElementPseudo","StyledPrefixElementLetterWrapper","waviy","keyframes","_ref","theme","text","backgroundPan","StyledPrefixElementLetter","span","_ref2","_ref3","index","_ref4"],"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    position: absolute;\n`;\n\nexport const StyledPrefixElementLetterWrapper = styled.div`\n    position: absolute;\n    top: -26px;\n    display: flex;\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,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;AAM/C,MAAMY,mBAAmB,GAAAC,OAAA,CAAAD,mBAAA,GAAGE,yBAAM,CAACC,GAA8B;AACxE;AACA,CAAC;AAEM,MAAMC,yBAAyB,GAAAH,OAAA,CAAAG,yBAAA,GAAGF,yBAAM,CAACC,GAAI;AACpD;AACA;AACA,CAAC;AAEM,MAAME,gCAAgC,GAAAJ,OAAA,CAAAI,gCAAA,GAAGH,yBAAM,CAACC,GAAI;AAC3D;AACA;AACA;AACA,CAAC;AAMD,MAAMG,KAAK,GAAG,IAAAC,2BAAS,CAAC;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mCAAmCC,IAAA;EAAA,IAAC;IAAEC;EAA0B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AACjF;AACA;AACA;AACA,CAAC;AAED,MAAMC,aAAa,GAAG,IAAAJ,2BAAS,CAAC;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMK,yBAAyB,GAAAX,OAAA,CAAAW,yBAAA,GAAGV,yBAAM,CAACW,IAAqC;AACrF;AACA;AACA,wBAAwBC,KAAA;EAAA,IAAC;IAAEL;EAAsC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAACC,IAAI;AAAA,CAAC;AAClF;AACA;AACA;AACA,UAAUJ,KAAM;AAChB,UAAUK,aAAc;AACxB,oCAAoCI,KAAA;EAAA,IAAC;IAAEC;EAAM,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK;AAAA,CAAC;AACzD;AACA,mBAAmBC,KAAA;EAAA,IAAC;IAAED;EAAM,CAAC,GAAAC,KAAA;EAAA,OAAMD,KAAK,GAAG,CAAC,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAClE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.0.0-beta.387",
+    "version": "5.0.0-beta.389",
     "description": "Input field that supports HTML elements and emojis",
     "keywords": [
         "chayns",
@@ -69,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "acc3ca2a2de68bbaa56f8d4b8a2732d9ed2c3736"
+    "gitHead": "1882327b8073accb3f869b160eed0848104ef3a2"
 }