@chayns-components/emoji-input 5.0.0-beta.92 → 5.0.0-beta.920

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

@@ -0,0 +1,240 @@
+import { getDevice } from 'chayns-api';
+import emojiLib from 'emojilib';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import emojiList from 'unicode-emoji-json/data-by-emoji.json';
+import emojiCategories from 'unicode-emoji-json/data-by-group.json';
+import germanEmojiLib from '../../../constants/emoji-de-DE.json';
+import { useEmojiHistory } from '../../../hooks/emojiHistory';
+import Emoji from './emoji/Emoji';
+import { StyledEmojiPickerEmojis, StyledEmojiPickerEmojisNoContentInfo } from './EmojiPickerEmojis.styles';
+const EmojiPickerEmojis = _ref => {
+  let {
+    accessToken,
+    onSelect,
+    personId,
+    searchString,
+    selectedCategory
+  } = _ref;
+  const [shouldPreventScroll, setShouldPreventScroll] = useState(false);
+  const [shouldShowSkinTonePopup, setShouldShowSkinTonePopup] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const emojiRef = useRef(null);
+  const shouldPreventEmojiControlsRef = useRef(false);
+  const {
+    browser
+  } = getDevice();
+  const {
+    addOrUpdateEmojiInHistory,
+    historyEmojis
+  } = useEmojiHistory({
+    accessToken,
+    personId,
+    selectedCategory
+  });
+  const handlePopupVisibilityChange = useCallback(isVisible => {
+    setShouldShowSkinTonePopup(isVisible);
+    shouldPreventEmojiControlsRef.current = isVisible;
+    setShouldPreventScroll(isVisible);
+  }, []);
+  const handleSelect = useCallback(_ref2 => {
+    let {
+      emoji,
+      name,
+      skin_tone_support,
+      index
+    } = _ref2;
+    onSelect(emoji);
+    if (index) {
+      setFocusedIndex(index);
+    }
+    void addOrUpdateEmojiInHistory({
+      emoji,
+      name,
+      skin_tone_support
+    });
+  }, [addOrUpdateEmojiInHistory, onSelect]);
+  useEffect(() => {
+    if (selectedCategory) {
+      setFocusedIndex(0);
+      const container = emojiRef.current;
+      if (!container) {
+        return;
+      }
+      container.scrollTop = 0;
+    }
+  }, [selectedCategory]);
+  useEffect(() => {
+    const handleKeyDown = event => {
+      if (!shouldPreventEmojiControlsRef.current && (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+        event.preventDefault();
+        const children = 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) {
+        if (event.ctrlKey) {
+          setShouldShowSkinTonePopup(true);
+          return;
+        }
+        const {
+          dataset
+        } = emojiRef.current?.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 = useCallback(index => {
+    setFocusedIndex(index);
+  }, []);
+  const emojis = useMemo(() => {
+    if (searchString.trim() !== '') {
+      const lowerSearchString = searchString.toLowerCase();
+      const searchResults = [];
+      Object.entries(emojiList).forEach((_ref3, index) => {
+        let [emoji, {
+          name,
+          skin_tone_support
+        }] = _ref3;
+        const keywords = emojiLib[emoji];
+        const germanKeywords = germanEmojiLib[emoji];
+        if (name.includes(lowerSearchString) || keywords?.some(keyword => keyword.includes(lowerSearchString)) || germanKeywords?.some(keyword => keyword.includes(lowerSearchString))) {
+          searchResults.push(/*#__PURE__*/React.createElement(Emoji, {
+            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((_ref4, index) => {
+        let {
+          emoji,
+          name,
+          skin_tone_support
+        } = _ref4;
+        return /*#__PURE__*/React.createElement(Emoji, {
+          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(_ref5 => {
+      let {
+        slug
+      } = _ref5;
+      return slug === selectedCategory;
+    })?.emojis.map((_ref6, index) => {
+      let {
+        emoji,
+        name,
+        skin_tone_support
+      } = _ref6;
+      return /*#__PURE__*/React.createElement(Emoji, {
+        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.createElement(StyledEmojiPickerEmojis, {
+    $browser: browser?.name,
+    $shouldPreventScroll: shouldPreventScroll,
+    $shouldShowNoContentInfo: shouldShowNoContentInfo,
+    ref: emojiRef
+  }, emojis, shouldShowNoContentInfo && /*#__PURE__*/React.createElement(StyledEmojiPickerEmojisNoContentInfo, null, "Hier werden die zuletzt verwendeten Emojis angezeigt, die \xFCber diese Auswahl gew\xE4hlt wurden."));
+};
+EmojiPickerEmojis.displayName = 'EmojiPickerEmojis';
+export default EmojiPickerEmojis;
+//# sourceMappingURL=EmojiPickerEmojis.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerEmojis.js","names":["getDevice","emojiLib","React","useCallback","useEffect","useMemo","useRef","useState","emojiList","emojiCategories","germanEmojiLib","useEmojiHistory","Emoji","StyledEmojiPickerEmojis","StyledEmojiPickerEmojisNoContentInfo","EmojiPickerEmojis","_ref","accessToken","onSelect","personId","searchString","selectedCategory","shouldPreventScroll","setShouldPreventScroll","shouldShowSkinTonePopup","setShouldShowSkinTonePopup","focusedIndex","setFocusedIndex","emojiRef","shouldPreventEmojiControlsRef","browser","addOrUpdateEmojiInHistory","historyEmojis","handlePopupVisibilityChange","isVisible","current","handleSelect","_ref2","emoji","name","skin_tone_support","index","container","scrollTop","handleKeyDown","event","key","preventDefault","children","length","newIndex","ctrlKey","prevElement","tabIndex","newElement","containerRect","getBoundingClientRect","elementRect","bottom","top","dataset","skinToneSupport","document","addEventListener","removeEventListener","handleRightClick","emojis","trim","lowerSearchString","toLowerCase","searchResults","Object","entries","forEach","_ref3","keywords","germanKeywords","includes","some","keyword","push","createElement","isSelected","onRightClick","isSkinToneSupported","onPopupVisibilityChange","e","map","_ref4","find","_ref5","slug","_ref6","shouldShowNoContentInfo","$browser","$shouldPreventScroll","$shouldShowNoContentInfo","ref","displayName"],"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/esm/components/emoji-picker/emoji-picker-emojis/EmojiPickerEmojis.styles.js

@@ -0,0 +1,76 @@
+import styled, { css } from 'styled-components';
+export const StyledEmojiPickerEmojis = styled.div`
+    display: ${_ref => {
+  let {
+    $shouldShowNoContentInfo
+  } = _ref;
+  return $shouldShowNoContentInfo ? 'flex' : 'grid';
+}};
+    flex: 1 1 auto;
+    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
+    grid-template-rows: min-content;
+    overflow-y: ${_ref2 => {
+  let {
+    $shouldPreventScroll
+  } = _ref2;
+  return $shouldPreventScroll ? 'hidden' : 'scroll';
+}};
+    padding: 5px 0 5px 5px;
+    position: relative;
+    width: 100%;
+
+    ${_ref3 => {
+  let {
+    $shouldShowNoContentInfo
+  } = _ref3;
+  return $shouldShowNoContentInfo && css`
+            align-items: center;
+        `;
+}}
+
+    ${_ref4 => {
+  let {
+    $shouldPreventScroll
+  } = _ref4;
+  return $shouldPreventScroll && css`
+            padding-right: 5px;
+        `;
+}}
+
+        // Styles for custom scrollbar
+    ${_ref5 => {
+  let {
+    $browser,
+    theme
+  } = _ref5;
+  return $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : 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;
+                  }
+              `;
+}}
+`;
+export const StyledEmojiPickerEmojisNoContentInfo = styled.div`
+    font-size: 85%;
+    opacity: 0.85;
+    padding: 0 12.5%;
+    text-align: center;
+`;
+//# sourceMappingURL=EmojiPickerEmojis.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerEmojis.styles.js","names":["styled","css","StyledEmojiPickerEmojis","div","_ref","$shouldShowNoContentInfo","_ref2","$shouldPreventScroll","_ref3","_ref4","_ref5","$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,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,uBAAuB,GAAGF,MAAM,CAACG,GAAiC;AAC/E,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAyB,CAAC,GAAAD,IAAA;EAAA,OAAMC,wBAAwB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAC7F;AACA;AACA;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAC;AAC5F;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEH;EAAyB,CAAC,GAAAG,KAAA;EAAA,OAC3BH,wBAAwB,IACxBJ,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMQ,KAAA;EAAA,IAAC;IAAEF;EAAqB,CAAC,GAAAE,KAAA;EAAA,OACvBF,oBAAoB,IACpBN,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA;AACA,MAAMS,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAoC,CAAC,GAAAF,KAAA;EAAA,OAChDC,QAAQ,KAAK,SAAS,GAChBV,GAAG;AACjB,0CAA0CW,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDX,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CW,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC;AAED,OAAO,MAAMC,oCAAoC,GAAGb,MAAM,CAACG,GAAG;AAC9D;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,136 @@
+import { AnimatePresence } from 'framer-motion';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { AnchorAlignment } from '../../../../constants/alignment';
+import { StyledEmoji } from './Emoji.styles';
+import SkinTonePopup from './skin-tone-popup/SkinTonePopup';
+import { skinTonePopupContentSize } from './skin-tone-popup/SkinTonePopup.styles';
+const Emoji = _ref => {
+  let {
+    emoji,
+    isSelected,
+    name,
+    isSkinToneSupported,
+    onPopupVisibilityChange,
+    onSelect,
+    shouldShowSkinTonePopup,
+    onRightClick,
+    index
+  } = _ref;
+  const [shouldShowPopup, setShouldShowPopup] = useState(false);
+  const [skinTonePopupAnchorAlignment, setSkinTonePopupAnchorAlignment] = useState(AnchorAlignment.Top);
+  const [skinTonePopupAnchorOffset, setSkinTonePopupAnchorOffset] = useState(0);
+  const [skinTonePopupOverlayPosition, setSkinTonePopupOverlayPosition] = useState({
+    top: 0
+  });
+  const [skinTonePopupPosition, setSkinTonePopupPosition] = useState({
+    left: 0,
+    top: 0
+  });
+  const emojiRef = useRef(null);
+  const handleClick = useCallback(() => {
+    onSelect(emoji);
+  }, [emoji, onSelect]);
+  const calculatePopupPosition = useCallback(() => {
+    if (!emojiRef.current) {
+      return;
+    }
+    const element = emojiRef.current;
+    const {
+      parentElement
+    } = emojiRef.current;
+    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 = AnchorAlignment.Top;
+      let anchorOffset = 0;
+      let left = elementLeft - parentLeft - skinTonePopupContentSize.width / 2 + elementWidth / 2;
+      let top = elementTop - parentTop + elementHeight + scrollTop;
+      const maxLeft = parentWidth - 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 + skinTonePopupContentSize.height > parentHeight + scrollTop) {
+        anchorAlignment = AnchorAlignment.Bottom;
+        top -= elementHeight + skinTonePopupContentSize.height;
+      }
+      if (isSkinToneSupported) {
+        setSkinTonePopupAnchorAlignment(anchorAlignment);
+        setSkinTonePopupAnchorOffset(anchorOffset);
+        setSkinTonePopupPosition({
+          left,
+          top
+        });
+        setSkinTonePopupOverlayPosition({
+          top: scrollTop
+        });
+        setShouldShowPopup(true);
+      }
+    }
+  }, [isSkinToneSupported]);
+  const handleContextMenu = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isSkinToneSupported) {
+      onRightClick(index);
+      calculatePopupPosition();
+    }
+  }, [calculatePopupPosition, index, isSkinToneSupported, onRightClick]);
+  useEffect(() => {
+    if (emojiRef.current && shouldShowSkinTonePopup && skinTonePopupPosition.top === 0 && skinTonePopupPosition.left === 0) {
+      calculatePopupPosition();
+    }
+  }, [calculatePopupPosition, index, isSkinToneSupported, shouldShowSkinTonePopup, skinTonePopupPosition]);
+  useEffect(() => {
+    if (shouldShowSkinTonePopup) {
+      setShouldShowPopup(shouldShowSkinTonePopup);
+    }
+  }, [shouldShowSkinTonePopup]);
+  const handleHidePopup = useCallback(() => {
+    setShouldShowPopup(false);
+  }, []);
+  useEffect(() => {
+    onPopupVisibilityChange(shouldShowPopup);
+  }, [onPopupVisibilityChange, shouldShowPopup]);
+  return /*#__PURE__*/React.createElement(StyledEmoji, {
+    ref: emojiRef,
+    $isSelected: isSelected,
+    "data-emoji": emoji,
+    "data-name": name,
+    "data-skin-tone-support": isSkinToneSupported,
+    className: "prevent-lose-focus",
+    onClick: handleClick,
+    onContextMenu: handleContextMenu
+  }, emoji, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, shouldShowPopup && /*#__PURE__*/React.createElement(SkinTonePopup, {
+    anchorAlignment: skinTonePopupAnchorAlignment,
+    anchorOffset: skinTonePopupAnchorOffset,
+    emoji: emoji,
+    key: emoji,
+    onHidePopup: handleHidePopup,
+    onSelect: onSelect,
+    overlayPosition: skinTonePopupOverlayPosition,
+    position: skinTonePopupPosition
+  })));
+};
+Emoji.displayName = 'Emoji';
+export default Emoji;
+//# sourceMappingURL=Emoji.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.js","names":["AnimatePresence","React","useCallback","useEffect","useRef","useState","AnchorAlignment","StyledEmoji","SkinTonePopup","skinTonePopupContentSize","Emoji","_ref","emoji","isSelected","name","isSkinToneSupported","onPopupVisibilityChange","onSelect","shouldShowSkinTonePopup","onRightClick","index","shouldShowPopup","setShouldShowPopup","skinTonePopupAnchorAlignment","setSkinTonePopupAnchorAlignment","Top","skinTonePopupAnchorOffset","setSkinTonePopupAnchorOffset","skinTonePopupOverlayPosition","setSkinTonePopupOverlayPosition","top","skinTonePopupPosition","setSkinTonePopupPosition","left","emojiRef","handleClick","calculatePopupPosition","current","element","parentElement","height","elementHeight","elementLeft","elementTop","width","elementWidth","getBoundingClientRect","parentHeight","parentLeft","parentTop","parentWidth","scrollTop","anchorAlignment","anchorOffset","maxLeft","minLeft","Bottom","handleContextMenu","event","preventDefault","stopPropagation","handleHidePopup","createElement","ref","$isSelected","className","onClick","onContextMenu","initial","key","onHidePopup","overlayPosition","position","displayName"],"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/esm/components/emoji-picker/emoji-picker-emojis/emoji/Emoji.styles.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import { getFontFamily } from '../../../../utils/font';
+export const StyledEmoji = styled.div`
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    font-family: ${getFontFamily};
+    font-size: 32px;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    background-color: ${_ref => {
+  let {
+    theme,
+    $isSelected
+  } = _ref;
+  return $isSelected ? theme['secondary-102'] : 'none';
+}};
+`;
+//# sourceMappingURL=Emoji.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Emoji.styles.js","names":["styled","getFontFamily","StyledEmoji","div","_ref","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,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,aAAa,QAAQ,wBAAwB;AAMtD,OAAO,MAAMC,WAAW,GAAGF,MAAM,CAACG,GAAqB;AACvD;AACA;AACA;AACA,mBAAmBF,aAAa;AAChC;AACA;AACA;AACA;AACA,wBAAwBG,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAA8B,CAAC,GAAAF,IAAA;EAAA,OACzDE,WAAW,GAAGD,KAAK,CAAC,eAAe,CAAC,GAAG,MAAM;AAAA;AACrD,CAAC","ignoreList":[]}