@chayns-components/emoji-input 5.0.0-beta.89 → 5.0.0-beta.91

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

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _emoji = require("../../utils/emoji");
 var _environment = require("../../utils/environment");
 var _font = require("../../utils/font");
+var _insert = require("../../utils/insert");
 var _selection = require("../../utils/selection");
 var _EmojiPickerPopup = _interopRequireDefault(require("../emoji-picker-popup/EmojiPickerPopup"));
 var _EmojiInput = require("./EmojiInput.styles");
@@ -66,55 +67,41 @@ const EmojiInput = _ref => {
   }, [handleUpdateText, onInput]);
 
   /**
-   * This function processes the selection of an emoji via the popup. If the 'contentEditable'
-   * element has the focus, the new emoji is inserted at the cursor position. If not, the emoji
-   * will be appended to the back of the input field content.
-   *
-   * In addition, this function also sets the cursor to the correct position when the input field
-   * has the focus. For this purpose, the current position of the cursor or a selection is read to
-   * calculate the cursor position after inserting the emoji.
+   * This function prevents formatting from being adopted when texts are inserted. To do this, the
+   * plain text is read from the event after the default behavior has been prevented. The plain
+   * text is then inserted at the correct position in the input field using the
+   * 'insertTextAtCursorPosition' function.
+   */
+  const handlePaste = (0, _react.useCallback)(event => {
+    if (editorRef.current) {
+      event.preventDefault();
+      const text = event.clipboardData.getData('text/plain');
+      (0, _insert.insertTextAtCursorPosition)({
+        editorElement: editorRef.current,
+        text
+      });
+    }
+  }, []);
+
+  /**
+   * This function uses the 'insertTextAtCursorPosition' function to insert the emoji at the
+   * correct position in the editor element.
    *
    * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,
    * which in turn executes the 'onInput' function from the props. So this serves to ensure that
    * the event is also passed through to the top when inserting via the popup.
    */
   const handlePopupSelect = (0, _react.useCallback)(emoji => {
-    if (!editorRef.current) {
-      return;
-    }
-    const selection = window.getSelection();
-    if (selection !== null && selection !== void 0 && selection.anchorNode && editorRef.current.contains(selection.anchorNode)) {
-      const {
-        endOffset,
-        startOffset
-      } = selection.getRangeAt(0);
-      const rangeDistance = endOffset - startOffset;
-      let offset = endOffset + emoji.length - rangeDistance;
-      let {
-        anchorNode
-      } = selection;
-      if (anchorNode.nodeValue) {
-        anchorNode.nodeValue = anchorNode.nodeValue.substring(0, startOffset) + emoji + anchorNode.nodeValue.substring(endOffset);
-      } else if (anchorNode === editorRef.current) {
-        const newTextNode = document.createTextNode(emoji);
-        editorRef.current.appendChild(newTextNode);
-        anchorNode = newTextNode;
-      }
-      const newRange = document.createRange();
-      if (anchorNode.nodeValue) {
-        offset = Math.min(offset, anchorNode.nodeValue.length);
-      }
-      newRange.setStart(anchorNode, offset);
-      newRange.setEnd(anchorNode, offset);
-      selection.removeAllRanges();
-      selection.addRange(newRange);
-    } else {
-      editorRef.current.innerText += emoji;
+    if (editorRef.current) {
+      (0, _insert.insertTextAtCursorPosition)({
+        editorElement: editorRef.current,
+        text: emoji
+      });
+      const event = new Event('input', {
+        bubbles: true
+      });
+      editorRef.current.dispatchEvent(event);
     }
-    const event = new Event('input', {
-      bubbles: true
-    });
-    editorRef.current.dispatchEvent(event);
   }, []);
 
   /**
@@ -151,6 +138,7 @@ const EmojiInput = _ref => {
     isMobile: isMobile,
     onInput: handleInput,
     onKeyDown: onKeyDown,
+    onPaste: handlePaste,
     placeholder: placeholder,
     ref: editorRef,
     rootFontFamily: rootFontFamily

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiInput.js","names":["_react","_interopRequireWildcard","require","_emoji","_environment","_font","_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","accessToken","isDisabled","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","value","isMobile","useState","getIsMobile","rootFontFamily","getRootFontFamily","editorRef","useRef","handleUpdateText","useCallback","text","current","newInnerText","convertAsciiToUnicode","innerText","saveSelection","restoreSelection","handleInput","event","handlePopupSelect","emoji","selection","window","getSelection","anchorNode","contains","endOffset","startOffset","getRangeAt","rangeDistance","offset","length","nodeValue","substring","newTextNode","document","createTextNode","appendChild","newRange","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","StyledEmojiInputContent","isRightElementGiven","StyledEmojiInputEditor","contentEditable","ref","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertAsciiToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { getRootFontFamily } from '../../utils/font';\nimport { restoreSelection, saveSelection } from '../../utils/selection';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport {\n    StyledEmojiInput,\n    StyledEmojiInputContent,\n    StyledEmojiInputEditor,\n    StyledEmojiInputRightWrapper,\n} from './EmojiInput.styles';\n\nexport type EmojiInputProps = {\n    /**\n     * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    accessToken?: string;\n    /**\n     * 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 a key is pressed down.\n     */\n    onKeyDown?: KeyboardEventHandler<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     * 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;\n    /**\n     * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n     * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n     * value.\n     */\n    popupAlignment?: PopupAlignment;\n    /**\n     * Element that is rendered inside the EmojiInput on the right side.\n     */\n    rightElement?: ReactNode;\n    /**\n     * Value of the input field\n     */\n    value: string;\n};\n\nconst EmojiInput: FC<EmojiInputProps> = ({\n    accessToken,\n    isDisabled,\n    onInput,\n    onKeyDown,\n    onPopupVisibilityChange,\n    personId,\n    placeholder,\n    popupAlignment,\n    rightElement,\n    value,\n}) => {\n    const [isMobile] = useState(getIsMobile());\n    const [rootFontFamily] = useState(getRootFontFamily());\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 newInnerText = convertAsciiToUnicode(text);\n\n        if (newInnerText !== editorRef.current.innerText) {\n            saveSelection(editorRef.current);\n\n            editorRef.current.innerText = newInnerText;\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.innerText);\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            let { anchorNode } = selection;\n\n            if (anchorNode.nodeValue) {\n                anchorNode.nodeValue =\n                    anchorNode.nodeValue.substring(0, startOffset) +\n                    emoji +\n                    anchorNode.nodeValue.substring(endOffset);\n            } else if (anchorNode === editorRef.current) {\n                const newTextNode = document.createTextNode(emoji);\n\n                editorRef.current.appendChild(newTextNode);\n\n                anchorNode = newTextNode;\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.innerText += 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            <StyledEmojiInputContent isRightElementGiven={!!rightElement}>\n                <StyledEmojiInputEditor\n                    contentEditable={!isDisabled}\n                    isMobile={isMobile}\n                    onInput={handleInput}\n                    onKeyDown={onKeyDown}\n                    placeholder={placeholder}\n                    ref={editorRef}\n                    rootFontFamily={rootFontFamily}\n                />\n                {!isMobile && (\n                    <EmojiPickerPopup\n                        accessToken={accessToken}\n                        alignment={popupAlignment}\n                        onSelect={handlePopupSelect}\n                        onPopupVisibilityChange={onPopupVisibilityChange}\n                        personId={personId}\n                    />\n                )}\n            </StyledEmojiInputContent>\n            {rightElement && (\n                <StyledEmojiInputRightWrapper>{rightElement}</StyledEmojiInputRightWrapper>\n            )}\n        </StyledEmojiInput>\n    );\n};\n\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAYA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAC,sBAAA,CAAAN,OAAA;AACA,IAAAO,WAAA,GAAAP,OAAA;AAK6B,SAAAM,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,SAAAb,wBAAAS,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;AAgD7B,MAAMW,UAA+B,GAAGC,IAAA,IAWlC;EAAA,IAXmC;IACrCC,WAAW;IACXC,UAAU;IACVC,OAAO;IACPC,SAAS;IACTC,uBAAuB;IACvBC,QAAQ;IACRC,WAAW;IACXC,cAAc;IACdC,YAAY;IACZC;EACJ,CAAC,GAAAV,IAAA;EACG,MAAM,CAACW,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAAC,IAAAC,wBAAW,GAAE,CAAC;EAC1C,MAAM,CAACC,cAAc,CAAC,GAAG,IAAAF,eAAQ,EAAC,IAAAG,uBAAiB,GAAE,CAAC;EAEtD,MAAMC,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,YAAY,GAAG,IAAAC,4BAAqB,EAACH,IAAI,CAAC;IAEhD,IAAIE,YAAY,KAAKN,SAAS,CAACK,OAAO,CAACG,SAAS,EAAE;MAC9C,IAAAC,wBAAa,EAACT,SAAS,CAACK,OAAO,CAAC;MAEhCL,SAAS,CAACK,OAAO,CAACG,SAAS,GAAGF,YAAY;MAE1C,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,OAAOrB,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACyB,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACV,gBAAgB,EAAEf,OAAO,CAAC,CAC9B;;EAED;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACI,MAAM0B,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,IAAI;QAAEL;MAAW,CAAC,GAAGH,SAAS;MAE9B,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,CAAC,MAAM,IAAIF,UAAU,KAAKlB,SAAS,CAACK,OAAO,EAAE;QACzC,MAAMuB,WAAW,GAAGC,QAAQ,CAACC,cAAc,CAAChB,KAAK,CAAC;QAElDd,SAAS,CAACK,OAAO,CAAC0B,WAAW,CAACH,WAAW,CAAC;QAE1CV,UAAU,GAAGU,WAAW;MAC5B;MAEA,MAAMI,QAAQ,GAAGH,QAAQ,CAACI,WAAW,EAAE;MAEvC,IAAIf,UAAU,CAACQ,SAAS,EAAE;QACtBF,MAAM,GAAGU,IAAI,CAACC,GAAG,CAACX,MAAM,EAAEN,UAAU,CAACQ,SAAS,CAACD,MAAM,CAAC;MAC1D;MAEAO,QAAQ,CAACI,QAAQ,CAAClB,UAAU,EAAEM,MAAM,CAAC;MACrCQ,QAAQ,CAACK,MAAM,CAACnB,UAAU,EAAEM,MAAM,CAAC;MAEnCT,SAAS,CAACuB,eAAe,EAAE;MAC3BvB,SAAS,CAACwB,QAAQ,CAACP,QAAQ,CAAC;IAChC,CAAC,MAAM;MACHhC,SAAS,CAACK,OAAO,CAACG,SAAS,IAAIM,KAAK;IACxC;IAEA,MAAMF,KAAK,GAAG,IAAI4B,KAAK,CAAC,OAAO,EAAE;MAAEC,OAAO,EAAE;IAAK,CAAC,CAAC;IAEnDzC,SAAS,CAACK,OAAO,CAACqC,aAAa,CAAC9B,KAAK,CAAC;EAC1C,CAAC,EAAE,EAAE,CAAC;;EAEN;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;EACI,MAAM+B,sBAAsB,GAAG,IAAAxC,kBAAW,EAAES,KAAiB,IAAK;IAAA,IAAAgC,qBAAA;IAC9D,MAAMC,OAAO,GAAGjC,KAAK,CAACkC,MAAiB;IAEvC,IACID,OAAO,CAACE,SAAS,CAAC5B,QAAQ,CAAC,oBAAoB,CAAC,KAAAyB,qBAAA,GAChDC,OAAO,CAACG,aAAa,cAAAJ,qBAAA,eAArBA,qBAAA,CAAuBG,SAAS,CAAC5B,QAAQ,CAAC,oBAAoB,CAAC,EACjE;MACEP,KAAK,CAACqC,cAAc,EAAE;MACtBrC,KAAK,CAACsC,eAAe,EAAE;IAC3B;EACJ,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAC,gBAAS,EAAC,MAAM;IACZjD,gBAAgB,CAACR,KAAK,CAAC;EAC3B,CAAC,EAAE,CAACQ,gBAAgB,EAAER,KAAK,CAAC,CAAC;EAE7B,IAAAyD,gBAAS,EAAC,MAAM;IACZtB,QAAQ,CAACuB,IAAI,CAACC,gBAAgB,CAAC,WAAW,EAAEV,sBAAsB,CAAC;IAEnE,OAAO,MAAM;MACTd,QAAQ,CAACuB,IAAI,CAACE,mBAAmB,CAAC,WAAW,EAAEX,sBAAsB,CAAC;IAC1E,CAAC;EACL,CAAC,EAAE,CAACA,sBAAsB,CAAC,CAAC;EAE5B,oBACI5F,MAAA,CAAAY,OAAA,CAAA4F,aAAA,CAAC/F,WAAA,CAAAgG,gBAAgB;IAACtE,UAAU,EAAEA;EAAW,gBACrCnC,MAAA,CAAAY,OAAA,CAAA4F,aAAA,CAAC/F,WAAA,CAAAiG,uBAAuB;IAACC,mBAAmB,EAAE,CAAC,CAACjE;EAAa,gBACzD1C,MAAA,CAAAY,OAAA,CAAA4F,aAAA,CAAC/F,WAAA,CAAAmG,sBAAsB;IACnBC,eAAe,EAAE,CAAC1E,UAAW;IAC7BS,QAAQ,EAAEA,QAAS;IACnBR,OAAO,EAAEwB,WAAY;IACrBvB,SAAS,EAAEA,SAAU;IACrBG,WAAW,EAAEA,WAAY;IACzBsE,GAAG,EAAE7D,SAAU;IACfF,cAAc,EAAEA;EAAe,EACjC,EACD,CAACH,QAAQ,iBACN5C,MAAA,CAAAY,OAAA,CAAA4F,aAAA,CAACjG,iBAAA,CAAAK,OAAgB;IACbsB,WAAW,EAAEA,WAAY;IACzB6E,SAAS,EAAEtE,cAAe;IAC1BuE,QAAQ,EAAElD,iBAAkB;IAC5BxB,uBAAuB,EAAEA,uBAAwB;IACjDC,QAAQ,EAAEA;EAAS,EAE1B,CACqB,EACzBG,YAAY,iBACT1C,MAAA,CAAAY,OAAA,CAAA4F,aAAA,CAAC/F,WAAA,CAAAwG,4BAA4B,QAAEvE,YAAY,CAC9C,CACc;AAE3B,CAAC;AAEDV,UAAU,CAACkF,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAEvBnF,UAAU;AAAAoF,OAAA,CAAAxG,OAAA,GAAAuG,QAAA"}
+{"version":3,"file":"EmojiInput.js","names":["_react","_interopRequireWildcard","require","_emoji","_environment","_font","_insert","_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","accessToken","isDisabled","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","value","isMobile","useState","getIsMobile","rootFontFamily","getRootFontFamily","editorRef","useRef","handleUpdateText","useCallback","text","current","newInnerText","convertAsciiToUnicode","innerText","saveSelection","restoreSelection","handleInput","event","handlePaste","preventDefault","clipboardData","getData","insertTextAtCursorPosition","editorElement","handlePopupSelect","emoji","Event","bubbles","dispatchEvent","handlePreventLoseFocus","_element$parentElemen","element","target","classList","contains","parentElement","stopPropagation","useEffect","document","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputContent","isRightElementGiven","StyledEmojiInputEditor","contentEditable","onPaste","ref","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    ClipboardEvent,\n    FC,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertAsciiToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { getRootFontFamily } from '../../utils/font';\nimport { insertTextAtCursorPosition } from '../../utils/insert';\nimport { restoreSelection, saveSelection } from '../../utils/selection';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport {\n    StyledEmojiInput,\n    StyledEmojiInputContent,\n    StyledEmojiInputEditor,\n    StyledEmojiInputRightWrapper,\n} from './EmojiInput.styles';\n\nexport type EmojiInputProps = {\n    /**\n     * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    accessToken?: string;\n    /**\n     * 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 a key is pressed down.\n     */\n    onKeyDown?: KeyboardEventHandler<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     * 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;\n    /**\n     * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n     * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n     * value.\n     */\n    popupAlignment?: PopupAlignment;\n    /**\n     * Element that is rendered inside the EmojiInput on the right side.\n     */\n    rightElement?: ReactNode;\n    /**\n     * Value of the input field\n     */\n    value: string;\n};\n\nconst EmojiInput: FC<EmojiInputProps> = ({\n    accessToken,\n    isDisabled,\n    onInput,\n    onKeyDown,\n    onPopupVisibilityChange,\n    personId,\n    placeholder,\n    popupAlignment,\n    rightElement,\n    value,\n}) => {\n    const [isMobile] = useState(getIsMobile());\n    const [rootFontFamily] = useState(getRootFontFamily());\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 newInnerText = convertAsciiToUnicode(text);\n\n        if (newInnerText !== editorRef.current.innerText) {\n            saveSelection(editorRef.current);\n\n            editorRef.current.innerText = newInnerText;\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.innerText);\n\n            if (typeof onInput === 'function') {\n                onInput(event);\n            }\n        },\n        [handleUpdateText, onInput]\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            const text = event.clipboardData.getData('text/plain');\n\n            insertTextAtCursorPosition({ editorElement: editorRef.current, text });\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    /**\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            <StyledEmojiInputContent isRightElementGiven={!!rightElement}>\n                <StyledEmojiInputEditor\n                    contentEditable={!isDisabled}\n                    isMobile={isMobile}\n                    onInput={handleInput}\n                    onKeyDown={onKeyDown}\n                    onPaste={handlePaste}\n                    placeholder={placeholder}\n                    ref={editorRef}\n                    rootFontFamily={rootFontFamily}\n                />\n                {!isMobile && (\n                    <EmojiPickerPopup\n                        accessToken={accessToken}\n                        alignment={popupAlignment}\n                        onSelect={handlePopupSelect}\n                        onPopupVisibilityChange={onPopupVisibilityChange}\n                        personId={personId}\n                    />\n                )}\n            </StyledEmojiInputContent>\n            {rightElement && (\n                <StyledEmojiInputRightWrapper>{rightElement}</StyledEmojiInputRightWrapper>\n            )}\n        </StyledEmojiInput>\n    );\n};\n\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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"}

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

@@ -95,6 +95,7 @@ const StyledEmojiInputEditor = _styledComponents.default.div`
   } = _ref8;
   return theme['006'];
 }};
+        pointer-events: none;
     }
 
     // Styles for custom scrollbar

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiInput.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledEmojiInput","styled","div","_ref","theme","_ref2","isDisabled","_ref3","exports","StyledEmojiInputContent","_ref4","isRightElementGiven","css","StyledEmojiInputEditor","_ref5","text","_ref6","isMobile","rootFontFamily","_ref7","placeholder","_ref8","_ref9","_ref10","StyledEmojiInputRightWrapper"],"sources":["../../../src/components/emoji-input/EmojiInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css } from 'styled-components';\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 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\n    ${({ isRightElementGiven }) =>\n        isRightElementGiven &&\n        css`\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right-width: 0;\n        `}\n`;\n\ntype StyledEmojiInputEditorProps = WithTheme<Pick<EmojiInputProps, 'placeholder'>> & {\n    isMobile: boolean;\n    rootFontFamily: string;\n};\n\nexport const StyledEmojiInputEditor = styled.div<StyledEmojiInputEditorProps>`\n    color: ${({ theme }: StyledEmojiInputEditorProps) => theme.text};\n    flex: 1 1 auto;\n    max-height: 210px;\n    overflow-y: scroll;\n    word-break: break-word;\n\n    ${({ isMobile, rootFontFamily }) => {\n        if (isMobile) {\n            return css`\n                font-family: ${rootFontFamily};\n            `;\n        }\n\n        return css`\n            font-family: ${rootFontFamily}, 'Noto Color Emoji';\n        `;\n    }}\n\n    &:empty:not(:focus):before {\n        content: '${({ placeholder }) => placeholder}';\n        color: ${({ theme }: StyledEmojiInputEditorProps) => theme['006']};\n    }\n\n    // Styles for custom scrollbar\n    ::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    ::-webkit-scrollbar-track {\n        background-color: transparent;\n    }\n\n    ::-webkit-scrollbar-button {\n        background-color: transparent;\n        height: 5px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        background-color: rgba(\n            ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n            0.15\n        );\n        border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n        scrollbar-color: rgba(\n                ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\n    }\n`;\n\nexport const StyledEmojiInputRightWrapper = styled.div`\n    align-self: stretch;\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    flex: 0 0 auto;\n    overflow: hidden;\n`;\n"],"mappings":"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"}
+{"version":3,"file":"EmojiInput.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledEmojiInput","styled","div","_ref","theme","_ref2","isDisabled","_ref3","exports","StyledEmojiInputContent","_ref4","isRightElementGiven","css","StyledEmojiInputEditor","_ref5","text","_ref6","isMobile","rootFontFamily","_ref7","placeholder","_ref8","_ref9","_ref10","StyledEmojiInputRightWrapper"],"sources":["../../../src/components/emoji-input/EmojiInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css } from 'styled-components';\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 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\n    ${({ isRightElementGiven }) =>\n        isRightElementGiven &&\n        css`\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right-width: 0;\n        `}\n`;\n\ntype StyledEmojiInputEditorProps = WithTheme<Pick<EmojiInputProps, 'placeholder'>> & {\n    isMobile: boolean;\n    rootFontFamily: string;\n};\n\nexport const StyledEmojiInputEditor = styled.div<StyledEmojiInputEditorProps>`\n    color: ${({ theme }: StyledEmojiInputEditorProps) => theme.text};\n    flex: 1 1 auto;\n    max-height: 210px;\n    overflow-y: scroll;\n    word-break: break-word;\n\n    ${({ isMobile, rootFontFamily }) => {\n        if (isMobile) {\n            return css`\n                font-family: ${rootFontFamily};\n            `;\n        }\n\n        return css`\n            font-family: ${rootFontFamily}, 'Noto Color Emoji';\n        `;\n    }}\n\n    &:empty:not(:focus):before {\n        content: '${({ placeholder }) => placeholder}';\n        color: ${({ theme }: StyledEmojiInputEditorProps) => theme['006']};\n        pointer-events: none;\n    }\n\n    // Styles for custom scrollbar\n    ::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    ::-webkit-scrollbar-track {\n        background-color: transparent;\n    }\n\n    ::-webkit-scrollbar-button {\n        background-color: transparent;\n        height: 5px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        background-color: rgba(\n            ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n            0.15\n        );\n        border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n        scrollbar-color: rgba(\n                ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\n    }\n`;\n\nexport const StyledEmojiInputRightWrapper = styled.div`\n    align-self: stretch;\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    flex: 0 0 auto;\n    overflow: hidden;\n`;\n"],"mappings":"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"}

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

@@ -29,7 +29,7 @@ const EmojiPicker = _ref => {
   const handleSearchChange = (0, _react.useCallback)(event => {
     setSearchString(event.target.value);
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_core.LazyMotionWrapper, null, /*#__PURE__*/_react.default.createElement(_EmojiPicker.StyledEmojiPicker, null, /*#__PURE__*/_react.default.createElement(_core.Input, {
+  return /*#__PURE__*/_react.default.createElement(_EmojiPicker.StyledEmojiPicker, null, /*#__PURE__*/_react.default.createElement(_core.Input, {
     onChange: handleSearchChange,
     placeholder: "Suchen",
     value: searchString
@@ -43,7 +43,7 @@ const EmojiPicker = _ref => {
     onSelect: handleCategorySelect,
     searchString: searchString,
     selectedCategory: selectedCategory
-  })));
+  }));
 };
 EmojiPicker.displayName = 'EmojiPicker';
 var _default = EmojiPicker;

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$","accessToken","onSelect","personId","searchString","setSearchString","useState","selectedCategory","setSelectedCategory","emojiCategories","slug","handleCategorySelect","useCallback","category","handleSearchChange","event","target","value","createElement","LazyMotionWrapper","StyledEmojiPicker","Input","onChange","placeholder","displayName","_default","exports"],"sources":["../../../src/components/emoji-picker/EmojiPicker.tsx"],"sourcesContent":["import { Input, LazyMotionWrapper } from '@chayns-components/core';\nimport React, { ChangeEvent, FC, useCallback, useState } from 'react';\nimport emojiCategories from 'unicode-emoji-json/data-by-group.json';\nimport type { Category } from '../../types/category';\nimport EmojiPickerCategories from './emoji-picker-categories/EmojiPickerCategories';\nimport EmojiPickerEmojis from './emoji-picker-emojis/EmojiPickerEmojis';\nimport { StyledEmojiPicker } from './EmojiPicker.styles';\n\nexport type EmojiPickerProps = {\n    /**\n     * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    accessToken?: string;\n    /**\n     * Function executed when an emoji is selected in the popup\n     * @param {string} emoji - Emoji that was selected\n     */\n    onSelect: (emoji: string) => void;\n    /**\n     * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    personId?: string;\n};\nconst EmojiPicker: FC<EmojiPickerProps> = ({ accessToken, onSelect, personId }) => {\n    const [searchString, setSearchString] = useState('');\n    const [selectedCategory, setSelectedCategory] = useState(emojiCategories[0]?.slug as Category);\n\n    const handleCategorySelect = useCallback((category: Category) => {\n        setSearchString('');\n        setSelectedCategory(category);\n    }, []);\n\n    const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n        setSearchString(event.target.value);\n    }, []);\n\n    return (\n        <LazyMotionWrapper>\n            <StyledEmojiPicker>\n                <Input onChange={handleSearchChange} placeholder=\"Suchen\" value={searchString} />\n                <EmojiPickerEmojis\n                    accessToken={accessToken}\n                    onSelect={onSelect}\n                    personId={personId}\n                    searchString={searchString}\n                    selectedCategory={selectedCategory}\n                />\n                <EmojiPickerCategories\n                    onSelect={handleCategorySelect}\n                    searchString={searchString}\n                    selectedCategory={selectedCategory}\n                />\n            </StyledEmojiPicker>\n        </LazyMotionWrapper>\n    );\n};\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,YAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAEA,IAAAK,sBAAA,GAAAD,sBAAA,CAAAJ,OAAA;AACA,IAAAM,kBAAA,GAAAF,sBAAA,CAAAJ,OAAA;AACA,IAAAO,YAAA,GAAAP,OAAA;AAAyD,SAAAI,uBAAAI,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,SAAAV,wBAAAM,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;AAiBzD,MAAMW,WAAiC,GAAGC,IAAA,IAAyC;EAAA,IAAAC,iBAAA;EAAA,IAAxC;IAAEC,WAAW;IAAEC,QAAQ;IAAEC;EAAS,CAAC,GAAAJ,IAAA;EAC1E,MAAM,CAACK,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAC,eAAQ,EAAC,EAAE,CAAC;EACpD,MAAM,CAACC,gBAAgB,EAAEC,mBAAmB,CAAC,GAAG,IAAAF,eAAQ,GAAAN,iBAAA,GAACS,oBAAe,CAAC,CAAC,CAAC,cAAAT,iBAAA,uBAAlBA,iBAAA,CAAoBU,IAAI,CAAa;EAE9F,MAAMC,oBAAoB,GAAG,IAAAC,kBAAW,EAAEC,QAAkB,IAAK;IAC7DR,eAAe,CAAC,EAAE,CAAC;IACnBG,mBAAmB,CAACK,QAAQ,CAAC;EACjC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,kBAAkB,GAAG,IAAAF,kBAAW,EAAEG,KAAoC,IAAK;IAC7EV,eAAe,CAACU,KAAK,CAACC,MAAM,CAACC,KAAK,CAAC;EACvC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACIhD,MAAA,CAAAS,OAAA,CAAAwC,aAAA,CAACnD,KAAA,CAAAoD,iBAAiB,qBACdlD,MAAA,CAAAS,OAAA,CAAAwC,aAAA,CAAC3C,YAAA,CAAA6C,iBAAiB,qBACdnD,MAAA,CAAAS,OAAA,CAAAwC,aAAA,CAACnD,KAAA,CAAAsD,KAAK;IAACC,QAAQ,EAAER,kBAAmB;IAACS,WAAW,EAAC,QAAQ;IAACN,KAAK,EAAEb;EAAa,EAAG,eACjFnC,MAAA,CAAAS,OAAA,CAAAwC,aAAA,CAAC5C,kBAAA,CAAAI,OAAiB;IACduB,WAAW,EAAEA,WAAY;IACzBC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBC,YAAY,EAAEA,YAAa;IAC3BG,gBAAgB,EAAEA;EAAiB,EACrC,eACFtC,MAAA,CAAAS,OAAA,CAAAwC,aAAA,CAAC7C,sBAAA,CAAAK,OAAqB;IAClBwB,QAAQ,EAAES,oBAAqB;IAC/BP,YAAY,EAAEA,YAAa;IAC3BG,gBAAgB,EAAEA;EAAiB,EACrC,CACc,CACJ;AAE5B,CAAC;AAEDT,WAAW,CAAC0B,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAEzB3B,WAAW;AAAA4B,OAAA,CAAAhD,OAAA,GAAA+C,QAAA"}
+{"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$","accessToken","onSelect","personId","searchString","setSearchString","useState","selectedCategory","setSelectedCategory","emojiCategories","slug","handleCategorySelect","useCallback","category","handleSearchChange","event","target","value","createElement","StyledEmojiPicker","Input","onChange","placeholder","displayName","_default","exports"],"sources":["../../../src/components/emoji-picker/EmojiPicker.tsx"],"sourcesContent":["import { Input } from '@chayns-components/core';\nimport React, { ChangeEvent, FC, useCallback, useState } from 'react';\nimport emojiCategories from 'unicode-emoji-json/data-by-group.json';\nimport type { Category } from '../../types/category';\nimport EmojiPickerCategories from './emoji-picker-categories/EmojiPickerCategories';\nimport EmojiPickerEmojis from './emoji-picker-emojis/EmojiPickerEmojis';\nimport { StyledEmojiPicker } from './EmojiPicker.styles';\n\nexport type EmojiPickerProps = {\n    /**\n     * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    accessToken?: string;\n    /**\n     * Function executed when an emoji is selected in the popup\n     * @param {string} emoji - Emoji that was selected\n     */\n    onSelect: (emoji: string) => void;\n    /**\n     * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    personId?: string;\n};\nconst EmojiPicker: FC<EmojiPickerProps> = ({ accessToken, onSelect, personId }) => {\n    const [searchString, setSearchString] = useState('');\n    const [selectedCategory, setSelectedCategory] = useState(emojiCategories[0]?.slug as Category);\n\n    const handleCategorySelect = useCallback((category: Category) => {\n        setSearchString('');\n        setSelectedCategory(category);\n    }, []);\n\n    const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n        setSearchString(event.target.value);\n    }, []);\n\n    return (\n        <StyledEmojiPicker>\n            <Input onChange={handleSearchChange} placeholder=\"Suchen\" value={searchString} />\n            <EmojiPickerEmojis\n                accessToken={accessToken}\n                onSelect={onSelect}\n                personId={personId}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n            <EmojiPickerCategories\n                onSelect={handleCategorySelect}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n        </StyledEmojiPicker>\n    );\n};\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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"}

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

@@ -17,7 +17,7 @@ const StyledEmojiPickerCategories = _styledComponents.default.div`
     width: 100%;
 `;
 exports.StyledEmojiPickerCategories = StyledEmojiPickerCategories;
-const StyledMotionEmojiPickerCategory = (0, _styledComponents.default)(_framerMotion.m.div)`
+const StyledMotionEmojiPickerCategory = (0, _styledComponents.default)(_framerMotion.motion.div)`
     cursor: pointer;
     font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;
     font-size: 20px;

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerCategories.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledEmojiPickerCategories","styled","div","exports","StyledMotionEmojiPickerCategory","m"],"sources":["../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.ts"],"sourcesContent":["import { m } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledEmojiPickerCategories = styled.div`\n    align-items: center;\n    border-top: 1px solid rgba(160, 160, 160, 0.3);\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: space-between;\n    padding-top: 10px;\n    width: 100%;\n`;\n\nexport const StyledMotionEmojiPickerCategory = styled(m.div)`\n    cursor: pointer;\n    font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;\n    font-size: 20px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,2BAA2B,GAAGC,yBAAM,CAACC,GAAI;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAH,2BAAA,GAAAA,2BAAA;AAEK,MAAMI,+BAA+B,GAAG,IAAAH,yBAAM,EAACI,eAAC,CAACH,GAAG,CAAE;AAC7D;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAC,+BAAA,GAAAA,+BAAA"}
+{"version":3,"file":"EmojiPickerCategories.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledEmojiPickerCategories","styled","div","exports","StyledMotionEmojiPickerCategory","motion"],"sources":["../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledEmojiPickerCategories = styled.div`\n    align-items: center;\n    border-top: 1px solid rgba(160, 160, 160, 0.3);\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: space-between;\n    padding-top: 10px;\n    width: 100%;\n`;\n\nexport const StyledMotionEmojiPickerCategory = styled(motion.div)`\n    cursor: pointer;\n    font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;\n    font-size: 20px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,2BAA2B,GAAGC,yBAAM,CAACC,GAAI;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAH,2BAAA,GAAAA,2BAAA;AAEK,MAAMI,+BAA+B,GAAG,IAAAH,yBAAM,EAACI,oBAAM,CAACH,GAAG,CAAE;AAClE;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAC,+BAAA,GAAAA,+BAAA"}

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

@@ -9,7 +9,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _alignment = require("../../../../../constants/alignment");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const StyledMotionSkinTonePopup = (0, _styledComponents.default)(_framerMotion.m.div)`
+const StyledMotionSkinTonePopup = (0, _styledComponents.default)(_framerMotion.motion.div)`
     z-index: 1;
 `;
 exports.StyledMotionSkinTonePopup = StyledMotionSkinTonePopup;

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

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

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

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _core = require("@chayns-components/core");
 var _Icon = _interopRequireDefault(require("@chayns-components/core/lib/components/icon/Icon"));
 var _framerMotion = require("framer-motion");
 var _react = _interopRequireWildcard(require("react"));
@@ -112,7 +111,7 @@ const EmojiPickerPopup = _ref => {
     }
   }, [onPopupVisibilityChange, shouldShowPopup]);
   const exitAndInitialY = internalAlignment === _alignment.PopupAlignment.TopLeft || internalAlignment === _alignment.PopupAlignment.TopRight ? -16 : 16;
-  return /*#__PURE__*/_react.default.createElement(_core.LazyMotionWrapper, null, /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.StyledEmojiPickerPopup, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+  return /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.StyledEmojiPickerPopup, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
     initial: false
   }, shouldShowPopup && /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.StyledMotionEmojiPickerPopupContent, {
     alignment: internalAlignment,
@@ -143,7 +142,7 @@ const EmojiPickerPopup = _ref => {
     icons: ['far fa-smile'],
     onClick: handlePopupIconClick,
     size: 18
-  })));
+  }));
 };
 EmojiPickerPopup.displayName = 'EmojiPickerPopup';
 var _default = EmojiPickerPopup;

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerPopup.js","names":["_core","require","_Icon","_interopRequireDefault","_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","accessToken","alignment","onPopupVisibilityChange","onSelect","personId","internalAlignment","setInternalAlignment","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","newInternalAlignment","emojiPickerSize","BottomRight","BottomLeft","TopRight","newPosition","useEffect","document","addEventListener","window","removeEventListener","exitAndInitialY","createElement","LazyMotionWrapper","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 { LazyMotionWrapper } from '@chayns-components/core';\nimport 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     * 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 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    alignment?: PopupAlignment;\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     * 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> = ({\n    accessToken,\n    alignment,\n    onPopupVisibilityChange,\n    onSelect,\n    personId,\n}) => {\n    const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n        PopupAlignment.TopLeft\n    );\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            let newInternalAlignment: PopupAlignment | undefined = alignment;\n\n            if (typeof newInternalAlignment !== 'number') {\n                if (top < emojiPickerSize.height + 16) {\n                    if (left < emojiPickerSize.width + 16) {\n                        newInternalAlignment = PopupAlignment.BottomRight;\n                    } else {\n                        newInternalAlignment = PopupAlignment.BottomLeft;\n                    }\n                } else if (left < emojiPickerSize.width + 16) {\n                    newInternalAlignment = PopupAlignment.TopRight;\n                } else {\n                    newInternalAlignment = PopupAlignment.TopLeft;\n                }\n            }\n\n            let newPosition: PopupPosition = {};\n\n            switch (newInternalAlignment) {\n                case PopupAlignment.BottomLeft:\n                    newPosition = { left: 8 + width - emojiPickerSize.width, top: 12 + height };\n                    break;\n                case PopupAlignment.BottomRight:\n                    newPosition = { left: -10, top: 12 + height };\n                    break;\n                case PopupAlignment.TopLeft:\n                    newPosition = {\n                        left: 8 + width - emojiPickerSize.width,\n                        top: -12 - emojiPickerSize.height,\n                    };\n                    break;\n                case PopupAlignment.TopRight:\n                    newPosition = { left: -10, top: -12 - emojiPickerSize.height };\n                    break;\n                default:\n                    break;\n            }\n\n            setInternalAlignment(newInternalAlignment);\n            setPosition(newPosition);\n            setShouldShowPopup(true);\n        },\n        [alignment, 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        internalAlignment === PopupAlignment.TopLeft ||\n        internalAlignment === PopupAlignment.TopRight\n            ? -16\n            : 16;\n\n    return (\n        <LazyMotionWrapper>\n            <StyledEmojiPickerPopup>\n                <AnimatePresence initial={false}>\n                    {shouldShowPopup && (\n                        <StyledMotionEmojiPickerPopupContent\n                            alignment={internalAlignment}\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\n                                accessToken={accessToken}\n                                onSelect={onSelect}\n                                personId={personId}\n                            />\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        </LazyMotionWrapper>\n    );\n};\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAC,uBAAA,CAAAL,OAAA;AACA,IAAAM,UAAA,GAAAN,OAAA;AACA,IAAAO,YAAA,GAAAL,sBAAA,CAAAF,OAAA;AACA,IAAAQ,aAAA,GAAAR,OAAA;AACA,IAAAS,iBAAA,GAAAT,OAAA;AAGmC,SAAAU,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,SAAAN,wBAAAU,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,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,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAAA,SAAAnB,uBAAAa,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAoCnC,MAAMiB,gBAA2C,GAAGC,IAAA,IAM9C;EAAA,IAN+C;IACjDC,WAAW;IACXC,SAAS;IACTC,uBAAuB;IACvBC,QAAQ;IACRC;EACJ,CAAC,GAAAL,IAAA;EACG,MAAM,CAACM,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAC,eAAQ,EACtDC,yBAAc,CAACC,OAAO,CACzB;EACD,MAAM,CAACC,eAAe,EAAEC,kBAAkB,CAAC,GAAG,IAAAJ,eAAQ,EAAC,KAAK,CAAC;EAC7D,MAAM,CAACK,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAN,eAAQ,EAAC,CAAC,CAAC,CAAkB;EAE7D,MAAMO,UAAU,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAE/C,MAAMC,UAAU,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACjCN,kBAAkB,CAAC,KAAK,CAAC;EAC7B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMO,mBAAmB,GAAG,IAAAD,kBAAW,EAClCE,KAAK,IAAK;IAAA,IAAAC,mBAAA;IACP,IAAI,GAAAA,mBAAA,GAACN,UAAU,CAACO,OAAO,cAAAD,mBAAA,eAAlBA,mBAAA,CAAoBE,QAAQ,CAACH,KAAK,CAACI,MAAM,CAAS,GAAE;MACrDJ,KAAK,CAACK,cAAc,EAAE;MACtBL,KAAK,CAACM,eAAe,EAAE;MAEvBT,UAAU,EAAE;IAChB;EACJ,CAAC,EACD,CAACA,UAAU,CAAC,CACf;EAED,MAAMU,oBAAoB,GAAG,IAAAT,kBAAW,EACnCE,KAAkC,IAAK;IACpC,IAAIT,eAAe,EAAE;MACjBC,kBAAkB,CAAC,KAAK,CAAC;MAEzB;IACJ;IAEA,MAAM;MAAEgB,MAAM;MAAEC,IAAI;MAAEC,GAAG;MAAEC;IAAM,CAAC,GAAGX,KAAK,CAACY,aAAa,CAACC,qBAAqB,EAAE;IAEhF,IAAIC,oBAAgD,GAAGhC,SAAS;IAEhE,IAAI,OAAOgC,oBAAoB,KAAK,QAAQ,EAAE;MAC1C,IAAIJ,GAAG,GAAGK,6BAAe,CAACP,MAAM,GAAG,EAAE,EAAE;QACnC,IAAIC,IAAI,GAAGM,6BAAe,CAACJ,KAAK,GAAG,EAAE,EAAE;UACnCG,oBAAoB,GAAGzB,yBAAc,CAAC2B,WAAW;QACrD,CAAC,MAAM;UACHF,oBAAoB,GAAGzB,yBAAc,CAAC4B,UAAU;QACpD;MACJ,CAAC,MAAM,IAAIR,IAAI,GAAGM,6BAAe,CAACJ,KAAK,GAAG,EAAE,EAAE;QAC1CG,oBAAoB,GAAGzB,yBAAc,CAAC6B,QAAQ;MAClD,CAAC,MAAM;QACHJ,oBAAoB,GAAGzB,yBAAc,CAACC,OAAO;MACjD;IACJ;IAEA,IAAI6B,WAA0B,GAAG,CAAC,CAAC;IAEnC,QAAQL,oBAAoB;MACxB,KAAKzB,yBAAc,CAAC4B,UAAU;QAC1BE,WAAW,GAAG;UAAEV,IAAI,EAAE,CAAC,GAAGE,KAAK,GAAGI,6BAAe,CAACJ,KAAK;UAAED,GAAG,EAAE,EAAE,GAAGF;QAAO,CAAC;QAC3E;MACJ,KAAKnB,yBAAc,CAAC2B,WAAW;QAC3BG,WAAW,GAAG;UAAEV,IAAI,EAAE,CAAC,EAAE;UAAEC,GAAG,EAAE,EAAE,GAAGF;QAAO,CAAC;QAC7C;MACJ,KAAKnB,yBAAc,CAACC,OAAO;QACvB6B,WAAW,GAAG;UACVV,IAAI,EAAE,CAAC,GAAGE,KAAK,GAAGI,6BAAe,CAACJ,KAAK;UACvCD,GAAG,EAAE,CAAC,EAAE,GAAGK,6BAAe,CAACP;QAC/B,CAAC;QACD;MACJ,KAAKnB,yBAAc,CAAC6B,QAAQ;QACxBC,WAAW,GAAG;UAAEV,IAAI,EAAE,CAAC,EAAE;UAAEC,GAAG,EAAE,CAAC,EAAE,GAAGK,6BAAe,CAACP;QAAO,CAAC;QAC9D;MACJ;QACI;IAAM;IAGdrB,oBAAoB,CAAC2B,oBAAoB,CAAC;IAC1CpB,WAAW,CAACyB,WAAW,CAAC;IACxB3B,kBAAkB,CAAC,IAAI,CAAC;EAC5B,CAAC,EACD,CAACV,SAAS,EAAES,eAAe,CAAC,CAC/B;EAED,IAAA6B,gBAAS,EAAC,MAAM;IACZ,IAAI7B,eAAe,EAAE;MACjB8B,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEvB,mBAAmB,EAAE,IAAI,CAAC;MAC7DwB,MAAM,CAACD,gBAAgB,CAAC,MAAM,EAAEzB,UAAU,CAAC;IAC/C;IAEA,OAAO,MAAM;MACTwB,QAAQ,CAACG,mBAAmB,CAAC,OAAO,EAAEzB,mBAAmB,EAAE,IAAI,CAAC;MAChEwB,MAAM,CAACC,mBAAmB,CAAC,MAAM,EAAE3B,UAAU,CAAC;IAClD,CAAC;EACL,CAAC,EAAE,CAACE,mBAAmB,EAAEF,UAAU,EAAEN,eAAe,CAAC,CAAC;EAEtD,IAAA6B,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAOrC,uBAAuB,KAAK,UAAU,EAAE;MAC/CA,uBAAuB,CAACQ,eAAe,CAAC;IAC5C;EACJ,CAAC,EAAE,CAACR,uBAAuB,EAAEQ,eAAe,CAAC,CAAC;EAE9C,MAAMkC,eAAe,GACjBvC,iBAAiB,KAAKG,yBAAc,CAACC,OAAO,IAC5CJ,iBAAiB,KAAKG,yBAAc,CAAC6B,QAAQ,GACvC,CAAC,EAAE,GACH,EAAE;EAEZ,oBACInE,MAAA,CAAAa,OAAA,CAAA8D,aAAA,CAAChF,KAAA,CAAAiF,iBAAiB,qBACd5E,MAAA,CAAAa,OAAA,CAAA8D,aAAA,CAACtE,iBAAA,CAAAwE,sBAAsB,qBACnB7E,MAAA,CAAAa,OAAA,CAAA8D,aAAA,CAAC5E,aAAA,CAAA+E,eAAe;IAACC,OAAO,EAAE;EAAM,GAC3BvC,eAAe,iBACZxC,MAAA,CAAAa,OAAA,CAAA8D,aAAA,CAACtE,iBAAA,CAAA2E,mCAAmC;IAChCjD,SAAS,EAAEI,iBAAkB;IAC7B8C,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAET;IAAgB,CAAE;IACzCK,OAAO,EAAE;MAAEG,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAET;IAAgB,CAAE;IAC5CpD,GAAG,EAAC,yBAAyB;IAC7B+D,GAAG,EAAEzC,UAAW;IAChB0C,KAAK,EAAE5C,QAAS;IAChB6C,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBAE9BxF,MAAA,CAAAa,OAAA,CAAA8D,aAAA,CAACxE,YAAA,CAAAU,OAAW;IACRiB,WAAW,EAAEA,WAAY;IACzBG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA;EAAS,EACrB,CAET,CACa,eAClBlC,MAAA,CAAAa,OAAA,CAAA8D,aAAA,CAAC9E,KAAA,CAAAgB,OAAI;IACD4E,SAAS,EAAC,oBAAoB;IAC9BC,KAAK,EAAE,CAAC,cAAc,CAAE;IACxBC,OAAO,EAAEnC,oBAAqB;IAC9BoC,IAAI,EAAE;EAAG,EACX,CACmB,CACT;AAE5B,CAAC;AAEDhE,gBAAgB,CAACiE,WAAW,GAAG,kBAAkB;AAAC,IAAAC,QAAA,GAEnClE,gBAAgB;AAAAmE,OAAA,CAAAlF,OAAA,GAAAiF,QAAA"}
+{"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","accessToken","alignment","onPopupVisibilityChange","onSelect","personId","internalAlignment","setInternalAlignment","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","newInternalAlignment","emojiPickerSize","BottomRight","BottomLeft","TopRight","newPosition","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     * 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 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    alignment?: PopupAlignment;\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     * 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> = ({\n    accessToken,\n    alignment,\n    onPopupVisibilityChange,\n    onSelect,\n    personId,\n}) => {\n    const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n        PopupAlignment.TopLeft\n    );\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            let newInternalAlignment: PopupAlignment | undefined = alignment;\n\n            if (typeof newInternalAlignment !== 'number') {\n                if (top < emojiPickerSize.height + 16) {\n                    if (left < emojiPickerSize.width + 16) {\n                        newInternalAlignment = PopupAlignment.BottomRight;\n                    } else {\n                        newInternalAlignment = PopupAlignment.BottomLeft;\n                    }\n                } else if (left < emojiPickerSize.width + 16) {\n                    newInternalAlignment = PopupAlignment.TopRight;\n                } else {\n                    newInternalAlignment = PopupAlignment.TopLeft;\n                }\n            }\n\n            let newPosition: PopupPosition = {};\n\n            switch (newInternalAlignment) {\n                case PopupAlignment.BottomLeft:\n                    newPosition = { left: 8 + width - emojiPickerSize.width, top: 12 + height };\n                    break;\n                case PopupAlignment.BottomRight:\n                    newPosition = { left: -10, top: 12 + height };\n                    break;\n                case PopupAlignment.TopLeft:\n                    newPosition = {\n                        left: 8 + width - emojiPickerSize.width,\n                        top: -12 - emojiPickerSize.height,\n                    };\n                    break;\n                case PopupAlignment.TopRight:\n                    newPosition = { left: -10, top: -12 - emojiPickerSize.height };\n                    break;\n                default:\n                    break;\n            }\n\n            setInternalAlignment(newInternalAlignment);\n            setPosition(newPosition);\n            setShouldShowPopup(true);\n        },\n        [alignment, 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        internalAlignment === PopupAlignment.TopLeft ||\n        internalAlignment === PopupAlignment.TopRight\n            ? -16\n            : 16;\n\n    return (\n        <StyledEmojiPickerPopup>\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <StyledMotionEmojiPickerPopupContent\n                        alignment={internalAlignment}\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\n                            accessToken={accessToken}\n                            onSelect={onSelect}\n                            personId={personId}\n                        />\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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"}

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

@@ -16,7 +16,7 @@ const StyledEmojiPickerPopup = _styledComponents.default.div`
     position: relative;
 `;
 exports.StyledEmojiPickerPopup = StyledEmojiPickerPopup;
-const StyledMotionEmojiPickerPopupContent = (0, _styledComponents.default)(_framerMotion.m.div)`
+const StyledMotionEmojiPickerPopupContent = (0, _styledComponents.default)(_framerMotion.motion.div)`
     background-color: ${_ref => {
   let {
     theme

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerPopup.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_alignment","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledEmojiPickerPopup","styled","div","getComputedStyle","document","body","getPropertyValue","exports","StyledMotionEmojiPickerPopupContent","m","_ref","theme","_ref2","text","_ref3","alignment","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined"],"sources":["../../../src/components/emoji-picker-popup/EmojiPickerPopup.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { m } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../constants/alignment';\n\nexport const StyledEmojiPickerPopup = styled.div`\n    align-items: center;\n    display: flex;\n    height: ${() => getComputedStyle(document.body).getPropertyValue('line-height')};\n    position: relative;\n`;\n\ntype StyledMotionEmojiPickerPopupContentProps = WithTheme<{\n    alignment: PopupAlignment;\n}>;\n\nexport const StyledMotionEmojiPickerPopupContent = styled(\n    m.div\n)<StyledMotionEmojiPickerPopupContentProps>`\n    background-color: ${({ theme }: StyledMotionEmojiPickerPopupContentProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionEmojiPickerPopupContentProps) => theme.text};\n    position: absolute;\n    z-index: 0;\n\n    ::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-bottom-right-radius: 3px;\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ alignment }) => {\n            switch (alignment) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: 12px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: 12px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: 12px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: 12px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    ::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAA2D,SAAAI,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,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,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,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAEpD,MAAMW,sBAAsB,GAAGC,yBAAM,CAACC,GAAI;AACjD;AACA;AACA,cAAc,MAAMC,gBAAgB,CAACC,QAAQ,CAACC,IAAI,CAAC,CAACC,gBAAgB,CAAC,aAAa,CAAE;AACpF;AACA,CAAC;AAACC,OAAA,CAAAP,sBAAA,GAAAA,sBAAA;AAMK,MAAMQ,mCAAmC,GAAG,IAAAP,yBAAM,EACrDQ,eAAC,CAACP,GAAG,CACmC;AAC5C,wBAAwBQ,IAAA;EAAA,IAAC;IAAEC;EAAgD,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9F;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAgD,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,IAAI;AAAA,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,KAAA;EACZ,QAAQC,SAAS;IACb,KAAKC,yBAAc,CAACC,OAAO;MACvB,OAAO,IAAAC,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,yBAAc,CAACG,UAAU;MAC1B,OAAO,IAAAD,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,yBAAc,CAACI,QAAQ;MACxB,OAAO,IAAAF,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,yBAAc,CAACK,WAAW;MAC3B,OAAO,IAAAH,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL;MACI,OAAOI,SAAS;EAAC;AAE7B,CAAE;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACf,OAAA,CAAAC,mCAAA,GAAAA,mCAAA"}
+{"version":3,"file":"EmojiPickerPopup.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_alignment","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledEmojiPickerPopup","styled","div","getComputedStyle","document","body","getPropertyValue","exports","StyledMotionEmojiPickerPopupContent","motion","_ref","theme","_ref2","text","_ref3","alignment","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined"],"sources":["../../../src/components/emoji-picker-popup/EmojiPickerPopup.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../constants/alignment';\n\nexport const StyledEmojiPickerPopup = styled.div`\n    align-items: center;\n    display: flex;\n    height: ${() => getComputedStyle(document.body).getPropertyValue('line-height')};\n    position: relative;\n`;\n\ntype StyledMotionEmojiPickerPopupContentProps = WithTheme<{\n    alignment: PopupAlignment;\n}>;\n\nexport const StyledMotionEmojiPickerPopupContent = styled(\n    motion.div\n)<StyledMotionEmojiPickerPopupContentProps>`\n    background-color: ${({ theme }: StyledMotionEmojiPickerPopupContentProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionEmojiPickerPopupContentProps) => theme.text};\n    position: absolute;\n    z-index: 0;\n\n    ::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-bottom-right-radius: 3px;\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n\n        ${({ alignment }) => {\n            switch (alignment) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: 12px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: 12px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: 12px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: 12px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    ::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAA2D,SAAAI,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,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,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,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAEpD,MAAMW,sBAAsB,GAAGC,yBAAM,CAACC,GAAI;AACjD;AACA;AACA,cAAc,MAAMC,gBAAgB,CAACC,QAAQ,CAACC,IAAI,CAAC,CAACC,gBAAgB,CAAC,aAAa,CAAE;AACpF;AACA,CAAC;AAACC,OAAA,CAAAP,sBAAA,GAAAA,sBAAA;AAMK,MAAMQ,mCAAmC,GAAG,IAAAP,yBAAM,EACrDQ,oBAAM,CAACP,GAAG,CAC8B;AAC5C,wBAAwBQ,IAAA;EAAA,IAAC;IAAEC;EAAgD,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9F;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAgD,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,IAAI;AAAA,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,KAAA;EACZ,QAAQC,SAAS;IACb,KAAKC,yBAAc,CAACC,OAAO;MACvB,OAAO,IAAAC,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,yBAAc,CAACG,UAAU;MAC1B,OAAO,IAAAD,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,yBAAc,CAACI,QAAQ;MACxB,OAAO,IAAAF,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,yBAAc,CAACK,WAAW;MAC3B,OAAO,IAAAH,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL;MACI,OAAOI,SAAS;EAAC;AAE7B,CAAE;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACf,OAAA,CAAAC,mCAAA,GAAAA,mCAAA"}

package/lib/utils/insert.d.ts

@@ -0,0 +1,19 @@
+interface InsertTextAtCursorPositionOptions {
+    editorElement: HTMLDivElement;
+    text: string;
+}
+/**
+ * This function inserts the passed text at the correct position in the editor element. If the
+ * element has the focus, the new emoji is inserted at the cursor position. If not, the emoji
+ * will be appended to the back of the input field content.
+ *
+ * In addition, this function also sets the cursor to the correct position when the input field
+ * has the focus. For this purpose, the current position of the cursor or a selection is read to
+ * calculate the cursor position after inserting the text.
+ *
+ * @param {Object} options - Object with element and text to insert
+ * @param {HTMLDivElement} options.editorElement - Element to insert text into
+ * @param {string} options.text - Text to insert into element
+ */
+export declare const insertTextAtCursorPosition: ({ editorElement, text, }: InsertTextAtCursorPositionOptions) => void;
+export {};

package/lib/utils/insert.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.insertTextAtCursorPosition = void 0;
+/**
+ * This function inserts the passed text at the correct position in the editor element. If the
+ * element has the focus, the new emoji is inserted at the cursor position. If not, the emoji
+ * will be appended to the back of the input field content.
+ *
+ * In addition, this function also sets the cursor to the correct position when the input field
+ * has the focus. For this purpose, the current position of the cursor or a selection is read to
+ * calculate the cursor position after inserting the text.
+ *
+ * @param {Object} options - Object with element and text to insert
+ * @param {HTMLDivElement} options.editorElement - Element to insert text into
+ * @param {string} options.text - Text to insert into element
+ */
+const insertTextAtCursorPosition = _ref => {
+  let {
+    editorElement,
+    text
+  } = _ref;
+  const selection = window.getSelection();
+  if (selection !== null && selection !== void 0 && selection.anchorNode && editorElement.contains(selection.anchorNode)) {
+    const {
+      endOffset,
+      startOffset
+    } = selection.getRangeAt(0);
+    const rangeDistance = endOffset - startOffset;
+    let offset = endOffset + text.length - rangeDistance;
+    let {
+      anchorNode
+    } = selection;
+    if (anchorNode.nodeValue) {
+      anchorNode.nodeValue = anchorNode.nodeValue.substring(0, startOffset) + text + anchorNode.nodeValue.substring(endOffset);
+    } else if (anchorNode === editorElement) {
+      const newTextNode = document.createTextNode(text);
+      editorElement.appendChild(newTextNode);
+      anchorNode = newTextNode;
+    }
+    const newRange = document.createRange();
+    if (anchorNode.nodeValue) {
+      offset = Math.min(offset, anchorNode.nodeValue.length);
+    }
+    newRange.setStart(anchorNode, offset);
+    newRange.setEnd(anchorNode, offset);
+    selection.removeAllRanges();
+    selection.addRange(newRange);
+  } else {
+    // eslint-disable-next-line no-param-reassign
+    editorElement.innerText += text;
+  }
+};
+exports.insertTextAtCursorPosition = insertTextAtCursorPosition;
+//# sourceMappingURL=insert.js.map

package/lib/utils/insert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insert.js","names":["insertTextAtCursorPosition","_ref","editorElement","text","selection","window","getSelection","anchorNode","contains","endOffset","startOffset","getRangeAt","rangeDistance","offset","length","nodeValue","substring","newTextNode","document","createTextNode","appendChild","newRange","createRange","Math","min","setStart","setEnd","removeAllRanges","addRange","innerText","exports"],"sources":["../../src/utils/insert.ts"],"sourcesContent":["interface InsertTextAtCursorPositionOptions {\n    editorElement: HTMLDivElement;\n    text: string;\n}\n\n/**\n * This function inserts the passed text at the correct position in the editor element. If the\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 text.\n *\n * @param {Object} options - Object with element and text to insert\n * @param {HTMLDivElement} options.editorElement - Element to insert text into\n * @param {string} options.text - Text to insert into element\n */\nexport const insertTextAtCursorPosition = ({\n    editorElement,\n    text,\n}: InsertTextAtCursorPositionOptions) => {\n    const selection = window.getSelection();\n\n    if (selection?.anchorNode && editorElement.contains(selection.anchorNode)) {\n        const { endOffset, startOffset } = selection.getRangeAt(0);\n\n        const rangeDistance = endOffset - startOffset;\n\n        let offset = endOffset + text.length - rangeDistance;\n\n        let { anchorNode } = selection;\n\n        if (anchorNode.nodeValue) {\n            anchorNode.nodeValue =\n                anchorNode.nodeValue.substring(0, startOffset) +\n                text +\n                anchorNode.nodeValue.substring(endOffset);\n        } else if (anchorNode === editorElement) {\n            const newTextNode = document.createTextNode(text);\n\n            editorElement.appendChild(newTextNode);\n\n            anchorNode = newTextNode;\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        // eslint-disable-next-line no-param-reassign\n        editorElement.innerText += text;\n    }\n};\n"],"mappings":";;;;;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,0BAA0B,GAAGC,IAAA,IAGD;EAAA,IAHE;IACvCC,aAAa;IACbC;EAC+B,CAAC,GAAAF,IAAA;EAChC,MAAMG,SAAS,GAAGC,MAAM,CAACC,YAAY,EAAE;EAEvC,IAAIF,SAAS,aAATA,SAAS,eAATA,SAAS,CAAEG,UAAU,IAAIL,aAAa,CAACM,QAAQ,CAACJ,SAAS,CAACG,UAAU,CAAC,EAAE;IACvE,MAAM;MAAEE,SAAS;MAAEC;IAAY,CAAC,GAAGN,SAAS,CAACO,UAAU,CAAC,CAAC,CAAC;IAE1D,MAAMC,aAAa,GAAGH,SAAS,GAAGC,WAAW;IAE7C,IAAIG,MAAM,GAAGJ,SAAS,GAAGN,IAAI,CAACW,MAAM,GAAGF,aAAa;IAEpD,IAAI;MAAEL;IAAW,CAAC,GAAGH,SAAS;IAE9B,IAAIG,UAAU,CAACQ,SAAS,EAAE;MACtBR,UAAU,CAACQ,SAAS,GAChBR,UAAU,CAACQ,SAAS,CAACC,SAAS,CAAC,CAAC,EAAEN,WAAW,CAAC,GAC9CP,IAAI,GACJI,UAAU,CAACQ,SAAS,CAACC,SAAS,CAACP,SAAS,CAAC;IACjD,CAAC,MAAM,IAAIF,UAAU,KAAKL,aAAa,EAAE;MACrC,MAAMe,WAAW,GAAGC,QAAQ,CAACC,cAAc,CAAChB,IAAI,CAAC;MAEjDD,aAAa,CAACkB,WAAW,CAACH,WAAW,CAAC;MAEtCV,UAAU,GAAGU,WAAW;IAC5B;IAEA,MAAMI,QAAQ,GAAGH,QAAQ,CAACI,WAAW,EAAE;IAEvC,IAAIf,UAAU,CAACQ,SAAS,EAAE;MACtBF,MAAM,GAAGU,IAAI,CAACC,GAAG,CAACX,MAAM,EAAEN,UAAU,CAACQ,SAAS,CAACD,MAAM,CAAC;IAC1D;IAEAO,QAAQ,CAACI,QAAQ,CAAClB,UAAU,EAAEM,MAAM,CAAC;IACrCQ,QAAQ,CAACK,MAAM,CAACnB,UAAU,EAAEM,MAAM,CAAC;IAEnCT,SAAS,CAACuB,eAAe,EAAE;IAC3BvB,SAAS,CAACwB,QAAQ,CAACP,QAAQ,CAAC;EAChC,CAAC,MAAM;IACH;IACAnB,aAAa,CAAC2B,SAAS,IAAI1B,IAAI;EACnC;AACJ,CAAC;AAAC2B,OAAA,CAAA9B,0BAAA,GAAAA,0BAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.0.0-beta.89",
+    "version": "5.0.0-beta.91",
     "description": "Input field that supports HTML elements and emojis",
     "keywords": [
         "chayns",
@@ -52,7 +52,7 @@
         "typescript": "^4.9.5"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.89",
+        "@chayns-components/core": "^5.0.0-beta.90",
         "@chayns/colors": "^2.0.0",
         "clsx": "^1.2.1",
         "emojilib": "^3.0.8",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "6762ce977ccf926ce6a2e0e0ae513d5709395758"
+    "gitHead": "1a8425eda31892864b98de72de0aff346c218e40"
 }