@chayns-components/emoji-input 5.0.0-beta.422 → 5.0.0-beta.424

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _framerMotion = require("framer-motion");
 var _react = _interopRequireWildcard(require("react"));
+var _chaynsApi = require("chayns-api");
 var _emoji = require("../../utils/emoji");
 var _environment = require("../../utils/environment");
 var _insert = require("../../utils/insert");
@@ -53,6 +54,9 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const shouldDeleteOneMoreBackwards = (0, _react.useRef)(false);
   const shouldDeleteOneMoreForwards = (0, _react.useRef)(false);
   const valueRef = (0, _react.useRef)(value);
+  const {
+    browser
+  } = (0, _chaynsApi.getDevice)();
 
   /**
    * This function updates the content of the 'contentEditable' element if the new text is
@@ -362,6 +366,7 @@ const EmojiInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     prefixElementRef: prefixElementRef,
     setIsPrefixAnimationFinished: setIsPrefixAnimationFinished
   }), /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledMotionEmojiInputEditor, {
+    browser: browser?.name,
     animate: {
       maxHeight: height ?? maxHeight,
       minHeight: height ?? '26px'

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

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

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

@@ -2,6 +2,7 @@
 /// <reference types="react" />
 import type { WithTheme } from '@chayns-components/core';
 import type { EmojiInputProps } from './EmojiInput';
+import type { Browser } from 'detect-browser';
 type StyledEmojiInputProps = WithTheme<Pick<EmojiInputProps, 'isDisabled'>>;
 export declare const StyledEmojiInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledEmojiInputProps>>;
 export declare const StyledMotionEmojiInputProgress: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
@@ -275,6 +276,7 @@ type StyledEmojiInputContentProps = {
 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;
+    browser: Browser | 'bot' | null | undefined;
 }>;
 export declare const StyledMotionEmojiInputEditor: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
     slot?: string | undefined;

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

@@ -98,47 +98,34 @@ const StyledMotionEmojiInputEditor = exports.StyledMotionEmojiInputEditor = (0,
     }
 
     // Styles for custom scrollbar
-    &::-webkit-scrollbar {
-        width: 5px !important;
-    }
-
-    &::-webkit-scrollbar-track {
-        background-color: transparent !important;
-    }
-
-    &::-webkit-scrollbar-button {
-        background-color: transparent !important;
-        height: 5px !important;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background-color: rgba(
-            ${_ref7 => {
+    ${_ref7 => {
   let {
+    browser,
     theme
   } = _ref7;
-  return theme['text-rgb'];
-}},
-            0.15
-        ) !important;
-        border-radius: 20px !important;
-    }
+  return browser === 'firefox' ? (0, _styledComponents.css)`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : (0, _styledComponents.css)`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
 
-    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are
-    // only supported in Firefox:
-    * {
-        scrollbar-color: rgba(
-                ${_ref8 => {
-  let {
-    theme
-  } = _ref8;
-  return theme['text-rgb'];
-}},
-                0.15
-            )
-            transparent;
-        scrollbar-width: thin;
-    }
+                  &::-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;
@@ -148,16 +135,16 @@ const StyledEmojiInputRightWrapper = exports.StyledEmojiInputRightWrapper = _sty
     overflow: hidden;
 `;
 const StyledEmojiInputLabel = exports.StyledEmojiInputLabel = _styledComponents.default.label`
-    color: rgba(${_ref9 => {
+    color: rgba(${_ref8 => {
   let {
     theme
-  } = _ref9;
+  } = _ref8;
   return theme['text-rgb'];
 }}, 0.45);
-    left: ${_ref10 => {
+    left: ${_ref9 => {
   let {
     offsetWidth
-  } = _ref10;
+  } = _ref9;
   return offsetWidth ? `${offsetWidth + 10}px` : '10px';
 }};
     top: 12px;
@@ -170,11 +157,11 @@ const StyledEmojiInputLabel = exports.StyledEmojiInputLabel = _styledComponents.
     position: absolute;
     user-select: none;
     white-space: nowrap;
-    max-width: ${_ref11 => {
+    max-width: ${_ref10 => {
   let {
     maxWidth,
     offsetWidth
-  } = _ref11;
+  } = _ref10;
   return `${maxWidth - (offsetWidth ?? 0)}px`;
 }};
     overflow: hidden;

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","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 !important;\n    }\n\n    &::-webkit-scrollbar-track {\n        background-color: transparent !important;\n    }\n\n    &::-webkit-scrollbar-button {\n        background-color: transparent !important;\n        height: 5px !important;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background-color: rgba(\n            ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n            0.15\n        ) !important;\n        border-radius: 20px !important;\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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"}
+{"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","browser","StyledEmojiInputRightWrapper","StyledEmojiInputLabel","label","_ref8","_ref9","offsetWidth","_ref10","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';\nimport type { Browser } from 'detect-browser';\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    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    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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"}

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

@@ -12,6 +12,7 @@ var _emojiDeDE = _interopRequireDefault(require("../../../constants/emoji-de-DE.
 var _emojiHistory = require("../../../hooks/emojiHistory");
 var _Emoji = _interopRequireDefault(require("./emoji/Emoji"));
 var _EmojiPickerEmojis = require("./EmojiPickerEmojis.styles");
+var _chaynsApi = require("chayns-api");
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,6 +29,9 @@ const EmojiPickerEmojis = _ref => {
   const emojiRef = (0, _react.useRef)(null);
   const shouldPreventEmojiControlsRef = (0, _react.useRef)(false);
   const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = (0, _react.useState)(false);
+  const {
+    browser
+  } = (0, _chaynsApi.getDevice)();
   const {
     addOrUpdateEmojiInHistory,
     historyEmojis
@@ -236,6 +240,7 @@ const EmojiPickerEmojis = _ref => {
   }, [searchString, selectedCategory, focusedIndex, shouldShowSkinTonePopup, handleRightClick, handlePopupVisibilityChange, handleSelect, historyEmojis]);
   const shouldShowNoContentInfo = !emojis || emojis.length === 0;
   return /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.StyledEmojiPickerEmojis, {
+    browser: browser?.name,
     shouldPreventScroll: shouldPreventScroll,
     shouldShowNoContentInfo: shouldShowNoContentInfo,
     ref: emojiRef

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerEmojis.js","names":["_emojilib","_interopRequireDefault","require","_react","_interopRequireWildcard","_dataByEmoji","_dataByGroup","_emojiDeDE","_emojiHistory","_Emoji","_EmojiPickerEmojis","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","EmojiPickerEmojis","_ref","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","useState","focusedIndex","setFocusedIndex","emojiRef","useRef","shouldPreventEmojiControlsRef","shouldShowSkinTonePopup","setShouldShowSkinTonePopup","addOrUpdateEmojiInHistory","historyEmojis","useEmojiHistory","handlePopupVisibilityChange","useCallback","isVisible","current","handleSelect","_ref2","emoji","name","skin_tone_support","index","useEffect","container","scrollTop","handleKeyDown","event","key","preventDefault","children","length","newIndex","ctrlKey","prevElement","tabIndex","newElement","containerRect","getBoundingClientRect","elementRect","bottom","top","dataset","skinToneSupport","document","addEventListener","removeEventListener","handleRightClick","emojis","useMemo","trim","lowerSearchString","toLowerCase","searchResults","entries","emojiList","forEach","_ref3","keywords","emojiLib","germanKeywords","germanEmojiLib","includes","some","keyword","push","createElement","isSelected","onRightClick","isSkinToneSupported","onPopupVisibilityChange","map","_ref4","emojiCategories","find","_ref5","slug","_ref6","shouldShowNoContentInfo","StyledEmojiPickerEmojis","ref","StyledEmojiPickerEmojisNoContentInfo","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.tsx"],"sourcesContent":["import emojiLib from 'emojilib';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport emojiList from 'unicode-emoji-json/data-by-emoji.json';\nimport emojiCategories from 'unicode-emoji-json/data-by-group.json';\nimport germanEmojiLib from '../../../constants/emoji-de-DE.json';\nimport { useEmojiHistory } from '../../../hooks/emojiHistory';\nimport type { Category } from '../../../types/category';\nimport Emoji from './emoji/Emoji';\nimport {\n    StyledEmojiPickerEmojis,\n    StyledEmojiPickerEmojisNoContentInfo,\n} from './EmojiPickerEmojis.styles';\n\nexport type EmojiPickerEmojisProps = {\n    accessToken?: string;\n    onSelect: (emoji: string) => void;\n    personId?: string;\n    searchString: string;\n    selectedCategory: Category;\n};\n\nconst EmojiPickerEmojis: FC<EmojiPickerEmojisProps> = ({\n    accessToken,\n    onSelect,\n    personId,\n    searchString,\n    selectedCategory,\n}) => {\n    const [shouldPreventScroll, setShouldPreventScroll] = useState(false);\n    const [focusedIndex, setFocusedIndex] = useState<number>(0);\n\n    const emojiRef = useRef<HTMLDivElement>(null);\n    const shouldPreventEmojiControlsRef = useRef(false);\n    const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = useState(false);\n\n    const { addOrUpdateEmojiInHistory, historyEmojis } = useEmojiHistory({\n        accessToken,\n        personId,\n        selectedCategory,\n    });\n\n    const handlePopupVisibilityChange = useCallback((isVisible: boolean) => {\n        setShouldShowSkinTonePopup(isVisible);\n        shouldPreventEmojiControlsRef.current = isVisible;\n        setShouldPreventScroll(isVisible);\n    }, []);\n\n    const handleSelect = useCallback(\n        ({\n            emoji,\n            name,\n            skin_tone_support,\n            index,\n        }: {\n            emoji: string;\n            name: string;\n            skin_tone_support: boolean;\n            index?: number;\n        }) => {\n            onSelect(emoji);\n\n            if (index) {\n                setFocusedIndex(index);\n            }\n\n            void addOrUpdateEmojiInHistory({ emoji, name, skin_tone_support });\n        },\n        [addOrUpdateEmojiInHistory, onSelect],\n    );\n\n    useEffect(() => {\n        if (selectedCategory) {\n            setFocusedIndex(0);\n\n            const container = emojiRef.current;\n\n            if (!container) {\n                return;\n            }\n\n            container.scrollTop = 0;\n        }\n    }, [selectedCategory]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                !shouldPreventEmojiControlsRef.current &&\n                (event.key === 'ArrowUp' ||\n                    event.key === 'ArrowDown' ||\n                    event.key === 'ArrowLeft' ||\n                    event.key === 'ArrowRight')\n            ) {\n                event.preventDefault();\n                const children = emojiRef.current?.children;\n                if (children && children.length > 0) {\n                    const container = emojiRef.current;\n                    let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n                    if (event.ctrlKey) {\n                        return;\n                    }\n\n                    if (event.key === 'ArrowUp') {\n                        newIndex = (newIndex - 6) % children.length;\n                    } else if (event.key === 'ArrowDown') {\n                        newIndex = (newIndex + 6) % children.length;\n                    } else if (event.key === 'ArrowLeft') {\n                        newIndex = (newIndex - 1) % children.length;\n                    } else if (event.key === 'ArrowRight') {\n                        newIndex = (newIndex + 1) % children.length;\n                    }\n\n                    // remove focus from the old element\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    if (newIndex < 0) {\n                        newIndex = children.length - 1;\n                    } else if (newIndex > children.length - 1) {\n                        newIndex = 0;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    // Set focus to the element\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n\n                    const containerRect = container.getBoundingClientRect();\n                    const elementRect = newElement.getBoundingClientRect();\n\n                    if (elementRect.bottom > containerRect.bottom) {\n                        container.scrollTop += elementRect.bottom - containerRect.bottom;\n                    } else if (elementRect.top < containerRect.top) {\n                        container.scrollTop -= containerRect.top - elementRect.top;\n                    }\n                }\n            } else if (\n                event.key === 'Enter' &&\n                !shouldPreventEmojiControlsRef.current &&\n                focusedIndex !== null\n            ) {\n                if (event.ctrlKey) {\n                    setShouldShowSkinTonePopup(true);\n\n                    return;\n                }\n\n                const { dataset } = emojiRef.current?.children[focusedIndex] as HTMLDivElement;\n\n                const { emoji, name, skinToneSupport } = dataset;\n\n                if (!emoji || !name || !skinToneSupport) {\n                    return;\n                }\n\n                handleSelect({ emoji, name, skin_tone_support: skinToneSupport === 'true' });\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSelect]);\n\n    const handleRightClick = useCallback((index: number) => {\n        setFocusedIndex(index);\n    }, []);\n\n    const emojis = useMemo(() => {\n        if (searchString.trim() !== '') {\n            const lowerSearchString = searchString.toLowerCase();\n\n            const searchResults: JSX.Element[] = [];\n\n            Object.entries(emojiList).forEach(([emoji, { name, skin_tone_support }], index) => {\n                // @ts-expect-error: Type is correct here\n                const keywords = emojiLib[emoji] as string[] | undefined;\n                // @ts-expect-error: Type is correct here\n                const germanKeywords = germanEmojiLib[emoji] as string[] | undefined;\n\n                if (\n                    name.includes(lowerSearchString) ||\n                    keywords?.some((keyword) => keyword.includes(lowerSearchString)) ||\n                    germanKeywords?.some((keyword) => keyword.includes(lowerSearchString))\n                ) {\n                    searchResults.push(\n                        <Emoji\n                            shouldShowSkinTonePopup={\n                                index === focusedIndex &&\n                                skin_tone_support &&\n                                shouldShowSkinTonePopup\n                            }\n                            isSelected={index === focusedIndex}\n                            emoji={emoji}\n                            index={index}\n                            onRightClick={handleRightClick}\n                            isSkinToneSupported={skin_tone_support}\n                            key={name}\n                            name={name}\n                            onPopupVisibilityChange={handlePopupVisibilityChange}\n                            onSelect={(e) =>\n                                handleSelect({ emoji: e, name, skin_tone_support, index })\n                            }\n                        />,\n                    );\n                }\n            });\n\n            return searchResults;\n        }\n\n        if (selectedCategory === 'history') {\n            return historyEmojis.map(({ emoji, name, skin_tone_support }, index) => (\n                <Emoji\n                    isSelected={index === focusedIndex}\n                    shouldShowSkinTonePopup={\n                        index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n                    }\n                    emoji={emoji}\n                    name={name}\n                    key={name}\n                    index={index}\n                    onRightClick={handleRightClick}\n                    onPopupVisibilityChange={handlePopupVisibilityChange}\n                    onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n                    isSkinToneSupported={false}\n                />\n            ));\n        }\n\n        return emojiCategories\n            .find(({ slug }) => slug === selectedCategory)\n            ?.emojis.map(({ emoji, name, skin_tone_support }, index) => (\n                <Emoji\n                    isSelected={index === focusedIndex}\n                    shouldShowSkinTonePopup={\n                        index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n                    }\n                    emoji={emoji}\n                    name={name}\n                    index={index}\n                    onRightClick={handleRightClick}\n                    isSkinToneSupported={skin_tone_support}\n                    key={name}\n                    onPopupVisibilityChange={handlePopupVisibilityChange}\n                    onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n                />\n            ));\n    }, [\n        searchString,\n        selectedCategory,\n        focusedIndex,\n        shouldShowSkinTonePopup,\n        handleRightClick,\n        handlePopupVisibilityChange,\n        handleSelect,\n        historyEmojis,\n    ]);\n\n    const shouldShowNoContentInfo = !emojis || emojis.length === 0;\n\n    return (\n        <StyledEmojiPickerEmojis\n            shouldPreventScroll={shouldPreventScroll}\n            shouldShowNoContentInfo={shouldShowNoContentInfo}\n            ref={emojiRef}\n        >\n            {emojis}\n            {shouldShowNoContentInfo && (\n                <StyledEmojiPickerEmojisNoContentInfo>\n                    Hier werden die zuletzt verwendeten Emojis angezeigt, die über diese Auswahl\n                    gewählt wurden.\n                </StyledEmojiPickerEmojisNoContentInfo>\n            )}\n        </StyledEmojiPickerEmojis>\n    );\n};\n\nEmojiPickerEmojis.displayName = 'EmojiPickerEmojis';\n\nexport default EmojiPickerEmojis;\n"],"mappings":"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"}
+{"version":3,"file":"EmojiPickerEmojis.js","names":["_emojilib","_interopRequireDefault","require","_react","_interopRequireWildcard","_dataByEmoji","_dataByGroup","_emojiDeDE","_emojiHistory","_Emoji","_EmojiPickerEmojis","_chaynsApi","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","obj","EmojiPickerEmojis","_ref","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","useState","focusedIndex","setFocusedIndex","emojiRef","useRef","shouldPreventEmojiControlsRef","shouldShowSkinTonePopup","setShouldShowSkinTonePopup","browser","getDevice","addOrUpdateEmojiInHistory","historyEmojis","useEmojiHistory","handlePopupVisibilityChange","useCallback","isVisible","current","handleSelect","_ref2","emoji","name","skin_tone_support","index","useEffect","container","scrollTop","handleKeyDown","event","key","preventDefault","children","length","newIndex","ctrlKey","prevElement","tabIndex","newElement","containerRect","getBoundingClientRect","elementRect","bottom","top","dataset","skinToneSupport","document","addEventListener","removeEventListener","handleRightClick","emojis","useMemo","trim","lowerSearchString","toLowerCase","searchResults","entries","emojiList","forEach","_ref3","keywords","emojiLib","germanKeywords","germanEmojiLib","includes","some","keyword","push","createElement","isSelected","onRightClick","isSkinToneSupported","onPopupVisibilityChange","map","_ref4","emojiCategories","find","_ref5","slug","_ref6","shouldShowNoContentInfo","StyledEmojiPickerEmojis","ref","StyledEmojiPickerEmojisNoContentInfo","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.tsx"],"sourcesContent":["import emojiLib from 'emojilib';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport emojiList from 'unicode-emoji-json/data-by-emoji.json';\nimport emojiCategories from 'unicode-emoji-json/data-by-group.json';\nimport germanEmojiLib from '../../../constants/emoji-de-DE.json';\nimport { useEmojiHistory } from '../../../hooks/emojiHistory';\nimport type { Category } from '../../../types/category';\nimport Emoji from './emoji/Emoji';\nimport {\n    StyledEmojiPickerEmojis,\n    StyledEmojiPickerEmojisNoContentInfo,\n} from './EmojiPickerEmojis.styles';\nimport { getDevice } from 'chayns-api';\n\nexport type EmojiPickerEmojisProps = {\n    accessToken?: string;\n    onSelect: (emoji: string) => void;\n    personId?: string;\n    searchString: string;\n    selectedCategory: Category;\n};\n\nconst EmojiPickerEmojis: FC<EmojiPickerEmojisProps> = ({\n    accessToken,\n    onSelect,\n    personId,\n    searchString,\n    selectedCategory,\n}) => {\n    const [shouldPreventScroll, setShouldPreventScroll] = useState(false);\n    const [focusedIndex, setFocusedIndex] = useState<number>(0);\n\n    const emojiRef = useRef<HTMLDivElement>(null);\n    const shouldPreventEmojiControlsRef = useRef(false);\n    const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = useState(false);\n\n    const { browser } = getDevice();\n\n    const { addOrUpdateEmojiInHistory, historyEmojis } = useEmojiHistory({\n        accessToken,\n        personId,\n        selectedCategory,\n    });\n\n    const handlePopupVisibilityChange = useCallback((isVisible: boolean) => {\n        setShouldShowSkinTonePopup(isVisible);\n        shouldPreventEmojiControlsRef.current = isVisible;\n        setShouldPreventScroll(isVisible);\n    }, []);\n\n    const handleSelect = useCallback(\n        ({\n            emoji,\n            name,\n            skin_tone_support,\n            index,\n        }: {\n            emoji: string;\n            name: string;\n            skin_tone_support: boolean;\n            index?: number;\n        }) => {\n            onSelect(emoji);\n\n            if (index) {\n                setFocusedIndex(index);\n            }\n\n            void addOrUpdateEmojiInHistory({ emoji, name, skin_tone_support });\n        },\n        [addOrUpdateEmojiInHistory, onSelect],\n    );\n\n    useEffect(() => {\n        if (selectedCategory) {\n            setFocusedIndex(0);\n\n            const container = emojiRef.current;\n\n            if (!container) {\n                return;\n            }\n\n            container.scrollTop = 0;\n        }\n    }, [selectedCategory]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                !shouldPreventEmojiControlsRef.current &&\n                (event.key === 'ArrowUp' ||\n                    event.key === 'ArrowDown' ||\n                    event.key === 'ArrowLeft' ||\n                    event.key === 'ArrowRight')\n            ) {\n                event.preventDefault();\n                const children = emojiRef.current?.children;\n                if (children && children.length > 0) {\n                    const container = emojiRef.current;\n                    let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n                    if (event.ctrlKey) {\n                        return;\n                    }\n\n                    if (event.key === 'ArrowUp') {\n                        newIndex = (newIndex - 6) % children.length;\n                    } else if (event.key === 'ArrowDown') {\n                        newIndex = (newIndex + 6) % children.length;\n                    } else if (event.key === 'ArrowLeft') {\n                        newIndex = (newIndex - 1) % children.length;\n                    } else if (event.key === 'ArrowRight') {\n                        newIndex = (newIndex + 1) % children.length;\n                    }\n\n                    // remove focus from the old element\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    if (newIndex < 0) {\n                        newIndex = children.length - 1;\n                    } else if (newIndex > children.length - 1) {\n                        newIndex = 0;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    // Set focus to the element\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n\n                    const containerRect = container.getBoundingClientRect();\n                    const elementRect = newElement.getBoundingClientRect();\n\n                    if (elementRect.bottom > containerRect.bottom) {\n                        container.scrollTop += elementRect.bottom - containerRect.bottom;\n                    } else if (elementRect.top < containerRect.top) {\n                        container.scrollTop -= containerRect.top - elementRect.top;\n                    }\n                }\n            } else if (\n                event.key === 'Enter' &&\n                !shouldPreventEmojiControlsRef.current &&\n                focusedIndex !== null\n            ) {\n                if (event.ctrlKey) {\n                    setShouldShowSkinTonePopup(true);\n\n                    return;\n                }\n\n                const { dataset } = emojiRef.current?.children[focusedIndex] as HTMLDivElement;\n\n                const { emoji, name, skinToneSupport } = dataset;\n\n                if (!emoji || !name || !skinToneSupport) {\n                    return;\n                }\n\n                handleSelect({ emoji, name, skin_tone_support: skinToneSupport === 'true' });\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSelect]);\n\n    const handleRightClick = useCallback((index: number) => {\n        setFocusedIndex(index);\n    }, []);\n\n    const emojis = useMemo(() => {\n        if (searchString.trim() !== '') {\n            const lowerSearchString = searchString.toLowerCase();\n\n            const searchResults: JSX.Element[] = [];\n\n            Object.entries(emojiList).forEach(([emoji, { name, skin_tone_support }], index) => {\n                // @ts-expect-error: Type is correct here\n                const keywords = emojiLib[emoji] as string[] | undefined;\n                // @ts-expect-error: Type is correct here\n                const germanKeywords = germanEmojiLib[emoji] as string[] | undefined;\n\n                if (\n                    name.includes(lowerSearchString) ||\n                    keywords?.some((keyword) => keyword.includes(lowerSearchString)) ||\n                    germanKeywords?.some((keyword) => keyword.includes(lowerSearchString))\n                ) {\n                    searchResults.push(\n                        <Emoji\n                            shouldShowSkinTonePopup={\n                                index === focusedIndex &&\n                                skin_tone_support &&\n                                shouldShowSkinTonePopup\n                            }\n                            isSelected={index === focusedIndex}\n                            emoji={emoji}\n                            index={index}\n                            onRightClick={handleRightClick}\n                            isSkinToneSupported={skin_tone_support}\n                            key={name}\n                            name={name}\n                            onPopupVisibilityChange={handlePopupVisibilityChange}\n                            onSelect={(e) =>\n                                handleSelect({ emoji: e, name, skin_tone_support, index })\n                            }\n                        />,\n                    );\n                }\n            });\n\n            return searchResults;\n        }\n\n        if (selectedCategory === 'history') {\n            return historyEmojis.map(({ emoji, name, skin_tone_support }, index) => (\n                <Emoji\n                    isSelected={index === focusedIndex}\n                    shouldShowSkinTonePopup={\n                        index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n                    }\n                    emoji={emoji}\n                    name={name}\n                    key={name}\n                    index={index}\n                    onRightClick={handleRightClick}\n                    onPopupVisibilityChange={handlePopupVisibilityChange}\n                    onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n                    isSkinToneSupported={false}\n                />\n            ));\n        }\n\n        return emojiCategories\n            .find(({ slug }) => slug === selectedCategory)\n            ?.emojis.map(({ emoji, name, skin_tone_support }, index) => (\n                <Emoji\n                    isSelected={index === focusedIndex}\n                    shouldShowSkinTonePopup={\n                        index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n                    }\n                    emoji={emoji}\n                    name={name}\n                    index={index}\n                    onRightClick={handleRightClick}\n                    isSkinToneSupported={skin_tone_support}\n                    key={name}\n                    onPopupVisibilityChange={handlePopupVisibilityChange}\n                    onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n                />\n            ));\n    }, [\n        searchString,\n        selectedCategory,\n        focusedIndex,\n        shouldShowSkinTonePopup,\n        handleRightClick,\n        handlePopupVisibilityChange,\n        handleSelect,\n        historyEmojis,\n    ]);\n\n    const shouldShowNoContentInfo = !emojis || emojis.length === 0;\n\n    return (\n        <StyledEmojiPickerEmojis\n            browser={browser?.name}\n            shouldPreventScroll={shouldPreventScroll}\n            shouldShowNoContentInfo={shouldShowNoContentInfo}\n            ref={emojiRef}\n        >\n            {emojis}\n            {shouldShowNoContentInfo && (\n                <StyledEmojiPickerEmojisNoContentInfo>\n                    Hier werden die zuletzt verwendeten Emojis angezeigt, die über diese Auswahl\n                    gewählt wurden.\n                </StyledEmojiPickerEmojisNoContentInfo>\n            )}\n        </StyledEmojiPickerEmojis>\n    );\n};\n\nEmojiPickerEmojis.displayName = 'EmojiPickerEmojis';\n\nexport default EmojiPickerEmojis;\n"],"mappings":"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"}

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import type { WithTheme } from '@chayns-components/core';
+import type { Browser } from 'detect-browser';
 type StyledEmojiPickerEmojisProps = WithTheme<{
     shouldPreventScroll: boolean;
     shouldShowNoContentInfo: boolean;
+    browser: Browser | 'bot' | null | undefined;
 }>;
 export declare const StyledEmojiPickerEmojis: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledEmojiPickerEmojisProps>>;
 export declare const StyledEmojiPickerEmojisNoContentInfo: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

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

@@ -45,48 +45,35 @@ const StyledEmojiPickerEmojis = exports.StyledEmojiPickerEmojis = _styledCompone
         `;
 }}
 
-    // Styles for custom scrollbar
-    &::-webkit-scrollbar {
-        width: 5px;
-    }
-
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-button {
-        background-color: transparent;
-        height: 5px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background-color: rgba(
-            ${_ref5 => {
+        // Styles for custom scrollbar
+    ${_ref5 => {
   let {
+    browser,
     theme
   } = _ref5;
-  return theme['text-rgb'];
-}},
-            0.15
-        );
-        border-radius: 20px;
-    }
+  return browser === 'firefox' ? (0, _styledComponents.css)`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : (0, _styledComponents.css)`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
 
-    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are
-    // only supported in Firefox:
-    * {
-        scrollbar-color: rgba(
-                ${_ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme['text-rgb'];
-}},
-                0.15
-            )
-            transparent;
-        scrollbar-width: thin;
-    }
+                  &::-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 StyledEmojiPickerEmojisNoContentInfo = exports.StyledEmojiPickerEmojisNoContentInfo = _styledComponents.default.div`
     font-size: 85%;

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerEmojis.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","StyledEmojiPickerEmojis","exports","styled","div","_ref","shouldShowNoContentInfo","_ref2","shouldPreventScroll","_ref3","css","_ref4","_ref5","theme","_ref6","StyledEmojiPickerEmojisNoContentInfo"],"sources":["../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css } from 'styled-components';\n\ntype StyledEmojiPickerEmojisProps = WithTheme<{\n    shouldPreventScroll: boolean;\n    shouldShowNoContentInfo: boolean;\n}>;\n\nexport const StyledEmojiPickerEmojis = styled.div<StyledEmojiPickerEmojisProps>`\n    display: ${({ shouldShowNoContentInfo }) => (shouldShowNoContentInfo ? 'flex' : 'grid')};\n    flex: 1 1 auto;\n    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));\n    grid-template-rows: min-content;\n    overflow-y: ${({ shouldPreventScroll }) => (shouldPreventScroll ? 'hidden' : 'scroll')};\n    padding: 5px 0 5px 5px;\n    position: relative;\n    width: 100%;\n\n    ${({ shouldShowNoContentInfo }) =>\n        shouldShowNoContentInfo &&\n        css`\n            align-items: center;\n        `}\n\n    ${({ shouldPreventScroll }) =>\n        shouldPreventScroll &&\n        css`\n            padding-right: 5px;\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 }: StyledEmojiPickerEmojisProps) => 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 }: StyledEmojiPickerEmojisProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\n    }\n`;\n\nexport const StyledEmojiPickerEmojisNoContentInfo = styled.div`\n    font-size: 85%;\n    opacity: 0.85;\n    padding: 0 12.5%;\n    text-align: center;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,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;AAOzC,MAAMY,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAGE,yBAAM,CAACC,GAAkC;AAChF,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAwB,CAAC,GAAAD,IAAA;EAAA,OAAMC,uBAAuB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAE;AAC5F;AACA;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAE;AAC3F;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEH;EAAwB,CAAC,GAAAG,KAAA;EAAA,OAC1BH,uBAAuB,IACvB,IAAAI,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEH;EAAoB,CAAC,GAAAG,KAAA;EAAA,OACtBH,mBAAmB,IACnB,IAAAE,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAcE,KAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,KAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAED;EAAoC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAME,oCAAoC,GAAAb,OAAA,CAAAa,oCAAA,GAAGZ,yBAAM,CAACC,GAAI;AAC/D;AACA;AACA;AACA;AACA,CAAC"}
+{"version":3,"file":"EmojiPickerEmojis.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","StyledEmojiPickerEmojis","exports","styled","div","_ref","shouldShowNoContentInfo","_ref2","shouldPreventScroll","_ref3","css","_ref4","_ref5","browser","theme","StyledEmojiPickerEmojisNoContentInfo"],"sources":["../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css } from 'styled-components';\nimport type { Browser } from 'detect-browser';\n\ntype StyledEmojiPickerEmojisProps = WithTheme<{\n    shouldPreventScroll: boolean;\n    shouldShowNoContentInfo: boolean;\n    browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledEmojiPickerEmojis = styled.div<StyledEmojiPickerEmojisProps>`\n    display: ${({ shouldShowNoContentInfo }) => (shouldShowNoContentInfo ? 'flex' : 'grid')};\n    flex: 1 1 auto;\n    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));\n    grid-template-rows: min-content;\n    overflow-y: ${({ shouldPreventScroll }) => (shouldPreventScroll ? 'hidden' : 'scroll')};\n    padding: 5px 0 5px 5px;\n    position: relative;\n    width: 100%;\n\n    ${({ shouldShowNoContentInfo }) =>\n        shouldShowNoContentInfo &&\n        css`\n            align-items: center;\n        `}\n\n    ${({ shouldPreventScroll }) =>\n        shouldPreventScroll &&\n        css`\n            padding-right: 5px;\n        `}\n\n        // Styles for custom scrollbar\n    ${({ browser, theme }: StyledEmojiPickerEmojisProps) =>\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 StyledEmojiPickerEmojisNoContentInfo = styled.div`\n    font-size: 85%;\n    opacity: 0.85;\n    padding: 0 12.5%;\n    text-align: center;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,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;AASzC,MAAMY,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAGE,yBAAM,CAACC,GAAkC;AAChF,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAwB,CAAC,GAAAD,IAAA;EAAA,OAAMC,uBAAuB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAE;AAC5F;AACA;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAE;AAC3F;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEH;EAAwB,CAAC,GAAAG,KAAA;EAAA,OAC1BH,uBAAuB,IACvB,IAAAI,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEH;EAAoB,CAAC,GAAAG,KAAA;EAAA,OACtBH,mBAAmB,IACnB,IAAAE,qBAAG,CAAC;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA;AACA,MAAME,KAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAAoC,CAAC,GAAAF,KAAA;EAAA,OAC/CC,OAAO,KAAK,SAAS,GACf,IAAAH,qBAAG,CAAC;AAClB,0CAA0CI,KAAK,CAAC,UAAU,CAAE;AAC5D;AACA,eAAe,GACD,IAAAJ,qBAAG,CAAC;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CI,KAAK,CAAC,UAAU,CAAE;AACjE;AACA;AACA,eAAe;AAAA,CAAC;AAChB,CAAC;AAEM,MAAMC,oCAAoC,GAAAb,OAAA,CAAAa,oCAAA,GAAGZ,yBAAM,CAACC,GAAI;AAC/D;AACA;AACA;AACA;AACA,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.0.0-beta.422",
+    "version": "5.0.0-beta.424",
     "description": "Input field that supports HTML elements and emojis",
     "keywords": [
         "chayns",
@@ -53,7 +53,7 @@
         "typescript": "^5.3.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.421",
+        "@chayns-components/core": "^5.0.0-beta.424",
         "@chayns/colors": "^2.0.0",
         "clsx": "^2.1.0",
         "emojilib": "^3.0.11",
@@ -69,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "3d43f4f3138a387350df1f43ee4dc4d2911102ca"
+    "gitHead": "fcb284d7ffcf9f0249f2181f12a1a0ac8021a709"
 }