@chayns-components/emoji-input 5.0.0-beta.79 → 5.0.0-beta.81

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledEmojiPickerEmojis = exports.StyledEmojiPickerEmoji = void 0;
+exports.StyledEmojiPickerEmojis = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const StyledEmojiPickerEmojis = _styledComponents.default.div`
@@ -13,6 +13,7 @@ const StyledEmojiPickerEmojis = _styledComponents.default.div`
     grid-template-rows: min-content;
     overflow-y: scroll;
     padding: 10px 0;
+    position: relative;
 
     // Styles for custom scrollbar
     ::-webkit-scrollbar {
@@ -58,15 +59,4 @@ const StyledEmojiPickerEmojis = _styledComponents.default.div`
     }
 `;
 exports.StyledEmojiPickerEmojis = StyledEmojiPickerEmojis;
-const StyledEmojiPickerEmoji = _styledComponents.default.div`
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;
-    font-size: 32px;
-    justify-content: center;
-    width: 48px;
-    height: 48px;
-`;
-exports.StyledEmojiPickerEmoji = StyledEmojiPickerEmoji;
 //# sourceMappingURL=EmojiPickerEmojis.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerEmojis.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledEmojiPickerEmojis","styled","div","_ref","theme","_ref2","exports","StyledEmojiPickerEmoji"],"sources":["../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\ntype StyledEmojiPickerEmojisProps = WithTheme<unknown>;\n\nexport const StyledEmojiPickerEmojis = styled.div<StyledEmojiPickerEmojisProps>`\n    display: grid;\n    flex: 1 1 auto;\n    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));\n    grid-template-rows: min-content;\n    overflow-y: scroll;\n    padding: 10px 0;\n\n    // Styles for custom scrollbar\n    ::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    ::-webkit-scrollbar-track {\n        background-color: transparent;\n    }\n\n    ::-webkit-scrollbar-button {\n        background-color: transparent;\n        height: 5px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        background-color: rgba(\n            ${({ theme }: StyledEmojiPickerEmojisProps) => theme['text-rgb']},\n            0.15\n        );\n        border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n        scrollbar-color: rgba(\n                ${({ theme }: StyledEmojiPickerEmojisProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\n    }\n`;\n\nexport const StyledEmojiPickerEmoji = styled.div`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;\n    font-size: 32px;\n    justify-content: center;\n    width: 48px;\n    height: 48px;\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;AAIhC,MAAMG,uBAAuB,GAAGC,yBAAM,CAACC,GAAkC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAED;EAAoC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC;AAACE,OAAA,CAAAN,uBAAA,GAAAA,uBAAA;AAEK,MAAMO,sBAAsB,GAAGN,yBAAM,CAACC,GAAI;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACI,OAAA,CAAAC,sBAAA,GAAAA,sBAAA"}
+{"version":3,"file":"EmojiPickerEmojis.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledEmojiPickerEmojis","styled","div","_ref","theme","_ref2","exports"],"sources":["../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\n\ntype StyledEmojiPickerEmojisProps = WithTheme<unknown>;\n\nexport const StyledEmojiPickerEmojis = styled.div<StyledEmojiPickerEmojisProps>`\n    display: grid;\n    flex: 1 1 auto;\n    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));\n    grid-template-rows: min-content;\n    overflow-y: scroll;\n    padding: 10px 0;\n    position: relative;\n\n    // Styles for custom scrollbar\n    ::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    ::-webkit-scrollbar-track {\n        background-color: transparent;\n    }\n\n    ::-webkit-scrollbar-button {\n        background-color: transparent;\n        height: 5px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        background-color: rgba(\n            ${({ theme }: StyledEmojiPickerEmojisProps) => theme['text-rgb']},\n            0.15\n        );\n        border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n        scrollbar-color: rgba(\n                ${({ theme }: StyledEmojiPickerEmojisProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\n    }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAIhC,MAAMG,uBAAuB,GAAGC,yBAAM,CAACC,GAAkC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAED;EAAoC,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC;AAACE,OAAA,CAAAN,uBAAA,GAAAA,uBAAA"}

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+export type EmojiProps = {
+    emoji: string;
+    isSkinToneSupported: boolean;
+    onSelect: (emoji: string) => void;
+};
+declare const Emoji: FC<EmojiProps>;
+export default Emoji;

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

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _alignment = require("../../../../constants/alignment");
+var _Emoji = require("./Emoji.styles");
+var _SkinTonePopup = _interopRequireDefault(require("./skin-tone-popup/SkinTonePopup"));
+var _SkinTonePopup2 = require("./skin-tone-popup/SkinTonePopup.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); }
+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 Emoji = _ref => {
+  let {
+    emoji,
+    isSkinToneSupported,
+    onSelect
+  } = _ref;
+  const [shouldShowPopup, setShouldShowPopup] = (0, _react.useState)(false);
+  const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = (0, _react.useState)(_alignment.AnchorAlignment.Top);
+  const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = (0, _react.useState)(0);
+  const [skinTonePopupPosition, setSkinTonePopupPosition] = (0, _react.useState)({
+    left: 0,
+    top: 0
+  });
+  const handleClick = (0, _react.useCallback)(() => {
+    onSelect(emoji);
+  }, [emoji, onSelect]);
+  const handleContextMenu = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    const {
+      currentTarget: element,
+      currentTarget: {
+        parentElement
+      }
+    } = event;
+    if (parentElement) {
+      const {
+        height: elementHeight,
+        left: elementLeft,
+        top: elementTop,
+        width: elementWidth
+      } = element.getBoundingClientRect();
+      const {
+        height: parentHeight,
+        left: parentLeft,
+        top: parentTop,
+        width: parentWidth
+      } = parentElement.getBoundingClientRect();
+      const {
+        scrollTop
+      } = parentElement;
+      let anchorAlignment = _alignment.AnchorAlignment.Top;
+      let anchorOffset = 0;
+      let left = elementLeft - parentLeft - _SkinTonePopup2.skinTonePopupContentSize.width / 2 + elementWidth / 2;
+      let top = elementTop - parentTop + elementHeight;
+      const maxLeft = parentWidth - _SkinTonePopup2.skinTonePopupContentSize.width - 12;
+      const minLeft = 12;
+      if (left < minLeft) {
+        anchorOffset = left - minLeft;
+        left = minLeft;
+      } else if (left > maxLeft) {
+        anchorOffset = left - maxLeft;
+        left = maxLeft;
+      }
+      if (top + _SkinTonePopup2.skinTonePopupContentSize.height > parentHeight + scrollTop) {
+        anchorAlignment = _alignment.AnchorAlignment.Bottom;
+        top -= elementHeight + _SkinTonePopup2.skinTonePopupContentSize.height;
+      }
+      if (isSkinToneSupported) {
+        setSkinTonePopupAnchorAlignment(anchorAlignment);
+        setSkinTonePopupAnchorOffset(anchorOffset);
+        setSkinTonePopupPosition({
+          left,
+          top
+        });
+        setShouldShowPopup(true);
+      }
+    }
+  }, [isSkinToneSupported]);
+  const handleHidePopup = (0, _react.useCallback)(() => setShouldShowPopup(false), []);
+  return /*#__PURE__*/_react.default.createElement(_Emoji.StyledEmoji, {
+    className: "prevent-lose-focus",
+    onClick: handleClick,
+    onContextMenu: handleContextMenu
+  }, emoji, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, shouldShowPopup && /*#__PURE__*/_react.default.createElement(_SkinTonePopup.default, {
+    anchorAlignment: skinTonePopupAnchorAlignment,
+    anchorOffset: skinTonePopupAnchorOffset,
+    emoji: emoji,
+    key: emoji,
+    onHidePopup: handleHidePopup,
+    onSelect: onSelect,
+    position: skinTonePopupPosition
+  })));
+};
+Emoji.displayName = 'Emoji';
+var _default = Emoji;
+exports.default = _default;
+//# sourceMappingURL=Emoji.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_alignment","_Emoji","_SkinTonePopup","_interopRequireDefault","_SkinTonePopup2","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Emoji","_ref","emoji","isSkinToneSupported","onSelect","shouldShowPopup","setShouldShowPopup","useState","skinTonePopupAnchorAlignment","setSkinTonePopupAnchorAlignment","AnchorAlignment","Top","skinTonePopupAnchorOffset","setSkinTonePopupAnchorOffset","skinTonePopupPosition","setSkinTonePopupPosition","left","top","handleClick","useCallback","handleContextMenu","event","preventDefault","stopPropagation","currentTarget","element","parentElement","height","elementHeight","elementLeft","elementTop","width","elementWidth","getBoundingClientRect","parentHeight","parentLeft","parentTop","parentWidth","scrollTop","anchorAlignment","anchorOffset","skinTonePopupContentSize","maxLeft","minLeft","Bottom","handleHidePopup","createElement","StyledEmoji","className","onClick","onContextMenu","AnimatePresence","initial","onHidePopup","position","displayName","_default","exports"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEvent, useCallback, useState } from 'react';\nimport { AnchorAlignment } from '../../../../constants/alignment';\nimport { StyledEmoji } from './Emoji.styles';\nimport SkinTonePopup, { SkinTonePopupProps } from './skin-tone-popup/SkinTonePopup';\nimport { skinTonePopupContentSize } from './skin-tone-popup/SkinTonePopup.styles';\n\nexport type EmojiProps = {\n    emoji: string;\n    isSkinToneSupported: boolean;\n    onSelect: (emoji: string) => void;\n};\n\nconst Emoji: FC<EmojiProps> = ({ emoji, isSkinToneSupported, onSelect }) => {\n    const [shouldShowPopup, setShouldShowPopup] = useState(false);\n    const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = useState(\n        AnchorAlignment.Top\n    );\n    const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = useState(0);\n    const [skinTonePopupPosition, setSkinTonePopupPosition] = useState<\n        SkinTonePopupProps['position']\n    >({ left: 0, top: 0 });\n\n    const handleClick = useCallback(() => {\n        onSelect(emoji);\n    }, [emoji, onSelect]);\n\n    const handleContextMenu = useCallback(\n        (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            const {\n                currentTarget: element,\n                currentTarget: { parentElement },\n            } = event;\n\n            if (parentElement) {\n                const {\n                    height: elementHeight,\n                    left: elementLeft,\n                    top: elementTop,\n                    width: elementWidth,\n                } = element.getBoundingClientRect();\n\n                const {\n                    height: parentHeight,\n                    left: parentLeft,\n                    top: parentTop,\n                    width: parentWidth,\n                } = parentElement.getBoundingClientRect();\n\n                const { scrollTop } = parentElement;\n\n                let anchorAlignment = AnchorAlignment.Top;\n                let anchorOffset = 0;\n\n                let left =\n                    elementLeft -\n                    parentLeft -\n                    skinTonePopupContentSize.width / 2 +\n                    elementWidth / 2;\n\n                let top = elementTop - parentTop + elementHeight;\n\n                const maxLeft = parentWidth - skinTonePopupContentSize.width - 12;\n                const minLeft = 12;\n\n                if (left < minLeft) {\n                    anchorOffset = left - minLeft;\n                    left = minLeft;\n                } else if (left > maxLeft) {\n                    anchorOffset = left - maxLeft;\n                    left = maxLeft;\n                }\n\n                if (top + skinTonePopupContentSize.height > parentHeight + scrollTop) {\n                    anchorAlignment = AnchorAlignment.Bottom;\n                    top -= elementHeight + skinTonePopupContentSize.height;\n                }\n\n                if (isSkinToneSupported) {\n                    setSkinTonePopupAnchorAlignment(anchorAlignment);\n                    setSkinTonePopupAnchorOffset(anchorOffset);\n                    setSkinTonePopupPosition({ left, top });\n                    setShouldShowPopup(true);\n                }\n            }\n        },\n        [isSkinToneSupported]\n    );\n\n    const handleHidePopup = useCallback(() => setShouldShowPopup(false), []);\n\n    return (\n        <StyledEmoji\n            className=\"prevent-lose-focus\"\n            onClick={handleClick}\n            onContextMenu={handleContextMenu}\n        >\n            {emoji}\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <SkinTonePopup\n                        anchorAlignment={skinTonePopupAnchorAlignment}\n                        anchorOffset={skinTonePopupAnchorOffset}\n                        emoji={emoji}\n                        key={emoji}\n                        onHidePopup={handleHidePopup}\n                        onSelect={onSelect}\n                        position={skinTonePopupPosition}\n                    />\n                )}\n            </AnimatePresence>\n        </StyledEmoji>\n    );\n};\n\nEmoji.displayName = 'Emoji';\n\nexport default Emoji;\n"],"mappings":"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"}

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

@@ -0,0 +1 @@
+export declare const StyledEmoji: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledEmoji = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledEmoji = _styledComponents.default.div`
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;
+    font-size: 32px;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+`;
+exports.StyledEmoji = StyledEmoji;
+//# sourceMappingURL=Emoji.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledEmoji","styled","div","exports"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledEmoji = styled.div`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;\n    font-size: 32px;\n    justify-content: center;\n    width: 48px;\n    height: 48px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,WAAW,GAAGC,yBAAM,CAACC,GAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACC,OAAA,CAAAH,WAAA,GAAAA,WAAA"}

package/lib/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+import type { AnchorAlignment } from '../../../../../constants/alignment';
+export type SkinTonePopupProps = {
+    anchorAlignment: AnchorAlignment;
+    anchorOffset: number;
+    emoji: string;
+    onHidePopup: VoidFunction;
+    onSelect: (emojiWithSkinTone: string) => void;
+    position: {
+        left: number;
+        top: number;
+    };
+};
+declare const SkinTonePopup: FC<SkinTonePopupProps>;
+export default SkinTonePopup;

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

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dataEmojiComponents = _interopRequireDefault(require("unicode-emoji-json/data-emoji-components.json"));
+var _emoji = require("../../../../../utils/emoji");
+var _SkinTonePopup = require("./SkinTonePopup.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); }
+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 SkinTonePopup = _ref => {
+  let {
+    anchorAlignment,
+    anchorOffset,
+    emoji,
+    onHidePopup,
+    onSelect,
+    position
+  } = _ref;
+  const handleOverlayClick = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    onHidePopup();
+  }, [onHidePopup]);
+  const emojis = (0, _react.useMemo)(() => {
+    const result = [];
+    Object.entries(_dataEmojiComponents.default).forEach(_ref2 => {
+      let [key, value] = _ref2;
+      if (key.includes('skin_tone')) {
+        const emojiWithSkinTone = (0, _emoji.addSkinToneToEmoji)(emoji, value);
+        const handleClick = event => {
+          event.preventDefault();
+          event.stopPropagation();
+          onSelect(emojiWithSkinTone);
+          onHidePopup();
+        };
+        result.push( /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledSkinTonePopupContentEmoji, {
+          key: key,
+          onClick: handleClick
+        }, emojiWithSkinTone));
+      }
+    });
+    return result;
+  }, [emoji, onHidePopup, onSelect]);
+  return /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledMotionSkinTonePopup, {
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    },
+    initial: {
+      opacity: 0
+    },
+    transition: {
+      duration: 0.1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledSkinTonePopupContent, {
+    anchorAlignment: anchorAlignment,
+    anchorOffset: anchorOffset,
+    style: position
+  }, emojis), /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledSkinTonePopupOverlay, {
+    onClick: handleOverlayClick
+  }));
+};
+SkinTonePopup.displayName = 'SkinTonePopup';
+var _default = SkinTonePopup;
+exports.default = _default;
+//# sourceMappingURL=SkinTonePopup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkinTonePopup.js","names":["_react","_interopRequireWildcard","require","_dataEmojiComponents","_interopRequireDefault","_emoji","_SkinTonePopup","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","SkinTonePopup","_ref","anchorAlignment","anchorOffset","emoji","onHidePopup","onSelect","position","handleOverlayClick","useCallback","event","preventDefault","stopPropagation","emojis","useMemo","result","entries","emojiComponents","forEach","_ref2","value","includes","emojiWithSkinTone","addSkinToneToEmoji","handleClick","push","createElement","StyledSkinTonePopupContentEmoji","onClick","StyledMotionSkinTonePopup","animate","opacity","exit","initial","transition","duration","StyledSkinTonePopupContent","style","StyledSkinTonePopupOverlay","displayName","_default","exports"],"sources":["../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.tsx"],"sourcesContent":["import React, { FC, MouseEvent, useCallback, useMemo } from 'react';\nimport emojiComponents from 'unicode-emoji-json/data-emoji-components.json';\nimport type { AnchorAlignment } from '../../../../../constants/alignment';\nimport { addSkinToneToEmoji } from '../../../../../utils/emoji';\nimport {\n    StyledMotionSkinTonePopup,\n    StyledSkinTonePopupContent,\n    StyledSkinTonePopupContentEmoji,\n    StyledSkinTonePopupOverlay,\n} from './SkinTonePopup.styles';\n\nexport type SkinTonePopupProps = {\n    anchorAlignment: AnchorAlignment;\n    anchorOffset: number;\n    emoji: string;\n    onHidePopup: VoidFunction;\n    onSelect: (emojiWithSkinTone: string) => void;\n    position: { left: number; top: number };\n};\n\nconst SkinTonePopup: FC<SkinTonePopupProps> = ({\n    anchorAlignment,\n    anchorOffset,\n    emoji,\n    onHidePopup,\n    onSelect,\n    position,\n}) => {\n    const handleOverlayClick = useCallback(\n        (event: MouseEvent<HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            onHidePopup();\n        },\n        [onHidePopup]\n    );\n\n    const emojis = useMemo(() => {\n        const result: JSX.Element[] = [];\n\n        Object.entries(emojiComponents).forEach(([key, value]) => {\n            if (key.includes('skin_tone')) {\n                const emojiWithSkinTone = addSkinToneToEmoji(emoji, value);\n\n                const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    onSelect(emojiWithSkinTone);\n\n                    onHidePopup();\n                };\n\n                result.push(\n                    <StyledSkinTonePopupContentEmoji key={key} onClick={handleClick}>\n                        {emojiWithSkinTone}\n                    </StyledSkinTonePopupContentEmoji>\n                );\n            }\n        });\n\n        return result;\n    }, [emoji, onHidePopup, onSelect]);\n\n    return (\n        <StyledMotionSkinTonePopup\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            initial={{ opacity: 0 }}\n            transition={{ duration: 0.1 }}\n        >\n            <StyledSkinTonePopupContent\n                anchorAlignment={anchorAlignment}\n                anchorOffset={anchorOffset}\n                style={position}\n            >\n                {emojis}\n            </StyledSkinTonePopupContent>\n            <StyledSkinTonePopupOverlay onClick={handleOverlayClick} />\n        </StyledMotionSkinTonePopup>\n    );\n};\n\nSkinTonePopup.displayName = 'SkinTonePopup';\n\nexport default SkinTonePopup;\n"],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+import type { SkinTonePopupProps } from './SkinTonePopup';
+export declare const StyledMotionSkinTonePopup: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export declare const skinTonePopupContentSize: {
+    height: number;
+    width: number;
+};
+export declare const StyledSkinTonePopupContent: import("styled-components").StyledComponent<"div", any, Pick<SkinTonePopupProps, "anchorAlignment" | "anchorOffset"> & {
+    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledSkinTonePopupContentEmoji: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSkinTonePopupOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.skinTonePopupContentSize = exports.StyledSkinTonePopupOverlay = exports.StyledSkinTonePopupContentEmoji = exports.StyledSkinTonePopupContent = exports.StyledMotionSkinTonePopup = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _alignment = require("../../../../../constants/alignment");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const StyledMotionSkinTonePopup = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    z-index: 1;
+`;
+exports.StyledMotionSkinTonePopup = StyledMotionSkinTonePopup;
+const skinTonePopupContentSize = {
+  height: 48,
+  width: 200
+};
+exports.skinTonePopupContentSize = skinTonePopupContentSize;
+const StyledSkinTonePopupContent = _styledComponents.default.div`
+    align-items: stretch;
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['001'];
+}};
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
+    display: flex;
+    height: ${skinTonePopupContentSize.height}px;
+    justify-content: stretch;
+    position: absolute;
+    width: ${skinTonePopupContentSize.width}px;
+    z-index: 2;
+
+    ::after {
+        background-color: inherit;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        border-bottom-right-radius: 3px;
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);
+        content: '';
+        height: 14px;
+        position: absolute;
+        width: 14px;
+        z-index: -2;
+
+        ${_ref2 => {
+  let {
+    anchorAlignment,
+    anchorOffset
+  } = _ref2;
+  switch (anchorAlignment) {
+    case _alignment.AnchorAlignment.Bottom:
+      return (0, _styledComponents.css)`
+                        bottom: -7px;
+                        left: calc(50% - 7px + ${anchorOffset}px);
+                        transform: rotate(45deg);
+                    `;
+    case _alignment.AnchorAlignment.Top:
+      return (0, _styledComponents.css)`
+                        top: -7px;
+                        left: calc(50% - 7px + ${anchorOffset}px);
+                        transform: rotate(225deg);
+                    `;
+    default:
+      return undefined;
+  }
+}}
+    }
+
+    ::before {
+        background-color: inherit;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: -1;
+    }
+`;
+exports.StyledSkinTonePopupContent = StyledSkinTonePopupContent;
+const StyledSkinTonePopupContentEmoji = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    flex: 1 1 auto;
+    font-size: 24px;
+    justify-content: center;
+`;
+exports.StyledSkinTonePopupContentEmoji = StyledSkinTonePopupContentEmoji;
+const StyledSkinTonePopupOverlay = _styledComponents.default.div`
+    bottom: 0;
+    cursor: default;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+`;
+exports.StyledSkinTonePopupOverlay = StyledSkinTonePopupOverlay;
+//# sourceMappingURL=SkinTonePopup.styles.js.map

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

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

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

@@ -1,6 +1,10 @@
 import { FC } from 'react';
 import { PopupAlignment } from '../../constants/alignment';
 export type EmojiPickerPopupProps = {
+    /**
+     * Access token of the logged-in user. Is needed to load and save the history of the emojis.
+     */
+    accessToken?: 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
@@ -12,6 +16,10 @@ export type EmojiPickerPopupProps = {
      * @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;
     /**
      * Function executed when an emoji is selected in the popup
      * @param {string} emoji - Emoji that was selected

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

@@ -16,9 +16,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const EmojiPickerPopup = _ref => {
   let {
+    accessToken,
     alignment,
     onPopupVisibilityChange,
-    onSelect
+    onSelect,
+    personId
   } = _ref;
   const [internalAlignment, setInternalAlignment] = (0, _react.useState)(_alignment.PopupAlignment.TopLeft);
   const [shouldShowPopup, setShouldShowPopup] = (0, _react.useState)(false);
@@ -132,7 +134,9 @@ const EmojiPickerPopup = _ref => {
       type: 'tween'
     }
   }, /*#__PURE__*/_react.default.createElement(_EmojiPicker.default, {
-    onSelect: onSelect
+    accessToken: accessToken,
+    onSelect: onSelect,
+    personId: personId
   }))), /*#__PURE__*/_react.default.createElement(_Icon.default, {
     className: "prevent-lose-focus",
     icons: ['far fa-smile'],

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","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 (typeof newInternalAlignment !== 'number') {\n                if (top < emojiPickerSize.height + 16) {\n                    if (left < emojiPickerSize.width + 16) {\n                        newInternalAlignment = PopupAlignment.BottomRight;\n                    } else {\n                        newInternalAlignment = PopupAlignment.BottomLeft;\n                    }\n                } else if (left < emojiPickerSize.width + 16) {\n                    newInternalAlignment = PopupAlignment.TopRight;\n                } else {\n                    newInternalAlignment = PopupAlignment.TopLeft;\n                }\n            }\n\n            let newPosition: PopupPosition = {};\n\n            switch (newInternalAlignment) {\n                case PopupAlignment.BottomLeft:\n                    newPosition = { left: 8 + width - emojiPickerSize.width, top: 12 + height };\n                    break;\n                case PopupAlignment.BottomRight:\n                    newPosition = { left: -10, top: 12 + height };\n                    break;\n                case PopupAlignment.TopLeft:\n                    newPosition = {\n                        left: 8 + width - emojiPickerSize.width,\n                        top: -12 - emojiPickerSize.height,\n                    };\n                    break;\n                case PopupAlignment.TopRight:\n                    newPosition = { left: -10, top: -12 - emojiPickerSize.height };\n                    break;\n                default:\n                    break;\n            }\n\n            setInternalAlignment(newInternalAlignment);\n            setPosition(newPosition);\n            setShouldShowPopup(true);\n        },\n        [alignment, shouldShowPopup]\n    );\n\n    useEffect(() => {\n        if (shouldShowPopup) {\n            document.addEventListener('click', handleDocumentClick, true);\n            window.addEventListener('blur', handleHide);\n        }\n\n        return () => {\n            document.removeEventListener('click', handleDocumentClick, true);\n            window.removeEventListener('blur', handleHide);\n        };\n    }, [handleDocumentClick, handleHide, shouldShowPopup]);\n\n    useEffect(() => {\n        if (typeof onPopupVisibilityChange === 'function') {\n            onPopupVisibilityChange(shouldShowPopup);\n        }\n    }, [onPopupVisibilityChange, shouldShowPopup]);\n\n    const exitAndInitialY =\n        internalAlignment === PopupAlignment.TopLeft ||\n        internalAlignment === PopupAlignment.TopRight\n            ? -16\n            : 16;\n\n    return (\n        <StyledEmojiPickerPopup>\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <StyledMotionEmojiPickerPopupContent\n                        alignment={internalAlignment}\n                        animate={{ opacity: 1, y: 0 }}\n                        exit={{ opacity: 0, y: exitAndInitialY }}\n                        initial={{ opacity: 0, y: exitAndInitialY }}\n                        key=\"emojiPickerPopupContent\"\n                        ref={contentRef}\n                        style={position}\n                        transition={{ type: 'tween' }}\n                    >\n                        <EmojiPicker 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","accessToken","alignment","onPopupVisibilityChange","onSelect","personId","internalAlignment","setInternalAlignment","useState","PopupAlignment","TopLeft","shouldShowPopup","setShouldShowPopup","position","setPosition","contentRef","useRef","handleHide","useCallback","handleDocumentClick","event","_contentRef$current","current","contains","target","preventDefault","stopPropagation","handlePopupIconClick","height","left","top","width","currentTarget","getBoundingClientRect","newInternalAlignment","emojiPickerSize","BottomRight","BottomLeft","TopRight","newPosition","useEffect","document","addEventListener","window","removeEventListener","exitAndInitialY","createElement","StyledEmojiPickerPopup","AnimatePresence","initial","StyledMotionEmojiPickerPopupContent","animate","opacity","y","exit","ref","style","transition","type","className","icons","onClick","size","displayName","_default","exports"],"sources":["../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import Icon from '@chayns-components/core/lib/components/icon/Icon';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { PopupAlignment } from '../../constants/alignment';\nimport EmojiPicker from '../emoji-picker/EmojiPicker';\nimport { emojiPickerSize } from '../emoji-picker/EmojiPicker.styles';\nimport {\n    StyledEmojiPickerPopup,\n    StyledMotionEmojiPickerPopupContent,\n} from './EmojiPickerPopup.styles';\n\nexport type EmojiPickerPopupProps = {\n    /**\n     * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    accessToken?: string;\n    /**\n     * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n     * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n     * value.\n     */\n    alignment?: PopupAlignment;\n    /**\n     * Function that is executed when the visibility of the popup changes.\n     * @param {boolean} isVisible - Whether the popup is visible or not\n     */\n    onPopupVisibilityChange?: (isVisible: boolean) => void;\n    /**\n     * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    personId?: string;\n    /**\n     * Function executed when an emoji is selected in the popup\n     * @param {string} emoji - Emoji that was selected\n     */\n    onSelect: (emoji: string) => void;\n};\n\nexport type PopupPosition = {\n    bottom?: number;\n    left?: number;\n    right?: number;\n    top?: number;\n};\n\nconst EmojiPickerPopup: FC<EmojiPickerPopupProps> = ({\n    accessToken,\n    alignment,\n    onPopupVisibilityChange,\n    onSelect,\n    personId,\n}) => {\n    const [internalAlignment, setInternalAlignment] = useState<PopupAlignment>(\n        PopupAlignment.TopLeft\n    );\n    const [shouldShowPopup, setShouldShowPopup] = useState(false);\n    const [position, setPosition] = useState({} as PopupPosition);\n\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const handleHide = useCallback(() => {\n        setShouldShowPopup(false);\n    }, []);\n\n    const handleDocumentClick = useCallback<EventListener>(\n        (event) => {\n            if (!contentRef.current?.contains(event.target as Node)) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                handleHide();\n            }\n        },\n        [handleHide]\n    );\n\n    const handlePopupIconClick = useCallback(\n        (event: MouseEvent<HTMLSpanElement>) => {\n            if (shouldShowPopup) {\n                setShouldShowPopup(false);\n\n                return;\n            }\n\n            const { height, left, top, width } = event.currentTarget.getBoundingClientRect();\n\n            let newInternalAlignment: PopupAlignment | undefined = alignment;\n\n            if (typeof newInternalAlignment !== 'number') {\n                if (top < emojiPickerSize.height + 16) {\n                    if (left < emojiPickerSize.width + 16) {\n                        newInternalAlignment = PopupAlignment.BottomRight;\n                    } else {\n                        newInternalAlignment = PopupAlignment.BottomLeft;\n                    }\n                } else if (left < emojiPickerSize.width + 16) {\n                    newInternalAlignment = PopupAlignment.TopRight;\n                } else {\n                    newInternalAlignment = PopupAlignment.TopLeft;\n                }\n            }\n\n            let newPosition: PopupPosition = {};\n\n            switch (newInternalAlignment) {\n                case PopupAlignment.BottomLeft:\n                    newPosition = { left: 8 + width - emojiPickerSize.width, top: 12 + height };\n                    break;\n                case PopupAlignment.BottomRight:\n                    newPosition = { left: -10, top: 12 + height };\n                    break;\n                case PopupAlignment.TopLeft:\n                    newPosition = {\n                        left: 8 + width - emojiPickerSize.width,\n                        top: -12 - emojiPickerSize.height,\n                    };\n                    break;\n                case PopupAlignment.TopRight:\n                    newPosition = { left: -10, top: -12 - emojiPickerSize.height };\n                    break;\n                default:\n                    break;\n            }\n\n            setInternalAlignment(newInternalAlignment);\n            setPosition(newPosition);\n            setShouldShowPopup(true);\n        },\n        [alignment, shouldShowPopup]\n    );\n\n    useEffect(() => {\n        if (shouldShowPopup) {\n            document.addEventListener('click', handleDocumentClick, true);\n            window.addEventListener('blur', handleHide);\n        }\n\n        return () => {\n            document.removeEventListener('click', handleDocumentClick, true);\n            window.removeEventListener('blur', handleHide);\n        };\n    }, [handleDocumentClick, handleHide, shouldShowPopup]);\n\n    useEffect(() => {\n        if (typeof onPopupVisibilityChange === 'function') {\n            onPopupVisibilityChange(shouldShowPopup);\n        }\n    }, [onPopupVisibilityChange, shouldShowPopup]);\n\n    const exitAndInitialY =\n        internalAlignment === PopupAlignment.TopLeft ||\n        internalAlignment === PopupAlignment.TopRight\n            ? -16\n            : 16;\n\n    return (\n        <StyledEmojiPickerPopup>\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <StyledMotionEmojiPickerPopupContent\n                        alignment={internalAlignment}\n                        animate={{ opacity: 1, y: 0 }}\n                        exit={{ opacity: 0, y: exitAndInitialY }}\n                        initial={{ opacity: 0, y: exitAndInitialY }}\n                        key=\"emojiPickerPopupContent\"\n                        ref={contentRef}\n                        style={position}\n                        transition={{ type: 'tween' }}\n                    >\n                        <EmojiPicker\n                            accessToken={accessToken}\n                            onSelect={onSelect}\n                            personId={personId}\n                        />\n                    </StyledMotionEmojiPickerPopupContent>\n                )}\n            </AnimatePresence>\n            <Icon\n                className=\"prevent-lose-focus\"\n                icons={['far fa-smile']}\n                onClick={handlePopupIconClick}\n                size={18}\n            />\n        </StyledEmojiPickerPopup>\n    );\n};\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":"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"}

package/lib/constants/alignment.d.ts

@@ -1,3 +1,7 @@
+export declare enum AnchorAlignment {
+    Bottom = 0,
+    Top = 1
+}
 export declare enum PopupAlignment {
     TopLeft = 0,
     BottomLeft = 1,

package/lib/constants/alignment.js

@@ -3,7 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PopupAlignment = void 0;
+exports.PopupAlignment = exports.AnchorAlignment = void 0;
+let AnchorAlignment;
+exports.AnchorAlignment = AnchorAlignment;
+(function (AnchorAlignment) {
+  AnchorAlignment[AnchorAlignment["Bottom"] = 0] = "Bottom";
+  AnchorAlignment[AnchorAlignment["Top"] = 1] = "Top";
+})(AnchorAlignment || (exports.AnchorAlignment = AnchorAlignment = {}));
 let PopupAlignment;
 exports.PopupAlignment = PopupAlignment;
 (function (PopupAlignment) {

package/lib/constants/alignment.js.map

@@ -1 +1 @@
-{"version":3,"file":"alignment.js","names":["PopupAlignment","exports"],"sources":["../../src/constants/alignment.ts"],"sourcesContent":["export enum PopupAlignment {\n    TopLeft,\n    BottomLeft,\n    TopRight,\n    BottomRight,\n}\n"],"mappings":";;;;;;IAAYA,cAAc;AAAAC,OAAA,CAAAD,cAAA,GAAAA,cAAA;AAAA,WAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;AAAA,GAAdA,cAAc,KAAAC,OAAA,CAAAD,cAAA,GAAdA,cAAc"}
+{"version":3,"file":"alignment.js","names":["AnchorAlignment","exports","PopupAlignment"],"sources":["../../src/constants/alignment.ts"],"sourcesContent":["export enum AnchorAlignment {\n    Bottom,\n    Top,\n}\n\nexport enum PopupAlignment {\n    TopLeft,\n    BottomLeft,\n    TopRight,\n    BottomRight,\n}\n"],"mappings":";;;;;;IAAYA,eAAe;AAAAC,OAAA,CAAAD,eAAA,GAAAA,eAAA;AAAA,WAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;AAAA,GAAfA,eAAe,KAAAC,OAAA,CAAAD,eAAA,GAAfA,eAAe;AAAA,IAKfE,cAAc;AAAAD,OAAA,CAAAC,cAAA,GAAAA,cAAA;AAAA,WAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;AAAA,GAAdA,cAAc,KAAAD,OAAA,CAAAC,cAAA,GAAdA,cAAc"}

package/lib/constants/categories.d.ts

@@ -1,4 +1,5 @@
 export declare const CATEGORY_EMOJIS: {
+    history: string;
     smileys_emotion: string;
     people_body: string;
     animals_nature: string;

package/lib/constants/categories.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CATEGORY_EMOJIS = void 0;
 const CATEGORY_EMOJIS = {
+  history: '🕘',
   smileys_emotion: '😀',
   people_body: '👦',
   animals_nature: '🐶',