@chayns-components/emoji-input 5.0.0-beta.112 → 5.0.0-beta.1122

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

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dataEmojiComponents = _interopRequireDefault(require("unicode-emoji-json/data-emoji-components.json"));
+var _emoji = require("../../../../../utils/emoji");
+var _SkinTonePopup = require("./SkinTonePopup.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SkinTonePopup = ({
+  anchorAlignment,
+  anchorOffset,
+  emoji,
+  onHidePopup,
+  onSelect,
+  overlayPosition,
+  position
+}) => {
+  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(0);
+  const skinToneRef = (0, _react.useRef)(null);
+  const handleOverlayClick = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    onHidePopup();
+  }, [onHidePopup]);
+  (0, _react.useEffect)(() => {
+    const handleKeyDown = event => {
+      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+        var _skinToneRef$current;
+        event.preventDefault();
+        const children = (_skinToneRef$current = skinToneRef.current) === null || _skinToneRef$current === void 0 ? void 0 : _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) {
+        var _skinToneRef$current2;
+        const {
+          dataset
+        } = (_skinToneRef$current2 = skinToneRef.current) === null || _skinToneRef$current2 === void 0 ? void 0 : _skinToneRef$current2.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 = (0, _react.useMemo)(() => {
+    const result = [];
+    Object.entries(_dataEmojiComponents.default).forEach(([key, value], index) => {
+      if (key.includes('skin_tone')) {
+        const emojiWithSkinTone = (0, _emoji.addSkinToneToEmoji)(emoji, value);
+        const handleClick = event => {
+          event.preventDefault();
+          event.stopPropagation();
+          onSelect(emojiWithSkinTone);
+          onHidePopup();
+        };
+        result.push(/*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledSkinTonePopupContentEmoji, {
+          key: key,
+          "data-skin-tone": emojiWithSkinTone,
+          $isSelected: index === focusedIndex,
+          onClick: handleClick
+        }, emojiWithSkinTone));
+      }
+    });
+    return result;
+  }, [emoji, focusedIndex, onHidePopup, onSelect]);
+  return /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledMotionSkinTonePopup, {
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    },
+    initial: {
+      opacity: 0
+    },
+    transition: {
+      duration: 0.1
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledSkinTonePopupContent, {
+    ref: skinToneRef,
+    $anchorAlignment: anchorAlignment,
+    $anchorOffset: anchorOffset,
+    style: position
+  }, emojis), /*#__PURE__*/_react.default.createElement(_SkinTonePopup.StyledSkinTonePopupOverlay, {
+    onClick: handleOverlayClick,
+    style: overlayPosition
+  }));
+};
+SkinTonePopup.displayName = 'SkinTonePopup';
+var _default = exports.default = SkinTonePopup;
+//# sourceMappingURL=SkinTonePopup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkinTonePopup.js","names":["_react","_interopRequireWildcard","require","_dataEmojiComponents","_interopRequireDefault","_emoji","_SkinTonePopup","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SkinTonePopup","anchorAlignment","anchorOffset","emoji","onHidePopup","onSelect","overlayPosition","position","focusedIndex","setFocusedIndex","useState","skinToneRef","useRef","handleOverlayClick","useCallback","event","preventDefault","stopPropagation","useEffect","handleKeyDown","key","_skinToneRef$current","children","current","length","newIndex","prevElement","tabIndex","newElement","focus","_skinToneRef$current2","dataset","skinTone","shiftKey","document","addEventListener","removeEventListener","emojis","useMemo","result","entries","emojiComponents","forEach","value","index","includes","emojiWithSkinTone","addSkinToneToEmoji","handleClick","push","createElement","StyledSkinTonePopupContentEmoji","$isSelected","onClick","StyledMotionSkinTonePopup","animate","opacity","exit","initial","transition","duration","StyledSkinTonePopupContent","ref","$anchorAlignment","$anchorOffset","style","StyledSkinTonePopupOverlay","displayName","_default","exports"],"sources":["../../../../../../../src/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.tsx"],"sourcesContent":["import React, { FC, MouseEvent, useCallback, 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/cjs/components/emoji-picker/emoji-picker-emojis/emoji/skin-tone-popup/SkinTonePopup.styles.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.skinTonePopupContentSize = exports.StyledSkinTonePopupOverlay = exports.StyledSkinTonePopupContentEmoji = exports.StyledSkinTonePopupContent = exports.StyledMotionSkinTonePopup = void 0;
+var _react = require("motion/react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _alignment = require("../../../../../constants/alignment");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledMotionSkinTonePopup = exports.StyledMotionSkinTonePopup = (0, _styledComponents.default)(_react.motion.div)`
+    z-index: 1;
+`;
+const skinTonePopupContentSize = exports.skinTonePopupContentSize = {
+  height: 48,
+  width: 200
+};
+const StyledSkinTonePopupContent = exports.StyledSkinTonePopupContent = _styledComponents.default.div`
+    align-items: stretch;
+    background-color: ${({
+  theme
+}) => 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;
+
+        ${({
+  $anchorAlignment,
+  $anchorOffset
+}) => {
+  switch ($anchorAlignment) {
+    case _alignment.AnchorAlignment.Bottom:
+      return (0, _styledComponents.css)`
+                        bottom: -7px;
+                        left: calc(50% - 7px + ${$anchorOffset}px);
+                        transform: rotate(45deg);
+                    `;
+    case _alignment.AnchorAlignment.Top:
+      return (0, _styledComponents.css)`
+                        top: -7px;
+                        left: calc(50% - 7px + ${$anchorOffset}px);
+                        transform: rotate(225deg);
+                    `;
+    default:
+      return undefined;
+  }
+}}
+    }
+
+    &::before {
+        background-color: inherit;
+        bottom: 0;
+        content: '';
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: -1;
+    }
+`;
+const StyledSkinTonePopupContentEmoji = exports.StyledSkinTonePopupContentEmoji = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    flex: 1 1 auto;
+    font-size: 24px;
+    justify-content: center;
+    background-color: ${({
+  theme,
+  $isSelected
+}) => $isSelected ? theme['secondary-102'] : 'none'};
+`;
+const StyledSkinTonePopupOverlay = exports.StyledSkinTonePopupOverlay = _styledComponents.default.div`
+    cursor: default;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    width: 100%;
+    z-index: 1;
+`;
+//# sourceMappingURL=SkinTonePopup.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkinTonePopup.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_alignment","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionSkinTonePopup","exports","styled","motion","div","skinTonePopupContentSize","height","width","StyledSkinTonePopupContent","theme","$anchorAlignment","$anchorOffset","AnchorAlignment","Bottom","css","Top","undefined","StyledSkinTonePopupContentEmoji","$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 'motion/react';\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,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAAqE,SAAAE,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAE9D,MAAMkB,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAqB;AAC/E;AACA,CAAC;AAEM,MAAMC,wBAAwB,GAAAJ,OAAA,CAAAI,wBAAA,GAAG;EACpCC,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE;AACX,CAAC;AAOM,MAAMC,0BAA0B,GAAAP,OAAA,CAAAO,0BAAA,GAAGN,yBAAM,CAACE,GAAoC;AACrF;AACA,wBAAwB,CAAC;EAAEK;AAAuC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACpF;AACA;AACA;AACA;AACA,cAAcJ,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,UAAU,CAAC;EAAEG,gBAAgB;EAAEC;AAAc,CAAC,KAAK;EACvC,QAAQD,gBAAgB;IACpB,KAAKE,0BAAe,CAACC,MAAM;MACvB,OAAO,IAAAC,qBAAG;AAC9B;AACA,iDAAiDH,aAAa;AAC9D;AACA,qBAAqB;IACL,KAAKC,0BAAe,CAACG,GAAG;MACpB,OAAO,IAAAD,qBAAG;AAC9B;AACA,iDAAiDH,aAAa;AAC9D;AACA,qBAAqB;IACL;MACI,OAAOK,SAAS;EACxB;AACJ,CAAC;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAMM,MAAMC,+BAA+B,GAAAhB,OAAA,CAAAgB,+BAAA,GAAGf,yBAAM,CAACE,GAAyC;AAC/F;AACA;AACA;AACA;AACA;AACA,wBAAwB,CAAC;EAAEK,KAAK;EAAES;AAAkD,CAAC,KAC7EA,WAAW,GAAGT,KAAK,CAAC,eAAe,CAAC,GAAG,MAAM;AACrD,CAAC;AAEM,MAAMU,0BAA0B,GAAAlB,OAAA,CAAAkB,0BAAA,GAAGjB,yBAAM,CAACE,GAAG;AACpD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _core = require("@chayns-components/core");
+var _react = _interopRequireWildcard(require("react"));
+var _EmojiPicker = _interopRequireDefault(require("../emoji-picker/EmojiPicker"));
+var _EmojiPickerPopup = require("./EmojiPickerPopup.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const EmojiPickerPopup = ({
+  accessToken,
+  onPopupVisibilityChange,
+  onSelect,
+  personId
+}) => {
+  const popupRef = (0, _react.useRef)(null);
+  const handleKeyPress = (0, _react.useCallback)(event => {
+    if (event.key === 'Escape' && !event.shiftKey) {
+      var _popupRef$current;
+      (_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 || _popupRef$current.hide();
+    }
+  }, []);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keydown', handleKeyPress);
+    return () => {
+      document.addEventListener('keydown', handleKeyPress);
+    };
+  }, [handleKeyPress]);
+  return /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.StyledEmojiPickerPopup, null, /*#__PURE__*/_react.default.createElement(_core.Popup, {
+    ref: popupRef,
+    onHide: () => typeof onPopupVisibilityChange === 'function' ? onPopupVisibilityChange(false) : undefined,
+    onShow: () => typeof onPopupVisibilityChange === 'function' ? onPopupVisibilityChange(true) : undefined,
+    content: /*#__PURE__*/_react.default.createElement(_core.AreaProvider, {
+      shouldChangeColor: false
+    }, /*#__PURE__*/_react.default.createElement(_EmojiPicker.default, {
+      accessToken: accessToken,
+      onSelect: onSelect,
+      personId: personId
+    }))
+  }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
+    className: "prevent-lose-focus",
+    icons: ['far fa-smile'],
+    size: 18
+  })));
+};
+EmojiPickerPopup.displayName = 'EmojiPickerPopup';
+var _default = exports.default = EmojiPickerPopup;
+//# sourceMappingURL=EmojiPickerPopup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerPopup.js","names":["_core","require","_react","_interopRequireWildcard","_EmojiPicker","_interopRequireDefault","_EmojiPickerPopup","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","EmojiPickerPopup","accessToken","onPopupVisibilityChange","onSelect","personId","popupRef","useRef","handleKeyPress","useCallback","event","key","shiftKey","_popupRef$current","current","hide","useEffect","document","addEventListener","createElement","StyledEmojiPickerPopup","Popup","ref","onHide","undefined","onShow","content","AreaProvider","shouldChangeColor","Icon","className","icons","size","displayName","_default","exports"],"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":"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","ignoreList":[]}

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledEmojiPickerPopup = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledEmojiPickerPopup = exports.StyledEmojiPickerPopup = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    height: ${() => getComputedStyle(document.body).getPropertyValue('line-height')};
+    position: relative;
+`;
+//# sourceMappingURL=EmojiPickerPopup.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPickerPopup.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledEmojiPickerPopup","exports","styled","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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAGE,yBAAM,CAACC,GAAG;AAChD;AACA;AACA,cAAc,MAAMC,gBAAgB,CAACC,QAAQ,CAACC,IAAI,CAAC,CAACC,gBAAgB,CAAC,aAAa,CAAC;AACnF;AACA,CAAC","ignoreList":[]}

package/lib/{constants → cjs/constants}/alignment.js

@@ -4,18 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PopupAlignment = exports.AnchorAlignment = void 0;
-let AnchorAlignment = /*#__PURE__*/function (AnchorAlignment) {
+let AnchorAlignment = exports.AnchorAlignment = /*#__PURE__*/function (AnchorAlignment) {
   AnchorAlignment[AnchorAlignment["Bottom"] = 0] = "Bottom";
   AnchorAlignment[AnchorAlignment["Top"] = 1] = "Top";
   return AnchorAlignment;
 }({});
-exports.AnchorAlignment = AnchorAlignment;
-let PopupAlignment = /*#__PURE__*/function (PopupAlignment) {
+let PopupAlignment = exports.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;
 }({});
-exports.PopupAlignment = PopupAlignment;
 //# sourceMappingURL=alignment.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alignment.js","names":["AnchorAlignment","exports","PopupAlignment"],"sources":["../../../src/constants/alignment.ts"],"sourcesContent":["export enum AnchorAlignment {\n    Bottom,\n    Top,\n}\n\nexport enum PopupAlignment {\n    TopLeft,\n    BottomLeft,\n    TopRight,\n    BottomRight,\n}\n"],"mappings":";;;;;;IAAYA,eAAe,GAAAC,OAAA,CAAAD,eAAA,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA;AAAA,IAKfE,cAAc,GAAAD,OAAA,CAAAC,cAAA,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/{constants → cjs/constants}/categories.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CATEGORY_EMOJIS = void 0;
-const CATEGORY_EMOJIS = {
+const CATEGORY_EMOJIS = exports.CATEGORY_EMOJIS = {
   history: '🕘',
   smileys_emotion: '😀',
   people_body: '👦',
@@ -16,5 +16,4 @@ const CATEGORY_EMOJIS = {
   symbols: '🔣',
   flags: '🏴'
 };
-exports.CATEGORY_EMOJIS = CATEGORY_EMOJIS;
 //# sourceMappingURL=categories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"categories.js","names":["CATEGORY_EMOJIS","exports","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":";;;;;;AAAO,MAAMA,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG;EAC3BE,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":[]}

package/lib/{constants → cjs/constants}/emoji.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.shortNameList = exports.regShortnames = exports.regAscii = exports.asciiList = void 0;
-const asciiList = {
+const asciiList = exports.asciiList = {
   '*\\0/*': '1f646',
   '*\\O/*': '1f646',
   '-___-': '1f611',
@@ -121,11 +121,9 @@ const asciiList = {
   ':]': '1f642',
   ':D': '1f604'
 };
-exports.asciiList = asciiList;
 const asciiRegexp = "(\\*\\\\0\\/\\*|\\*\\\\O\\/\\*|\\-___\\-|\\:'\\-\\)|'\\:\\-\\)|'\\:\\-D|\\>\\:\\-\\)|>\\:\\-\\)|'\\:\\-\\(|\\>\\:\\-\\(|>\\:\\-\\(|\\:'\\-\\(|O\\:\\-\\)|0\\:\\-3|0\\:\\-\\)|0;\\^\\)|O;\\-\\)|0;\\-\\)|O\\:\\-3|\\-__\\-|\\:\\-Þ|\\:\\-Þ|\\<\\/3|<\\/3|\\:'\\)|\\:\\-D|'\\:\\)|'\\=\\)|'\\:D|'\\=D|\\>\\:\\)|>\\:\\)|\\>;\\)|>;\\)|\\>\\=\\)|>\\=\\)|;\\-\\)|\\*\\-\\)|;\\-\\]|;\\^\\)|'\\:\\(|'\\=\\(|\\:\\-\\*|\\:\\^\\*|\\>\\:P|>\\:P|X\\-P|\\>\\:\\[|>\\:\\[|\\:\\-\\(|\\:\\-\\[|\\>\\:\\(|>\\:\\(|\\:'\\(|;\\-\\(|\\>\\.\\<|>\\.<|#\\-\\)|%\\-\\)|X\\-\\)|\\\\0\\/|\\\\O\\/|0\\:3|0\\:\\)|O\\:\\)|O\\=\\)|O\\:3|B\\-\\)|8\\-\\)|B\\-D|8\\-D|\\-_\\-|\\>\\:\\\\|>\\:\\\\|\\>\\:\\/|>\\:\\/|\\:\\-\\/|\\:\\-\\.|\\:\\-P|\\:Þ|\\:Þ|\\:\\-b|\\:\\-O|O_O|\\>\\:O|>\\:O|\\:\\-X|\\:\\-#|\\:\\-\\)|\\(y\\)|\\<3|<3|\\=D|;\\)|\\*\\)|;\\]|;D|\\:\\*|\\=\\*|\\:\\(|\\:\\[|\\=\\(|\\:@|;\\(|D\\:|\\:\\$|\\=\\$|#\\)|%\\)|X\\)|B\\)|8\\)|\\:\\/|\\:\\\\|\\=\\/|\\=\\\\|\\:L|\\=L|\\:P|\\=P|\\:b|\\:O|\\:X|\\:#|\\=X|\\=#|\\:\\)|\\=\\]|\\=\\)|\\:\\]|\\:D)";
-const regAscii = new RegExp(`<object[^>]*>.*?</object>|<span[^>]*>.*?</span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|((\\s|^)${asciiRegexp}(?=\\s|$|[!,.?]))`, 'gi');
-exports.regAscii = regAscii;
-const shortNameList = {
+const regAscii = exports.regAscii = new RegExp(`<object[^>]*>.*?</object>|<span[^>]*>.*?</span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|((\\s|^)${asciiRegexp}(?=\\s|$|[!,.?]))`, 'gi');
+const shortNameList = exports.shortNameList = {
   ':england:': '1f3f4-e0067-e0062-e0065-e006e-e0067-e007f',
   ':scotland:': '1f3f4-e0067-e0062-e0073-e0063-e0074-e007f',
   ':wales:': '1f3f4-e0067-e0062-e0077-e006c-e0073-e007f',
@@ -3798,11 +3796,9 @@ const shortNameList = {
   ':yin_yang:': '262f-fe0f',
   ':zap:': '26a1'
 };
-exports.shortNameList = shortNameList;
 let shortnameRegexp = '';
 Object.keys(shortNameList).forEach((shortname, index) => {
   shortnameRegexp += `${index !== 0 ? '|' : ''}${shortname}`;
 });
-const regShortnames = new RegExp(`<object[^>]*>.*?</object>|<span[^>]*>.*?</span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|(${shortnameRegexp})`, 'gi');
-exports.regShortnames = regShortnames;
+const regShortnames = exports.regShortnames = new RegExp(`<object[^>]*>.*?</object>|<span[^>]*>.*?</span>|<(?:object|embed|svg|img|div|span|p|a)[^>]*>|(${shortnameRegexp})`, 'gi');
 //# sourceMappingURL=emoji.js.map