@contentstack/live-preview-utils/dist/modern/visualBuilder/components/Collab/Tooltip/Tooltip.cjs.map

Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting live changes to the preview pane.

{"version":3,"sources":["../../../../../../src/visualBuilder/components/Collab/Tooltip/Tooltip.tsx"],"sourcesContent":["/** @jsxImportSource preact */\nimport React from \"preact/compat\";\nimport { useState, useRef, useEffect } from \"preact/hooks\";\nimport { collabStyles } from \"../../../collab.style\";\nimport { positionTooltip } from \"../../../utils/collabUtils\";\nimport classNames from \"classnames\";\n\ninterface TooltipProps {\n    content: string;\n    children: React.ReactNode;\n    position?: \"top\" | \"bottom\" | \"left\" | \"right\";\n    className?: string;\n    testId?: string;\n}\n\ninterface PositionCoords {\n    top: number;\n    left: number;\n}\n\ninterface Positions {\n    bottom: PositionCoords;\n    top: PositionCoords;\n    left: PositionCoords;\n    right: PositionCoords;\n}\n\nconst Tooltip = (props: TooltipProps): JSX.Element => {\n    const {\n        content,\n        children,\n        position = \"bottom\",\n        className,\n        testId,\n        ...otherProps\n    } = props;\n    const [isVisible, setIsVisible] = useState<boolean>(false);\n    const [actualPosition, setActualPosition] = useState<\n        \"top\" | \"bottom\" | \"left\" | \"right\"\n    >(position);\n    const tooltipRef = useRef<HTMLDivElement>(null);\n    const targetRef = useRef<HTMLDivElement>(null);\n\n    const prevChildrenRef = useRef(children);\n\n    useEffect(() => {\n        if (prevChildrenRef.current !== children) {\n            setIsVisible(false);\n            prevChildrenRef.current = children;\n        }\n    }, [children]);\n\n    useEffect(() => {\n        const updateTooltip = () =>\n            positionTooltip(tooltipRef, targetRef, position, setActualPosition);\n\n        updateTooltip();\n        window.addEventListener(\"scroll\", updateTooltip);\n        window.addEventListener(\"resize\", updateTooltip);\n\n        return () => {\n            window.removeEventListener(\"scroll\", updateTooltip);\n            window.removeEventListener(\"resize\", updateTooltip);\n        };\n    }, [isVisible, position]);\n\n    return (\n        <div\n            ref={targetRef}\n            className={classNames(\n                \"collab-tooltip--wrapper\",\n                collabStyles()[\"collab-tooltip--wrapper\"],\n                className\n            )}\n            onMouseEnter={() => setIsVisible(true)}\n            onMouseLeave={() => setIsVisible(false)}\n            data-testid={testId}\n            {...otherProps}\n        >\n            {children}\n            {isVisible && (\n                <div\n                    ref={tooltipRef}\n                    className={classNames(\n                        \"collab-tooltip\",\n                        `collab-tooltip--${actualPosition}`,\n                        collabStyles()[\"collab-tooltip\"],\n                        collabStyles()[`collab-tooltip--${actualPosition}`]\n                    )}\n                    role=\"tooltip\"\n                    aria-hidden={!isVisible}\n                    data-position={actualPosition}\n                >\n                    {content}\n                </div>\n            )}\n        </div>\n    );\n};\n\nTooltip.defaultProps = {\n    testId: \"collab-tooltip\",\n} as Partial<TooltipProps>;\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA4C;AAC5C,oBAA6B;AAC7B,yBAAgC;AAChC,wBAAuB;AA8Df;AAxCR,IAAM,UAAU,CAAC,UAAqC;AAClD,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAkB,KAAK;AACzD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAE1C,QAAQ;AACV,QAAM,iBAAa,qBAAuB,IAAI;AAC9C,QAAM,gBAAY,qBAAuB,IAAI;AAE7C,QAAM,sBAAkB,qBAAO,QAAQ;AAEvC,8BAAU,MAAM;AACZ,QAAI,gBAAgB,YAAY,UAAU;AACtC,mBAAa,KAAK;AAClB,sBAAgB,UAAU;AAAA,IAC9B;AAAA,EACJ,GAAG,CAAC,QAAQ,CAAC;AAEb,8BAAU,MAAM;AACZ,UAAM,gBAAgB,UAClB,oCAAgB,YAAY,WAAW,UAAU,iBAAiB;AAEtE,kBAAc;AACd,WAAO,iBAAiB,UAAU,aAAa;AAC/C,WAAO,iBAAiB,UAAU,aAAa;AAE/C,WAAO,MAAM;AACT,aAAO,oBAAoB,UAAU,aAAa;AAClD,aAAO,oBAAoB,UAAU,aAAa;AAAA,IACtD;AAAA,EACJ,GAAG,CAAC,WAAW,QAAQ,CAAC;AAExB,SACI;AAAA,IAAC;AAAA;AAAA,MACG,KAAK;AAAA,MACL,eAAW,kBAAAA;AAAA,QACP;AAAA,YACA,4BAAa,EAAE,yBAAyB;AAAA,QACxC;AAAA,MACJ;AAAA,MACA,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aACG;AAAA,UAAC;AAAA;AAAA,YACG,KAAK;AAAA,YACL,eAAW,kBAAAA;AAAA,cACP;AAAA,cACA,mBAAmB,cAAc;AAAA,kBACjC,4BAAa,EAAE,gBAAgB;AAAA,kBAC/B,4BAAa,EAAE,mBAAmB,cAAc,EAAE;AAAA,YACtD;AAAA,YACA,MAAK;AAAA,YACL,eAAa,CAAC;AAAA,YACd,iBAAe;AAAA,YAEd;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,EAER;AAER;AAEA,QAAQ,eAAe;AAAA,EACnB,QAAQ;AACZ;AAEA,IAAO,kBAAQ;","names":["classNames"]}