@chayns-components/core 5.0.0-beta.590 → 5.0.0-beta.592

package/lib/cjs/components/popup/Popup.js

@@ -30,6 +30,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
   });
   const container = document.querySelector('.tapp') || document.body;
   const [alignment, setAlignment] = (0, _react.useState)(_popup.PopupAlignment.TopLeft);
+  const [offset, setOffset] = (0, _react.useState)(0);
   const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const [portal, setPortal] = (0, _react.useState)();
   const [menuHeight, setMenuHeight] = (0, _react.useState)(0);
@@ -37,6 +38,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
   const uuid = (0, _uuid.useUuid)();
 
   // ToDo: Replace with hook if new chayns api is ready
+
   const popupContentRef = (0, _react.useRef)(null);
   const popupPseudoContentRef = (0, _react.useRef)(null);
   const popupRef = (0, _react.useRef)(null);
@@ -53,24 +55,52 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
         width: childrenWidth
       } = popupRef.current.getBoundingClientRect();
       if (pseudoHeight > childrenTop - 25) {
+        let isRight = false;
         if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
           setAlignment(_popup.PopupAlignment.BottomRight);
+          isRight = true;
         } else {
           setAlignment(_popup.PopupAlignment.BottomLeft);
         }
+        const x = childrenLeft + childrenWidth / 2;
+        const y = childrenTop + childrenHeight + yOffset;
+        let newOffset;
+        if (isRight) {
+          newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
+        } else {
+          newOffset = 0;
+          const right = window.innerWidth - (childrenLeft + childrenWidth / 2);
+          newOffset = right + pseudoWidth >= window.innerWidth ? right + pseudoWidth - window.innerWidth : 0;
+        }
+        setOffset(newOffset);
+        const newX = x - newOffset;
         setCoordinates({
-          x: childrenLeft + childrenWidth / 2,
-          y: childrenTop + childrenHeight + yOffset
+          x: newX < 23 ? 23 : newX,
+          y: y - yOffset
         });
       } else {
+        let isRight = false;
         if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
           setAlignment(_popup.PopupAlignment.TopRight);
+          isRight = true;
         } else {
           setAlignment(_popup.PopupAlignment.TopLeft);
         }
+        const x = childrenLeft + childrenWidth / 2;
+        const y = childrenTop - yOffset;
+        let newOffset;
+        if (isRight) {
+          newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
+        } else {
+          newOffset = 0;
+          const right = window.innerWidth - (childrenLeft + childrenWidth / 2);
+          newOffset = right + pseudoWidth >= window.innerWidth ? right + pseudoWidth - window.innerWidth : 0;
+        }
+        setOffset(newOffset);
+        const newX = x - newOffset;
         setCoordinates({
-          x: childrenLeft + childrenWidth / 2,
-          y: childrenTop - yOffset
+          x: newX < 23 ? 23 : newX,
+          y: y - yOffset
         });
       }
       setIsOpen(true);
@@ -136,6 +166,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
     setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
       initial: false
     }, isOpen && /*#__PURE__*/_react.default.createElement(_PopupContentWrapper.default, {
+      offset: offset,
       coordinates: coordinates,
       key: `tooltip_${uuid}`,
       alignment: alignment,
@@ -145,7 +176,7 @@ const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
     }, /*#__PURE__*/_react.default.createElement(_AreaContextProvider.default, {
       shouldChangeColor: false
     }, content))), container));
-  }, [alignment, container, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, uuid]);
+  }, [alignment, container, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, uuid]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Popup.StyledPopupPseudo, {
     ref: popupPseudoContentRef,
     $menuHeight: menuHeight

package/lib/cjs/components/popup/Popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Popup","forwardRef","content","onShow","onHide","children","shouldShowOnHover","yOffset","ref","coordinates","setCoordinates","useState","x","y","container","document","querySelector","body","alignment","setAlignment","PopupAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","timeout","useRef","uuid","useUuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","useCallback","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","window","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","useEffect","getWindowMetrics","then","result","topBarHeight","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","onClick","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    ({ content, onShow, onHide, children, shouldShowOnHover = false, yOffset = 0 }, ref) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const container = document.querySelector('.tapp') || document.body;\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && popupPseudoContentRef.current) {\n                const { height: pseudoHeight, width: pseudoWidth } =\n                    popupPseudoContentRef.current.getBoundingClientRect();\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                if (pseudoHeight > childrenTop - 25) {\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    setCoordinates({\n                        x: childrenLeft + childrenWidth / 2,\n                        y: childrenTop + childrenHeight + yOffset,\n                    });\n                } else {\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    setCoordinates({\n                        x: childrenLeft + childrenWidth / 2,\n                        y: childrenTop - yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [yOffset]);\n\n        const handleChildrenClick = () => {\n            if (!shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = useCallback(() => {\n            if (shouldShowOnHover) {\n                window.clearTimeout(timeout.current);\n                handleShow();\n            }\n        }, [handleShow, shouldShowOnHover]);\n\n        const handleMouseLeave = useCallback(() => {\n            if (!shouldShowOnHover) {\n                return;\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !popupContentRef.current?.contains(event.target as Node) &&\n                    !shouldShowOnHover\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    handleHide();\n                }\n            },\n            [handleHide, shouldShowOnHover],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            void getWindowMetrics().then((result) => {\n                if (result.topBarHeight) {\n                    setMenuHeight(result.topBarHeight);\n                }\n            });\n        }, []);\n\n        useEffect(() => {\n            if (isOpen) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor={false}>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            uuid,\n        ]);\n\n        return (\n            <>\n                <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n                    {content}\n                </StyledPopupPseudo>\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                >\n                    {children}\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_popup","_AreaContextProvider","_interopRequireDefault","_PopupContentWrapper","_Popup","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Popup","forwardRef","content","onShow","onHide","children","shouldShowOnHover","yOffset","ref","coordinates","setCoordinates","useState","x","y","container","document","querySelector","body","alignment","setAlignment","PopupAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","timeout","useRef","uuid","useUuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","useCallback","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","isRight","BottomRight","BottomLeft","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","_popupContentRef$curr","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","useEffect","getWindowMetrics","then","result","topBarHeight","addEventListener","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","StyledPopupPseudo","$menuHeight","StyledPopup","onClick","displayName","_default","exports"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    ({ content, onShow, onHide, children, shouldShowOnHover = false, yOffset = 0 }, ref) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const container = document.querySelector('.tapp') || document.body;\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [offset, setOffset] = useState<number>(0);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && popupPseudoContentRef.current) {\n                const { height: pseudoHeight, width: pseudoWidth } =\n                    popupPseudoContentRef.current.getBoundingClientRect();\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                if (pseudoHeight > childrenTop - 25) {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop + childrenHeight + yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                } else {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop - yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [yOffset]);\n\n        const handleChildrenClick = () => {\n            if (!shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = useCallback(() => {\n            if (shouldShowOnHover) {\n                window.clearTimeout(timeout.current);\n                handleShow();\n            }\n        }, [handleShow, shouldShowOnHover]);\n\n        const handleMouseLeave = useCallback(() => {\n            if (!shouldShowOnHover) {\n                return;\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !popupContentRef.current?.contains(event.target as Node) &&\n                    !shouldShowOnHover\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    handleHide();\n                }\n            },\n            [handleHide, shouldShowOnHover],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            void getWindowMetrics().then((result) => {\n                if (result.topBarHeight) {\n                    setMenuHeight(result.topBarHeight);\n                }\n            });\n        }, []);\n\n        useEffect(() => {\n            if (isOpen) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                offset={offset}\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor={false}>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            uuid,\n        ]);\n\n        return (\n            <>\n                <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n                    {content}\n                </StyledPopupPseudo>\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                >\n                    {children}\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.js

@@ -13,6 +13,7 @@ const PopupContentWrapper = /*#__PURE__*/_react.default.forwardRef(({
   alignment,
   children,
   coordinates,
+  offset,
   onMouseLeave,
   onMouseEnter
 }, ref) => {
@@ -33,6 +34,7 @@ const PopupContentWrapper = /*#__PURE__*/_react.default.forwardRef(({
       y: 0
     },
     $colorMode: colorMode,
+    $offset: offset,
     exit: {
       opacity: 0,
       y: exitAndInitialY

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContentWrapper.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_popup","_PopupContentWrapper","obj","__esModule","default","PopupContentWrapper","React","forwardRef","alignment","children","coordinates","onMouseLeave","onMouseEnter","ref","colorMode","useSite","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContentWrapper","animate","opacity","y","$colorMode","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","displayName","_default","exports"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport { StyledMotionPopupContentWrapper } from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    children: ReactNode;\n    coordinates: PopupCoordinates;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n    onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    ({ alignment, children, coordinates, onMouseLeave, onMouseEnter }, ref) => {\n        const { colorMode } = useSite();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContentWrapper\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                {children}\n            </StyledMotionPopupContentWrapper>\n        );\n    },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AAA+E,SAAAE,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAU/E,MAAMG,mBAAmB,gBAAGC,cAAK,CAACC,UAAU,CACxC,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,WAAW;EAAEC,YAAY;EAAEC;AAAa,CAAC,EAAEC,GAAG,KAAK;EACvE,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,kBAAO,EAAC,CAAC;EAE/B,MAAMC,qBAAqB,GAAGR,SAAS,KAAKS,qBAAc,CAACC,UAAU;EACrE,MAAMC,kBAAkB,GAAGX,SAAS,KAAKS,qBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,GAAGb,SAAS,KAAKS,qBAAc,CAACK,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIvB,MAAA,CAAAM,OAAA,CAAAwB,aAAA,CAAC3B,oBAAA,CAAA4B,+BAA+B;IAC5BC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEnB,SAAU;IACtBoB,IAAI,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCQ,OAAO,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CS,SAAS,EAAE5B,SAAU;IACrBK,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBD,YAAY,EAAEA,YAAa;IAC3BD,YAAY,EAAEA,YAAa;IAC3B0B,KAAK,EAAE;MAAEC,IAAI,EAAE5B,WAAW,CAAC6B,CAAC;MAAEC,GAAG,EAAE9B,WAAW,CAACsB;IAAE,CAAE;IACnDS,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEA,CAAC;MAAEX,CAAC,GAAG;IAAM,CAAC,KAAM;AACvD,iCAAiCT,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCM,CAAE;AACnC;EAAkB,GAEDvB,QAC4B,CAAC;AAE1C,CACJ,CAAC;AAEDJ,mBAAmB,CAACuC,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA1C,OAAA,GAElCC,mBAAmB","ignoreList":[]}
+{"version":3,"file":"PopupContentWrapper.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_popup","_PopupContentWrapper","obj","__esModule","default","PopupContentWrapper","React","forwardRef","alignment","children","coordinates","offset","onMouseLeave","onMouseEnter","ref","colorMode","useSite","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContentWrapper","animate","opacity","y","$colorMode","$offset","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","displayName","_default","exports"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport { StyledMotionPopupContentWrapper } from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    children: ReactNode;\n    offset: number;\n    coordinates: PopupCoordinates;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n    onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    ({ alignment, children, coordinates, offset, onMouseLeave, onMouseEnter }, ref) => {\n        const { colorMode } = useSite();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContentWrapper\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                $offset={offset}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                {children}\n            </StyledMotionPopupContentWrapper>\n        );\n    },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,oBAAA,GAAAJ,OAAA;AAA+E,SAAAE,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAW/E,MAAMG,mBAAmB,gBAAGC,cAAK,CAACC,UAAU,CACxC,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,WAAW;EAAEC,MAAM;EAAEC,YAAY;EAAEC;AAAa,CAAC,EAAEC,GAAG,KAAK;EAC/E,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,kBAAO,EAAC,CAAC;EAE/B,MAAMC,qBAAqB,GAAGT,SAAS,KAAKU,qBAAc,CAACC,UAAU;EACrE,MAAMC,kBAAkB,GAAGZ,SAAS,KAAKU,qBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,GAAGd,SAAS,KAAKU,qBAAc,CAACK,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIxB,MAAA,CAAAM,OAAA,CAAAyB,aAAA,CAAC5B,oBAAA,CAAA6B,+BAA+B;IAC5BC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEnB,SAAU;IACtBoB,OAAO,EAAExB,MAAO;IAChByB,IAAI,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCS,OAAO,EAAE;MAAEL,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CU,SAAS,EAAE9B,SAAU;IACrBM,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBD,YAAY,EAAEA,YAAa;IAC3BD,YAAY,EAAEA,YAAa;IAC3B2B,KAAK,EAAE;MAAEC,IAAI,EAAE9B,WAAW,CAAC+B,CAAC;MAAEC,GAAG,EAAEhC,WAAW,CAACuB;IAAE,CAAE;IACnDU,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEA,CAAC;MAAEZ,CAAC,GAAG;IAAM,CAAC,KAAM;AACvD,iCAAiCT,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCM,CAAE;AACnC;EAAkB,GAEDxB,QAC4B,CAAC;AAE1C,CACJ,CAAC;AAEDJ,mBAAmB,CAACyC,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA5C,OAAA,GAElCC,mBAAmB","ignoreList":[]}

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js

@@ -39,32 +39,33 @@ const StyledMotionPopupContentWrapper = exports.StyledMotionPopupContentWrapper
         z-index: -2;
 
         ${({
-  $position
+  $position,
+  $offset
 }) => {
   switch ($position) {
     case _popup.PopupAlignment.TopLeft:
       return (0, _styledComponents.css)`
                         bottom: -7px;
-                        right: 13px;
+                        right: ${13 + $offset}px;
                         transform: rotate(45deg);
                     `;
     case _popup.PopupAlignment.BottomLeft:
       return (0, _styledComponents.css)`
                         top: -7px;
-                        right: 13px;
+                        right: ${13 + $offset}px;
                         transform: rotate(225deg);
                     `;
     case _popup.PopupAlignment.TopRight:
       return (0, _styledComponents.css)`
                         transform: rotate(45deg);
                         bottom: -7px;
-                        left: 13px;
+                        left: ${13 + $offset}px;
                     `;
     case _popup.PopupAlignment.BottomRight:
       return (0, _styledComponents.css)`
                         transform: rotate(225deg);
                         top: -7px;
-                        left: 13px;
+                        left: ${13 + $offset}px;
                     `;
     default:
       return undefined;

package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContentWrapper.styles.js","names":["_chaynsApi","require","_framerMotion","_styledComponents","_interopRequireWildcard","_popup","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionPopupContentWrapper","exports","styled","motion","div","theme","$colorMode","ColorMode","Dark","text","$position","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme, $colorMode }: StyledMotionPopupContentWrapperProps) =>\n        $colorMode === ColorMode.Dark ? theme['003'] : theme['001']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: fixed;\n\n    & img {\n        width: 100%;\n    }\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\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        ${({ $position }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: 13px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: 13px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: 13px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: 13px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\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":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAC,uBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAAsD,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAQ/C,MAAMW,+BAA+B,GAAAC,OAAA,CAAAD,+BAAA,GAAG,IAAAE,yBAAM,EACjDC,oBAAM,CAACC,GACX,CAAwC;AACxC,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAAiD,CAAC,KAC5EA,UAAU,KAAKC,oBAAS,CAACC,IAAI,GAAGH,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAE;AACpE;AACA;AACA,aAAa,CAAC;EAAEA;AAA4C,CAAC,KAAKA,KAAK,CAACI,IAAK;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC;AAAU,CAAC,KAAK;EACjB,QAAQA,SAAS;IACb,KAAKC,qBAAc,CAACC,OAAO;MACvB,OAAO,IAAAC,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,qBAAc,CAACG,UAAU;MAC1B,OAAO,IAAAD,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,qBAAc,CAACI,QAAQ;MACxB,OAAO,IAAAF,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKF,qBAAc,CAACK,WAAW;MAC3B,OAAO,IAAAH,qBAAG,CAAC;AAC/B;AACA;AACA;AACA,qBAAqB;IACL;MACI,OAAOI,SAAS;EACxB;AACJ,CAAE;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"PopupContentWrapper.styles.js","names":["_chaynsApi","require","_framerMotion","_styledComponents","_interopRequireWildcard","_popup","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionPopupContentWrapper","exports","styled","motion","div","theme","$colorMode","ColorMode","Dark","text","$position","$offset","PopupAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","undefined"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n    $offset: number;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme, $colorMode }: StyledMotionPopupContentWrapperProps) =>\n        $colorMode === ColorMode.Dark ? theme['003'] : theme['001']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: fixed;\n\n    & img {\n        width: 100%;\n    }\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\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        ${({ $position, $offset }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\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":"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","ignoreList":[]}

package/lib/esm/components/popup/Popup.js

@@ -22,6 +22,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
   const container = document.querySelector('.tapp') || document.body;
   const [alignment, setAlignment] = useState(PopupAlignment.TopLeft);
+  const [offset, setOffset] = useState(0);
   const [isOpen, setIsOpen] = useState(false);
   const [portal, setPortal] = useState();
   const [menuHeight, setMenuHeight] = useState(0);
@@ -29,6 +30,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
   const uuid = useUuid();
 
   // ToDo: Replace with hook if new chayns api is ready
+
   const popupContentRef = useRef(null);
   const popupPseudoContentRef = useRef(null);
   const popupRef = useRef(null);
@@ -45,24 +47,52 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
         width: childrenWidth
       } = popupRef.current.getBoundingClientRect();
       if (pseudoHeight > childrenTop - 25) {
+        let isRight = false;
         if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
           setAlignment(PopupAlignment.BottomRight);
+          isRight = true;
         } else {
           setAlignment(PopupAlignment.BottomLeft);
         }
+        const x = childrenLeft + childrenWidth / 2;
+        const y = childrenTop + childrenHeight + yOffset;
+        let newOffset;
+        if (isRight) {
+          newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
+        } else {
+          newOffset = 0;
+          const right = window.innerWidth - (childrenLeft + childrenWidth / 2);
+          newOffset = right + pseudoWidth >= window.innerWidth ? right + pseudoWidth - window.innerWidth : 0;
+        }
+        setOffset(newOffset);
+        const newX = x - newOffset;
         setCoordinates({
-          x: childrenLeft + childrenWidth / 2,
-          y: childrenTop + childrenHeight + yOffset
+          x: newX < 23 ? 23 : newX,
+          y: y - yOffset
         });
       } else {
+        let isRight = false;
         if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
           setAlignment(PopupAlignment.TopRight);
+          isRight = true;
         } else {
           setAlignment(PopupAlignment.TopLeft);
         }
+        const x = childrenLeft + childrenWidth / 2;
+        const y = childrenTop - yOffset;
+        let newOffset;
+        if (isRight) {
+          newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
+        } else {
+          newOffset = 0;
+          const right = window.innerWidth - (childrenLeft + childrenWidth / 2);
+          newOffset = right + pseudoWidth >= window.innerWidth ? right + pseudoWidth - window.innerWidth : 0;
+        }
+        setOffset(newOffset);
+        const newX = x - newOffset;
         setCoordinates({
-          x: childrenLeft + childrenWidth / 2,
-          y: childrenTop - yOffset
+          x: newX < 23 ? 23 : newX,
+          y: y - yOffset
         });
       }
       setIsOpen(true);
@@ -127,6 +157,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
     setPortal(() => /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(AnimatePresence, {
       initial: false
     }, isOpen && /*#__PURE__*/React.createElement(PopupContentWrapper, {
+      offset: offset,
       coordinates: coordinates,
       key: `tooltip_${uuid}`,
       alignment: alignment,
@@ -136,7 +167,7 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
     }, /*#__PURE__*/React.createElement(AreaContextProvider, {
       shouldChangeColor: false
     }, content))), container));
-  }, [alignment, container, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, uuid]);
+  }, [alignment, container, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, uuid]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPopupPseudo, {
     ref: popupPseudoContentRef,
     $menuHeight: menuHeight

package/lib/esm/components/popup/Popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","x","y","container","document","querySelector","body","alignment","setAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","window","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","contains","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","removeEventListener","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    ({ content, onShow, onHide, children, shouldShowOnHover = false, yOffset = 0 }, ref) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const container = document.querySelector('.tapp') || document.body;\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && popupPseudoContentRef.current) {\n                const { height: pseudoHeight, width: pseudoWidth } =\n                    popupPseudoContentRef.current.getBoundingClientRect();\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                if (pseudoHeight > childrenTop - 25) {\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    setCoordinates({\n                        x: childrenLeft + childrenWidth / 2,\n                        y: childrenTop + childrenHeight + yOffset,\n                    });\n                } else {\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    setCoordinates({\n                        x: childrenLeft + childrenWidth / 2,\n                        y: childrenTop - yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [yOffset]);\n\n        const handleChildrenClick = () => {\n            if (!shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = useCallback(() => {\n            if (shouldShowOnHover) {\n                window.clearTimeout(timeout.current);\n                handleShow();\n            }\n        }, [handleShow, shouldShowOnHover]);\n\n        const handleMouseLeave = useCallback(() => {\n            if (!shouldShowOnHover) {\n                return;\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !popupContentRef.current?.contains(event.target as Node) &&\n                    !shouldShowOnHover\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    handleHide();\n                }\n            },\n            [handleHide, shouldShowOnHover],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            void getWindowMetrics().then((result) => {\n                if (result.topBarHeight) {\n                    setMenuHeight(result.topBarHeight);\n                }\n            });\n        }, []);\n\n        useEffect(() => {\n            if (isOpen) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor={false}>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            uuid,\n        ]);\n\n        return (\n            <>\n                <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n                    {content}\n                </StyledPopupPseudo>\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                >\n                    {children}\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","AreaContextProvider","PopupContentWrapper","StyledPopup","StyledPopupPseudo","Popup","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","x","y","container","document","querySelector","body","alignment","setAlignment","TopLeft","offset","setOffset","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","timeout","uuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","isRight","BottomRight","BottomLeft","newOffset","window","innerWidth","right","newX","TopRight","handleChildrenClick","handleHide","handleMouseEnter","clearTimeout","handleMouseLeave","setTimeout","handleDocumentClick","event","contains","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","removeEventListener","createElement","initial","key","onMouseLeave","onMouseEnter","shouldChangeColor","Fragment","$menuHeight","onClick","displayName"],"sources":["../../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from '../../types/popup';\nimport AreaContextProvider from '../area-provider/AreaContextProvider';\nimport PopupContentWrapper from './popup-content-wrapper/PopupContentWrapper';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\n\nexport type PopupProps = {\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    ({ content, onShow, onHide, children, shouldShowOnHover = false, yOffset = 0 }, ref) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const container = document.querySelector('.tapp') || document.body;\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [offset, setOffset] = useState<number>(0);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n\n        const timeout = useRef<number>();\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && popupPseudoContentRef.current) {\n                const { height: pseudoHeight, width: pseudoWidth } =\n                    popupPseudoContentRef.current.getBoundingClientRect();\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                if (pseudoHeight > childrenTop - 25) {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop + childrenHeight + yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                } else {\n                    let isRight = false;\n\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n\n                        isRight = true;\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    const x = childrenLeft + childrenWidth / 2;\n                    const y = childrenTop - yOffset;\n\n                    let newOffset;\n\n                    if (isRight) {\n                        newOffset =\n                            x + pseudoWidth >= window.innerWidth\n                                ? x + pseudoWidth - window.innerWidth\n                                : 0;\n                    } else {\n                        newOffset = 0;\n\n                        const right = window.innerWidth - (childrenLeft + childrenWidth / 2);\n\n                        newOffset =\n                            right + pseudoWidth >= window.innerWidth\n                                ? right + pseudoWidth - window.innerWidth\n                                : 0;\n                    }\n\n                    setOffset(newOffset);\n\n                    const newX = x - newOffset;\n\n                    setCoordinates({\n                        x: newX < 23 ? 23 : newX,\n                        y: y - yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [yOffset]);\n\n        const handleChildrenClick = () => {\n            if (!shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = useCallback(() => {\n            if (shouldShowOnHover) {\n                window.clearTimeout(timeout.current);\n                handleShow();\n            }\n        }, [handleShow, shouldShowOnHover]);\n\n        const handleMouseLeave = useCallback(() => {\n            if (!shouldShowOnHover) {\n                return;\n            }\n\n            timeout.current = window.setTimeout(() => {\n                handleHide();\n            }, 500);\n        }, [handleHide, shouldShowOnHover]);\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (\n                    !popupContentRef.current?.contains(event.target as Node) &&\n                    !shouldShowOnHover\n                ) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    handleHide();\n                }\n            },\n            [handleHide, shouldShowOnHover],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            void getWindowMetrics().then((result) => {\n                if (result.topBarHeight) {\n                    setMenuHeight(result.topBarHeight);\n                }\n            });\n        }, []);\n\n        useEffect(() => {\n            if (isOpen) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContentWrapper\n                                offset={offset}\n                                coordinates={coordinates}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                                onMouseEnter={handleMouseEnter}\n                            >\n                                <AreaContextProvider shouldChangeColor={false}>\n                                    {content}\n                                </AreaContextProvider>\n                            </PopupContentWrapper>\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [\n            alignment,\n            container,\n            content,\n            coordinates,\n            handleMouseEnter,\n            handleMouseLeave,\n            isOpen,\n            offset,\n            uuid,\n        ]);\n\n        return (\n            <>\n                <StyledPopupPseudo ref={popupPseudoContentRef} $menuHeight={menuHeight}>\n                    {content}\n                </StyledPopupPseudo>\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                >\n                    {children}\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.js

@@ -7,6 +7,7 @@ const PopupContentWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     alignment,
     children,
     coordinates,
+    offset,
     onMouseLeave,
     onMouseEnter
   } = _ref;
@@ -27,6 +28,7 @@ const PopupContentWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       y: 0
     },
     $colorMode: colorMode,
+    $offset: offset,
     exit: {
       opacity: 0,
       y: exitAndInitialY

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContentWrapper.js","names":["useSite","React","PopupAlignment","StyledMotionPopupContentWrapper","PopupContentWrapper","forwardRef","_ref","ref","alignment","children","coordinates","onMouseLeave","onMouseEnter","colorMode","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","$colorMode","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","_ref2","displayName"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport { StyledMotionPopupContentWrapper } from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    children: ReactNode;\n    coordinates: PopupCoordinates;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n    onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    ({ alignment, children, coordinates, onMouseLeave, onMouseEnter }, ref) => {\n        const { colorMode } = useSite();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContentWrapper\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                {children}\n            </StyledMotionPopupContentWrapper>\n        );\n    },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AACpC,OAAOC,KAAK,MAA6C,OAAO;AAChE,SAASC,cAAc,QAA0B,sBAAsB;AACvE,SAASC,+BAA+B,QAAQ,8BAA8B;AAU9E,MAAMC,mBAAmB,gBAAGH,KAAK,CAACI,UAAU,CACxC,CAAAC,IAAA,EAAmEC,GAAG,KAAK;EAAA,IAA1E;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,WAAW;IAAEC,YAAY;IAAEC;EAAa,CAAC,GAAAN,IAAA;EAC7D,MAAM;IAAEO;EAAU,CAAC,GAAGb,OAAO,CAAC,CAAC;EAE/B,MAAMc,qBAAqB,GAAGN,SAAS,KAAKN,cAAc,CAACa,UAAU;EACrE,MAAMC,kBAAkB,GAAGR,SAAS,KAAKN,cAAc,CAACe,OAAO;EAC/D,MAAMC,mBAAmB,GAAGV,SAAS,KAAKN,cAAc,CAACiB,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGN,qBAAqB,IAAIE,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGR,qBAAqB,IAAIE,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIjB,KAAA,CAAAwB,aAAA,CAACtB,+BAA+B;IAC5BuB,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEhB,SAAU;IACtBiB,IAAI,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IACzCO,OAAO,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IAC5CQ,SAAS,EAAExB,SAAU;IACrBD,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBK,YAAY,EAAEA,YAAa;IAC3BD,YAAY,EAAEA,YAAa;IAC3BsB,KAAK,EAAE;MAAEC,IAAI,EAAExB,WAAW,CAACyB,CAAC;MAAEC,GAAG,EAAE1B,WAAW,CAACkB;IAAE,CAAE;IACnDS,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEZ,CAAC,GAAG;MAAM,CAAC,GAAAY,KAAA;MAAA,OAAM;AACvD,iCAAiCpB,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCK,CAAE;AACnC,iBAAiB;IAAA;EAAC,GAEDnB,QAC4B,CAAC;AAE1C,CACJ,CAAC;AAEDL,mBAAmB,CAACqC,WAAW,GAAG,cAAc;AAEhD,eAAerC,mBAAmB","ignoreList":[]}
+{"version":3,"file":"PopupContentWrapper.js","names":["useSite","React","PopupAlignment","StyledMotionPopupContentWrapper","PopupContentWrapper","forwardRef","_ref","ref","alignment","children","coordinates","offset","onMouseLeave","onMouseEnter","colorMode","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","$colorMode","$offset","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","_ref2","displayName"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.tsx"],"sourcesContent":["import { useSite } from 'chayns-api';\nimport React, { ReactNode, type MouseEventHandler } from 'react';\nimport { PopupAlignment, PopupCoordinates } from '../../../types/popup';\nimport { StyledMotionPopupContentWrapper } from './PopupContentWrapper.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    children: ReactNode;\n    offset: number;\n    coordinates: PopupCoordinates;\n    onMouseLeave: MouseEventHandler<HTMLSpanElement>;\n    onMouseEnter: MouseEventHandler<HTMLSpanElement>;\n};\n\nconst PopupContentWrapper = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    ({ alignment, children, coordinates, offset, onMouseLeave, onMouseEnter }, ref) => {\n        const { colorMode } = useSite();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContentWrapper\n                animate={{ opacity: 1, y: 0 }}\n                $colorMode={colorMode}\n                $offset={offset}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                $position={alignment}\n                ref={ref}\n                data-ispopup=\"true\"\n                onMouseEnter={onMouseEnter}\n                onMouseLeave={onMouseLeave}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                {children}\n            </StyledMotionPopupContentWrapper>\n        );\n    },\n);\n\nPopupContentWrapper.displayName = 'PopupContent';\n\nexport default PopupContentWrapper;\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AACpC,OAAOC,KAAK,MAA6C,OAAO;AAChE,SAASC,cAAc,QAA0B,sBAAsB;AACvE,SAASC,+BAA+B,QAAQ,8BAA8B;AAW9E,MAAMC,mBAAmB,gBAAGH,KAAK,CAACI,UAAU,CACxC,CAAAC,IAAA,EAA2EC,GAAG,KAAK;EAAA,IAAlF;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,WAAW;IAAEC,MAAM;IAAEC,YAAY;IAAEC;EAAa,CAAC,GAAAP,IAAA;EACrE,MAAM;IAAEQ;EAAU,CAAC,GAAGd,OAAO,CAAC,CAAC;EAE/B,MAAMe,qBAAqB,GAAGP,SAAS,KAAKN,cAAc,CAACc,UAAU;EACrE,MAAMC,kBAAkB,GAAGT,SAAS,KAAKN,cAAc,CAACgB,OAAO;EAC/D,MAAMC,mBAAmB,GAAGX,SAAS,KAAKN,cAAc,CAACkB,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGN,qBAAqB,IAAIE,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGR,qBAAqB,IAAIE,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIlB,KAAA,CAAAyB,aAAA,CAACvB,+BAA+B;IAC5BwB,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,UAAU,EAAEhB,SAAU;IACtBiB,OAAO,EAAEpB,MAAO;IAChBqB,IAAI,EAAE;MAAEJ,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IACzCQ,OAAO,EAAE;MAAEL,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IAC5CS,SAAS,EAAE1B,SAAU;IACrBD,GAAG,EAAEA,GAAI;IACT,gBAAa,MAAM;IACnBM,YAAY,EAAEA,YAAa;IAC3BD,YAAY,EAAEA,YAAa;IAC3BuB,KAAK,EAAE;MAAEC,IAAI,EAAE1B,WAAW,CAAC2B,CAAC;MAAEC,GAAG,EAAE5B,WAAW,CAACmB;IAAE,CAAE;IACnDU,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEb,CAAC,GAAG;MAAM,CAAC,GAAAa,KAAA;MAAA,OAAM;AACvD,iCAAiCrB,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCK,CAAE;AACnC,iBAAiB;IAAA;EAAC,GAEDpB,QAC4B,CAAC;AAE1C,CACJ,CAAC;AAEDL,mBAAmB,CAACuC,WAAW,GAAG,cAAc;AAEhD,eAAevC,mBAAmB","ignoreList":[]}

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js

@@ -38,32 +38,33 @@ export const StyledMotionPopupContentWrapper = styled(motion.div)`
 
         ${_ref3 => {
   let {
-    $position
+    $position,
+    $offset
   } = _ref3;
   switch ($position) {
     case PopupAlignment.TopLeft:
       return css`
                         bottom: -7px;
-                        right: 13px;
+                        right: ${13 + $offset}px;
                         transform: rotate(45deg);
                     `;
     case PopupAlignment.BottomLeft:
       return css`
                         top: -7px;
-                        right: 13px;
+                        right: ${13 + $offset}px;
                         transform: rotate(225deg);
                     `;
     case PopupAlignment.TopRight:
       return css`
                         transform: rotate(45deg);
                         bottom: -7px;
-                        left: 13px;
+                        left: ${13 + $offset}px;
                     `;
     case PopupAlignment.BottomRight:
       return css`
                         transform: rotate(225deg);
                         top: -7px;
-                        left: 13px;
+                        left: ${13 + $offset}px;
                     `;
     default:
       return undefined;

package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupContentWrapper.styles.js","names":["ColorMode","motion","styled","css","PopupAlignment","StyledMotionPopupContentWrapper","div","_ref","theme","$colorMode","Dark","_ref2","text","_ref3","$position","TopLeft","BottomLeft","TopRight","BottomRight","undefined"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme, $colorMode }: StyledMotionPopupContentWrapperProps) =>\n        $colorMode === ColorMode.Dark ? theme['003'] : theme['001']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: fixed;\n\n    & img {\n        width: 100%;\n    }\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\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        ${({ $position }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: 13px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: 13px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: 13px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: 13px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\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":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,SAASC,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,sBAAsB;AAQrD,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CACjDD,MAAM,CAACK,GACX,CAAwC;AACxC,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAiD,CAAC,GAAAF,IAAA;EAAA,OAC5EE,UAAU,KAAKT,SAAS,CAACU,IAAI,GAAGF,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACpE;AACA;AACA,aAAaG,KAAA;EAAA,IAAC;IAAEH;EAA4C,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,IAAI;AAAA,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAAmB;EAAA,IAAlB;IAAEC;EAAU,CAAC,GAAAD,KAAA;EACZ,QAAQC,SAAS;IACb,KAAKV,cAAc,CAACW,OAAO;MACvB,OAAOZ,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,cAAc,CAACY,UAAU;MAC1B,OAAOb,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,cAAc,CAACa,QAAQ;MACxB,OAAOd,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL,KAAKC,cAAc,CAACc,WAAW;MAC3B,OAAOf,GAAI;AAC/B;AACA;AACA;AACA,qBAAqB;IACL;MACI,OAAOgB,SAAS;EACxB;AACJ,CAAE;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"PopupContentWrapper.styles.js","names":["ColorMode","motion","styled","css","PopupAlignment","StyledMotionPopupContentWrapper","div","_ref","theme","$colorMode","Dark","_ref2","text","_ref3","$position","$offset","TopLeft","BottomLeft","TopRight","BottomRight","undefined"],"sources":["../../../../../src/components/popup/popup-content-wrapper/PopupContentWrapper.styles.ts"],"sourcesContent":["import { ColorMode } from 'chayns-api';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport { PopupAlignment } from '../../../types/popup';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionPopupContentWrapperProps = WithTheme<{\n    $position: PopupAlignment;\n    $colorMode: ColorMode;\n    $offset: number;\n}>;\n\nexport const StyledMotionPopupContentWrapper = styled(\n    motion.div,\n)<StyledMotionPopupContentWrapperProps>`\n    background-color: ${({ theme, $colorMode }: StyledMotionPopupContentWrapperProps) =>\n        $colorMode === ColorMode.Dark ? theme['003'] : theme['001']};\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n    color: ${({ theme }: StyledMotionPopupContentWrapperProps) => theme.text};\n    z-index: 100;\n    position: fixed;\n\n    & img {\n        width: 100%;\n    }\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\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        ${({ $position, $offset }) => {\n            switch ($position) {\n                case PopupAlignment.TopLeft:\n                    return css`\n                        bottom: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(45deg);\n                    `;\n                case PopupAlignment.BottomLeft:\n                    return css`\n                        top: -7px;\n                        right: ${13 + $offset}px;\n                        transform: rotate(225deg);\n                    `;\n                case PopupAlignment.TopRight:\n                    return css`\n                        transform: rotate(45deg);\n                        bottom: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                case PopupAlignment.BottomRight:\n                    return css`\n                        transform: rotate(225deg);\n                        top: -7px;\n                        left: ${13 + $offset}px;\n                    `;\n                default:\n                    return undefined;\n            }\n        }}\n    }\n\n    &::before {\n        background-color: inherit;\n        border-radius: 3px;\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":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,SAASC,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,cAAc,QAAQ,sBAAsB;AASrD,OAAO,MAAMC,+BAA+B,GAAGH,MAAM,CACjDD,MAAM,CAACK,GACX,CAAwC;AACxC,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAiD,CAAC,GAAAF,IAAA;EAAA,OAC5EE,UAAU,KAAKT,SAAS,CAACU,IAAI,GAAGF,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACpE;AACA;AACA,aAAaG,KAAA;EAAA,IAAC;IAAEH;EAA4C,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,IAAI;AAAA,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAUC,KAAA,IAA4B;EAAA,IAA3B;IAAEC,SAAS;IAAEC;EAAQ,CAAC,GAAAF,KAAA;EACrB,QAAQC,SAAS;IACb,KAAKV,cAAc,CAACY,OAAO;MACvB,OAAOb,GAAI;AAC/B;AACA,iCAAiC,EAAE,GAAGY,OAAQ;AAC9C;AACA,qBAAqB;IACL,KAAKX,cAAc,CAACa,UAAU;MAC1B,OAAOd,GAAI;AAC/B;AACA,iCAAiC,EAAE,GAAGY,OAAQ;AAC9C;AACA,qBAAqB;IACL,KAAKX,cAAc,CAACc,QAAQ;MACxB,OAAOf,GAAI;AAC/B;AACA;AACA,gCAAgC,EAAE,GAAGY,OAAQ;AAC7C,qBAAqB;IACL,KAAKX,cAAc,CAACe,WAAW;MAC3B,OAAOhB,GAAI;AAC/B;AACA;AACA,gCAAgC,EAAE,GAAGY,OAAQ;AAC7C,qBAAqB;IACL;MACI,OAAOK,SAAS;EACxB;AACJ,CAAE;AACV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/types/components/popup/popup-content-wrapper/PopupContentWrapper.d.ts

@@ -3,6 +3,7 @@ import { PopupAlignment, PopupCoordinates } from '../../../types/popup';
 type PopupContentProps = {
     alignment: PopupAlignment;
     children: ReactNode;
+    offset: number;
     coordinates: PopupCoordinates;
     onMouseLeave: MouseEventHandler<HTMLSpanElement>;
     onMouseEnter: MouseEventHandler<HTMLSpanElement>;

package/lib/types/components/popup/popup-content-wrapper/PopupContentWrapper.styles.d.ts

@@ -6,6 +6,7 @@ import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider'
 type StyledMotionPopupContentWrapperProps = WithTheme<{
     $position: PopupAlignment;
     $colorMode: ColorMode;
+    $offset: number;
 }>;
 export declare const StyledMotionPopupContentWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<Omit<{
     slot?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.590",
+    "version": "5.0.0-beta.592",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -83,5 +83,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "88a5dfa4d3eadf7adefd2acadc3879625831c490"
+    "gitHead": "54dcaa4081722bbb97f876e0d423d6b86bce9695"
 }