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

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

@@ -0,0 +1,121 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import emojiComponents from 'unicode-emoji-json/data-emoji-components.json';
+import { addSkinToneToEmoji } from '../../../../../utils/emoji';
+import { StyledMotionSkinTonePopup, StyledSkinTonePopupContent, StyledSkinTonePopupContentEmoji, StyledSkinTonePopupOverlay } from './SkinTonePopup.styles';
+const SkinTonePopup = _ref => {
+  let {
+    anchorAlignment,
+    anchorOffset,
+    emoji,
+    onHidePopup,
+    onSelect,
+    overlayPosition,
+    position
+  } = _ref;
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const skinToneRef = useRef(null);
+  const handleOverlayClick = useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    onHidePopup();
+  }, [onHidePopup]);
+  useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+        event.preventDefault();
+        const children = skinToneRef.current?.children;
+        if (children && children.length > 0) {
+          let newIndex = focusedIndex !== null ? focusedIndex : 0;
+          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;
+          newElement.focus();
+        }
+      } else if (event.key === 'Enter' && focusedIndex !== null) {
+        const {
+          dataset
+        } = skinToneRef.current?.children[focusedIndex];
+        const {
+          skinTone
+        } = dataset;
+        if (!skinTone) {
+          return;
+        }
+        onSelect(skinTone);
+        onHidePopup();
+      } else if (event.key === 'Escape' && event.shiftKey) {
+        event.preventDefault();
+        onHidePopup();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [focusedIndex, onHidePopup, onSelect]);
+  const emojis = useMemo(() => {
+    const result = [];
+    Object.entries(emojiComponents).forEach((_ref2, index) => {
+      let [key, value] = _ref2;
+      if (key.includes('skin_tone')) {
+        const emojiWithSkinTone = addSkinToneToEmoji(emoji, value);
+        const handleClick = event => {
+          event.preventDefault();
+          event.stopPropagation();
+          onSelect(emojiWithSkinTone);
+          onHidePopup();
+        };
+        result.push(/*#__PURE__*/React.createElement(StyledSkinTonePopupContentEmoji, {
+          key: key,
+          "data-skin-tone": emojiWithSkinTone,
+          $isSelected: index === focusedIndex,
+          onClick: handleClick
+        }, emojiWithSkinTone));
+      }
+    });
+    return result;
+  }, [emoji, focusedIndex, onHidePopup, onSelect]);
+  return /*#__PURE__*/React.createElement(StyledMotionSkinTonePopup, {
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    },
+    initial: {
+      opacity: 0
+    },
+    transition: {
+      duration: 0.1
+    }
+  }, /*#__PURE__*/React.createElement(StyledSkinTonePopupContent, {
+    ref: skinToneRef,
+    $anchorAlignment: anchorAlignment,
+    $anchorOffset: anchorOffset,
+    style: position
+  }, emojis), /*#__PURE__*/React.createElement(StyledSkinTonePopupOverlay, {
+    onClick: handleOverlayClick,
+    style: overlayPosition
+  }));
+};
+SkinTonePopup.displayName = 'SkinTonePopup';
+export default SkinTonePopup;
+//# sourceMappingURL=SkinTonePopup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkinTonePopup.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","emojiComponents","addSkinToneToEmoji","StyledMotionSkinTonePopup","StyledSkinTonePopupContent","StyledSkinTonePopupContentEmoji","StyledSkinTonePopupOverlay","SkinTonePopup","_ref","anchorAlignment","anchorOffset","emoji","onHidePopup","onSelect","overlayPosition","position","focusedIndex","setFocusedIndex","skinToneRef","handleOverlayClick","event","preventDefault","stopPropagation","handleKeyDown","key","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","dataset","skinTone","shiftKey","document","addEventListener","removeEventListener","emojis","result","Object","entries","forEach","_ref2","index","value","includes","emojiWithSkinTone","handleClick","push","createElement","$isSelected","onClick","animate","opacity","exit","initial","transition","duration","ref","$anchorAlignment","$anchorOffset","style","displayName"],"sources":["../../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.tsx"],"sourcesContent":["import React, { FC, MouseEvent, useCallback, useEffect, useMemo, useRef, useState } 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    overlayPosition: { top: number };\n    position: { left: number; top: number };\n};\n\nconst SkinTonePopup: FC<SkinTonePopupProps> = ({\n    anchorAlignment,\n    anchorOffset,\n    emoji,\n    onHidePopup,\n    onSelect,\n    overlayPosition,\n    position,\n}) => {\n    const [focusedIndex, setFocusedIndex] = useState<number>(0);\n\n    const skinToneRef = useRef<HTMLDivElement>(null);\n\n    const handleOverlayClick = useCallback(\n        (event: MouseEvent<HTMLDivElement>) => {\n            event.preventDefault();\n            event.stopPropagation();\n\n            onHidePopup();\n        },\n        [onHidePopup],\n    );\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n                event.preventDefault();\n                const children = skinToneRef.current?.children;\n                if (children && children.length > 0) {\n                    let newIndex = focusedIndex !== null ? focusedIndex : 0;\n\n                    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                    newElement.focus();\n                }\n            } else if (event.key === 'Enter' && focusedIndex !== null) {\n                const { dataset } = skinToneRef.current?.children[focusedIndex] as HTMLDivElement;\n\n                const { skinTone } = dataset;\n\n                if (!skinTone) {\n                    return;\n                }\n\n                onSelect(skinTone);\n\n                onHidePopup();\n            } else if (event.key === 'Escape' && event.shiftKey) {\n                event.preventDefault();\n\n                onHidePopup();\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, onHidePopup, onSelect]);\n\n    const emojis = useMemo(() => {\n        const result: JSX.Element[] = [];\n\n        Object.entries(emojiComponents).forEach(([key, value], index) => {\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\n                        key={key}\n                        data-skin-tone={emojiWithSkinTone}\n                        $isSelected={index === focusedIndex}\n                        onClick={handleClick}\n                    >\n                        {emojiWithSkinTone}\n                    </StyledSkinTonePopupContentEmoji>,\n                );\n            }\n        });\n\n        return result;\n    }, [emoji, focusedIndex, 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                ref={skinToneRef}\n                $anchorAlignment={anchorAlignment}\n                $anchorOffset={anchorOffset}\n                style={position}\n            >\n                {emojis}\n            </StyledSkinTonePopupContent>\n            <StyledSkinTonePopupOverlay onClick={handleOverlayClick} style={overlayPosition} />\n        </StyledMotionSkinTonePopup>\n    );\n};\n\nSkinTonePopup.displayName = 'SkinTonePopup';\n\nexport default SkinTonePopup;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,98 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+import { AnchorAlignment } from '../../../../../constants/alignment';
+export const StyledMotionSkinTonePopup = styled(motion.div)`
+    z-index: 1;
+`;
+export const skinTonePopupContentSize = {
+  height: 48,
+  width: 200
+};
+export const StyledSkinTonePopupContent = styled.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 AnchorAlignment.Bottom:
+      return css`
+                        bottom: -7px;
+                        left: calc(50% - 7px + ${$anchorOffset}px);
+                        transform: rotate(45deg);
+                    `;
+    case AnchorAlignment.Top:
+      return 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;
+    }
+`;
+export const StyledSkinTonePopupContentEmoji = styled.div`
+    align-items: center;
+    display: flex;
+    flex: 1 1 auto;
+    font-size: 24px;
+    justify-content: center;
+    background-color: ${_ref3 => {
+  let {
+    theme,
+    $isSelected
+  } = _ref3;
+  return $isSelected ? theme['secondary-102'] : 'none';
+}};
+`;
+export const StyledSkinTonePopupOverlay = styled.div`
+    cursor: default;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+`;
+//# sourceMappingURL=SkinTonePopup.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkinTonePopup.styles.js","names":["motion","styled","css","AnchorAlignment","StyledMotionSkinTonePopup","div","skinTonePopupContentSize","height","width","StyledSkinTonePopupContent","_ref","theme","_ref2","$anchorAlignment","$anchorOffset","Bottom","Top","undefined","StyledSkinTonePopupContentEmoji","_ref3","$isSelected","StyledSkinTonePopupOverlay"],"sources":["../../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.ts"],"sourcesContent":["import type { FramerMotionBugFix, WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { AnchorAlignment } from '../../../../../constants/alignment';\n\nexport const StyledMotionSkinTonePopup = styled(motion.div)<FramerMotionBugFix>`\n    z-index: 1;\n`;\n\nexport const skinTonePopupContentSize = {\n    height: 48,\n    width: 200,\n};\n\ntype StyledSkinTonePopupContentProps = WithTheme<{\n    $anchorAlignment: AnchorAlignment;\n    $anchorOffset: number;\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\ntype StyledSkinTonePopupContentEmojiProps = WithTheme<{\n    $isSelected: boolean;\n}>;\n\nexport const StyledSkinTonePopupContentEmoji = styled.div<StyledSkinTonePopupContentEmojiProps>`\n    align-items: center;\n    display: flex;\n    flex: 1 1 auto;\n    font-size: 24px;\n    justify-content: center;\n    background-color: ${({ theme, $isSelected }: StyledSkinTonePopupContentEmojiProps) =>\n        $isSelected ? theme['secondary-102'] : 'none'};\n`;\n\nexport const StyledSkinTonePopupOverlay = styled.div`\n    cursor: default;\n    height: 100%;\n    left: 0;\n    position: absolute;\n    width: 100%;\n    z-index: 1;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,oCAAoC;AAEpE,OAAO,MAAMC,yBAAyB,GAAGH,MAAM,CAACD,MAAM,CAACK,GAAG,CAAqB;AAC/E;AACA,CAAC;AAED,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE;AACX,CAAC;AAOD,OAAO,MAAMC,0BAA0B,GAAGR,MAAM,CAACI,GAAoC;AACrF;AACA,wBAAwBK,IAAA;EAAA,IAAC;IAAEC;EAAuC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA;AACpF;AACA;AACA;AACA;AACA,cAAcL,wBAAwB,CAACC,MAAM;AAC7C;AACA;AACA,aAAaD,wBAAwB,CAACE,KAAK;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUI,KAAA,IAAyC;EAAA,IAAxC;IAAEC,gBAAgB;IAAEC;EAAc,CAAC,GAAAF,KAAA;EAClC,QAAQC,gBAAgB;IACpB,KAAKV,eAAe,CAACY,MAAM;MACvB,OAAOb,GAAG;AAC9B;AACA,iDAAiDY,aAAa;AAC9D;AACA,qBAAqB;IACL,KAAKX,eAAe,CAACa,GAAG;MACpB,OAAOd,GAAG;AAC9B;AACA,iDAAiDY,aAAa;AAC9D;AACA,qBAAqB;IACL;MACI,OAAOG,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMD,OAAO,MAAMC,+BAA+B,GAAGjB,MAAM,CAACI,GAAyC;AAC/F;AACA;AACA;AACA;AACA;AACA,wBAAwBc,KAAA;EAAA,IAAC;IAAER,KAAK;IAAES;EAAkD,CAAC,GAAAD,KAAA;EAAA,OAC7EC,WAAW,GAAGT,KAAK,CAAC,eAAe,CAAC,GAAG,MAAM;AAAA;AACrD,CAAC;AAED,OAAO,MAAMU,0BAA0B,GAAGpB,MAAM,CAACI,GAAG;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,43 @@
+import { AreaProvider, Icon, Popup } from '@chayns-components/core';
+import React, { useCallback, useEffect, useRef } from 'react';
+import EmojiPicker from '../emoji-picker/EmojiPicker';
+import { StyledEmojiPickerPopup } from './EmojiPickerPopup.styles';
+const EmojiPickerPopup = _ref => {
+  let {
+    accessToken,
+    onPopupVisibilityChange,
+    onSelect,
+    personId
+  } = _ref;
+  const popupRef = useRef(null);
+  const handleKeyPress = useCallback(event => {
+    if (event.key === 'Escape' && !event.shiftKey) {
+      popupRef.current?.hide();
+    }
+  }, []);
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyPress);
+    return () => {
+      document.addEventListener('keydown', handleKeyPress);
+    };
+  }, [handleKeyPress]);
+  return /*#__PURE__*/React.createElement(StyledEmojiPickerPopup, null, /*#__PURE__*/React.createElement(Popup, {
+    ref: popupRef,
+    onHide: () => typeof onPopupVisibilityChange === 'function' ? onPopupVisibilityChange(false) : undefined,
+    onShow: () => typeof onPopupVisibilityChange === 'function' ? onPopupVisibilityChange(true) : undefined,
+    content: /*#__PURE__*/React.createElement(AreaProvider, {
+      shouldChangeColor: false
+    }, /*#__PURE__*/React.createElement(EmojiPicker, {
+      accessToken: accessToken,
+      onSelect: onSelect,
+      personId: personId
+    }))
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: "prevent-lose-focus",
+    icons: ['far fa-smile'],
+    size: 18
+  })));
+};
+EmojiPickerPopup.displayName = 'EmojiPickerPopup';
+export default EmojiPickerPopup;
+//# sourceMappingURL=EmojiPickerPopup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerPopup.js","names":["AreaProvider","Icon","Popup","React","useCallback","useEffect","useRef","EmojiPicker","StyledEmojiPickerPopup","EmojiPickerPopup","_ref","accessToken","onPopupVisibilityChange","onSelect","personId","popupRef","handleKeyPress","event","key","shiftKey","current","hide","document","addEventListener","createElement","ref","onHide","undefined","onShow","content","shouldChangeColor","className","icons","size","displayName"],"sources":["../../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import { AreaProvider, Icon, Popup, type PopupRef } from '@chayns-components/core';\nimport React, { FC, useCallback, useEffect, useRef } from 'react';\nimport EmojiPicker from '../emoji-picker/EmojiPicker';\nimport { StyledEmojiPickerPopup } 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     * 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\nconst EmojiPickerPopup: FC<EmojiPickerPopupProps> = ({\n    accessToken,\n    onPopupVisibilityChange,\n    onSelect,\n    personId,\n}) => {\n    const popupRef = useRef<PopupRef>(null);\n\n    const handleKeyPress = useCallback((event: KeyboardEvent) => {\n        if (event.key === 'Escape' && !event.shiftKey) {\n            popupRef.current?.hide();\n        }\n    }, []);\n\n    useEffect(() => {\n        document.addEventListener('keydown', handleKeyPress);\n\n        return () => {\n            document.addEventListener('keydown', handleKeyPress);\n        };\n    }, [handleKeyPress]);\n\n    return (\n        <StyledEmojiPickerPopup>\n            <Popup\n                ref={popupRef}\n                onHide={() =>\n                    typeof onPopupVisibilityChange === 'function'\n                        ? onPopupVisibilityChange(false)\n                        : undefined\n                }\n                onShow={() =>\n                    typeof onPopupVisibilityChange === 'function'\n                        ? onPopupVisibilityChange(true)\n                        : undefined\n                }\n                content={\n                    <AreaProvider shouldChangeColor={false}>\n                        <EmojiPicker\n                            accessToken={accessToken}\n                            onSelect={onSelect}\n                            personId={personId}\n                        />\n                    </AreaProvider>\n                }\n            >\n                <Icon className=\"prevent-lose-focus\" icons={['far fa-smile']} size={18} />\n            </Popup>\n        </StyledEmojiPickerPopup>\n    );\n};\n\nEmojiPickerPopup.displayName = 'EmojiPickerPopup';\n\nexport default EmojiPickerPopup;\n"],"mappings":"AAAA,SAASA,YAAY,EAAEC,IAAI,EAAEC,KAAK,QAAuB,yBAAyB;AAClF,OAAOC,KAAK,IAAQC,WAAW,EAAEC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACjE,OAAOC,WAAW,MAAM,6BAA6B;AACrD,SAASC,sBAAsB,QAAQ,2BAA2B;AAuBlE,MAAMC,gBAA2C,GAAGC,IAAA,IAK9C;EAAA,IAL+C;IACjDC,WAAW;IACXC,uBAAuB;IACvBC,QAAQ;IACRC;EACJ,CAAC,GAAAJ,IAAA;EACG,MAAMK,QAAQ,GAAGT,MAAM,CAAW,IAAI,CAAC;EAEvC,MAAMU,cAAc,GAAGZ,WAAW,CAAEa,KAAoB,IAAK;IACzD,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,IAAI,CAACD,KAAK,CAACE,QAAQ,EAAE;MAC3CJ,QAAQ,CAACK,OAAO,EAAEC,IAAI,CAAC,CAAC;IAC5B;EACJ,CAAC,EAAE,EAAE,CAAC;EAENhB,SAAS,CAAC,MAAM;IACZiB,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEP,cAAc,CAAC;IAEpD,OAAO,MAAM;MACTM,QAAQ,CAACC,gBAAgB,CAAC,SAAS,EAAEP,cAAc,CAAC;IACxD,CAAC;EACL,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAEpB,oBACIb,KAAA,CAAAqB,aAAA,CAAChB,sBAAsB,qBACnBL,KAAA,CAAAqB,aAAA,CAACtB,KAAK;IACFuB,GAAG,EAAEV,QAAS;IACdW,MAAM,EAAEA,CAAA,KACJ,OAAOd,uBAAuB,KAAK,UAAU,GACvCA,uBAAuB,CAAC,KAAK,CAAC,GAC9Be,SACT;IACDC,MAAM,EAAEA,CAAA,KACJ,OAAOhB,uBAAuB,KAAK,UAAU,GACvCA,uBAAuB,CAAC,IAAI,CAAC,GAC7Be,SACT;IACDE,OAAO,eACH1B,KAAA,CAAAqB,aAAA,CAACxB,YAAY;MAAC8B,iBAAiB,EAAE;IAAM,gBACnC3B,KAAA,CAAAqB,aAAA,CAACjB,WAAW;MACRI,WAAW,EAAEA,WAAY;MACzBE,QAAQ,EAAEA,QAAS;MACnBC,QAAQ,EAAEA;IAAS,CACtB,CACS;EACjB,gBAEDX,KAAA,CAAAqB,aAAA,CAACvB,IAAI;IAAC8B,SAAS,EAAC,oBAAoB;IAACC,KAAK,EAAE,CAAC,cAAc,CAAE;IAACC,IAAI,EAAE;EAAG,CAAE,CACtE,CACa,CAAC;AAEjC,CAAC;AAEDxB,gBAAgB,CAACyB,WAAW,GAAG,kBAAkB;AAEjD,eAAezB,gBAAgB","ignoreList":[]}

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

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+export const StyledEmojiPickerPopup = styled.div`
+    align-items: center;
+    display: flex;
+    height: ${() => getComputedStyle(document.body).getPropertyValue('line-height')};
+    position: relative;
+`;
+//# sourceMappingURL=EmojiPickerPopup.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerPopup.styles.js","names":["styled","StyledEmojiPickerPopup","div","getComputedStyle","document","body","getPropertyValue"],"sources":["../../../../src/components/emoji-picker-popup/EmojiPickerPopup.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledEmojiPickerPopup = styled.div`\n    align-items: center;\n    display: flex;\n    height: ${() => getComputedStyle(document.body).getPropertyValue('line-height')};\n    position: relative;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,sBAAsB,GAAGD,MAAM,CAACE,GAAG;AAChD;AACA;AACA,cAAc,MAAMC,gBAAgB,CAACC,QAAQ,CAACC,IAAI,CAAC,CAACC,gBAAgB,CAAC,aAAa,CAAC;AACnF;AACA,CAAC","ignoreList":[]}

package/lib/esm/constants/alignment.js

@@ -0,0 +1,13 @@
+export let AnchorAlignment = /*#__PURE__*/function (AnchorAlignment) {
+  AnchorAlignment[AnchorAlignment["Bottom"] = 0] = "Bottom";
+  AnchorAlignment[AnchorAlignment["Top"] = 1] = "Top";
+  return AnchorAlignment;
+}({});
+export let PopupAlignment = /*#__PURE__*/function (PopupAlignment) {
+  PopupAlignment[PopupAlignment["TopLeft"] = 0] = "TopLeft";
+  PopupAlignment[PopupAlignment["BottomLeft"] = 1] = "BottomLeft";
+  PopupAlignment[PopupAlignment["TopRight"] = 2] = "TopRight";
+  PopupAlignment[PopupAlignment["BottomRight"] = 3] = "BottomRight";
+  return PopupAlignment;
+}({});
+//# sourceMappingURL=alignment.js.map

package/lib/esm/constants/alignment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alignment.js","names":["AnchorAlignment","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":"AAAA,WAAYA,eAAe,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA;AAK3B,WAAYC,cAAc,0BAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAdA,cAAc,CAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA","ignoreList":[]}

package/lib/esm/constants/categories.js

@@ -0,0 +1,13 @@
+export const CATEGORY_EMOJIS = {
+  history: '🕘',
+  smileys_emotion: '😀',
+  people_body: '👦',
+  animals_nature: '🐶',
+  food_drink: '🍔',
+  travel_places: '🏠',
+  activities: '⚽',
+  objects: '💡',
+  symbols: '🔣',
+  flags: '🏴'
+};
+//# sourceMappingURL=categories.js.map

package/lib/esm/constants/categories.js.map

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