@chayns-components/emoji-input 5.0.0-beta.72 → 5.0.0-beta.74

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

@@ -1,4 +1,5 @@
-import { ChangeEventHandler, FC } from 'react';
+import { ChangeEventHandler, FC, ReactNode } from 'react';
+import type { PopupAlignment } from '../../constants/alignment';
 export type EmojiInputProps = {
     /**
      * Disables the input so that it cannot be changed anymore
@@ -17,6 +18,16 @@ export type EmojiInputProps = {
      * Placeholder for the input field
      */
     placeholder?: string;
+    /**
+     * Sets the alignment of the popup to a fixed value. If this value is not set, the component
+     * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this
+     * value.
+     */
+    popupAlignment?: PopupAlignment;
+    /**
+     * Element that is rendered inside the EmojiInput on the right side.
+     */
+    rightElement?: ReactNode;
     /**
      * Value of the input field
      */

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _emoji = require("../../utils/emoji");
+var _environment = require("../../utils/environment");
 var _selection = require("../../utils/selection");
 var _EmojiPickerPopup = _interopRequireDefault(require("../emoji-picker-popup/EmojiPickerPopup"));
 var _EmojiInput = require("./EmojiInput.styles");
@@ -18,8 +19,11 @@ const EmojiInput = _ref => {
     onInput,
     onPopupVisibilityChange,
     placeholder,
+    popupAlignment,
+    rightElement,
     value
   } = _ref;
+  const [isMobile] = (0, _react.useState)((0, _environment.getIsMobile)());
   const editorRef = (0, _react.useRef)(null);
 
   /**
@@ -81,11 +85,15 @@ const EmojiInput = _ref => {
       } = selection.getRangeAt(0);
       const rangeDistance = endOffset - startOffset;
       let offset = endOffset + emoji.length - rangeDistance;
-      const {
+      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) {
@@ -131,14 +139,18 @@ const EmojiInput = _ref => {
   }, [handlePreventLoseFocus]);
   return /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInput, {
     isDisabled: isDisabled
+  }, /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputContent, {
+    isRightElementGiven: !!rightElement
   }, /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputEditor, {
     contentEditable: !isDisabled,
     onInput: handleInput,
     placeholder: placeholder,
     ref: editorRef
-  }), /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.default, {
-    onSelect: handlePopupSelect
-  }));
+  }), !isMobile && /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.default, {
+    alignment: popupAlignment,
+    onSelect: handlePopupSelect,
+    onPopupVisibilityChange: onPopupVisibilityChange
+  })), rightElement && /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputRightWrapper, null, rightElement));
 };
 EmojiInput.displayName = 'EmojiInput';
 var _default = EmojiInput;

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

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

@@ -2,6 +2,12 @@ import type { EmojiInputProps } from './EmojiInput';
 export declare const StyledEmojiInput: import("styled-components").StyledComponent<"div", any, Pick<EmojiInputProps, "isDisabled"> & {
     theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>;
+type StyledEmojiInputContentProps = {
+    isRightElementGiven: boolean;
+};
+export declare const StyledEmojiInputContent: import("styled-components").StyledComponent<"div", any, StyledEmojiInputContentProps, never>;
 export declare const StyledEmojiInputEditor: import("styled-components").StyledComponent<"div", any, Pick<EmojiInputProps, "placeholder"> & {
     theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>;
+export declare const StyledEmojiInputRightWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

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

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledEmojiInputEditor = exports.StyledEmojiInput = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+exports.StyledEmojiInputRightWrapper = exports.StyledEmojiInputEditor = exports.StyledEmojiInputContent = exports.StyledEmojiInput = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _environment = require("../../utils/environment");
+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 StyledEmojiInput = _styledComponents.default.div`
     align-items: center;
     background-color: ${_ref => {
@@ -14,11 +16,8 @@ const StyledEmojiInput = _styledComponents.default.div`
   } = _ref;
   return theme['100'];
 }};
-    border: 1px solid rgba(160, 160, 160, 0.3);
     border-radius: 3px;
     display: flex;
-    gap: 10px;
-    justify-content: space-between;
     min-height: 42px;
     opacity: ${_ref2 => {
   let {
@@ -26,35 +25,78 @@ const StyledEmojiInput = _styledComponents.default.div`
   } = _ref2;
   return isDisabled ? 0.5 : 1;
 }};
-    padding: 8px 10px;
+    pointer-events: ${_ref3 => {
+  let {
+    isDisabled
+  } = _ref3;
+  return isDisabled ? 'none' : 'initial';
+}};
     position: relative;
     transition: opacity 0.3s ease;
 `;
 exports.StyledEmojiInput = StyledEmojiInput;
+const StyledEmojiInputContent = _styledComponents.default.div`
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    border-radius: 3px;
+    display: flex;
+    flex: 1 1 auto;
+    gap: 10px;
+    padding: 8px 10px;
+
+    ${_ref4 => {
+  let {
+    isRightElementGiven
+  } = _ref4;
+  return isRightElementGiven && (0, _styledComponents.css)`
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right-width: 0;
+        `;
+}}
+`;
+exports.StyledEmojiInputContent = StyledEmojiInputContent;
 const StyledEmojiInputEditor = _styledComponents.default.div`
-    color: ${_ref3 => {
+    color: ${_ref5 => {
   let {
     theme
-  } = _ref3;
+  } = _ref5;
   return theme.text;
 }};
     flex: 1 1 auto;
-    font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;
+    word-break: break-word;
+
+    ${() => {
+  if ((0, _environment.getIsMobile)()) {
+    return (0, _styledComponents.css)`
+                font-family: 'Roboto Regular', 'Tahoma', serif;
+            `;
+  }
+  return (0, _styledComponents.css)`
+            font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;
+        `;
+}}
 
     &:empty:not(:focus):before {
-        content: '${_ref4 => {
+        content: '${_ref6 => {
   let {
     placeholder
-  } = _ref4;
+  } = _ref6;
   return placeholder;
 }}';
-        color: ${_ref5 => {
+        color: ${_ref7 => {
   let {
     theme
-  } = _ref5;
+  } = _ref7;
   return theme['006'];
 }};
     }
 `;
 exports.StyledEmojiInputEditor = StyledEmojiInputEditor;
+const StyledEmojiInputRightWrapper = _styledComponents.default.div`
+    align-self: stretch;
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+    overflow: hidden;
+`;
+exports.StyledEmojiInputRightWrapper = StyledEmojiInputRightWrapper;
 //# sourceMappingURL=EmojiInput.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiInput.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledEmojiInput","styled","div","_ref","theme","_ref2","isDisabled","exports","StyledEmojiInputEditor","_ref3","text","_ref4","placeholder","_ref5"],"sources":["../../../src/components/emoji-input/EmojiInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled 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: 1px solid rgba(160, 160, 160, 0.3);\n    border-radius: 3px;\n    display: flex;\n    gap: 10px;\n    justify-content: space-between;\n    min-height: 42px;\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    padding: 8px 10px;\n    position: relative;\n    transition: opacity 0.3s ease;\n`;\n\ntype StyledEmojiInputEditorProps = WithTheme<Pick<EmojiInputProps, 'placeholder'>>;\n\nexport const StyledEmojiInputEditor = styled.div<StyledEmojiInputEditorProps>`\n    color: ${({ theme }: StyledEmojiInputEditorProps) => theme.text};\n    flex: 1 1 auto;\n    font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;\n\n    &:empty:not(:focus):before {\n        content: '${({ placeholder }) => placeholder}';\n        color: ${({ theme }: StyledEmojiInputEditorProps) => theme['006']};\n    }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAKhC,MAAMG,gBAAgB,GAAGC,yBAAM,CAACC,GAA2B;AAClE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA6B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAP,gBAAA,GAAAA,gBAAA;AAIK,MAAMQ,sBAAsB,GAAGP,yBAAM,CAACC,GAAiC;AAC9E,aAAaO,KAAA;EAAA,IAAC;IAAEL;EAAmC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAACM,IAAI;AAAA,CAAC;AACpE;AACA;AACA;AACA;AACA,oBAAoBC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAKC,WAAW;AAAA,CAAC;AACrD,iBAAiBC,KAAA;EAAA,IAAC;IAAET;EAAmC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC1E;AACA,CAAC;AAACG,OAAA,CAAAC,sBAAA,GAAAA,sBAAA"}
+{"version":3,"file":"EmojiInput.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_environment","_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","getIsMobile","_ref6","placeholder","_ref7","StyledEmojiInputRightWrapper"],"sources":["../../../src/components/emoji-input/EmojiInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css } from 'styled-components';\nimport { getIsMobile } from '../../utils/environment';\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    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\nexport const StyledEmojiInputEditor = styled.div<StyledEmojiInputEditorProps>`\n    color: ${({ theme }: StyledEmojiInputEditorProps) => theme.text};\n    flex: 1 1 auto;\n    word-break: break-word;\n\n    ${() => {\n        if (getIsMobile()) {\n            return css`\n                font-family: 'Roboto Regular', 'Tahoma', serif;\n            `;\n        }\n\n        return css`\n            font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;\n        `;\n    }}\n\n    &:empty:not(:focus):before {\n        content: '${({ placeholder }) => placeholder}';\n        color: ${({ theme }: StyledEmojiInputEditorProps) => theme['006']};\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    overflow: hidden;\n`;\n"],"mappings":"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"}

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _dataByGroup = _interopRequireDefault(require("unicode-emoji-json/data-by-group.json"));
+var _categories = require("../../../constants/categories");
 var _EmojiPickerCategories = require("./EmojiPickerCategories.styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -18,9 +19,7 @@ const EmojiPickerCategories = _ref => {
   } = _ref;
   const isSearchStringGiven = searchString.trim() !== '';
   const categories = (0, _react.useMemo)(() => _dataByGroup.default.map(_ref2 => {
-    var _emojis$;
     let {
-      emojis,
       slug
     } = _ref2;
     const isSelected = selectedCategory === slug && !isSearchStringGiven;
@@ -36,7 +35,7 @@ const EmojiPickerCategories = _ref => {
       transition: {
         duration: 0.2
       }
-    }, (_emojis$ = emojis[0]) === null || _emojis$ === void 0 ? void 0 : _emojis$.emoji);
+    }, _categories.CATEGORY_EMOJIS[slug]);
   }), [isSearchStringGiven, onSelect, selectedCategory]);
   return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledEmojiPickerCategories, null, categories);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerCategories.js","names":["_react","_interopRequireWildcard","require","_dataByGroup","_interopRequireDefault","_EmojiPickerCategories","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPickerCategories","_ref","onSelect","searchString","selectedCategory","isSearchStringGiven","trim","categories","useMemo","unicodeEmoji","map","_ref2","_emojis$","emojis","slug","isSelected","createElement","StyledMotionEmojiPickerCategory","animate","filter","opacity","className","initial","onClick","transition","duration","emoji","StyledEmojiPickerCategories","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport unicodeEmoji from 'unicode-emoji-json/data-by-group.json';\nimport type { Category } from '../../../types/category';\nimport {\n    StyledEmojiPickerCategories,\n    StyledMotionEmojiPickerCategory,\n} from './EmojiPickerCategories.styles';\n\nexport type EmojiPickerCategoriesProps = {\n    onSelect: (category: Category) => void;\n    searchString: string;\n    selectedCategory: Category;\n};\n\nconst EmojiPickerCategories: FC<EmojiPickerCategoriesProps> = ({\n    onSelect,\n    searchString,\n    selectedCategory,\n}) => {\n    const isSearchStringGiven = searchString.trim() !== '';\n\n    const categories = useMemo(\n        () =>\n            unicodeEmoji.map(({ emojis, slug }) => {\n                const isSelected = selectedCategory === slug && !isSearchStringGiven;\n\n                return (\n                    <StyledMotionEmojiPickerCategory\n                        animate={{\n                            filter: `grayscale(${isSelected ? 0 : 0.75})`,\n                            opacity: isSelected ? 1 : 0.5,\n                        }}\n                        className=\"prevent-lose-focus\"\n                        initial={false}\n                        key={slug}\n                        onClick={() => onSelect(slug as Category)}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {emojis[0]?.emoji}\n                    </StyledMotionEmojiPickerCategory>\n                );\n            }),\n        [isSearchStringGiven, onSelect, selectedCategory]\n    );\n\n    return <StyledEmojiPickerCategories>{categories}</StyledEmojiPickerCategories>;\n};\n\nEmojiPickerCategories.displayName = 'EmojiPickerCategories';\n\nexport default EmojiPickerCategories;\n"],"mappings":"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"}
+{"version":3,"file":"EmojiPickerCategories.js","names":["_react","_interopRequireWildcard","require","_dataByGroup","_interopRequireDefault","_categories","_EmojiPickerCategories","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPickerCategories","_ref","onSelect","searchString","selectedCategory","isSearchStringGiven","trim","categories","useMemo","unicodeEmoji","map","_ref2","slug","isSelected","createElement","StyledMotionEmojiPickerCategory","animate","filter","opacity","className","initial","onClick","transition","duration","CATEGORY_EMOJIS","StyledEmojiPickerCategories","displayName","_default","exports"],"sources":["../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport unicodeEmoji from 'unicode-emoji-json/data-by-group.json';\nimport { CATEGORY_EMOJIS } from '../../../constants/categories';\nimport type { Category } from '../../../types/category';\nimport {\n    StyledEmojiPickerCategories,\n    StyledMotionEmojiPickerCategory,\n} from './EmojiPickerCategories.styles';\n\nexport type EmojiPickerCategoriesProps = {\n    onSelect: (category: Category) => void;\n    searchString: string;\n    selectedCategory: Category;\n};\n\nconst EmojiPickerCategories: FC<EmojiPickerCategoriesProps> = ({\n    onSelect,\n    searchString,\n    selectedCategory,\n}) => {\n    const isSearchStringGiven = searchString.trim() !== '';\n\n    const categories = useMemo(\n        () =>\n            unicodeEmoji.map(({ slug }) => {\n                const isSelected = selectedCategory === slug && !isSearchStringGiven;\n\n                return (\n                    <StyledMotionEmojiPickerCategory\n                        animate={{\n                            filter: `grayscale(${isSelected ? 0 : 0.75})`,\n                            opacity: isSelected ? 1 : 0.5,\n                        }}\n                        className=\"prevent-lose-focus\"\n                        initial={false}\n                        key={slug}\n                        onClick={() => onSelect(slug as Category)}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {CATEGORY_EMOJIS[slug as Category]}\n                    </StyledMotionEmojiPickerCategory>\n                );\n            }),\n        [isSearchStringGiven, onSelect, selectedCategory]\n    );\n\n    return <StyledEmojiPickerCategories>{categories}</StyledEmojiPickerCategories>;\n};\n\nEmojiPickerCategories.displayName = 'EmojiPickerCategories';\n\nexport default EmojiPickerCategories;\n"],"mappings":"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"}

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

@@ -1,5 +1,12 @@
 import { FC } from 'react';
+import { PopupAlignment } from '../../constants/alignment';
 export type EmojiPickerPopupProps = {
+    /**
+     * Sets the alignment of the popup to a fixed value. If this value is not set, the component
+     * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this
+     * value.
+     */
+    alignment?: PopupAlignment;
     /**
      * Function that is executed when the visibility of the popup changes.
      * @param {boolean} isVisible - Whether the popup is visible or not

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

@@ -16,10 +16,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const EmojiPickerPopup = _ref => {
   let {
+    alignment,
     onPopupVisibilityChange,
     onSelect
   } = _ref;
-  const [alignment, setAlignment] = (0, _react.useState)(_alignment.PopupAlignment.TopLeft);
+  const [internalAlignment, setInternalAlignment] = (0, _react.useState)(_alignment.PopupAlignment.TopLeft);
   const [shouldShowPopup, setShouldShowPopup] = (0, _react.useState)(false);
   const [position, setPosition] = (0, _react.useState)({});
   const contentRef = (0, _react.useRef)(null);
@@ -45,29 +46,53 @@ const EmojiPickerPopup = _ref => {
       top,
       width
     } = event.currentTarget.getBoundingClientRect();
-    const newPosition = {};
-    if (top < _EmojiPicker2.emojiPickerSize.height + 16) {
-      newPosition.top = 12 + height;
-      if (left < _EmojiPicker2.emojiPickerSize.width + 16) {
-        newPosition.left = -10;
-        setAlignment(_alignment.PopupAlignment.BottomRight);
+    let newInternalAlignment = alignment;
+    if (!newInternalAlignment) {
+      if (top < _EmojiPicker2.emojiPickerSize.height + 16) {
+        if (left < _EmojiPicker2.emojiPickerSize.width + 16) {
+          newInternalAlignment = _alignment.PopupAlignment.BottomRight;
+        } else {
+          newInternalAlignment = _alignment.PopupAlignment.BottomLeft;
+        }
+      } else if (left < _EmojiPicker2.emojiPickerSize.width + 16) {
+        newInternalAlignment = _alignment.PopupAlignment.TopRight;
       } else {
-        newPosition.left = 8 + width - _EmojiPicker2.emojiPickerSize.width;
-        setAlignment(_alignment.PopupAlignment.BottomLeft);
-      }
-    } else {
-      newPosition.top = -12 - _EmojiPicker2.emojiPickerSize.height;
-      if (left < _EmojiPicker2.emojiPickerSize.width + 16) {
-        newPosition.left = -10;
-        setAlignment(_alignment.PopupAlignment.TopRight);
-      } else {
-        newPosition.left = 8 + width - _EmojiPicker2.emojiPickerSize.width;
-        setAlignment(_alignment.PopupAlignment.TopLeft);
+        newInternalAlignment = _alignment.PopupAlignment.TopLeft;
       }
     }
+    let newPosition = {};
+    switch (newInternalAlignment) {
+      case _alignment.PopupAlignment.BottomLeft:
+        newPosition = {
+          left: 8 + width - _EmojiPicker2.emojiPickerSize.width,
+          top: 12 + height
+        };
+        break;
+      case _alignment.PopupAlignment.BottomRight:
+        newPosition = {
+          left: -10,
+          top: 12 + height
+        };
+        break;
+      case _alignment.PopupAlignment.TopLeft:
+        newPosition = {
+          left: 8 + width - _EmojiPicker2.emojiPickerSize.width,
+          top: -12 - _EmojiPicker2.emojiPickerSize.height
+        };
+        break;
+      case _alignment.PopupAlignment.TopRight:
+        newPosition = {
+          left: -10,
+          top: -12 - _EmojiPicker2.emojiPickerSize.height
+        };
+        break;
+      default:
+        break;
+    }
+    setInternalAlignment(newInternalAlignment);
     setPosition(newPosition);
     setShouldShowPopup(true);
-  }, [shouldShowPopup]);
+  }, [alignment, shouldShowPopup]);
   (0, _react.useEffect)(() => {
     if (shouldShowPopup) {
       document.addEventListener('click', handleDocumentClick, true);
@@ -83,11 +108,11 @@ const EmojiPickerPopup = _ref => {
       onPopupVisibilityChange(shouldShowPopup);
     }
   }, [onPopupVisibilityChange, shouldShowPopup]);
-  const exitAndInitialY = alignment === _alignment.PopupAlignment.TopLeft || alignment === _alignment.PopupAlignment.TopRight ? -16 : 16;
+  const exitAndInitialY = internalAlignment === _alignment.PopupAlignment.TopLeft || internalAlignment === _alignment.PopupAlignment.TopRight ? -16 : 16;
   return /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.StyledEmojiPickerPopup, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
     initial: false
   }, shouldShowPopup && /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.StyledMotionEmojiPickerPopupContent, {
-    alignment: alignment,
+    alignment: internalAlignment,
     animate: {
       opacity: 1,
       y: 0

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

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

package/lib/constants/categories.d.ts

@@ -0,0 +1,11 @@
+export declare const CATEGORY_EMOJIS: {
+    smileys_emotion: string;
+    people_body: string;
+    animals_nature: string;
+    food_drink: string;
+    travel_places: string;
+    activities: string;
+    objects: string;
+    symbols: string;
+    flags: string;
+};

package/lib/constants/categories.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CATEGORY_EMOJIS = void 0;
+const CATEGORY_EMOJIS = {
+  smileys_emotion: '😀',
+  people_body: '👦',
+  animals_nature: '🐶',
+  food_drink: '🍔',
+  travel_places: '🏠',
+  activities: '⚽',
+  objects: '💡',
+  symbols: '🔣',
+  flags: '🏴'
+};
+exports.CATEGORY_EMOJIS = CATEGORY_EMOJIS;
+//# sourceMappingURL=categories.js.map

package/lib/constants/categories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"categories.js","names":["CATEGORY_EMOJIS","smileys_emotion","people_body","animals_nature","food_drink","travel_places","activities","objects","symbols","flags","exports"],"sources":["../../src/constants/categories.ts"],"sourcesContent":["export const CATEGORY_EMOJIS = {\n    smileys_emotion: '😀',\n    people_body: '👦',\n    animals_nature: '🐶',\n    food_drink: '🍔',\n    travel_places: '🏠',\n    activities: '⚽',\n    objects: '💡',\n    symbols: '🔣',\n    flags: '🏴',\n};\n"],"mappings":";;;;;;AAAO,MAAMA,eAAe,GAAG;EAC3BC,eAAe,EAAE,IAAI;EACrBC,WAAW,EAAE,IAAI;EACjBC,cAAc,EAAE,IAAI;EACpBC,UAAU,EAAE,IAAI;EAChBC,aAAa,EAAE,IAAI;EACnBC,UAAU,EAAE,GAAG;EACfC,OAAO,EAAE,IAAI;EACbC,OAAO,EAAE,IAAI;EACbC,KAAK,EAAE;AACX,CAAC;AAACC,OAAA,CAAAV,eAAA,GAAAA,eAAA"}

package/lib/index.d.ts

@@ -1 +1,2 @@
 export { default as EmojiInput } from './components/emoji-input/EmojiInput';
+export { PopupAlignment } from './constants/alignment';

package/lib/index.js

@@ -9,6 +9,13 @@ Object.defineProperty(exports, "EmojiInput", {
     return _EmojiInput.default;
   }
 });
+Object.defineProperty(exports, "PopupAlignment", {
+  enumerable: true,
+  get: function () {
+    return _alignment.PopupAlignment;
+  }
+});
 var _EmojiInput = _interopRequireDefault(require("./components/emoji-input/EmojiInput"));
+var _alignment = require("./constants/alignment");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_EmojiInput","_interopRequireDefault","require","obj","__esModule","default"],"sources":["../src/index.ts"],"sourcesContent":["export { default as EmojiInput } from './components/emoji-input/EmojiInput';\n"],"mappings":";;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA4E,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA"}
+{"version":3,"file":"index.js","names":["_EmojiInput","_interopRequireDefault","require","_alignment","obj","__esModule","default"],"sources":["../src/index.ts"],"sourcesContent":["export { default as EmojiInput } from './components/emoji-input/EmojiInput';\nexport { PopupAlignment } from './constants/alignment';\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AAAuD,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA"}

package/lib/utils/environment.d.ts

@@ -0,0 +1,8 @@
+declare enum DeviceType {
+    Desktop = 0,
+    Smartphone = 1,
+    Tablet = 2
+}
+export declare const getDeviceType: () => DeviceType;
+export declare const getIsMobile: () => boolean;
+export {};

package/lib/utils/environment.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getIsMobile = exports.getDeviceType = void 0;
+var DeviceType;
+(function (DeviceType) {
+  DeviceType[DeviceType["Desktop"] = 0] = "Desktop";
+  DeviceType[DeviceType["Smartphone"] = 1] = "Smartphone";
+  DeviceType[DeviceType["Tablet"] = 2] = "Tablet";
+})(DeviceType || (DeviceType = {}));
+const getDeviceType = () => {
+  const {
+    userAgent
+  } = navigator;
+  if (/Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(userAgent)) {
+    return DeviceType.Smartphone;
+  }
+  if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(userAgent)) {
+    return DeviceType.Tablet;
+  }
+  return DeviceType.Desktop;
+};
+exports.getDeviceType = getDeviceType;
+const getIsMobile = () => {
+  const deviceType = getDeviceType();
+  return deviceType === DeviceType.Smartphone || deviceType === DeviceType.Tablet;
+};
+exports.getIsMobile = getIsMobile;
+//# sourceMappingURL=environment.js.map

package/lib/utils/environment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"environment.js","names":["DeviceType","getDeviceType","userAgent","navigator","test","Smartphone","Tablet","Desktop","exports","getIsMobile","deviceType"],"sources":["../../src/utils/environment.ts"],"sourcesContent":["enum DeviceType {\n    Desktop,\n    Smartphone,\n    Tablet,\n}\n\nexport const getDeviceType = (): DeviceType => {\n    const { userAgent } = navigator;\n\n    if (\n        /Mobile|Android|iP(hone|od)|IEMobile|BlackBerry|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(\n            userAgent\n        )\n    ) {\n        return DeviceType.Smartphone;\n    }\n\n    if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(userAgent)) {\n        return DeviceType.Tablet;\n    }\n\n    return DeviceType.Desktop;\n};\n\nexport const getIsMobile = (): boolean => {\n    const deviceType = getDeviceType();\n\n    return deviceType === DeviceType.Smartphone || deviceType === DeviceType.Tablet;\n};\n"],"mappings":";;;;;;IAAKA,UAAU;AAAA,WAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;AAAA,GAAVA,UAAU,KAAVA,UAAU;AAMR,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAM;IAAEC;EAAU,CAAC,GAAGC,SAAS;EAE/B,IACI,qGAAqG,CAACC,IAAI,CACtGF,SAAS,CACZ,EACH;IACE,OAAOF,UAAU,CAACK,UAAU;EAChC;EAEA,IAAI,kDAAkD,CAACD,IAAI,CAACF,SAAS,CAAC,EAAE;IACpE,OAAOF,UAAU,CAACM,MAAM;EAC5B;EAEA,OAAON,UAAU,CAACO,OAAO;AAC7B,CAAC;AAACC,OAAA,CAAAP,aAAA,GAAAA,aAAA;AAEK,MAAMQ,WAAW,GAAGA,CAAA,KAAe;EACtC,MAAMC,UAAU,GAAGT,aAAa,EAAE;EAElC,OAAOS,UAAU,KAAKV,UAAU,CAACK,UAAU,IAAIK,UAAU,KAAKV,UAAU,CAACM,MAAM;AACnF,CAAC;AAACE,OAAA,CAAAC,WAAA,GAAAA,WAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.0.0-beta.72",
+    "version": "5.0.0-beta.74",
     "description": "Input field that supports HTML elements and emojis",
     "keywords": [
         "chayns",
@@ -68,5 +68,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "55df39e5f53814963c9465b7932714a371e9e576"
+    "gitHead": "5b4719ada307779b76bd305a0c4de4bdbb59ee6b"
 }