@chayns-components/emoji-input 5.0.0-beta.98 → 5.0.0-beta.981

package/lib/{components → cjs/components}/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledMotionEmojiPickerCategory = exports.StyledEmojiPickerCategories = void 0;
 var _framerMotion = require("framer-motion");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const StyledEmojiPickerCategories = _styledComponents.default.div`
+var _font = require("../../../utils/font");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledEmojiPickerCategories = exports.StyledEmojiPickerCategories = _styledComponents.default.div`
     align-items: center;
     border-top: 1px solid rgba(160, 160, 160, 0.3);
     display: flex;
@@ -16,11 +17,9 @@ const StyledEmojiPickerCategories = _styledComponents.default.div`
     padding-top: 10px;
     width: 100%;
 `;
-exports.StyledEmojiPickerCategories = StyledEmojiPickerCategories;
-const StyledMotionEmojiPickerCategory = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledMotionEmojiPickerCategory = exports.StyledMotionEmojiPickerCategory = (0, _styledComponents.default)(_framerMotion.motion.div)`
     cursor: pointer;
-    font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;
+    font-family: ${_font.getFontFamily};
     font-size: 20px;
 `;
-exports.StyledMotionEmojiPickerCategory = StyledMotionEmojiPickerCategory;
 //# sourceMappingURL=EmojiPickerCategories.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerCategories.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","_font","e","__esModule","default","StyledEmojiPickerCategories","exports","styled","div","StyledMotionEmojiPickerCategory","motion","getFontFamily"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-categories/EmojiPickerCategories.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport { getFontFamily } from '../../../utils/font';\n\nexport const StyledEmojiPickerCategories = styled.div`\n    align-items: center;\n    border-top: 1px solid rgba(160, 160, 160, 0.3);\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: space-between;\n    padding-top: 10px;\n    width: 100%;\n`;\n\nexport const StyledMotionEmojiPickerCategory = styled(motion.div)<FramerMotionBugFix>`\n    cursor: pointer;\n    font-family: ${getFontFamily};\n    font-size: 20px;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAAoD,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE7C,MAAMG,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAGE,yBAAM,CAACC,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,+BAA+B,GAAAH,OAAA,CAAAG,+BAAA,GAAG,IAAAF,yBAAM,EAACG,oBAAM,CAACF,GAAG,CAAqB;AACrF;AACA,mBAAmBG,mBAAa;AAChC;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,240 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _chaynsApi = require("chayns-api");
+var _emojilib = _interopRequireDefault(require("emojilib"));
+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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const EmojiPickerEmojis = ({
+  accessToken,
+  onSelect,
+  personId,
+  searchString,
+  selectedCategory
+}) => {
+  const [shouldPreventScroll, setShouldPreventScroll] = (0, _react.useState)(false);
+  const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = (0, _react.useState)(false);
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(0);
+  const emojiRef = (0, _react.useRef)(null);
+  const shouldPreventEmojiControlsRef = (0, _react.useRef)(false);
+  const {
+    browser
+  } = (0, _chaynsApi.getDevice)();
+  const {
+    addOrUpdateEmojiInHistory,
+    historyEmojis
+  } = (0, _emojiHistory.useEmojiHistory)({
+    accessToken,
+    personId,
+    selectedCategory
+  });
+  const handlePopupVisibilityChange = (0, _react.useCallback)(isVisible => {
+    setShouldShowSkinTonePopup(isVisible);
+    shouldPreventEmojiControlsRef.current = isVisible;
+    setShouldPreventScroll(isVisible);
+  }, []);
+  const handleSelect = (0, _react.useCallback)(({
+    emoji,
+    name,
+    skin_tone_support,
+    index
+  }) => {
+    onSelect(emoji);
+    if (index) {
+      setFocusedIndex(index);
+    }
+    void addOrUpdateEmojiInHistory({
+      emoji,
+      name,
+      skin_tone_support
+    });
+  }, [addOrUpdateEmojiInHistory, onSelect]);
+  (0, _react.useEffect)(() => {
+    if (selectedCategory) {
+      setFocusedIndex(0);
+      const container = emojiRef.current;
+      if (!container) {
+        return;
+      }
+      container.scrollTop = 0;
+    }
+  }, [selectedCategory]);
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = event => {
+      if (!shouldPreventEmojiControlsRef.current && (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+        var _emojiRef$current;
+        event.preventDefault();
+        const children = (_emojiRef$current = emojiRef.current) === null || _emojiRef$current === void 0 ? void 0 : _emojiRef$current.children;
+        if (children && children.length > 0) {
+          const container = emojiRef.current;
+          let newIndex = focusedIndex !== null ? focusedIndex : 0;
+          if (event.ctrlKey) {
+            return;
+          }
+          if (event.key === 'ArrowUp') {
+            newIndex = (newIndex - 6) % children.length;
+          } else if (event.key === 'ArrowDown') {
+            newIndex = (newIndex + 6) % children.length;
+          } else if (event.key === 'ArrowLeft') {
+            newIndex = (newIndex - 1) % children.length;
+          } else if (event.key === 'ArrowRight') {
+            newIndex = (newIndex + 1) % children.length;
+          }
+
+          // remove focus from the old element
+          if (focusedIndex !== null) {
+            const prevElement = children[focusedIndex];
+            prevElement.tabIndex = -1;
+          }
+          if (newIndex < 0) {
+            newIndex = children.length - 1;
+          } else if (newIndex > children.length - 1) {
+            newIndex = 0;
+          }
+          setFocusedIndex(newIndex);
+
+          // Set focus to the element
+          const newElement = children[newIndex];
+          newElement.tabIndex = 0;
+          const containerRect = container.getBoundingClientRect();
+          const elementRect = newElement.getBoundingClientRect();
+          if (elementRect.bottom > containerRect.bottom) {
+            container.scrollTop += elementRect.bottom - containerRect.bottom;
+          } else if (elementRect.top < containerRect.top) {
+            container.scrollTop -= containerRect.top - elementRect.top;
+          }
+        }
+      } else if (event.key === 'Enter' && !shouldPreventEmojiControlsRef.current && focusedIndex !== null) {
+        var _emojiRef$current2;
+        if (event.ctrlKey) {
+          setShouldShowSkinTonePopup(true);
+          return;
+        }
+        const {
+          dataset
+        } = (_emojiRef$current2 = emojiRef.current) === null || _emojiRef$current2 === void 0 ? void 0 : _emojiRef$current2.children[focusedIndex];
+        const {
+          emoji,
+          name,
+          skinToneSupport
+        } = dataset;
+        if (!emoji || !name || !skinToneSupport) {
+          return;
+        }
+        handleSelect({
+          emoji,
+          name,
+          skin_tone_support: skinToneSupport === 'true'
+        });
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [focusedIndex, handleSelect]);
+  const handleRightClick = (0, _react.useCallback)(index => {
+    setFocusedIndex(index);
+  }, []);
+  const emojis = (0, _react.useMemo)(() => {
+    var _emojiCategories$find;
+    if (searchString.trim() !== '') {
+      const lowerSearchString = searchString.toLowerCase();
+      const searchResults = [];
+      Object.entries(_dataByEmoji.default).forEach(([emoji, {
+        name,
+        skin_tone_support
+      }], index) => {
+        const keywords = _emojilib.default[emoji];
+        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(_Emoji.default, {
+            shouldShowSkinTonePopup: index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup,
+            isSelected: index === focusedIndex,
+            emoji: emoji,
+            index: index,
+            onRightClick: handleRightClick,
+            isSkinToneSupported: skin_tone_support,
+            key: name,
+            name: name,
+            onPopupVisibilityChange: handlePopupVisibilityChange,
+            onSelect: e => handleSelect({
+              emoji: e,
+              name,
+              skin_tone_support,
+              index
+            })
+          }));
+        }
+      });
+      return searchResults;
+    }
+    if (selectedCategory === 'history') {
+      return historyEmojis.map(({
+        emoji,
+        name,
+        skin_tone_support
+      }, index) => /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+        isSelected: index === focusedIndex,
+        shouldShowSkinTonePopup: index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup,
+        emoji: emoji,
+        name: name,
+        key: name,
+        index: index,
+        onRightClick: handleRightClick,
+        onPopupVisibilityChange: handlePopupVisibilityChange,
+        onSelect: e => handleSelect({
+          emoji: e,
+          name,
+          skin_tone_support,
+          index
+        }),
+        isSkinToneSupported: false
+      }));
+    }
+    return (_emojiCategories$find = _dataByGroup.default.find(({
+      slug
+    }) => slug === selectedCategory)) === null || _emojiCategories$find === void 0 ? void 0 : _emojiCategories$find.emojis.map(({
+      emoji,
+      name,
+      skin_tone_support
+    }, index) => /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+      isSelected: index === focusedIndex,
+      shouldShowSkinTonePopup: index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup,
+      emoji: emoji,
+      name: name,
+      index: index,
+      onRightClick: handleRightClick,
+      isSkinToneSupported: skin_tone_support,
+      key: name,
+      onPopupVisibilityChange: handlePopupVisibilityChange,
+      onSelect: e => handleSelect({
+        emoji: e,
+        name,
+        skin_tone_support,
+        index
+      })
+    }));
+  }, [searchString, selectedCategory, focusedIndex, shouldShowSkinTonePopup, handleRightClick, handlePopupVisibilityChange, handleSelect, historyEmojis]);
+  const shouldShowNoContentInfo = !emojis || emojis.length === 0;
+  return /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.StyledEmojiPickerEmojis, {
+    $browser: browser === null || browser === void 0 ? void 0 : browser.name,
+    $shouldPreventScroll: shouldPreventScroll,
+    $shouldShowNoContentInfo: shouldShowNoContentInfo,
+    ref: emojiRef
+  }, emojis, shouldShowNoContentInfo && /*#__PURE__*/_react.default.createElement(_EmojiPickerEmojis.StyledEmojiPickerEmojisNoContentInfo, null, "Hier werden die zuletzt verwendeten Emojis angezeigt, die \xFCber diese Auswahl gew\xE4hlt wurden."));
+};
+EmojiPickerEmojis.displayName = 'EmojiPickerEmojis';
+var _default = exports.default = EmojiPickerEmojis;
+//# sourceMappingURL=EmojiPickerEmojis.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerEmojis.js","names":["_chaynsApi","require","_emojilib","_interopRequireDefault","_react","_interopRequireWildcard","_dataByEmoji","_dataByGroup","_emojiDeDE","_emojiHistory","_Emoji","_EmojiPickerEmojis","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","EmojiPickerEmojis","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","useState","shouldShowSkinTonePopup","setShouldShowSkinTonePopup","focusedIndex","setFocusedIndex","emojiRef","useRef","shouldPreventEmojiControlsRef","browser","getDevice","addOrUpdateEmojiInHistory","historyEmojis","useEmojiHistory","handlePopupVisibilityChange","useCallback","isVisible","current","handleSelect","emoji","name","skin_tone_support","index","useEffect","container","scrollTop","handleKeyDown","event","key","_emojiRef$current","preventDefault","children","length","newIndex","ctrlKey","prevElement","tabIndex","newElement","containerRect","getBoundingClientRect","elementRect","bottom","top","_emojiRef$current2","dataset","skinToneSupport","document","addEventListener","removeEventListener","handleRightClick","emojis","useMemo","_emojiCategories$find","trim","lowerSearchString","toLowerCase","searchResults","entries","emojiList","forEach","keywords","emojiLib","germanKeywords","germanEmojiLib","includes","some","keyword","push","createElement","isSelected","onRightClick","isSkinToneSupported","onPopupVisibilityChange","map","emojiCategories","find","slug","shouldShowNoContentInfo","StyledEmojiPickerEmojis","$browser","$shouldPreventScroll","$shouldShowNoContentInfo","ref","StyledEmojiPickerEmojisNoContentInfo","displayName","_default","exports"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport emojiLib from 'emojilib';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport emojiList from 'unicode-emoji-json/data-by-emoji.json';\nimport emojiCategories from 'unicode-emoji-json/data-by-group.json';\nimport germanEmojiLib from '../../../constants/emoji-de-DE.json';\nimport { useEmojiHistory } from '../../../hooks/emojiHistory';\nimport type { Category } from '../../../types/category';\nimport Emoji from './emoji/Emoji';\nimport {\n    StyledEmojiPickerEmojis,\n    StyledEmojiPickerEmojisNoContentInfo,\n} from './EmojiPickerEmojis.styles';\n\nexport type EmojiPickerEmojisProps = {\n    accessToken?: string;\n    onSelect: (emoji: string) => void;\n    personId?: string;\n    searchString: string;\n    selectedCategory: Category;\n};\n\nconst EmojiPickerEmojis: FC<EmojiPickerEmojisProps> = ({\n    accessToken,\n    onSelect,\n    personId,\n    searchString,\n    selectedCategory,\n}) => {\n    const [shouldPreventScroll, setShouldPreventScroll] = useState(false);\n    const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = useState(false);\n    const [focusedIndex, setFocusedIndex] = useState<number>(0);\n\n    const emojiRef = useRef<HTMLDivElement>(null);\n    const shouldPreventEmojiControlsRef = useRef(false);\n\n    const { browser } = getDevice();\n\n    const { addOrUpdateEmojiInHistory, historyEmojis } = useEmojiHistory({\n        accessToken,\n        personId,\n        selectedCategory,\n    });\n\n    const handlePopupVisibilityChange = useCallback((isVisible: boolean) => {\n        setShouldShowSkinTonePopup(isVisible);\n        shouldPreventEmojiControlsRef.current = isVisible;\n        setShouldPreventScroll(isVisible);\n    }, []);\n\n    const handleSelect = useCallback(\n        ({\n            emoji,\n            name,\n            skin_tone_support,\n            index,\n        }: {\n            emoji: string;\n            name: string;\n            skin_tone_support: boolean;\n            index?: number;\n        }) => {\n            onSelect(emoji);\n\n            if (index) {\n                setFocusedIndex(index);\n            }\n\n            void addOrUpdateEmojiInHistory({ emoji, name, skin_tone_support });\n        },\n        [addOrUpdateEmojiInHistory, onSelect],\n    );\n\n    useEffect(() => {\n        if (selectedCategory) {\n            setFocusedIndex(0);\n\n            const container = emojiRef.current;\n\n            if (!container) {\n                return;\n            }\n\n            container.scrollTop = 0;\n        }\n    }, [selectedCategory]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                !shouldPreventEmojiControlsRef.current &&\n                (event.key === 'ArrowUp' ||\n                    event.key === 'ArrowDown' ||\n                    event.key === 'ArrowLeft' ||\n                    event.key === 'ArrowRight')\n            ) {\n                event.preventDefault();\n                const children = emojiRef.current?.children;\n                if (children && children.length > 0) {\n                    const container = emojiRef.current;\n                    let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n                    if (event.ctrlKey) {\n                        return;\n                    }\n\n                    if (event.key === 'ArrowUp') {\n                        newIndex = (newIndex - 6) % children.length;\n                    } else if (event.key === 'ArrowDown') {\n                        newIndex = (newIndex + 6) % children.length;\n                    } else if (event.key === 'ArrowLeft') {\n                        newIndex = (newIndex - 1) % children.length;\n                    } else if (event.key === 'ArrowRight') {\n                        newIndex = (newIndex + 1) % children.length;\n                    }\n\n                    // remove focus from the old element\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    if (newIndex < 0) {\n                        newIndex = children.length - 1;\n                    } else if (newIndex > children.length - 1) {\n                        newIndex = 0;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    // Set focus to the element\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n\n                    const containerRect = container.getBoundingClientRect();\n                    const elementRect = newElement.getBoundingClientRect();\n\n                    if (elementRect.bottom > containerRect.bottom) {\n                        container.scrollTop += elementRect.bottom - containerRect.bottom;\n                    } else if (elementRect.top < containerRect.top) {\n                        container.scrollTop -= containerRect.top - elementRect.top;\n                    }\n                }\n            } else if (\n                event.key === 'Enter' &&\n                !shouldPreventEmojiControlsRef.current &&\n                focusedIndex !== null\n            ) {\n                if (event.ctrlKey) {\n                    setShouldShowSkinTonePopup(true);\n\n                    return;\n                }\n\n                const { dataset } = emojiRef.current?.children[focusedIndex] as HTMLDivElement;\n\n                const { emoji, name, skinToneSupport } = dataset;\n\n                if (!emoji || !name || !skinToneSupport) {\n                    return;\n                }\n\n                handleSelect({ emoji, name, skin_tone_support: skinToneSupport === 'true' });\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSelect]);\n\n    const handleRightClick = useCallback((index: number) => {\n        setFocusedIndex(index);\n    }, []);\n\n    const emojis = useMemo(() => {\n        if (searchString.trim() !== '') {\n            const lowerSearchString = searchString.toLowerCase();\n\n            const searchResults: JSX.Element[] = [];\n\n            Object.entries(emojiList).forEach(([emoji, { name, skin_tone_support }], index) => {\n                const keywords = (emojiLib as { [key: string]: string[] })[emoji] as\n                    | string[]\n                    | undefined;\n\n                const germanKeywords = (germanEmojiLib as { [key: string]: string[] })[emoji] as\n                    | string[]\n                    | undefined;\n\n                if (\n                    name.includes(lowerSearchString) ||\n                    keywords?.some((keyword) => keyword.includes(lowerSearchString)) ||\n                    germanKeywords?.some((keyword) => keyword.includes(lowerSearchString))\n                ) {\n                    searchResults.push(\n                        <Emoji\n                            shouldShowSkinTonePopup={\n                                index === focusedIndex &&\n                                skin_tone_support &&\n                                shouldShowSkinTonePopup\n                            }\n                            isSelected={index === focusedIndex}\n                            emoji={emoji}\n                            index={index}\n                            onRightClick={handleRightClick}\n                            isSkinToneSupported={skin_tone_support}\n                            key={name}\n                            name={name}\n                            onPopupVisibilityChange={handlePopupVisibilityChange}\n                            onSelect={(e) =>\n                                handleSelect({ emoji: e, name, skin_tone_support, index })\n                            }\n                        />,\n                    );\n                }\n            });\n\n            return searchResults;\n        }\n\n        if (selectedCategory === 'history') {\n            return historyEmojis.map(({ emoji, name, skin_tone_support }, index) => (\n                <Emoji\n                    isSelected={index === focusedIndex}\n                    shouldShowSkinTonePopup={\n                        index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n                    }\n                    emoji={emoji}\n                    name={name}\n                    key={name}\n                    index={index}\n                    onRightClick={handleRightClick}\n                    onPopupVisibilityChange={handlePopupVisibilityChange}\n                    onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n                    isSkinToneSupported={false}\n                />\n            ));\n        }\n\n        return emojiCategories\n            .find(({ slug }) => slug === selectedCategory)\n            ?.emojis.map(({ emoji, name, skin_tone_support }, index) => (\n                <Emoji\n                    isSelected={index === focusedIndex}\n                    shouldShowSkinTonePopup={\n                        index === focusedIndex && skin_tone_support && shouldShowSkinTonePopup\n                    }\n                    emoji={emoji}\n                    name={name}\n                    index={index}\n                    onRightClick={handleRightClick}\n                    isSkinToneSupported={skin_tone_support}\n                    key={name}\n                    onPopupVisibilityChange={handlePopupVisibilityChange}\n                    onSelect={(e) => handleSelect({ emoji: e, name, skin_tone_support, index })}\n                />\n            ));\n    }, [\n        searchString,\n        selectedCategory,\n        focusedIndex,\n        shouldShowSkinTonePopup,\n        handleRightClick,\n        handlePopupVisibilityChange,\n        handleSelect,\n        historyEmojis,\n    ]);\n\n    const shouldShowNoContentInfo = !emojis || emojis.length === 0;\n\n    return (\n        <StyledEmojiPickerEmojis\n            $browser={browser?.name}\n            $shouldPreventScroll={shouldPreventScroll}\n            $shouldShowNoContentInfo={shouldShowNoContentInfo}\n            ref={emojiRef}\n        >\n            {emojis}\n            {shouldShowNoContentInfo && (\n                <StyledEmojiPickerEmojisNoContentInfo>\n                    Hier werden die zuletzt verwendeten Emojis angezeigt, die über diese Auswahl\n                    gewählt wurden.\n                </StyledEmojiPickerEmojisNoContentInfo>\n            )}\n        </StyledEmojiPickerEmojis>\n    );\n};\n\nEmojiPickerEmojis.displayName = 'EmojiPickerEmojis';\n\nexport default EmojiPickerEmojis;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledEmojiPickerEmojisNoContentInfo = exports.StyledEmojiPickerEmojis = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledEmojiPickerEmojis = exports.StyledEmojiPickerEmojis = _styledComponents.default.div`
+    display: ${({
+  $shouldShowNoContentInfo
+}) => $shouldShowNoContentInfo ? 'flex' : 'grid'};
+    flex: 1 1 auto;
+    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
+    grid-template-rows: min-content;
+    overflow-y: ${({
+  $shouldPreventScroll
+}) => $shouldPreventScroll ? 'hidden' : 'scroll'};
+    padding: 5px 0 5px 5px;
+    position: relative;
+    width: 100%;
+
+    ${({
+  $shouldShowNoContentInfo
+}) => $shouldShowNoContentInfo && (0, _styledComponents.css)`
+            align-items: center;
+        `}
+
+    ${({
+  $shouldPreventScroll
+}) => $shouldPreventScroll && (0, _styledComponents.css)`
+            padding-right: 5px;
+        `}
+
+        // Styles for custom scrollbar
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? (0, _styledComponents.css)`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : (0, _styledComponents.css)`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                  }
+              `}
+`;
+const StyledEmojiPickerEmojisNoContentInfo = exports.StyledEmojiPickerEmojisNoContentInfo = _styledComponents.default.div`
+    font-size: 85%;
+    opacity: 0.85;
+    padding: 0 12.5%;
+    text-align: center;
+`;
+//# sourceMappingURL=EmojiPickerEmojis.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerEmojis.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledEmojiPickerEmojis","exports","styled","div","$shouldShowNoContentInfo","$shouldPreventScroll","css","$browser","theme","StyledEmojiPickerEmojisNoContentInfo"],"sources":["../../../../../src/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport type { Browser } from 'detect-browser';\nimport styled, { css } from 'styled-components';\n\ntype StyledEmojiPickerEmojisProps = WithTheme<{\n    $shouldPreventScroll: boolean;\n    $shouldShowNoContentInfo: boolean;\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledEmojiPickerEmojis = styled.div<StyledEmojiPickerEmojisProps>`\n    display: ${({ $shouldShowNoContentInfo }) => ($shouldShowNoContentInfo ? 'flex' : '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: ${({ $shouldPreventScroll }) => ($shouldPreventScroll ? 'hidden' : 'scroll')};\n    padding: 5px 0 5px 5px;\n    position: relative;\n    width: 100%;\n\n    ${({ $shouldShowNoContentInfo }) =>\n        $shouldShowNoContentInfo &&\n        css`\n            align-items: center;\n        `}\n\n    ${({ $shouldPreventScroll }) =>\n        $shouldPreventScroll &&\n        css`\n            padding-right: 5px;\n        `}\n\n        // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledEmojiPickerEmojisProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\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(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n\nexport const StyledEmojiPickerEmojisNoContentInfo = styled.div`\n    font-size: 85%;\n    opacity: 0.85;\n    padding: 0 12.5%;\n    text-align: center;\n`;\n"],"mappings":";;;;;;AAEA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQzC,MAAMW,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAGE,yBAAM,CAACC,GAAiC;AAC/E,eAAe,CAAC;EAAEC;AAAyB,CAAC,KAAMA,wBAAwB,GAAG,MAAM,GAAG,MAAO;AAC7F;AACA;AACA;AACA,kBAAkB,CAAC;EAAEC;AAAqB,CAAC,KAAMA,oBAAoB,GAAG,QAAQ,GAAG,QAAS;AAC5F;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAED;AAAyB,CAAC,KAC3BA,wBAAwB,IACxB,IAAAE,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAED;AAAqB,CAAC,KACvBA,oBAAoB,IACpB,IAAAC,qBAAG;AACX;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEC;AAAoC,CAAC,KAChDD,QAAQ,KAAK,SAAS,GAChB,IAAAD,qBAAG;AACjB,0CAA0CE,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACD,IAAAF,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CE,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC;AAEM,MAAMC,oCAAoC,GAAAR,OAAA,CAAAQ,oCAAA,GAAGP,yBAAM,CAACC,GAAG;AAC9D;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/{components → cjs/components}/emoji-picker/emoji-picker-emojis/emoji/Emoji.js

@@ -10,16 +10,20 @@ 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,
-    onPopupVisibilityChange,
-    onSelect
-  } = _ref;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Emoji = ({
+  emoji,
+  isSelected,
+  name,
+  isSkinToneSupported,
+  onPopupVisibilityChange,
+  onSelect,
+  shouldShowSkinTonePopup,
+  onRightClick,
+  index
+}) => {
   const [shouldShowPopup, setShouldShowPopup] = (0, _react.useState)(false);
   const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = (0, _react.useState)(_alignment.AnchorAlignment.Top);
   const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = (0, _react.useState)(0);
@@ -30,18 +34,18 @@ const Emoji = _ref => {
     left: 0,
     top: 0
   });
+  const emojiRef = (0, _react.useRef)(null);
   const handleClick = (0, _react.useCallback)(() => {
     onSelect(emoji);
   }, [emoji, onSelect]);
-  const handleContextMenu = (0, _react.useCallback)(event => {
-    event.preventDefault();
-    event.stopPropagation();
+  const calculatePopupPosition = (0, _react.useCallback)(() => {
+    if (!emojiRef.current) {
+      return;
+    }
+    const element = emojiRef.current;
     const {
-      currentTarget: element,
-      currentTarget: {
-        parentElement
-      }
-    } = event;
+      parentElement
+    } = emojiRef.current;
     if (parentElement) {
       const {
         height: elementHeight,
@@ -89,11 +93,36 @@ const Emoji = _ref => {
       }
     }
   }, [isSkinToneSupported]);
-  const handleHidePopup = (0, _react.useCallback)(() => setShouldShowPopup(false), []);
+  const handleContextMenu = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isSkinToneSupported) {
+      onRightClick(index);
+      calculatePopupPosition();
+    }
+  }, [calculatePopupPosition, index, isSkinToneSupported, onRightClick]);
+  (0, _react.useEffect)(() => {
+    if (emojiRef.current && shouldShowSkinTonePopup && skinTonePopupPosition.top === 0 && skinTonePopupPosition.left === 0) {
+      calculatePopupPosition();
+    }
+  }, [calculatePopupPosition, index, isSkinToneSupported, shouldShowSkinTonePopup, skinTonePopupPosition]);
+  (0, _react.useEffect)(() => {
+    if (shouldShowSkinTonePopup) {
+      setShouldShowPopup(shouldShowSkinTonePopup);
+    }
+  }, [shouldShowSkinTonePopup]);
+  const handleHidePopup = (0, _react.useCallback)(() => {
+    setShouldShowPopup(false);
+  }, []);
   (0, _react.useEffect)(() => {
     onPopupVisibilityChange(shouldShowPopup);
   }, [onPopupVisibilityChange, shouldShowPopup]);
   return /*#__PURE__*/_react.default.createElement(_Emoji.StyledEmoji, {
+    ref: emojiRef,
+    $isSelected: isSelected,
+    "data-emoji": emoji,
+    "data-name": name,
+    "data-skin-tone-support": isSkinToneSupported,
     className: "prevent-lose-focus",
     onClick: handleClick,
     onContextMenu: handleContextMenu
@@ -111,6 +140,5 @@ const Emoji = _ref => {
   })));
 };
 Emoji.displayName = 'Emoji';
-var _default = Emoji;
-exports.default = _default;
+var _default = exports.default = Emoji;
 //# sourceMappingURL=Emoji.js.map

package/lib/cjs/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","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Emoji","emoji","isSelected","name","isSkinToneSupported","onPopupVisibilityChange","onSelect","shouldShowSkinTonePopup","onRightClick","index","shouldShowPopup","setShouldShowPopup","useState","skinTonePopupAnchorAlignment","setSkinTonePopupAnchorAlignment","AnchorAlignment","Top","skinTonePopupAnchorOffset","setSkinTonePopupAnchorOffset","skinTonePopupOverlayPosition","setSkinTonePopupOverlayPosition","top","skinTonePopupPosition","setSkinTonePopupPosition","left","emojiRef","useRef","handleClick","useCallback","calculatePopupPosition","current","element","parentElement","height","elementHeight","elementLeft","elementTop","width","elementWidth","getBoundingClientRect","parentHeight","parentLeft","parentTop","parentWidth","scrollTop","anchorAlignment","anchorOffset","skinTonePopupContentSize","maxLeft","minLeft","Bottom","handleContextMenu","event","preventDefault","stopPropagation","useEffect","handleHidePopup","createElement","StyledEmoji","ref","$isSelected","className","onClick","onContextMenu","AnimatePresence","initial","key","onHidePopup","overlayPosition","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, useEffect, useRef, 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    isSelected: boolean;\n    name: string;\n    index: number;\n    isSkinToneSupported: boolean;\n    onPopupVisibilityChange: (isVisible: boolean) => void;\n    onSelect: (emoji: string) => void;\n    onRightClick: (newIndex: number) => void;\n    shouldShowSkinTonePopup: boolean;\n};\n\nconst Emoji: FC<EmojiProps> = ({\n    emoji,\n    isSelected,\n    name,\n    isSkinToneSupported,\n    onPopupVisibilityChange,\n    onSelect,\n    shouldShowSkinTonePopup,\n    onRightClick,\n    index,\n}) => {\n    const [shouldShowPopup, setShouldShowPopup] = useState(false);\n    const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = useState(\n        AnchorAlignment.Top,\n    );\n    const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = useState(0);\n    const [skinTonePopupOverlayPosition, setSkinTonePopupOverlayPosition] = useState<\n        SkinTonePopupProps['overlayPosition']\n    >({ top: 0 });\n    const [skinTonePopupPosition, setSkinTonePopupPosition] = useState<\n        SkinTonePopupProps['position']\n    >({ left: 0, top: 0 });\n\n    const emojiRef = useRef<HTMLDivElement>(null);\n\n    const handleClick = useCallback(() => {\n        onSelect(emoji);\n    }, [emoji, onSelect]);\n\n    const calculatePopupPosition = useCallback(() => {\n        if (!emojiRef.current) {\n            return;\n        }\n\n        const element = emojiRef.current;\n        const { parentElement } = emojiRef.current;\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 - parentLeft - skinTonePopupContentSize.width / 2 + elementWidth / 2;\n\n            let top = elementTop - parentTop + elementHeight + scrollTop;\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                setSkinTonePopupOverlayPosition({ top: scrollTop });\n                setShouldShowPopup(true);\n            }\n        }\n    }, [isSkinToneSupported]);\n\n    const handleContextMenu = useCallback(\n        (event: MouseEvent) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            if (isSkinToneSupported) {\n                onRightClick(index);\n                calculatePopupPosition();\n            }\n        },\n        [calculatePopupPosition, index, isSkinToneSupported, onRightClick],\n    );\n\n    useEffect(() => {\n        if (\n            emojiRef.current &&\n            shouldShowSkinTonePopup &&\n            skinTonePopupPosition.top === 0 &&\n            skinTonePopupPosition.left === 0\n        ) {\n            calculatePopupPosition();\n        }\n    }, [\n        calculatePopupPosition,\n        index,\n        isSkinToneSupported,\n        shouldShowSkinTonePopup,\n        skinTonePopupPosition,\n    ]);\n\n    useEffect(() => {\n        if (shouldShowSkinTonePopup) {\n            setShouldShowPopup(shouldShowSkinTonePopup);\n        }\n    }, [shouldShowSkinTonePopup]);\n\n    const handleHidePopup = useCallback(() => {\n        setShouldShowPopup(false);\n    }, []);\n\n    useEffect(() => {\n        onPopupVisibilityChange(shouldShowPopup);\n    }, [onPopupVisibilityChange, shouldShowPopup]);\n\n    return (\n        <StyledEmoji\n            ref={emojiRef}\n            $isSelected={isSelected}\n            data-emoji={emoji}\n            data-name={name}\n            data-skin-tone-support={isSkinToneSupported}\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                        overlayPosition={skinTonePopupOverlayPosition}\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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","ignoreList":[]}

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledEmoji = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _font = require("../../../../utils/font");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledEmoji = exports.StyledEmoji = _styledComponents.default.div`
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    font-family: ${_font.getFontFamily};
+    font-size: 32px;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    background-color: ${({
+  theme,
+  $isSelected
+}) => $isSelected ? theme['secondary-102'] : 'none'};
+`;
+//# sourceMappingURL=Emoji.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.styles.js","names":["_styledComponents","_interopRequireDefault","require","_font","e","__esModule","default","StyledEmoji","exports","styled","div","getFontFamily","theme","$isSelected"],"sources":["../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { getFontFamily } from '../../../../utils/font';\n\ntype StyledEmojiProps = WithTheme<{\n    $isSelected: boolean;\n}>;\n\nexport const StyledEmoji = styled.div<StyledEmojiProps>`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    font-family: ${getFontFamily};\n    font-size: 32px;\n    justify-content: center;\n    width: 48px;\n    height: 48px;\n    background-color: ${({ theme, $isSelected }: StyledEmojiProps) =>\n        $isSelected ? theme['secondary-102'] : 'none'};\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAAuD,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAMhD,MAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,GAAqB;AACvD;AACA;AACA;AACA,mBAAmBC,mBAAa;AAChC;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAA8B,CAAC,KACzDA,WAAW,GAAGD,KAAK,CAAC,eAAe,CAAC,GAAG,MAAM;AACrD,CAAC","ignoreList":[]}