@chayns-components/emoji-input 5.0.0-beta.66 → 5.0.0-beta.71

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

@@ -8,6 +8,11 @@ export type EmojiInputProps = {
      * Function that is executed when the text of the input changes
      */
     onInput?: ChangeEventHandler<HTMLDivElement>;
+    /**
+     * Function that is executed when the visibility of the popup changes.
+     * @param {boolean} isVisible - Whether the popup is visible or not
+     */
+    onPopupVisibilityChange?: (isVisible: boolean) => void;
     /**
      * Placeholder for the input field
      */

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

@@ -16,6 +16,7 @@ const EmojiInput = _ref => {
   let {
     isDisabled,
     onInput,
+    onPopupVisibilityChange,
     placeholder,
     value
   } = _ref;

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiInput.js","names":["_react","_interopRequireWildcard","require","_emoji","_selection","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiInput","_ref","isDisabled","onInput","placeholder","value","editorRef","useRef","handleUpdateText","useCallback","text","current","newHtml","convertAsciiToUnicode","innerHTML","saveSelection","restoreSelection","handleInput","event","handlePopupSelect","emoji","selection","window","getSelection","anchorNode","contains","endOffset","startOffset","getRangeAt","rangeDistance","offset","length","nodeValue","substring","newRange","document","createRange","Math","min","setStart","setEnd","removeAllRanges","addRange","Event","bubbles","dispatchEvent","handlePreventLoseFocus","_element$parentElemen","element","target","classList","parentElement","preventDefault","stopPropagation","useEffect","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputEditor","contentEditable","ref","onSelect","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, { ChangeEvent, ChangeEventHandler, FC, useCallback, useEffect, useRef } from 'react';\nimport { convertAsciiToUnicode } from '../../utils/emoji';\nimport { restoreSelection, saveSelection } from '../../utils/selection';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport { StyledEmojiInput, StyledEmojiInputEditor } from './EmojiInput.styles';\n\nexport type EmojiInputProps = {\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled: boolean;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onInput?: ChangeEventHandler<HTMLDivElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Value of the input field\n     */\n    value: string;\n};\n\nconst EmojiInput: FC<EmojiInputProps> = ({ isDisabled, onInput, placeholder, value }) => {\n    const editorRef = useRef<HTMLDivElement>(null);\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 handleUpdateText = useCallback((text: string) => {\n        if (!editorRef.current) {\n            return;\n        }\n\n        const newHtml = convertAsciiToUnicode(text);\n\n        if (newHtml !== editorRef.current.innerHTML) {\n            saveSelection(editorRef.current);\n\n            editorRef.current.innerHTML = newHtml;\n\n            restoreSelection(editorRef.current);\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            handleUpdateText(editorRef.current.innerHTML);\n\n            if (typeof onInput === 'function') {\n                onInput(event);\n            }\n        },\n        [handleUpdateText, onInput]\n    );\n\n    /**\n     * This function processes the selection of an emoji via the popup. If the 'contentEditable'\n     * element has the focus, the new emoji is inserted at the cursor position. If not, the emoji\n     * will be appended to the back of the input field content.\n     *\n     * In addition, this function also sets the cursor to the correct position when the input field\n     * has the focus. For this purpose, the current position of the cursor or a selection is read to\n     * calculate the cursor position after inserting the emoji.\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            return;\n        }\n\n        const selection = window.getSelection();\n\n        if (selection?.anchorNode && editorRef.current.contains(selection.anchorNode)) {\n            const { endOffset, startOffset } = selection.getRangeAt(0);\n\n            const rangeDistance = endOffset - startOffset;\n\n            let offset = endOffset + emoji.length - rangeDistance;\n\n            const { anchorNode } = selection;\n\n            if (anchorNode.nodeValue) {\n                anchorNode.nodeValue =\n                    anchorNode.nodeValue.substring(0, startOffset) +\n                    emoji +\n                    anchorNode.nodeValue.substring(endOffset);\n            }\n\n            const newRange = document.createRange();\n\n            if (anchorNode.nodeValue) {\n                offset = Math.min(offset, anchorNode.nodeValue.length);\n            }\n\n            newRange.setStart(anchorNode, offset);\n            newRange.setEnd(anchorNode, offset);\n\n            selection.removeAllRanges();\n            selection.addRange(newRange);\n        } else {\n            editorRef.current.innerHTML += emoji;\n        }\n\n        const event = new Event('input', { bubbles: true });\n\n        editorRef.current.dispatchEvent(event);\n    }, []);\n\n    /**\n     * This function ensures that the input field does not lose focus when the popup is opened or an\n     * 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 field to\n     * lose focus.\n     */\n    const handlePreventLoseFocus = useCallback((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        ) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }, []);\n\n    useEffect(() => {\n        handleUpdateText(value);\n    }, [handleUpdateText, value]);\n\n    useEffect(() => {\n        document.body.addEventListener('mousedown', handlePreventLoseFocus);\n\n        return () => {\n            document.body.removeEventListener('mousedown', handlePreventLoseFocus);\n        };\n    }, [handlePreventLoseFocus]);\n\n    return (\n        <StyledEmojiInput isDisabled={isDisabled}>\n            <StyledEmojiInputEditor\n                contentEditable={!isDisabled}\n                onInput={handleInput}\n                placeholder={placeholder}\n                ref={editorRef}\n            />\n            <EmojiPickerPopup onSelect={handlePopupSelect} />\n        </StyledEmojiInput>\n    );\n};\n\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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"}
+{"version":3,"file":"EmojiInput.js","names":["_react","_interopRequireWildcard","require","_emoji","_selection","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiInput","_ref","isDisabled","onInput","onPopupVisibilityChange","placeholder","value","editorRef","useRef","handleUpdateText","useCallback","text","current","newHtml","convertAsciiToUnicode","innerHTML","saveSelection","restoreSelection","handleInput","event","handlePopupSelect","emoji","selection","window","getSelection","anchorNode","contains","endOffset","startOffset","getRangeAt","rangeDistance","offset","length","nodeValue","substring","newRange","document","createRange","Math","min","setStart","setEnd","removeAllRanges","addRange","Event","bubbles","dispatchEvent","handlePreventLoseFocus","_element$parentElemen","element","target","classList","parentElement","preventDefault","stopPropagation","useEffect","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputEditor","contentEditable","ref","onSelect","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, { ChangeEvent, ChangeEventHandler, FC, useCallback, useEffect, useRef } from 'react';\nimport { convertAsciiToUnicode } from '../../utils/emoji';\nimport { restoreSelection, saveSelection } from '../../utils/selection';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport { StyledEmojiInput, StyledEmojiInputEditor } from './EmojiInput.styles';\n\nexport type EmojiInputProps = {\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled: boolean;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onInput?: ChangeEventHandler<HTMLDivElement>;\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     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Value of the input field\n     */\n    value: string;\n};\n\nconst EmojiInput: FC<EmojiInputProps> = ({\n    isDisabled,\n    onInput,\n    onPopupVisibilityChange,\n    placeholder,\n    value,\n}) => {\n    const editorRef = useRef<HTMLDivElement>(null);\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 handleUpdateText = useCallback((text: string) => {\n        if (!editorRef.current) {\n            return;\n        }\n\n        const newHtml = convertAsciiToUnicode(text);\n\n        if (newHtml !== editorRef.current.innerHTML) {\n            saveSelection(editorRef.current);\n\n            editorRef.current.innerHTML = newHtml;\n\n            restoreSelection(editorRef.current);\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            handleUpdateText(editorRef.current.innerHTML);\n\n            if (typeof onInput === 'function') {\n                onInput(event);\n            }\n        },\n        [handleUpdateText, onInput]\n    );\n\n    /**\n     * This function processes the selection of an emoji via the popup. If the 'contentEditable'\n     * element has the focus, the new emoji is inserted at the cursor position. If not, the emoji\n     * will be appended to the back of the input field content.\n     *\n     * In addition, this function also sets the cursor to the correct position when the input field\n     * has the focus. For this purpose, the current position of the cursor or a selection is read to\n     * calculate the cursor position after inserting the emoji.\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            return;\n        }\n\n        const selection = window.getSelection();\n\n        if (selection?.anchorNode && editorRef.current.contains(selection.anchorNode)) {\n            const { endOffset, startOffset } = selection.getRangeAt(0);\n\n            const rangeDistance = endOffset - startOffset;\n\n            let offset = endOffset + emoji.length - rangeDistance;\n\n            const { anchorNode } = selection;\n\n            if (anchorNode.nodeValue) {\n                anchorNode.nodeValue =\n                    anchorNode.nodeValue.substring(0, startOffset) +\n                    emoji +\n                    anchorNode.nodeValue.substring(endOffset);\n            }\n\n            const newRange = document.createRange();\n\n            if (anchorNode.nodeValue) {\n                offset = Math.min(offset, anchorNode.nodeValue.length);\n            }\n\n            newRange.setStart(anchorNode, offset);\n            newRange.setEnd(anchorNode, offset);\n\n            selection.removeAllRanges();\n            selection.addRange(newRange);\n        } else {\n            editorRef.current.innerHTML += emoji;\n        }\n\n        const event = new Event('input', { bubbles: true });\n\n        editorRef.current.dispatchEvent(event);\n    }, []);\n\n    /**\n     * This function ensures that the input field does not lose focus when the popup is opened or an\n     * 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 field to\n     * lose focus.\n     */\n    const handlePreventLoseFocus = useCallback((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        ) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }, []);\n\n    useEffect(() => {\n        handleUpdateText(value);\n    }, [handleUpdateText, value]);\n\n    useEffect(() => {\n        document.body.addEventListener('mousedown', handlePreventLoseFocus);\n\n        return () => {\n            document.body.removeEventListener('mousedown', handlePreventLoseFocus);\n        };\n    }, [handlePreventLoseFocus]);\n\n    return (\n        <StyledEmojiInput isDisabled={isDisabled}>\n            <StyledEmojiInputEditor\n                contentEditable={!isDisabled}\n                onInput={handleInput}\n                placeholder={placeholder}\n                ref={editorRef}\n            />\n            <EmojiPickerPopup onSelect={handlePopupSelect} />\n        </StyledEmojiInput>\n    );\n};\n\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AAA+E,SAAAI,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAX,wBAAAO,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AA0B/E,MAAMW,UAA+B,GAAGC,IAAA,IAMlC;EAAA,IANmC;IACrCC,UAAU;IACVC,OAAO;IACPC,uBAAuB;IACvBC,WAAW;IACXC;EACJ,CAAC,GAAAL,IAAA;EACG,MAAMM,SAAS,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;;EAE9C;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;EACI,MAAMC,gBAAgB,GAAG,IAAAC,kBAAW,EAAEC,IAAY,IAAK;IACnD,IAAI,CAACJ,SAAS,CAACK,OAAO,EAAE;MACpB;IACJ;IAEA,MAAMC,OAAO,GAAG,IAAAC,4BAAqB,EAACH,IAAI,CAAC;IAE3C,IAAIE,OAAO,KAAKN,SAAS,CAACK,OAAO,CAACG,SAAS,EAAE;MACzC,IAAAC,wBAAa,EAACT,SAAS,CAACK,OAAO,CAAC;MAEhCL,SAAS,CAACK,OAAO,CAACG,SAAS,GAAGF,OAAO;MAErC,IAAAI,2BAAgB,EAACV,SAAS,CAACK,OAAO,CAAC;IACvC;EACJ,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;AACA;EACI,MAAMM,WAAW,GAAG,IAAAR,kBAAW,EAC1BS,KAAkC,IAAK;IACpC,IAAI,CAACZ,SAAS,CAACK,OAAO,EAAE;MACpB;IACJ;IAEAH,gBAAgB,CAACF,SAAS,CAACK,OAAO,CAACG,SAAS,CAAC;IAE7C,IAAI,OAAOZ,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACgB,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACV,gBAAgB,EAAEN,OAAO,CAAC,CAC9B;;EAED;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACI,MAAMiB,iBAAiB,GAAG,IAAAV,kBAAW,EAAEW,KAAa,IAAK;IACrD,IAAI,CAACd,SAAS,CAACK,OAAO,EAAE;MACpB;IACJ;IAEA,MAAMU,SAAS,GAAGC,MAAM,CAACC,YAAY,EAAE;IAEvC,IAAIF,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEG,UAAU,IAAIlB,SAAS,CAACK,OAAO,CAACc,QAAQ,CAACJ,SAAS,CAACG,UAAU,CAAC,EAAE;MAC3E,MAAM;QAAEE,SAAS;QAAEC;MAAY,CAAC,GAAGN,SAAS,CAACO,UAAU,CAAC,CAAC,CAAC;MAE1D,MAAMC,aAAa,GAAGH,SAAS,GAAGC,WAAW;MAE7C,IAAIG,MAAM,GAAGJ,SAAS,GAAGN,KAAK,CAACW,MAAM,GAAGF,aAAa;MAErD,MAAM;QAAEL;MAAW,CAAC,GAAGH,SAAS;MAEhC,IAAIG,UAAU,CAACQ,SAAS,EAAE;QACtBR,UAAU,CAACQ,SAAS,GAChBR,UAAU,CAACQ,SAAS,CAACC,SAAS,CAAC,CAAC,EAAEN,WAAW,CAAC,GAC9CP,KAAK,GACLI,UAAU,CAACQ,SAAS,CAACC,SAAS,CAACP,SAAS,CAAC;MACjD;MAEA,MAAMQ,QAAQ,GAAGC,QAAQ,CAACC,WAAW,EAAE;MAEvC,IAAIZ,UAAU,CAACQ,SAAS,EAAE;QACtBF,MAAM,GAAGO,IAAI,CAACC,GAAG,CAACR,MAAM,EAAEN,UAAU,CAACQ,SAAS,CAACD,MAAM,CAAC;MAC1D;MAEAG,QAAQ,CAACK,QAAQ,CAACf,UAAU,EAAEM,MAAM,CAAC;MACrCI,QAAQ,CAACM,MAAM,CAAChB,UAAU,EAAEM,MAAM,CAAC;MAEnCT,SAAS,CAACoB,eAAe,EAAE;MAC3BpB,SAAS,CAACqB,QAAQ,CAACR,QAAQ,CAAC;IAChC,CAAC,MAAM;MACH5B,SAAS,CAACK,OAAO,CAACG,SAAS,IAAIM,KAAK;IACxC;IAEA,MAAMF,KAAK,GAAG,IAAIyB,KAAK,CAAC,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAK,CAAC,CAAC;IAEnDtC,SAAS,CAACK,OAAO,CAACkC,aAAa,CAAC3B,KAAK,CAAC;EAC1C,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;EACI,MAAM4B,sBAAsB,GAAG,IAAArC,kBAAW,EAAES,KAAiB,IAAK;IAAA,IAAA6B,qBAAA;IAC9D,MAAMC,OAAO,GAAG9B,KAAK,CAAC+B,MAAiB;IAEvC,IACID,OAAO,CAACE,SAAS,CAACzB,QAAQ,CAAC,oBAAoB,CAAC,KAAAsB,qBAAA,GAChDC,OAAO,CAACG,aAAa,cAAAJ,qBAAA,eAArBA,qBAAA,CAAuBG,SAAS,CAACzB,QAAQ,CAAC,oBAAoB,CAAC,EACjE;MACEP,KAAK,CAACkC,cAAc,EAAE;MACtBlC,KAAK,CAACmC,eAAe,EAAE;IAC3B;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAC,gBAAS,EAAC,MAAM;IACZ9C,gBAAgB,CAACH,KAAK,CAAC;EAC3B,CAAC,EAAE,CAACG,gBAAgB,EAAEH,KAAK,CAAC,CAAC;EAE7B,IAAAiD,gBAAS,EAAC,MAAM;IACZnB,QAAQ,CAACoB,IAAI,CAACC,gBAAgB,CAAC,WAAW,EAAEV,sBAAsB,CAAC;IAEnE,OAAO,MAAM;MACTX,QAAQ,CAACoB,IAAI,CAACE,mBAAmB,CAAC,WAAW,EAAEX,sBAAsB,CAAC;IAC1E,CAAC;EACL,CAAC,EAAE,CAACA,sBAAsB,CAAC,CAAC;EAE5B,oBACI7E,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAClF,WAAA,CAAAmF,gBAAgB;IAAC1D,UAAU,EAAEA;EAAW,gBACrChC,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAAClF,WAAA,CAAAoF,sBAAsB;IACnBC,eAAe,EAAE,CAAC5D,UAAW;IAC7BC,OAAO,EAAEe,WAAY;IACrBb,WAAW,EAAEA,WAAY;IACzB0D,GAAG,EAAExD;EAAU,EACjB,eACFrC,MAAA,CAAAU,OAAA,CAAA+E,aAAA,CAACpF,iBAAA,CAAAK,OAAgB;IAACoF,QAAQ,EAAE5C;EAAkB,EAAG,CAClC;AAE3B,CAAC;AAEDpB,UAAU,CAACiE,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAEvBlE,UAAU;AAAAmE,OAAA,CAAAvF,OAAA,GAAAsF,QAAA"}

package/lib/components/emoji-picker/EmojiPicker.d.ts

@@ -1,5 +1,9 @@
 import { FC } from 'react';
 export type EmojiPickerProps = {
+    /**
+     * Function executed when an emoji is selected in the popup
+     * @param {string} emoji - Emoji that was selected
+     */
     onSelect: (emoji: string) => void;
 };
 declare const EmojiPicker: FC<EmojiPickerProps>;

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

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

package/lib/components/emoji-picker-popup/EmojiPickerPopup.d.ts

@@ -1,5 +1,14 @@
 import { FC } from 'react';
 export type EmojiPickerPopupProps = {
+    /**
+     * Function that is executed when the visibility of the popup changes.
+     * @param {boolean} isVisible - Whether the popup is visible or not
+     */
+    onPopupVisibilityChange?: (isVisible: boolean) => void;
+    /**
+     * Function executed when an emoji is selected in the popup
+     * @param {string} emoji - Emoji that was selected
+     */
     onSelect: (emoji: string) => void;
 };
 export type PopupPosition = {

package/lib/components/emoji-picker-popup/EmojiPickerPopup.js

@@ -16,6 +16,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const EmojiPickerPopup = _ref => {
   let {
+    onPopupVisibilityChange,
     onSelect
   } = _ref;
   const [alignment, setAlignment] = (0, _react.useState)(_alignment.PopupAlignment.TopLeft);
@@ -77,6 +78,11 @@ const EmojiPickerPopup = _ref => {
       window.removeEventListener('blur', handleHide);
     };
   }, [handleDocumentClick, handleHide, shouldShowPopup]);
+  (0, _react.useEffect)(() => {
+    if (typeof onPopupVisibilityChange === 'function') {
+      onPopupVisibilityChange(shouldShowPopup);
+    }
+  }, [onPopupVisibilityChange, shouldShowPopup]);
   const exitAndInitialY = alignment === _alignment.PopupAlignment.TopLeft || alignment === _alignment.PopupAlignment.TopRight ? -16 : 16;
   return /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.StyledEmojiPickerPopup, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
     initial: false

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerPopup.js","names":["_Icon","_interopRequireDefault","require","_framerMotion","_react","_interopRequireWildcard","_alignment","_EmojiPicker","_EmojiPicker2","_EmojiPickerPopup","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPickerPopup","_ref","onSelect","alignment","setAlignment","useState","PopupAlignment","TopLeft","shouldShowPopup","setShouldShowPopup","position","setPosition","contentRef","useRef","handleHide","useCallback","handleDocumentClick","event","_contentRef$current","current","contains","target","preventDefault","stopPropagation","handlePopupIconClick","height","left","top","width","currentTarget","getBoundingClientRect","newPosition","emojiPickerSize","BottomRight","BottomLeft","TopRight","useEffect","document","addEventListener","window","removeEventListener","exitAndInitialY","createElement","StyledEmojiPickerPopup","AnimatePresence","initial","StyledMotionEmojiPickerPopupContent","animate","opacity","y","exit","ref","style","transition","type","className","icons","onClick","size","displayName","_default","exports"],"sources":["../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import Icon from '@chayns-components/core/lib/components/icon/Icon';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { PopupAlignment } from '../../constants/alignment';\nimport EmojiPicker from '../emoji-picker/EmojiPicker';\nimport { emojiPickerSize } from '../emoji-picker/EmojiPicker.styles';\nimport {\n    StyledEmojiPickerPopup,\n    StyledMotionEmojiPickerPopupContent,\n} from './EmojiPickerPopup.styles';\n\nexport type EmojiPickerPopupProps = {\n    onSelect: (emoji: string) => void;\n};\n\nexport type PopupPosition = {\n    bottom?: number;\n    left?: number;\n    right?: number;\n    top?: number;\n};\n\nconst EmojiPickerPopup: FC<EmojiPickerPopupProps> = ({ onSelect }) => {\n    const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n    const [shouldShowPopup, setShouldShowPopup] = useState(false);\n    const [position, setPosition] = useState({} as PopupPosition);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const handleHide = useCallback(() => {\n        setShouldShowPopup(false);\n    }, []);\n\n    const handleDocumentClick = useCallback<EventListener>(\n        (event) => {\n            if (!contentRef.current?.contains(event.target as Node)) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                handleHide();\n            }\n        },\n        [handleHide]\n    );\n\n    const handlePopupIconClick = useCallback(\n        (event: MouseEvent<HTMLSpanElement>) => {\n            if (shouldShowPopup) {\n                setShouldShowPopup(false);\n\n                return;\n            }\n\n            const { height, left, top, width } = event.currentTarget.getBoundingClientRect();\n\n            const newPosition: PopupPosition = {};\n\n            if (top < emojiPickerSize.height + 16) {\n                newPosition.top = 12 + height;\n\n                if (left < emojiPickerSize.width + 16) {\n                    newPosition.left = -10;\n\n                    setAlignment(PopupAlignment.BottomRight);\n                } else {\n                    newPosition.left = 8 + width - emojiPickerSize.width;\n\n                    setAlignment(PopupAlignment.BottomLeft);\n                }\n            } else {\n                newPosition.top = -12 - emojiPickerSize.height;\n\n                if (left < emojiPickerSize.width + 16) {\n                    newPosition.left = -10;\n\n                    setAlignment(PopupAlignment.TopRight);\n                } else {\n                    newPosition.left = 8 + width - emojiPickerSize.width;\n\n                    setAlignment(PopupAlignment.TopLeft);\n                }\n            }\n\n            setPosition(newPosition);\n            setShouldShowPopup(true);\n        },\n        [shouldShowPopup]\n    );\n\n    useEffect(() => {\n        if (shouldShowPopup) {\n            document.addEventListener('click', handleDocumentClick, true);\n            window.addEventListener('blur', handleHide);\n        }\n\n        return () => {\n            document.removeEventListener('click', handleDocumentClick, true);\n            window.removeEventListener('blur', handleHide);\n        };\n    }, [handleDocumentClick, handleHide, shouldShowPopup]);\n\n    const exitAndInitialY =\n        alignment === PopupAlignment.TopLeft || alignment === PopupAlignment.TopRight ? -16 : 16;\n\n    return (\n        <StyledEmojiPickerPopup>\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <StyledMotionEmojiPickerPopupContent\n                        alignment={alignment}\n                        animate={{ opacity: 1, y: 0 }}\n                        exit={{ opacity: 0, y: exitAndInitialY }}\n                        initial={{ opacity: 0, y: exitAndInitialY }}\n                        key=\"emojiPickerPopupContent\"\n                        ref={contentRef}\n                        style={position}\n                        transition={{ type: 'tween' }}\n                    >\n                        <EmojiPicker onSelect={onSelect} />\n                    </StyledMotionEmojiPickerPopupContent>\n                )}\n            </AnimatePresence>\n            <Icon\n                className=\"prevent-lose-focus\"\n                icons={['far fa-smile']}\n                onClick={handlePopupIconClick}\n                size={18}\n            />\n        </StyledEmojiPickerPopup>\n    );\n};\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":"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"}
+{"version":3,"file":"EmojiPickerPopup.js","names":["_Icon","_interopRequireDefault","require","_framerMotion","_react","_interopRequireWildcard","_alignment","_EmojiPicker","_EmojiPicker2","_EmojiPickerPopup","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPickerPopup","_ref","onPopupVisibilityChange","onSelect","alignment","setAlignment","useState","PopupAlignment","TopLeft","shouldShowPopup","setShouldShowPopup","position","setPosition","contentRef","useRef","handleHide","useCallback","handleDocumentClick","event","_contentRef$current","current","contains","target","preventDefault","stopPropagation","handlePopupIconClick","height","left","top","width","currentTarget","getBoundingClientRect","newPosition","emojiPickerSize","BottomRight","BottomLeft","TopRight","useEffect","document","addEventListener","window","removeEventListener","exitAndInitialY","createElement","StyledEmojiPickerPopup","AnimatePresence","initial","StyledMotionEmojiPickerPopupContent","animate","opacity","y","exit","ref","style","transition","type","className","icons","onClick","size","displayName","_default","exports"],"sources":["../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import Icon from '@chayns-components/core/lib/components/icon/Icon';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { PopupAlignment } from '../../constants/alignment';\nimport EmojiPicker from '../emoji-picker/EmojiPicker';\nimport { emojiPickerSize } from '../emoji-picker/EmojiPicker.styles';\nimport {\n    StyledEmojiPickerPopup,\n    StyledMotionEmojiPickerPopupContent,\n} from './EmojiPickerPopup.styles';\n\nexport type EmojiPickerPopupProps = {\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     * Function executed when an emoji is selected in the popup\n     * @param {string} emoji - Emoji that was selected\n     */\n    onSelect: (emoji: string) => void;\n};\n\nexport type PopupPosition = {\n    bottom?: number;\n    left?: number;\n    right?: number;\n    top?: number;\n};\n\nconst EmojiPickerPopup: FC<EmojiPickerPopupProps> = ({ onPopupVisibilityChange, onSelect }) => {\n    const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n    const [shouldShowPopup, setShouldShowPopup] = useState(false);\n    const [position, setPosition] = useState({} as PopupPosition);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const handleHide = useCallback(() => {\n        setShouldShowPopup(false);\n    }, []);\n\n    const handleDocumentClick = useCallback<EventListener>(\n        (event) => {\n            if (!contentRef.current?.contains(event.target as Node)) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                handleHide();\n            }\n        },\n        [handleHide]\n    );\n\n    const handlePopupIconClick = useCallback(\n        (event: MouseEvent<HTMLSpanElement>) => {\n            if (shouldShowPopup) {\n                setShouldShowPopup(false);\n\n                return;\n            }\n\n            const { height, left, top, width } = event.currentTarget.getBoundingClientRect();\n\n            const newPosition: PopupPosition = {};\n\n            if (top < emojiPickerSize.height + 16) {\n                newPosition.top = 12 + height;\n\n                if (left < emojiPickerSize.width + 16) {\n                    newPosition.left = -10;\n\n                    setAlignment(PopupAlignment.BottomRight);\n                } else {\n                    newPosition.left = 8 + width - emojiPickerSize.width;\n\n                    setAlignment(PopupAlignment.BottomLeft);\n                }\n            } else {\n                newPosition.top = -12 - emojiPickerSize.height;\n\n                if (left < emojiPickerSize.width + 16) {\n                    newPosition.left = -10;\n\n                    setAlignment(PopupAlignment.TopRight);\n                } else {\n                    newPosition.left = 8 + width - emojiPickerSize.width;\n\n                    setAlignment(PopupAlignment.TopLeft);\n                }\n            }\n\n            setPosition(newPosition);\n            setShouldShowPopup(true);\n        },\n        [shouldShowPopup]\n    );\n\n    useEffect(() => {\n        if (shouldShowPopup) {\n            document.addEventListener('click', handleDocumentClick, true);\n            window.addEventListener('blur', handleHide);\n        }\n\n        return () => {\n            document.removeEventListener('click', handleDocumentClick, true);\n            window.removeEventListener('blur', handleHide);\n        };\n    }, [handleDocumentClick, handleHide, shouldShowPopup]);\n\n    useEffect(() => {\n        if (typeof onPopupVisibilityChange === 'function') {\n            onPopupVisibilityChange(shouldShowPopup);\n        }\n    }, [onPopupVisibilityChange, shouldShowPopup]);\n\n    const exitAndInitialY =\n        alignment === PopupAlignment.TopLeft || alignment === PopupAlignment.TopRight ? -16 : 16;\n\n    return (\n        <StyledEmojiPickerPopup>\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <StyledMotionEmojiPickerPopupContent\n                        alignment={alignment}\n                        animate={{ opacity: 1, y: 0 }}\n                        exit={{ opacity: 0, y: exitAndInitialY }}\n                        initial={{ opacity: 0, y: exitAndInitialY }}\n                        key=\"emojiPickerPopupContent\"\n                        ref={contentRef}\n                        style={position}\n                        transition={{ type: 'tween' }}\n                    >\n                        <EmojiPicker onSelect={onSelect} />\n                    </StyledMotionEmojiPickerPopupContent>\n                )}\n            </AnimatePresence>\n            <Icon\n                className=\"prevent-lose-focus\"\n                icons={['far fa-smile']}\n                onClick={handlePopupIconClick}\n                size={18}\n            />\n        </StyledEmojiPickerPopup>\n    );\n};\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":"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"}