@chayns-components/emoji-input 5.0.0-beta.478 → 5.0.0-beta.481

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

@@ -4,7 +4,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { PopupAlignment } from '../../constants/alignment';
 import EmojiPicker from '../emoji-picker/EmojiPicker';
 import { emojiPickerSize } from '../emoji-picker/EmojiPicker.styles';
-import { StyledEmojiPickerPopup, StyledMotionEmojiPickerPopupContent } from './EmojiPickerPopup.styles';
+import { StyledEmojiPickerPopup, StyledEmojiPickerPopupIconWrapper, StyledMotionEmojiPickerPopupContent } from './EmojiPickerPopup.styles';
 const EmojiPickerPopup = _ref => {
   let {
     accessToken,
@@ -134,12 +134,12 @@ const EmojiPickerPopup = _ref => {
     accessToken: accessToken,
     onSelect: onSelect,
     personId: personId
-  }))), /*#__PURE__*/React.createElement(Icon, {
+  }))), /*#__PURE__*/React.createElement(StyledEmojiPickerPopupIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
     className: "prevent-lose-focus",
     icons: ['far fa-smile'],
     onClick: handlePopupIconClick,
     size: 18
-  }));
+  })));
 };
 EmojiPickerPopup.displayName = 'EmojiPickerPopup';
 export default EmojiPickerPopup;

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

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

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

@@ -269,4 +269,5 @@ export declare const StyledMotionEmojiPickerPopupContent: import("styled-compone
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, StyledMotionEmojiPickerPopupContentProps>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledEmojiPickerPopupIconWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export {};

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

@@ -84,4 +84,7 @@ export const StyledMotionEmojiPickerPopupContent = styled(motion.div)`
         z-index: -1;
     }
 `;
+export const StyledEmojiPickerPopupIconWrapper = styled.div`
+    cursor: pointer;
+`;
 //# sourceMappingURL=EmojiPickerPopup.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerPopup.styles.js","names":["motion","styled","css","PopupAlignment","StyledEmojiPickerPopup","div","getComputedStyle","document","body","getPropertyValue","StyledMotionEmojiPickerPopupContent","_ref","theme","_ref2","text","_ref3","$alignment","TopLeft","BottomLeft","TopRight","BottomRight","undefined"],"sources":["../../../src/components/emoji-picker-popup/EmojiPickerPopup.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../constants/alignment';\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\ntype StyledMotionEmojiPickerPopupContentProps = WithTheme<{\n    $alignment: PopupAlignment;\n}>;\n\nexport const StyledMotionEmojiPickerPopupContent = styled(\n    motion.div,\n)<StyledMotionEmojiPickerPopupContentProps>`\n    background-color: ${({ theme }: StyledMotionEmojiPickerPopupContentProps) => 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    color: ${({ theme }: StyledMotionEmojiPickerPopupContentProps) => theme.text};\n    position: absolute;\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        ${({ $alignment }) => {\n            switch ($alignment) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: 12px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: 12px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: 12px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: 12px;\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"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,2BAA2B;AAE1D,OAAO,MAAMC,sBAAsB,GAAGH,MAAM,CAACI,GAAI;AACjD;AACA;AACA,cAAc,MAAMC,gBAAgB,CAACC,QAAQ,CAACC,IAAI,CAAC,CAACC,gBAAgB,CAAC,aAAa,CAAE;AACpF;AACA,CAAC;AAMD,OAAO,MAAMC,mCAAmC,GAAGT,MAAM,CACrDD,MAAM,CAACK,GACX,CAA4C;AAC5C,wBAAwBM,IAAA;EAAA,IAAC;IAAEC;EAAgD,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9F;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAgD,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,IAAI;AAAA,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAAoB;EAAA,IAAnB;IAAEC;EAAW,CAAC,GAAAD,KAAA;EACb,QAAQC,UAAU;IACd,KAAKb,cAAc,CAACc,OAAO;MACvB,OAAOf,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,cAAc,CAACe,UAAU;MAC1B,OAAOhB,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,cAAc,CAACgB,QAAQ;MACxB,OAAOjB,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,cAAc,CAACiB,WAAW;MAC3B,OAAOlB,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL;MACI,OAAOmB,SAAS;EACxB;AACJ,CAAE;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC"}
+{"version":3,"file":"EmojiPickerPopup.styles.js","names":["motion","styled","css","PopupAlignment","StyledEmojiPickerPopup","div","getComputedStyle","document","body","getPropertyValue","StyledMotionEmojiPickerPopupContent","_ref","theme","_ref2","text","_ref3","$alignment","TopLeft","BottomLeft","TopRight","BottomRight","undefined","StyledEmojiPickerPopupIconWrapper"],"sources":["../../../src/components/emoji-picker-popup/EmojiPickerPopup.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../constants/alignment';\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\ntype StyledMotionEmojiPickerPopupContentProps = WithTheme<{\n    $alignment: PopupAlignment;\n}>;\n\nexport const StyledMotionEmojiPickerPopupContent = styled(\n    motion.div,\n)<StyledMotionEmojiPickerPopupContentProps>`\n    background-color: ${({ theme }: StyledMotionEmojiPickerPopupContentProps) => 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    color: ${({ theme }: StyledMotionEmojiPickerPopupContentProps) => theme.text};\n    position: absolute;\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        ${({ $alignment }) => {\n            switch ($alignment) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: 12px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: 12px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: 12px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: 12px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: -1;\n    }\n`;\n\nexport const StyledEmojiPickerPopupIconWrapper = styled.div`\n    cursor: pointer;\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,2BAA2B;AAE1D,OAAO,MAAMC,sBAAsB,GAAGH,MAAM,CAACI,GAAI;AACjD;AACA;AACA,cAAc,MAAMC,gBAAgB,CAACC,QAAQ,CAACC,IAAI,CAAC,CAACC,gBAAgB,CAAC,aAAa,CAAE;AACpF;AACA,CAAC;AAMD,OAAO,MAAMC,mCAAmC,GAAGT,MAAM,CACrDD,MAAM,CAACK,GACX,CAA4C;AAC5C,wBAAwBM,IAAA;EAAA,IAAC;IAAEC;EAAgD,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9F;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAgD,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,IAAI;AAAA,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAAoB;EAAA,IAAnB;IAAEC;EAAW,CAAC,GAAAD,KAAA;EACb,QAAQC,UAAU;IACd,KAAKb,cAAc,CAACc,OAAO;MACvB,OAAOf,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,cAAc,CAACe,UAAU;MAC1B,OAAOhB,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,cAAc,CAACgB,QAAQ;MACxB,OAAOjB,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,cAAc,CAACiB,WAAW;MAC3B,OAAOlB,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL;MACI,OAAOmB,SAAS;EACxB;AACJ,CAAE;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,iCAAiC,GAAGrB,MAAM,CAACI,GAAI;AAC5D;AACA,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.0.0-beta.478",
+    "version": "5.0.0-beta.481",
     "description": "Input field that supports HTML elements and emojis",
     "sideEffects": false,
     "browserslist": [
@@ -60,7 +60,7 @@
         "typescript": "^5.3.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.478",
+        "@chayns-components/core": "^5.0.0-beta.479",
         "emojilib": "^3.0.11",
         "unicode-emoji-json": "^0.5.0"
     },
@@ -74,5 +74,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "ecafd609d009758bebc00342b3513680208eb6e7"
+    "gitHead": "99dd8d4e68c9c496517a5a03f4347e8192fa0221"
 }