@chayns-components/core 5.0.0-beta.477 → 5.0.0-beta.479

package/lib/components/popup/Popup.js

@@ -91,12 +91,10 @@ const Popup = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
   }, [handleHide, shouldShowOnHover]);
   const handleDocumentClick = useCallback(event => {
-    if (!popupContentRef.current?.contains(event.target)) {
+    if (!popupContentRef.current?.contains(event.target) && !shouldShowOnHover) {
       event.preventDefault();
       event.stopPropagation();
-      if (!shouldShowOnHover) {
-        handleHide();
-      }
+      handleHide();
     }
   }, [handleHide, shouldShowOnHover]);
   useImperativeHandle(ref, () => ({

package/lib/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","PopupContent","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","uuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","handleMouseLeave","event","currentTarget","dataset","ispopup","relatedTarget","contains","handleDocumentClick","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","window","removeEventListener","createElement","initial","key","onMouseLeave","Fragment","$menuHeight","onClick","onMouseEnter","displayName"],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\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 PopupContent from './popup-content/PopupContent';\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 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 = () => {\n            if (shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleMouseLeave = useCallback(\n            (event: MouseEvent) => {\n                if (shouldShowOnHover) {\n                    if ((event.currentTarget as HTMLElement).dataset.ispopup === 'true') {\n                        handleHide();\n                    }\n\n                    if (\n                        event.relatedTarget &&\n                        (event.relatedTarget === popupContentRef.current ||\n                            popupContentRef.current?.contains(event.relatedTarget as Node))\n                    ) {\n                        return;\n                    }\n\n                    handleHide();\n                }\n            },\n            [handleHide, shouldShowOnHover],\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!popupContentRef.current?.contains(event.target as Node)) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    if (!shouldShowOnHover) {\n                        handleHide();\n                    }\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                            <PopupContent\n                                coordinates={coordinates}\n                                content={content}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [alignment, container, content, coordinates, handleMouseLeave, isOpen, uuid]);\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":"AAAA,SAASA,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IACRC,UAAU,EAIVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,OAAO,QAAQ,kBAAkB;AAC1C,SAASC,cAAc,QAAoC,mBAAmB;AAC9E,OAAOC,YAAY,MAAM,8BAA8B;AACvD,SAASC,WAAW,EAAEC,iBAAiB,QAAQ,gBAAgB;AA6B/D,MAAMC,KAAK,gBAAGZ,UAAU,CACpB,CAAAa,IAAA,EAAgFC,GAAG,KAAK;EAAA,IAAvF;IAAEC,OAAO;IAAEC,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,iBAAiB,GAAG,KAAK;IAAEC,OAAO,GAAG;EAAE,CAAC,GAAAP,IAAA;EAC1E,MAAM,CAACQ,WAAW,EAAEC,cAAc,CAAC,GAAGjB,QAAQ,CAAmB;IAC7DkB,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EACF,MAAMC,SAAS,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC,IAAID,QAAQ,CAACE,IAAI;EAElE,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGzB,QAAQ,CAAiBG,cAAc,CAACuB,OAAO,CAAC;EAClF,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG5B,QAAQ,CAAC,KAAK,CAAC;EAC3C,MAAM,CAAC6B,MAAM,EAAEC,SAAS,CAAC,GAAG9B,QAAQ,CAAc,CAAC;EACnD,MAAM,CAAC+B,UAAU,EAAEC,aAAa,CAAC,GAAGhC,QAAQ,CAAC,CAAC,CAAC;EAE/C,MAAMiC,IAAI,GAAG/B,OAAO,CAAC,CAAC;;EAEtB;EACA,MAAMgC,eAAe,GAAGnC,MAAM,CAAiB,IAAI,CAAC;EACpD,MAAMoC,qBAAqB,GAAGpC,MAAM,CAAiB,IAAI,CAAC;EAC1D,MAAMqC,QAAQ,GAAGrC,MAAM,CAAiB,IAAI,CAAC;EAE7C,MAAMsC,UAAU,GAAGzC,WAAW,CAAC,MAAM;IACjC,IAAIwC,QAAQ,CAACE,OAAO,IAAIH,qBAAqB,CAACG,OAAO,EAAE;MACnD,MAAM;QAAEC,MAAM,EAAEC,YAAY;QAAEC,KAAK,EAAEC;MAAY,CAAC,GAC9CP,qBAAqB,CAACG,OAAO,CAACK,qBAAqB,CAAC,CAAC;MAEzD,MAAM;QACFJ,MAAM,EAAEK,cAAc;QACtBC,IAAI,EAAEC,YAAY;QAClBC,GAAG,EAAEC,WAAW;QAChBP,KAAK,EAAEQ;MACX,CAAC,GAAGb,QAAQ,CAACE,OAAO,CAACK,qBAAqB,CAAC,CAAC;MAE5C,IAAIH,YAAY,GAAGQ,WAAW,GAAG,EAAE,EAAE;QACjC,IAAIN,WAAW,GAAGI,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,EAAE;UACrDxB,YAAY,CAACtB,cAAc,CAAC+C,WAAW,CAAC;QAC5C,CAAC,MAAM;UACHzB,YAAY,CAACtB,cAAc,CAACgD,UAAU,CAAC;QAC3C;QAEAlC,cAAc,CAAC;UACXC,CAAC,EAAE4B,YAAY,GAAGG,aAAa,GAAG,CAAC;UACnC9B,CAAC,EAAE6B,WAAW,GAAGJ,cAAc,GAAG7B;QACtC,CAAC,CAAC;MACN,CAAC,MAAM;QACH,IAAI2B,WAAW,GAAGI,YAAY,GAAGG,aAAa,GAAG,CAAC,GAAG,EAAE,EAAE;UACrDxB,YAAY,CAACtB,cAAc,CAACiD,QAAQ,CAAC;QACzC,CAAC,MAAM;UACH3B,YAAY,CAACtB,cAAc,CAACuB,OAAO,CAAC;QACxC;QAEAT,cAAc,CAAC;UACXC,CAAC,EAAE4B,YAAY,GAAGG,aAAa,GAAG,CAAC;UACnC9B,CAAC,EAAE6B,WAAW,GAAGjC;QACrB,CAAC,CAAC;MACN;MAEAa,SAAS,CAAC,IAAI,CAAC;IACnB;EACJ,CAAC,EAAE,CAACb,OAAO,CAAC,CAAC;EAEb,MAAMsC,mBAAmB,GAAGA,CAAA,KAAM;IAC9B,IAAI,CAACvC,iBAAiB,EAAE;MACpBuB,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC;EAED,MAAMiB,UAAU,GAAG1D,WAAW,CAAC,MAAM;IACjCgC,SAAS,CAAC,KAAK,CAAC;EACpB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM2B,gBAAgB,GAAGA,CAAA,KAAM;IAC3B,IAAIzC,iBAAiB,EAAE;MACnBuB,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC;EAED,MAAMmB,gBAAgB,GAAG5D,WAAW,CAC/B6D,KAAiB,IAAK;IACnB,IAAI3C,iBAAiB,EAAE;MACnB,IAAK2C,KAAK,CAACC,aAAa,CAAiBC,OAAO,CAACC,OAAO,KAAK,MAAM,EAAE;QACjEN,UAAU,CAAC,CAAC;MAChB;MAEA,IACIG,KAAK,CAACI,aAAa,KAClBJ,KAAK,CAACI,aAAa,KAAK3B,eAAe,CAACI,OAAO,IAC5CJ,eAAe,CAACI,OAAO,EAAEwB,QAAQ,CAACL,KAAK,CAACI,aAAqB,CAAC,CAAC,EACrE;QACE;MACJ;MAEAP,UAAU,CAAC,CAAC;IAChB;EACJ,CAAC,EACD,CAACA,UAAU,EAAExC,iBAAiB,CAClC,CAAC;EAED,MAAMiD,mBAAmB,GAAGnE,WAAW,CAClC6D,KAAK,IAAK;IACP,IAAI,CAACvB,eAAe,CAACI,OAAO,EAAEwB,QAAQ,CAACL,KAAK,CAACO,MAAc,CAAC,EAAE;MAC1DP,KAAK,CAACQ,cAAc,CAAC,CAAC;MACtBR,KAAK,CAACS,eAAe,CAAC,CAAC;MAEvB,IAAI,CAACpD,iBAAiB,EAAE;QACpBwC,UAAU,CAAC,CAAC;MAChB;IACJ;EACJ,CAAC,EACD,CAACA,UAAU,EAAExC,iBAAiB,CAClC,CAAC;EAEDhB,mBAAmB,CACfW,GAAG,EACH,OAAO;IACH0D,IAAI,EAAEb,UAAU;IAChBc,IAAI,EAAE/B;EACV,CAAC,CAAC,EACF,CAACiB,UAAU,EAAEjB,UAAU,CAC3B,CAAC;EAEDxC,SAAS,CAAC,MAAM;IACZ,KAAKL,gBAAgB,CAAC,CAAC,CAAC6E,IAAI,CAAEC,MAAM,IAAK;MACrC,IAAIA,MAAM,CAACC,YAAY,EAAE;QACrBvC,aAAa,CAACsC,MAAM,CAACC,YAAY,CAAC;MACtC;IACJ,CAAC,CAAC;EACN,CAAC,EAAE,EAAE,CAAC;EAEN1E,SAAS,CAAC,MAAM;IACZ,IAAI8B,MAAM,EAAE;MACRN,QAAQ,CAACmD,gBAAgB,CAAC,OAAO,EAAET,mBAAmB,EAAE,IAAI,CAAC;MAC7DU,MAAM,CAACD,gBAAgB,CAAC,MAAM,EAAElB,UAAU,CAAC;MAE3C,IAAI,OAAO3C,MAAM,KAAK,UAAU,EAAE;QAC9BA,MAAM,CAAC,CAAC;MACZ;IACJ,CAAC,MAAM,IAAI,OAAOC,MAAM,KAAK,UAAU,EAAE;MACrCA,MAAM,CAAC,CAAC;IACZ;IAEA,OAAO,MAAM;MACTS,QAAQ,CAACqD,mBAAmB,CAAC,OAAO,EAAEX,mBAAmB,EAAE,IAAI,CAAC;MAChEU,MAAM,CAACC,mBAAmB,CAAC,MAAM,EAAEpB,UAAU,CAAC;IAClD,CAAC;EACL,CAAC,EAAE,CAACS,mBAAmB,EAAET,UAAU,EAAE3B,MAAM,EAAEf,MAAM,EAAED,MAAM,CAAC,CAAC;EAE7Dd,SAAS,CAAC,MAAM;IACZiC,SAAS,CAAC,mBACN7B,YAAY,eACRP,KAAA,CAAAiF,aAAA,CAAClF,eAAe;MAACmF,OAAO,EAAE;IAAM,GAC3BjD,MAAM,iBACHjC,KAAA,CAAAiF,aAAA,CAACvE,YAAY;MACTY,WAAW,EAAEA,WAAY;MACzBN,OAAO,EAAEA,OAAQ;MACjBmE,GAAG,EAAG,WAAU5C,IAAK,EAAE;MACvBT,SAAS,EAAEA,SAAU;MACrBf,GAAG,EAAEyB,eAAgB;MACrB4C,YAAY,EAAEtB;IAAiB,CAClC,CAEQ,CAAC,EAClBpC,SACJ,CACJ,CAAC;EACL,CAAC,EAAE,CAACI,SAAS,EAAEJ,SAAS,EAAEV,OAAO,EAAEM,WAAW,EAAEwC,gBAAgB,EAAE7B,MAAM,EAAEM,IAAI,CAAC,CAAC;EAEhF,oBACIvC,KAAA,CAAAiF,aAAA,CAAAjF,KAAA,CAAAqF,QAAA,qBACIrF,KAAA,CAAAiF,aAAA,CAACrE,iBAAiB;IAACG,GAAG,EAAE0B,qBAAsB;IAAC6C,WAAW,EAAEjD;EAAW,GAClErB,OACc,CAAC,eACpBhB,KAAA,CAAAiF,aAAA,CAACtE,WAAW;IACRI,GAAG,EAAE2B,QAAS;IACd6C,OAAO,EAAE5B,mBAAoB;IAC7ByB,YAAY,EAAEtB,gBAAiB;IAC/B0B,YAAY,EAAE3B;EAAiB,GAE9B1C,QACQ,CAAC,EACbgB,MACH,CAAC;AAEX,CACJ,CAAC;AAEDtB,KAAK,CAAC4E,WAAW,GAAG,OAAO;AAE3B,eAAe5E,KAAK"}
+{"version":3,"file":"Popup.js","names":["getWindowMetrics","AnimatePresence","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","createPortal","useUuid","PopupAlignment","PopupContent","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","uuid","popupContentRef","popupPseudoContentRef","popupRef","handleShow","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","handleMouseLeave","event","currentTarget","dataset","ispopup","relatedTarget","contains","handleDocumentClick","target","preventDefault","stopPropagation","hide","show","then","result","topBarHeight","addEventListener","window","removeEventListener","createElement","initial","key","onMouseLeave","Fragment","$menuHeight","onClick","onMouseEnter","displayName"],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\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 PopupContent from './popup-content/PopupContent';\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 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 = () => {\n            if (shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleMouseLeave = useCallback(\n            (event: MouseEvent) => {\n                if (shouldShowOnHover) {\n                    if ((event.currentTarget as HTMLElement).dataset.ispopup === 'true') {\n                        handleHide();\n                    }\n\n                    if (\n                        event.relatedTarget &&\n                        (event.relatedTarget === popupContentRef.current ||\n                            popupContentRef.current?.contains(event.relatedTarget as Node))\n                    ) {\n                        return;\n                    }\n\n                    handleHide();\n                }\n            },\n            [handleHide, shouldShowOnHover],\n        );\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                            <PopupContent\n                                coordinates={coordinates}\n                                content={content}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                                onMouseLeave={handleMouseLeave}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [alignment, container, content, coordinates, handleMouseLeave, isOpen, uuid]);\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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"}

package/lib/components/radio-button/RadioButton.styles.js

@@ -28,6 +28,8 @@ export const StyledRadioButtonWrapper = styled.div`
 `;
 export const StyledRadioButtonCheckBox = styled.input`
     opacity: 0;
+    height: 15px;
+    width: 15px;
 `;
 export const StyledRadioButtonPseudoCheckBox = styled.div`
     background-color: ${_ref3 => {
@@ -45,8 +47,8 @@ export const StyledRadioButtonPseudoCheckBox = styled.div`
   } = _ref4;
   return theme['409-rgb'];
 }}, 0.5);
-    width: 13px;
-    height: 13px;
+    width: 15px;
+    height: 15px;
     position: absolute;
     border-radius: 100%;
     top: 50%;
@@ -57,8 +59,8 @@ export const StyledRadioButtonCheckBoxMark = styled.span`
     cursor: pointer;
     background-color: transparent;
     position: absolute;
-    top: 0;
-    left: 2.925px;
+    top: 1px;
+    left: 3.925px;
     display: inline-block;
     transform: rotate(35deg);
     height: 9px;

package/lib/components/radio-button/RadioButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.styles.js","names":["motion","styled","css","StyledRadioButton","span","_ref","$isDisabled","_ref2","StyledRadioButtonWrapper","div","StyledRadioButtonCheckBox","input","StyledRadioButtonPseudoCheckBox","_ref3","theme","$isChecked","_ref4","StyledRadioButtonCheckBoxMark","_ref5","$isHovered","$isSelected","StyledRadioButtonLabel","p","_ref6","text","StyledMotionRadioButtonChildren"],"sources":["../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledRadioButtonProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n    display: flex;\n    flex-direction: column;\n\n    user-select: none;\n    width: fit-content;\n    position: relative;\n    cursor: ${({ $isDisabled }: StyledRadioButtonProps) =>\n        $isDisabled ? 'default !important' : 'pointer'};\n    opacity: ${({ $isDisabled }: StyledRadioButtonProps) => ($isDisabled ? 0.5 : 1)};\n`;\n\nexport const StyledRadioButtonWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    position: relative;\n    gap: 5px;\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<unknown>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n    opacity: 0;\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{ $isChecked: boolean }>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n    background-color: ${({ theme, $isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isChecked ? theme['secondary-408'] : theme['secondary-403']};\n    opacity: 1;\n    border: 1px solid\n        rgba(${({ theme }: StyledRadioButtonPseudoCheckBoxProps) => theme['409-rgb']}, 0.5);\n    width: 13px;\n    height: 13px;\n    position: absolute;\n    border-radius: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer !important;\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n    $isHovered: boolean;\n    $isSelected: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n    cursor: pointer;\n    background-color: transparent;\n    position: absolute;\n    top: 0;\n    left: 2.925px;\n    display: inline-block;\n    transform: rotate(35deg);\n    height: 9px;\n    width: 5px;\n    border-bottom: 2px solid white;\n    border-right: 2px solid white;\n    border-top: transparent;\n    border-left: transparent;\n    z-index: 2;\n\n    ${({ $isHovered, $isSelected }) => {\n        if ($isSelected) {\n            return css`\n                opacity: 1;\n            `;\n        }\n\n        if ($isHovered) {\n            return css`\n                opacity: 0.5;\n            `;\n        }\n\n        return css`\n            opacity: 0;\n        `;\n    }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<unknown>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n    color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n`;\n\nexport const StyledMotionRadioButtonChildren = styled(motion.div)`\n    margin-left: 18px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA6B;AACrE;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,IAAA;EAAA,OAC9CC,WAAW,GAAG,oBAAoB,GAAG,SAAS;AAAA,CAAC;AACvD,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAoC,CAAC,GAAAC,KAAA;EAAA,OAAMD,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AACpF,CAAC;AAED,OAAO,MAAME,wBAAwB,GAAGP,MAAM,CAACQ,GAAI;AACnD;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,yBAAyB,GAAGT,MAAM,CAACU,KAAsC;AACtF;AACA,CAAC;AAID,OAAO,MAAMC,+BAA+B,GAAGX,MAAM,CAACQ,GAA0C;AAChG,wBAAwBI,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAiD,CAAC,GAAAF,KAAA;EAAA,OAC5EE,UAAU,GAAGD,KAAK,CAAC,eAAe,CAAC,GAAGA,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACrE;AACA;AACA,eAAeE,KAAA;EAAA,IAAC;IAAEF;EAA4C,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMG,6BAA6B,GAAGhB,MAAM,CAACG,IAAyC;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMc,KAAA,IAAiC;EAAA,IAAhC;IAAEC,UAAU;IAAEC;EAAY,CAAC,GAAAF,KAAA;EAC1B,IAAIE,WAAW,EAAE;IACb,OAAOlB,GAAI;AACvB;AACA,aAAa;EACL;EAEA,IAAIiB,UAAU,EAAE;IACZ,OAAOjB,GAAI;AACvB;AACA,aAAa;EACL;EAEA,OAAOA,GAAI;AACnB;AACA,SAAS;AACL,CAAE;AACN,CAAC;AAID,OAAO,MAAMmB,sBAAsB,GAAGpB,MAAM,CAACqB,CAA+B;AAC5E,aAAaC,KAAA;EAAA,IAAC;IAAET;EAAmC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAACU,IAAI;AAAA,CAAC;AACpE,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGxB,MAAM,CAACD,MAAM,CAACS,GAAG,CAAE;AAClE;AACA,CAAC"}
+{"version":3,"file":"RadioButton.styles.js","names":["motion","styled","css","StyledRadioButton","span","_ref","$isDisabled","_ref2","StyledRadioButtonWrapper","div","StyledRadioButtonCheckBox","input","StyledRadioButtonPseudoCheckBox","_ref3","theme","$isChecked","_ref4","StyledRadioButtonCheckBoxMark","_ref5","$isHovered","$isSelected","StyledRadioButtonLabel","p","_ref6","text","StyledMotionRadioButtonChildren"],"sources":["../../../src/components/radio-button/RadioButton.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledRadioButtonProps = WithTheme<{ $isDisabled: boolean }>;\n\nexport const StyledRadioButton = styled.span<StyledRadioButtonProps>`\n    display: flex;\n    flex-direction: column;\n\n    user-select: none;\n    width: fit-content;\n    position: relative;\n    cursor: ${({ $isDisabled }: StyledRadioButtonProps) =>\n        $isDisabled ? 'default !important' : 'pointer'};\n    opacity: ${({ $isDisabled }: StyledRadioButtonProps) => ($isDisabled ? 0.5 : 1)};\n`;\n\nexport const StyledRadioButtonWrapper = styled.div`\n    display: flex;\n    align-items: center;\n    position: relative;\n    gap: 5px;\n`;\n\ntype StyledRadioButtonCheckBoxProps = WithTheme<unknown>;\n\nexport const StyledRadioButtonCheckBox = styled.input<StyledRadioButtonCheckBoxProps>`\n    opacity: 0;\n    height: 15px;\n    width: 15px;\n`;\n\ntype StyledRadioButtonPseudoCheckBoxProps = WithTheme<{ $isChecked: boolean }>;\n\nexport const StyledRadioButtonPseudoCheckBox = styled.div<StyledRadioButtonPseudoCheckBoxProps>`\n    background-color: ${({ theme, $isChecked }: StyledRadioButtonPseudoCheckBoxProps) =>\n        $isChecked ? theme['secondary-408'] : theme['secondary-403']};\n    opacity: 1;\n    border: 1px solid\n        rgba(${({ theme }: StyledRadioButtonPseudoCheckBoxProps) => theme['409-rgb']}, 0.5);\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    border-radius: 100%;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer !important;\n`;\n\ntype StyledRadioButtonCheckBoxMarkProps = WithTheme<{\n    $isHovered: boolean;\n    $isSelected: boolean;\n}>;\n\nexport const StyledRadioButtonCheckBoxMark = styled.span<StyledRadioButtonCheckBoxMarkProps>`\n    cursor: pointer;\n    background-color: transparent;\n    position: absolute;\n    top: 1px;\n    left: 3.925px;\n    display: inline-block;\n    transform: rotate(35deg);\n    height: 9px;\n    width: 5px;\n    border-bottom: 2px solid white;\n    border-right: 2px solid white;\n    border-top: transparent;\n    border-left: transparent;\n    z-index: 2;\n\n    ${({ $isHovered, $isSelected }) => {\n        if ($isSelected) {\n            return css`\n                opacity: 1;\n            `;\n        }\n\n        if ($isHovered) {\n            return css`\n                opacity: 0.5;\n            `;\n        }\n\n        return css`\n            opacity: 0;\n        `;\n    }}\n`;\n\ntype StyledRadioButtonLabelProps = WithTheme<unknown>;\n\nexport const StyledRadioButtonLabel = styled.p<StyledRadioButtonLabelProps>`\n    color: ${({ theme }: StyledRadioButtonLabelProps) => theme.text};\n`;\n\nexport const StyledMotionRadioButtonChildren = styled(motion.div)`\n    margin-left: 18px;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,iBAAiB,GAAGF,MAAM,CAACG,IAA6B;AACrE;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,IAAA;EAAA,IAAC;IAAEC;EAAoC,CAAC,GAAAD,IAAA;EAAA,OAC9CC,WAAW,GAAG,oBAAoB,GAAG,SAAS;AAAA,CAAC;AACvD,eAAeC,KAAA;EAAA,IAAC;IAAED;EAAoC,CAAC,GAAAC,KAAA;EAAA,OAAMD,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AACpF,CAAC;AAED,OAAO,MAAME,wBAAwB,GAAGP,MAAM,CAACQ,GAAI;AACnD;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,yBAAyB,GAAGT,MAAM,CAACU,KAAsC;AACtF;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,+BAA+B,GAAGX,MAAM,CAACQ,GAA0C;AAChG,wBAAwBI,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAiD,CAAC,GAAAF,KAAA;EAAA,OAC5EE,UAAU,GAAGD,KAAK,CAAC,eAAe,CAAC,GAAGA,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACrE;AACA;AACA,eAAeE,KAAA;EAAA,IAAC;IAAEF;EAA4C,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACrF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMG,6BAA6B,GAAGhB,MAAM,CAACG,IAAyC;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMc,KAAA,IAAiC;EAAA,IAAhC;IAAEC,UAAU;IAAEC;EAAY,CAAC,GAAAF,KAAA;EAC1B,IAAIE,WAAW,EAAE;IACb,OAAOlB,GAAI;AACvB;AACA,aAAa;EACL;EAEA,IAAIiB,UAAU,EAAE;IACZ,OAAOjB,GAAI;AACvB;AACA,aAAa;EACL;EAEA,OAAOA,GAAI;AACnB;AACA,SAAS;AACL,CAAE;AACN,CAAC;AAID,OAAO,MAAMmB,sBAAsB,GAAGpB,MAAM,CAACqB,CAA+B;AAC5E,aAAaC,KAAA;EAAA,IAAC;IAAET;EAAmC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAACU,IAAI;AAAA,CAAC;AACpE,CAAC;AAED,OAAO,MAAMC,+BAA+B,GAAGxB,MAAM,CAACD,MAAM,CAACS,GAAG,CAAE;AAClE;AACA,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.477",
+    "version": "5.0.0-beta.479",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -73,5 +73,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b79b3a0bf23958a78779edcf4c398639c7a12727"
+    "gitHead": "9c98d32e0df37c357bf9415a91f663e9163d1dbe"
 }