{"version":3,"file":"index-D3n3oFwZ.js","sources":["../../Client/legacy/Components/Popup/index.tsx"],"sourcesContent":["import { useResize, useScroll } from '@shared/Hooks';\r\nimport { usePosition } from '@shared/Hooks/Position';\r\nimport { Position } from '@shared/Models';\r\nimport Portal from '@webkit/components/portal';\r\nimport { CSSProperties, PropsWithChildren, RefObject, useEffect, useRef, useState } from 'react';\r\nimport './style.scss';\r\n\r\nexport interface PopupProps {\r\n    visible: boolean;\r\n    className?: string;\r\n    style?: CSSProperties;\r\n    id?: string;\r\n    triggerRef?: RefObject<HTMLElement>;\r\n    doNotScrollIntoView?: boolean;\r\n}\r\n\r\nexport function Popup({\r\n    visible,\r\n    className,\r\n    style,\r\n    id,\r\n    triggerRef,\r\n    doNotScrollIntoView,\r\n    children,\r\n}: PropsWithChildren<PopupProps>) {\r\n    const ref = useRef<HTMLDivElement>(null),\r\n        [arrowPosition, setArrowPosition] = useState<number>(0);\r\n\r\n    useEffect(handleScrollIntoView, [visible, ref.current]);\r\n    useEffect(handleArrowPosition, [triggerRef?.current, ref.current]);\r\n    useScroll(handleArrowPosition);\r\n    useResize(handleArrowPosition);\r\n\r\n    return (\r\n        <div ref={ref} className={`popup ${visible ? 'visible' : ''} ${className || ''}`} style={style} id={id}>\r\n            <div className='popup-arrow' style={arrowPosition > 0 ? { left: arrowPosition } : undefined} />\r\n\r\n            {children}\r\n        </div>\r\n    );\r\n\r\n    function handleScrollIntoView() {\r\n        if (\r\n            !visible ||\r\n            !ref.current ||\r\n            !ref.current.scrollIntoView ||\r\n            doNotScrollIntoView ||\r\n            (style && (!style.left || !style.top))\r\n        )\r\n            return;\r\n\r\n        ref.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\r\n    }\r\n\r\n    function handleArrowPosition() {\r\n        // This setTimeout is required to allow the browser to update the DOM with the new position of the trigger element.\r\n        // Without it, the arrow is misaligned. I'm not happy about using a setTimeout here, but it's the easiest solution.\r\n        setTimeout(() => {\r\n            if (!triggerRef?.current || !ref.current) return;\r\n\r\n            const triggerRect = triggerRef.current.getBoundingClientRect(),\r\n                popupRect = ref.current.getBoundingClientRect();\r\n\r\n            setArrowPosition(triggerRect.left + triggerRect.width / 2 - popupRect.left);\r\n        }, 0);\r\n    }\r\n}\r\n\r\ninterface PortalPopupProps extends PopupProps {\r\n    width?: number;\r\n}\r\n\r\nexport function PortalPopup({\r\n    visible,\r\n    className,\r\n    id,\r\n    triggerRef,\r\n    width,\r\n    doNotScrollIntoView,\r\n    style,\r\n    children,\r\n}: PropsWithChildren<PortalPopupProps>) {\r\n    const position = usePosition(triggerRef, handlePosition);\r\n\r\n    return (\r\n        <Portal className='portal-popup'>\r\n            <Popup\r\n                visible={visible}\r\n                className={className}\r\n                style={style || position}\r\n                id={id}\r\n                triggerRef={triggerRef}\r\n                doNotScrollIntoView={doNotScrollIntoView}\r\n            >\r\n                {children}\r\n            </Popup>\r\n        </Portal>\r\n    );\r\n\r\n    function handlePosition(position: Position) {\r\n        if (!triggerRef?.current) return;\r\n\r\n        const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,\r\n            triggerWidth = triggerRef.current.getBoundingClientRect().width || 0;\r\n\r\n        position.width = Math.min(windowWidth - 30, width ? width : position.width);\r\n        position.top += 25;\r\n        position.left = Math.max(\r\n            15,\r\n            Math.min(windowWidth - position.width - 30, position.left - position.width / 2 + triggerWidth / 2)\r\n        );\r\n    }\r\n}\r\n"],"names":["Popup","visible","className","style","id","triggerRef","doNotScrollIntoView","children","ref","useRef","arrowPosition","setArrowPosition","useState","useEffect","handleScrollIntoView","handleArrowPosition","useScroll","useResize","jsxs","jsx","triggerRect","popupRect","PortalPopup","width","position","usePosition","handlePosition","Portal","windowWidth","triggerWidth"],"mappings":"iLAgBO,SAASA,EAAM,CAClB,QAAAC,EACA,UAAAC,EACA,MAAAC,EACA,GAAAC,EACA,WAAAC,EACA,oBAAAC,EACA,SAAAC,CACJ,EAAkC,CACxB,MAAAC,EAAMC,SAAuB,IAAI,EACnC,CAACC,EAAeC,CAAgB,EAAIC,EAAA,SAAiB,CAAC,EAE1DC,OAAAA,EAAAA,UAAUC,EAAsB,CAACb,EAASO,EAAI,OAAO,CAAC,EACtDK,EAAA,UAAUE,EAAqB,CAACV,GAAA,YAAAA,EAAY,QAASG,EAAI,OAAO,CAAC,EACjEQ,EAAUD,CAAmB,EAC7BE,EAAUF,CAAmB,EAGxBG,EAAAA,KAAA,MAAA,CAAI,IAAAV,EAAU,UAAW,SAASP,EAAU,UAAY,EAAE,IAAIC,GAAa,EAAE,GAAI,MAAAC,EAAc,GAAAC,EAC5F,SAAA,CAACe,EAAAA,IAAA,MAAA,CAAI,UAAU,cAAc,MAAOT,EAAgB,EAAI,CAAE,KAAMA,CAAc,EAAI,MAAW,CAAA,EAE5FH,CAAA,EACL,EAGJ,SAASO,GAAuB,CAExB,CAACb,GACD,CAACO,EAAI,SACL,CAACA,EAAI,QAAQ,gBACbF,GACCH,IAAU,CAACA,EAAM,MAAQ,CAACA,EAAM,MAIrCK,EAAI,QAAQ,eAAe,CAAE,MAAO,UAAW,SAAU,SAAU,CAAA,CAGvE,SAASO,GAAsB,CAG3B,WAAW,IAAM,CACb,GAAI,EAACV,GAAA,MAAAA,EAAY,UAAW,CAACG,EAAI,QAAS,OAEpC,MAAAY,EAAcf,EAAW,QAAQ,wBACnCgB,EAAYb,EAAI,QAAQ,sBAAsB,EAElDG,EAAiBS,EAAY,KAAOA,EAAY,MAAQ,EAAIC,EAAU,IAAI,GAC3E,CAAC,CAAA,CAEZ,CAMO,SAASC,EAAY,CACxB,QAAArB,EACA,UAAAC,EACA,GAAAE,EACA,WAAAC,EACA,MAAAkB,EACA,oBAAAjB,EACA,MAAAH,EACA,SAAAI,CACJ,EAAwC,CAC9B,MAAAiB,EAAWC,EAAYpB,EAAYqB,CAAc,EAGnD,OAAAP,EAAAA,IAACQ,EAAO,CAAA,UAAU,eACd,SAAAR,EAAA,IAACnB,EAAA,CACG,QAAAC,EACA,UAAAC,EACA,MAAOC,GAASqB,EAChB,GAAApB,EACA,WAAAC,EACA,oBAAAC,EAEC,SAAAC,CAAA,CAAA,EAET,EAGJ,SAASmB,EAAeF,EAAoB,CACpC,GAAA,EAACnB,GAAA,MAAAA,EAAY,SAAS,OAE1B,MAAMuB,EAAc,OAAO,YAAc,SAAS,gBAAgB,aAAe,SAAS,KAAK,YAC3FC,EAAexB,EAAW,QAAQ,sBAAA,EAAwB,OAAS,EAEvEmB,EAAS,MAAQ,KAAK,IAAII,EAAc,GAAIL,GAAgBC,EAAS,KAAK,EAC1EA,EAAS,KAAO,GAChBA,EAAS,KAAO,KAAK,IACjB,GACA,KAAK,IAAII,EAAcJ,EAAS,MAAQ,GAAIA,EAAS,KAAOA,EAAS,MAAQ,EAAIK,EAAe,CAAC,CACrG,CAAA,CAER"}