@chayns-components/emoji-input 5.0.0-beta.78 → 5.0.0-beta.80

package/lib/api/item-storage/get.d.ts

@@ -0,0 +1,8 @@
+import type { HistoryItem } from '../../hooks/emojiHistory';
+import type { ApiFunctionResult } from '../../types/api';
+interface GetEmojiHistoryOptions {
+    accessToken: string;
+    personId: string;
+}
+export declare const getEmojiHistory: ({ accessToken, personId, }: GetEmojiHistoryOptions) => Promise<ApiFunctionResult<HistoryItem[]>>;
+export {};

package/lib/api/item-storage/get.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getEmojiHistory = void 0;
+var _externalServerUrl = require("../../constants/externalServerUrl");
+const getEmojiHistory = async _ref => {
+  let {
+    accessToken,
+    personId
+  } = _ref;
+  const requestInit = {
+    headers: {
+      Authorization: `Bearer ${accessToken}`
+    },
+    method: 'GET'
+  };
+  const url = `${_externalServerUrl.ITEM_STORAGE_BASE_URL}/7/users/${personId}/keys/emojis`;
+  const response = await fetch(url, requestInit);
+  if (response.status === 200) {
+    try {
+      const data = await response.json();
+      return {
+        data: data.value,
+        status: 200
+      };
+    } catch (e) {
+      // Do nothing
+    }
+  }
+  return {
+    status: response.status
+  };
+};
+exports.getEmojiHistory = getEmojiHistory;
+//# sourceMappingURL=get.js.map

package/lib/api/item-storage/get.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get.js","names":["_externalServerUrl","require","getEmojiHistory","_ref","accessToken","personId","requestInit","headers","Authorization","method","url","ITEM_STORAGE_BASE_URL","response","fetch","status","data","json","value","e","exports"],"sources":["../../../src/api/item-storage/get.ts"],"sourcesContent":["import { ITEM_STORAGE_BASE_URL } from '../../constants/externalServerUrl';\nimport type { HistoryItem } from '../../hooks/emojiHistory';\nimport type { ApiFunctionResult } from '../../types/api';\n\ninterface GetEmojiHistoryOptions {\n    accessToken: string;\n    personId: string;\n}\n\ninterface GetEmojiHistoryResponseData {\n    key: string;\n    personId: string;\n    schemeId: string;\n    value: HistoryItem[];\n}\n\nexport const getEmojiHistory = async ({\n    accessToken,\n    personId,\n}: GetEmojiHistoryOptions): Promise<ApiFunctionResult<HistoryItem[]>> => {\n    const requestInit: RequestInit = {\n        headers: {\n            Authorization: `Bearer ${accessToken}`,\n        },\n        method: 'GET',\n    };\n\n    const url = `${ITEM_STORAGE_BASE_URL}/7/users/${personId}/keys/emojis`;\n\n    const response = await fetch(url, requestInit);\n\n    if (response.status === 200) {\n        try {\n            const data = (await response.json()) as GetEmojiHistoryResponseData;\n\n            return { data: data.value, status: 200 };\n        } catch (e) {\n            // Do nothing\n        }\n    }\n\n    return { status: response.status };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,kBAAA,GAAAC,OAAA;AAgBO,MAAMC,eAAe,GAAG,MAAAC,IAAA,IAG0C;EAAA,IAHnC;IAClCC,WAAW;IACXC;EACoB,CAAC,GAAAF,IAAA;EACrB,MAAMG,WAAwB,GAAG;IAC7BC,OAAO,EAAE;MACLC,aAAa,EAAG,UAASJ,WAAY;IACzC,CAAC;IACDK,MAAM,EAAE;EACZ,CAAC;EAED,MAAMC,GAAG,GAAI,GAAEC,wCAAsB,YAAWN,QAAS,cAAa;EAEtE,MAAMO,QAAQ,GAAG,MAAMC,KAAK,CAACH,GAAG,EAAEJ,WAAW,CAAC;EAE9C,IAAIM,QAAQ,CAACE,MAAM,KAAK,GAAG,EAAE;IACzB,IAAI;MACA,MAAMC,IAAI,GAAI,MAAMH,QAAQ,CAACI,IAAI,EAAkC;MAEnE,OAAO;QAAED,IAAI,EAAEA,IAAI,CAACE,KAAK;QAAEH,MAAM,EAAE;MAAI,CAAC;IAC5C,CAAC,CAAC,OAAOI,CAAC,EAAE;MACR;IAAA;EAER;EAEA,OAAO;IAAEJ,MAAM,EAAEF,QAAQ,CAACE;EAAO,CAAC;AACtC,CAAC;AAACK,OAAA,CAAAjB,eAAA,GAAAA,eAAA"}

package/lib/api/item-storage/put.d.ts

@@ -0,0 +1,9 @@
+import type { HistoryItem } from '../../hooks/emojiHistory';
+import type { ApiFunctionResult } from '../../types/api';
+interface PutEmojiHistoryOptions {
+    accessToken: string;
+    personId: string;
+    value: HistoryItem[];
+}
+export declare const putEmojiHistory: ({ accessToken, personId, value, }: PutEmojiHistoryOptions) => Promise<ApiFunctionResult<HistoryItem[]>>;
+export {};

package/lib/api/item-storage/put.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.putEmojiHistory = void 0;
+var _externalServerUrl = require("../../constants/externalServerUrl");
+const putEmojiHistory = async _ref => {
+  let {
+    accessToken,
+    personId,
+    value
+  } = _ref;
+  const requestInit = {
+    body: JSON.stringify({
+      value
+    }),
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'Content-Type': 'application/json'
+    },
+    method: 'PUT'
+  };
+  const url = `${_externalServerUrl.ITEM_STORAGE_BASE_URL}/7/users/${personId}/keys/emojis`;
+  const response = await fetch(url, requestInit);
+  if (response.status === 201) {
+    try {
+      const data = await response.json();
+      return {
+        data: data.value,
+        status: 200
+      };
+    } catch (e) {
+      // Do nothing
+    }
+  }
+  return {
+    status: response.status
+  };
+};
+exports.putEmojiHistory = putEmojiHistory;
+//# sourceMappingURL=put.js.map

package/lib/api/item-storage/put.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"put.js","names":["_externalServerUrl","require","putEmojiHistory","_ref","accessToken","personId","value","requestInit","body","JSON","stringify","headers","Authorization","method","url","ITEM_STORAGE_BASE_URL","response","fetch","status","data","json","e","exports"],"sources":["../../../src/api/item-storage/put.ts"],"sourcesContent":["import { ITEM_STORAGE_BASE_URL } from '../../constants/externalServerUrl';\nimport type { HistoryItem } from '../../hooks/emojiHistory';\nimport type { ApiFunctionResult } from '../../types/api';\n\ninterface PutEmojiHistoryOptions {\n    accessToken: string;\n    personId: string;\n    value: HistoryItem[];\n}\n\ninterface PutEmojiHistoryResponseData {\n    key: string;\n    personId: string;\n    schemeId: string;\n    value: HistoryItem[];\n}\n\nexport const putEmojiHistory = async ({\n    accessToken,\n    personId,\n    value,\n}: PutEmojiHistoryOptions): Promise<ApiFunctionResult<HistoryItem[]>> => {\n    const requestInit: RequestInit = {\n        body: JSON.stringify({ value }),\n        headers: {\n            Authorization: `Bearer ${accessToken}`,\n            'Content-Type': 'application/json',\n        },\n        method: 'PUT',\n    };\n\n    const url = `${ITEM_STORAGE_BASE_URL}/7/users/${personId}/keys/emojis`;\n\n    const response = await fetch(url, requestInit);\n\n    if (response.status === 201) {\n        try {\n            const data = (await response.json()) as PutEmojiHistoryResponseData;\n\n            return { data: data.value, status: 200 };\n        } catch (e) {\n            // Do nothing\n        }\n    }\n\n    return { status: response.status };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,kBAAA,GAAAC,OAAA;AAiBO,MAAMC,eAAe,GAAG,MAAAC,IAAA,IAI0C;EAAA,IAJnC;IAClCC,WAAW;IACXC,QAAQ;IACRC;EACoB,CAAC,GAAAH,IAAA;EACrB,MAAMI,WAAwB,GAAG;IAC7BC,IAAI,EAAEC,IAAI,CAACC,SAAS,CAAC;MAAEJ;IAAM,CAAC,CAAC;IAC/BK,OAAO,EAAE;MACLC,aAAa,EAAG,UAASR,WAAY,EAAC;MACtC,cAAc,EAAE;IACpB,CAAC;IACDS,MAAM,EAAE;EACZ,CAAC;EAED,MAAMC,GAAG,GAAI,GAAEC,wCAAsB,YAAWV,QAAS,cAAa;EAEtE,MAAMW,QAAQ,GAAG,MAAMC,KAAK,CAACH,GAAG,EAAEP,WAAW,CAAC;EAE9C,IAAIS,QAAQ,CAACE,MAAM,KAAK,GAAG,EAAE;IACzB,IAAI;MACA,MAAMC,IAAI,GAAI,MAAMH,QAAQ,CAACI,IAAI,EAAkC;MAEnE,OAAO;QAAED,IAAI,EAAEA,IAAI,CAACb,KAAK;QAAEY,MAAM,EAAE;MAAI,CAAC;IAC5C,CAAC,CAAC,OAAOG,CAAC,EAAE;MACR;IAAA;EAER;EAEA,OAAO;IAAEH,MAAM,EAAEF,QAAQ,CAACE;EAAO,CAAC;AACtC,CAAC;AAACI,OAAA,CAAApB,eAAA,GAAAA,eAAA"}

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

@@ -1,6 +1,10 @@
 import { ChangeEventHandler, FC, KeyboardEventHandler, ReactNode } from 'react';
 import type { PopupAlignment } from '../../constants/alignment';
 export type EmojiInputProps = {
+    /**
+     * Access token of the logged-in user. Is needed to load and save the history of the emojis.
+     */
+    accessToken?: string;
     /**
      * Disables the input so that it cannot be changed anymore
      */
@@ -18,6 +22,10 @@ export type EmojiInputProps = {
      * @param {boolean} isVisible - Whether the popup is visible or not
      */
     onPopupVisibilityChange?: (isVisible: boolean) => void;
+    /**
+     * Person id of the logged-in user. Is needed to load and save the history of the emojis.
+     */
+    personId?: string;
     /**
      * Placeholder for the input field
      */

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

@@ -15,10 +15,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 EmojiInput = _ref => {
   let {
+    accessToken,
     isDisabled,
     onInput,
     onKeyDown,
     onPopupVisibilityChange,
+    personId,
     placeholder,
     popupAlignment,
     rightElement,
@@ -39,10 +41,10 @@ const EmojiInput = _ref => {
     if (!editorRef.current) {
       return;
     }
-    const newHtml = (0, _emoji.convertAsciiToUnicode)(text);
-    if (newHtml !== editorRef.current.innerHTML) {
+    const newInnerText = (0, _emoji.convertAsciiToUnicode)(text);
+    if (newInnerText !== editorRef.current.innerText) {
       (0, _selection.saveSelection)(editorRef.current);
-      editorRef.current.innerHTML = newHtml;
+      editorRef.current.innerText = newInnerText;
       (0, _selection.restoreSelection)(editorRef.current);
     }
   }, []);
@@ -55,7 +57,7 @@ const EmojiInput = _ref => {
     if (!editorRef.current) {
       return;
     }
-    handleUpdateText(editorRef.current.innerHTML);
+    handleUpdateText(editorRef.current.innerText);
     if (typeof onInput === 'function') {
       onInput(event);
     }
@@ -105,7 +107,7 @@ const EmojiInput = _ref => {
       selection.removeAllRanges();
       selection.addRange(newRange);
     } else {
-      editorRef.current.innerHTML += emoji;
+      editorRef.current.innerText += emoji;
     }
     const event = new Event('input', {
       bubbles: true
@@ -149,9 +151,11 @@ const EmojiInput = _ref => {
     placeholder: placeholder,
     ref: editorRef
   }), !isMobile && /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.default, {
+    accessToken: accessToken,
     alignment: popupAlignment,
     onSelect: handlePopupSelect,
-    onPopupVisibilityChange: onPopupVisibilityChange
+    onPopupVisibilityChange: onPopupVisibilityChange,
+    personId: personId
   })), rightElement && /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputRightWrapper, null, rightElement));
 };
 EmojiInput.displayName = 'EmojiInput';

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

@@ -1 +1 @@
-{"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","onKeyDown","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    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 { 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 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     * 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    onKeyDown,\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                    onKeyDown={onKeyDown}\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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"}
+{"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","accessToken","isDisabled","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","value","isMobile","useState","getIsMobile","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 { 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\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                    onInput={handleInput}\n                    onKeyDown={onKeyDown}\n                    placeholder={placeholder}\n                    ref={editorRef}\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,UAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,WAAA,GAAAN,OAAA;AAK6B,SAAAK,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,SAAAZ,wBAAAQ,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;EAE1C,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,OAAOnB,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACuB,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACV,gBAAgB,EAAEb,OAAO,CAAC,CAC9B;;EAED;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACI,MAAMwB,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,CAACN,KAAK,CAAC;EAC3B,CAAC,EAAE,CAACM,gBAAgB,EAAEN,KAAK,CAAC,CAAC;EAE7B,IAAAuD,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,oBACIzF,MAAA,CAAAW,OAAA,CAAA0F,aAAA,CAAC7F,WAAA,CAAA8F,gBAAgB;IAACpE,UAAU,EAAEA;EAAW,gBACrClC,MAAA,CAAAW,OAAA,CAAA0F,aAAA,CAAC7F,WAAA,CAAA+F,uBAAuB;IAACC,mBAAmB,EAAE,CAAC,CAAC/D;EAAa,gBACzDzC,MAAA,CAAAW,OAAA,CAAA0F,aAAA,CAAC7F,WAAA,CAAAiG,sBAAsB;IACnBC,eAAe,EAAE,CAACxE,UAAW;IAC7BC,OAAO,EAAEsB,WAAY;IACrBrB,SAAS,EAAEA,SAAU;IACrBG,WAAW,EAAEA,WAAY;IACzBoE,GAAG,EAAE7D;EAAU,EACjB,EACD,CAACH,QAAQ,iBACN3C,MAAA,CAAAW,OAAA,CAAA0F,aAAA,CAAC/F,iBAAA,CAAAK,OAAgB;IACbsB,WAAW,EAAEA,WAAY;IACzB2E,SAAS,EAAEpE,cAAe;IAC1BqE,QAAQ,EAAElD,iBAAkB;IAC5BtB,uBAAuB,EAAEA,uBAAwB;IACjDC,QAAQ,EAAEA;EAAS,EAE1B,CACqB,EACzBG,YAAY,iBACTzC,MAAA,CAAAW,OAAA,CAAA0F,aAAA,CAAC7F,WAAA,CAAAsG,4BAA4B,QAAErE,YAAY,CAC9C,CACc;AAE3B,CAAC;AAEDV,UAAU,CAACgF,WAAW,GAAG,YAAY;AAAC,IAAAC,QAAA,GAEvBjF,UAAU;AAAAkF,OAAA,CAAAtG,OAAA,GAAAqG,QAAA"}

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

@@ -1,10 +1,18 @@
 import { FC } from 'react';
 export type EmojiPickerProps = {
+    /**
+     * Access token of the logged-in user. Is needed to load and save the history of the emojis.
+     */
+    accessToken?: string;
     /**
      * Function executed when an emoji is selected in the popup
      * @param {string} emoji - Emoji that was selected
      */
     onSelect: (emoji: string) => void;
+    /**
+     * Person id of the logged-in user. Is needed to load and save the history of the emojis.
+     */
+    personId?: string;
 };
 declare const EmojiPicker: FC<EmojiPickerProps>;
 export default EmojiPicker;

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

@@ -16,7 +16,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const EmojiPicker = _ref => {
   var _emojiCategories$;
   let {
-    onSelect
+    accessToken,
+    onSelect,
+    personId
   } = _ref;
   const [searchString, setSearchString] = (0, _react.useState)('');
   const [selectedCategory, setSelectedCategory] = (0, _react.useState)((_emojiCategories$ = _dataByGroup.default[0]) === null || _emojiCategories$ === void 0 ? void 0 : _emojiCategories$.slug);
@@ -32,7 +34,9 @@ const EmojiPicker = _ref => {
     placeholder: "Suchen",
     value: searchString
   }), /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.default, {
+    accessToken: accessToken,
     onSelect: onSelect,
+    personId: personId,
     searchString: searchString,
     selectedCategory: selectedCategory
   }), /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.default, {

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

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

@@ -18,25 +18,31 @@ const EmojiPickerCategories = _ref => {
     selectedCategory
   } = _ref;
   const isSearchStringGiven = searchString.trim() !== '';
-  const categories = (0, _react.useMemo)(() => _dataByGroup.default.map(_ref2 => {
-    let {
-      slug
-    } = _ref2;
-    const isSelected = selectedCategory === slug && !isSearchStringGiven;
-    return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledMotionEmojiPickerCategory, {
-      animate: {
-        filter: `grayscale(${isSelected ? 0 : 0.75})`,
-        opacity: isSelected ? 1 : 0.5
-      },
-      className: "prevent-lose-focus",
-      initial: false,
-      key: slug,
-      onClick: () => onSelect(slug),
-      transition: {
-        duration: 0.2
-      }
-    }, _categories.CATEGORY_EMOJIS[slug]);
-  }), [isSearchStringGiven, onSelect, selectedCategory]);
+  const categories = (0, _react.useMemo)(() => {
+    const categorySlugs = _dataByGroup.default.map(_ref2 => {
+      let {
+        slug
+      } = _ref2;
+      return slug;
+    });
+    categorySlugs.unshift('history');
+    return categorySlugs.map(slug => {
+      const isSelected = selectedCategory === slug && !isSearchStringGiven;
+      return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledMotionEmojiPickerCategory, {
+        animate: {
+          filter: `grayscale(${isSelected ? 0 : 0.75})`,
+          opacity: isSelected ? 1 : 0.5
+        },
+        className: "prevent-lose-focus",
+        initial: false,
+        key: slug,
+        onClick: () => onSelect(slug),
+        transition: {
+          duration: 0.2
+        }
+      }, _categories.CATEGORY_EMOJIS[slug]);
+    });
+  }, [isSearchStringGiven, onSelect, selectedCategory]);
   return /*#__PURE__*/_react.default.createElement(_EmojiPickerCategories.StyledEmojiPickerCategories, null, categories);
 };
 EmojiPickerCategories.displayName = 'EmojiPickerCategories';

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

@@ -1 +1 @@
-{"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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"}
+{"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","categorySlugs","unicodeEmoji","map","_ref2","slug","unshift","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        const categorySlugs = unicodeEmoji.map(({ slug }) => slug);\n\n        categorySlugs.unshift('history');\n\n        return categorySlugs.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    return <StyledEmojiPickerCategories>{categories}</StyledEmojiPickerCategories>;\n};\n\nEmojiPickerCategories.displayName = 'EmojiPickerCategories';\n\nexport default EmojiPickerCategories;\n"],"mappings":"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"}

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

@@ -1,7 +1,9 @@
 import { FC } from 'react';
 import type { Category } from '../../../types/category';
 export type EmojiPickerEmojisProps = {
+    accessToken?: string;
     onSelect: (emoji: string) => void;
+    personId?: string;
     searchString: string;
     selectedCategory: Category;
 };

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

@@ -9,55 +9,112 @@ var _react = _interopRequireWildcard(require("react"));
 var _dataByEmoji = _interopRequireDefault(require("unicode-emoji-json/data-by-emoji.json"));
 var _dataByGroup = _interopRequireDefault(require("unicode-emoji-json/data-by-group.json"));
 var _emojiDeDE = _interopRequireDefault(require("../../../constants/emoji-de-DE.json"));
+var _emojiHistory = require("../../../hooks/emojiHistory");
+var _Emoji = _interopRequireDefault(require("./emoji/Emoji"));
 var _EmojiPickerEmojis = require("./EmojiPickerEmojis.styles");
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const EmojiPickerEmojis = _ref => {
   let {
+    accessToken,
     onSelect,
+    personId,
     searchString,
     selectedCategory
   } = _ref;
+  const {
+    addOrUpdateEmojiInHistory,
+    historyEmojis
+  } = (0, _emojiHistory.useEmojiHistory)({
+    accessToken,
+    personId,
+    selectedCategory
+  });
+  const handleSelect = (0, _react.useCallback)(_ref2 => {
+    let {
+      emoji,
+      name,
+      skin_tone_support
+    } = _ref2;
+    onSelect(emoji);
+    void addOrUpdateEmojiInHistory({
+      emoji,
+      name,
+      skin_tone_support
+    });
+  }, [addOrUpdateEmojiInHistory, onSelect]);
   const emojis = (0, _react.useMemo)(() => {
     var _emojiCategories$find;
     if (searchString.trim() !== '') {
       const lowerSearchString = searchString.toLowerCase();
       const searchResults = [];
-      Object.entries(_dataByEmoji.default).forEach(_ref2 => {
+      Object.entries(_dataByEmoji.default).forEach(_ref3 => {
         let [emoji, {
-          name
-        }] = _ref2;
+          name,
+          skin_tone_support
+        }] = _ref3;
         // @ts-expect-error: Type is correct here
         const keywords = _emojilib.default[emoji];
         // @ts-expect-error: Type is correct here
         const germanKeywords = _emojiDeDE.default[emoji];
         if (name.includes(lowerSearchString) || keywords !== null && keywords !== void 0 && keywords.some(keyword => keyword.includes(lowerSearchString)) || germanKeywords !== null && germanKeywords !== void 0 && germanKeywords.some(keyword => keyword.includes(lowerSearchString))) {
-          searchResults.push( /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.StyledEmojiPickerEmoji, {
-            className: "prevent-lose-focus",
+          searchResults.push( /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+            emoji: emoji,
+            isSkinToneSupported: skin_tone_support,
             key: name,
-            onClick: () => onSelect(emoji)
-          }, emoji));
+            onSelect: e => handleSelect({
+              emoji: e,
+              name,
+              skin_tone_support
+            })
+          }));
         }
       });
       return searchResults;
     }
-    return (_emojiCategories$find = _dataByGroup.default.find(_ref3 => {
+    if (selectedCategory === 'history') {
+      return historyEmojis.map(_ref4 => {
+        let {
+          emoji,
+          name,
+          skin_tone_support
+        } = _ref4;
+        return /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+          emoji: emoji,
+          key: name,
+          onSelect: e => handleSelect({
+            emoji: e,
+            name,
+            skin_tone_support
+          }),
+          isSkinToneSupported: false
+        });
+      });
+    }
+    return (_emojiCategories$find = _dataByGroup.default.find(_ref5 => {
       let {
         slug
-      } = _ref3;
+      } = _ref5;
       return slug === selectedCategory;
-    })) === null || _emojiCategories$find === void 0 ? void 0 : _emojiCategories$find.emojis.map(_ref4 => {
+    })) === null || _emojiCategories$find === void 0 ? void 0 : _emojiCategories$find.emojis.map(_ref6 => {
       let {
         emoji,
-        name
-      } = _ref4;
-      return /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.StyledEmojiPickerEmoji, {
+        name,
+        skin_tone_support
+      } = _ref6;
+      return /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+        emoji: emoji,
+        isSkinToneSupported: skin_tone_support,
         key: name,
-        onClick: () => onSelect(emoji)
-      }, emoji);
+        onSelect: e => handleSelect({
+          emoji: e,
+          name,
+          skin_tone_support
+        })
+      });
     });
-  }, [onSelect, searchString, selectedCategory]);
+  }, [handleSelect, historyEmojis, searchString, selectedCategory]);
   return /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.StyledEmojiPickerEmojis, null, emojis);
 };
 EmojiPickerEmojis.displayName = 'EmojiPickerEmojis';