@chayns-components/emoji-input 5.0.0-beta.199 → 5.0.0-beta.201

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

@@ -4,16 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _Icon = _interopRequireDefault(require("@chayns-components/core/lib/components/icon/Icon"));
+var _core = require("@chayns-components/core");
 var _framerMotion = require("framer-motion");
 var _react = _interopRequireWildcard(require("react"));
 var _alignment = require("../../constants/alignment");
 var _EmojiPicker = _interopRequireDefault(require("../emoji-picker/EmojiPicker"));
 var _EmojiPicker2 = require("../emoji-picker/EmojiPicker.styles");
 var _EmojiPickerPopup = require("./EmojiPickerPopup.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const EmojiPickerPopup = _ref => {
   let {
     accessToken,
@@ -137,7 +137,7 @@ const EmojiPickerPopup = _ref => {
     accessToken: accessToken,
     onSelect: onSelect,
     personId: personId
-  }))), /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }))), /*#__PURE__*/_react.default.createElement(_core.Icon, {
     className: "prevent-lose-focus",
     icons: ['far fa-smile'],
     onClick: handlePopupIconClick,

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

@@ -1 +1 @@
-{"version":3,"file":"EmojiPickerPopup.js","names":["_Icon","_interopRequireDefault","require","_framerMotion","_react","_interopRequireWildcard","_alignment","_EmojiPicker","_EmojiPicker2","_EmojiPickerPopup","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPickerPopup","_ref","accessToken","alignment","onPopupVisibilityChange","onSelect","personId","internalAlignment","setInternalAlignment","useState","PopupAlignment","TopLeft","shouldShowPopup","setShouldShowPopup","position","setPosition","contentRef","useRef","handleHide","useCallback","handleDocumentClick","event","_contentRef$current","current","contains","target","preventDefault","stopPropagation","handlePopupIconClick","height","left","top","width","currentTarget","getBoundingClientRect","newInternalAlignment","emojiPickerSize","BottomRight","BottomLeft","TopRight","newPosition","useEffect","document","addEventListener","window","removeEventListener","exitAndInitialY","createElement","StyledEmojiPickerPopup","AnimatePresence","initial","StyledMotionEmojiPickerPopupContent","animate","opacity","y","exit","ref","style","transition","type","className","icons","onClick","size","displayName","_default","exports"],"sources":["../../../src/components/emoji-picker-popup/EmojiPickerPopup.tsx"],"sourcesContent":["import Icon from '@chayns-components/core/lib/components/icon/Icon';\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    useEffect(() => {\n        if (shouldShowPopup) {\n            document.addEventListener('click', handleDocumentClick, true);\n            window.addEventListener('blur', handleHide);\n        }\n\n        return () => {\n            document.removeEventListener('click', handleDocumentClick, true);\n            window.removeEventListener('blur', handleHide);\n        };\n    }, [handleDocumentClick, handleHide, 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":["_core","require","_framerMotion","_react","_interopRequireWildcard","_alignment","_EmojiPicker","_interopRequireDefault","_EmojiPicker2","_EmojiPickerPopup","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPickerPopup","_ref","accessToken","alignment","onPopupVisibilityChange","onSelect","personId","internalAlignment","setInternalAlignment","useState","PopupAlignment","TopLeft","shouldShowPopup","setShouldShowPopup","position","setPosition","contentRef","useRef","handleHide","useCallback","handleDocumentClick","event","_contentRef$current","current","contains","target","preventDefault","stopPropagation","handlePopupIconClick","height","left","top","width","currentTarget","getBoundingClientRect","newInternalAlignment","emojiPickerSize","BottomRight","BottomLeft","TopRight","newPosition","useEffect","document","addEventListener","window","removeEventListener","exitAndInitialY","createElement","StyledEmojiPickerPopup","AnimatePresence","initial","StyledMotionEmojiPickerPopupContent","animate","opacity","y","exit","ref","style","transition","type","Icon","className","icons","onClick","size","displayName","_default","exports"],"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    useEffect(() => {\n        if (shouldShowPopup) {\n            document.addEventListener('click', handleDocumentClick, true);\n            window.addEventListener('blur', handleHide);\n        }\n\n        return () => {\n            document.removeEventListener('click', handleDocumentClick, true);\n            window.removeEventListener('blur', handleHide);\n        };\n    }, [handleDocumentClick, handleHide, 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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.0.0-beta.199",
+    "version": "5.0.0-beta.201",
     "description": "Input field that supports HTML elements and emojis",
     "keywords": [
         "chayns",
@@ -53,7 +53,7 @@
         "typescript": "^4.9.5"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.199",
+        "@chayns-components/core": "^5.0.0-beta.201",
         "@chayns/colors": "^2.0.0",
         "clsx": "^1.2.1",
         "emojilib": "^3.0.10",
@@ -69,5 +69,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "93ddcda5cb6a004ee86b781af8a31bea4fd3a715"
+    "gitHead": "d3cfb19e0ac58cedc481ecc589d2aab63eedd8f6"
 }