{"version":3,"file":"Floated-ab8a907a.js","sources":["../src/components/Floated.jsx"],"sourcesContent":["import React, { useId, useRef, useLayoutEffect, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from '@styles/Floated.module.css';\nimport { MdOutlineClose } from 'react-icons/md';\n\n//modal: fullscreen modal in small view\n//fuild: min-width: 100%\nfunction Floated({\n    active = false,\n    setActive = () => {},\n    onClose = () => {},\n    children,\n    style,\n    modal = false,\n    fluid = false,\n    locked = false,\n    ...rest\n}) {\n    const uniqueID = useId();\n    const ref = useRef();\n    const prevIsActiveRef = useRef(active);\n\n    //NOTE: useLayoutEffect is a version of useEffect that fires before the browser repaints the screen.\n    useEffect(() => {\n        const handler = (e) => {\n            if (ref.current.getAttribute('locked') == 'true') return;\n            // if action is on the element or its children, do nothing\n            if (!ref.current.contains(e.target)) {\n                // console.log('not inside');\n                setActive(false);\n            }\n        };\n        //NOTE: mousedown is different to click\n        document.addEventListener('mousedown', handler);\n        return () => {\n            // cleanup\n            // console.log('cleanup Floated');\n            document.removeEventListener('mousedown', handler);\n        };\n    }, []);\n\n    useEffect(() => {\n        // Only run if previous state was true and current is false\n        if (prevIsActiveRef.current === true && active === false) {\n            // console.log('State changed from true to false!');\n            // Your logic here\n            onClose();\n        }\n        prevIsActiveRef.current = active;\n    }, [active]);\n\n    return (\n        <div\n            id={uniqueID}\n            ref={ref}\n            className={`${styles.container} ${active && styles.active} ${fluid && styles.fluid} ${\n                modal && styles.modal\n            }`}\n            style={style}\n            locked={locked ? 'true' : 'false'}\n            {...rest}\n        >\n            <div className={styles.close_badge} onClick={() => setActive(false)}>\n                <MdOutlineClose />\n            </div>\n            <div className={styles.content_container}>{children}</div>\n        </div>\n    );\n}\n\nFloated.propTypes = {\n    active: PropTypes.bool.isRequired,\n    setActive: PropTypes.func.isRequired,\n    onClose: PropTypes.func,\n    modal: PropTypes.bool,\n    fluid: PropTypes.bool,\n    locked: PropTypes.bool,\n};\n\nexport default Floated;\n"],"names":["Floated","active","setActive","onClose","children","style","modal","fluid","locked","rest","uniqueID","useId","ref","useRef","prevIsActiveRef","useEffect","handler","e","jsxs","styles","jsx","MdOutlineClose","PropTypes"],"mappings":"6VAOA,SAASA,EAAQ,CACb,OAAAC,EAAS,GACT,UAAAC,EAAY,IAAM,CAAC,EACnB,QAAAC,EAAU,IAAM,CAAC,EACjB,SAAAC,EACA,MAAAC,EACA,MAAAC,EAAQ,GACR,MAAAC,EAAQ,GACR,OAAAC,EAAS,GACT,GAAGC,CACP,EAAG,CACC,MAAMC,EAAWC,EAAAA,QACXC,EAAMC,EAAAA,SACNC,EAAkBD,SAAOZ,CAAM,EAGrCc,OAAAA,EAAAA,UAAU,IAAM,CACN,MAAAC,EAAWC,GAAM,CACfL,EAAI,QAAQ,aAAa,QAAQ,GAAK,SAErCA,EAAI,QAAQ,SAASK,EAAE,MAAM,GAE9Bf,EAAU,EAAK,EACnB,EAGK,gBAAA,iBAAiB,YAAac,CAAO,EACvC,IAAM,CAGA,SAAA,oBAAoB,YAAaA,CAAO,CAAA,CAEzD,EAAG,CAAE,CAAA,EAELD,EAAAA,UAAU,IAAM,CAERD,EAAgB,UAAY,IAAQb,IAAW,IAGvCE,IAEZW,EAAgB,QAAUb,CAAA,EAC3B,CAACA,CAAM,CAAC,EAGPiB,EAAA,KAAC,MAAA,CACG,GAAIR,EACJ,IAAAE,EACA,UAAW,GAAGO,EAAO,SAAS,IAAIlB,GAAUkB,EAAO,MAAM,IAAIZ,GAASY,EAAO,KAAK,IAC9Eb,GAASa,EAAO,KACpB,GACA,MAAAd,EACA,OAAQG,EAAS,OAAS,QACzB,GAAGC,EAEJ,SAAA,CAACW,EAAA,IAAA,MAAA,CAAI,UAAWD,EAAO,YAAa,QAAS,IAAMjB,EAAU,EAAK,EAC9D,SAACkB,EAAAA,IAAAC,EAAA,CAAA,CAAe,CACpB,CAAA,EACCD,EAAA,IAAA,MAAA,CAAI,UAAWD,EAAO,kBAAoB,SAAAf,EAAS,CAAA,CAAA,CAAA,CAGhE,CAEAJ,EAAQ,UAAY,CAChB,OAAQsB,EAAU,KAAK,WACvB,UAAWA,EAAU,KAAK,WAC1B,QAASA,EAAU,KACnB,MAAOA,EAAU,KACjB,MAAOA,EAAU,KACjB,OAAQA,EAAU,IACtB"}