{"version":3,"file":"TooltipContent.cjs","sources":["../../../../src/components/tooltip/TooltipContent.tsx"],"sourcesContent":["import {\n    FloatingArrow,\n    FloatingFocusManager,\n    FloatingPortal,\n    type Side,\n    useMergeRefs,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { type HTMLProps, forwardRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { getThemeAndSize } from \"../../utilities/getThemeAndSize.js\";\nimport { useTooltipContext } from \"./Tooltip.js\";\n\nfunction getTranslation(side: Side, value = 0) {\n    switch (side) {\n        case \"top\":\n            return `0 ${value}px`;\n        case \"left\":\n            return `${value}px 0`;\n        case \"bottom\":\n            return `0 ${-value}px`;\n        case \"right\":\n            return `${-value}px 0`;\n\n        default:\n            return `0 ${value}px`;\n    }\n}\n\nexport const TooltipContent = forwardRef<\n    HTMLDivElement,\n    HTMLProps<HTMLDivElement> & { \"data-ispopup\"?: boolean }\n>(function TooltipContent(\n    { className, children, [\"data-ispopup\"]: isPopup, ...props },\n    forwardedRef,\n) {\n    const {\n        triggerOn,\n        arrowElement,\n        getFloatingProps,\n        placement,\n        floatingStyles,\n        refs,\n        context,\n    } = useTooltipContext();\n    const ref = useMergeRefs([forwardedRef, refs.setFloating]);\n    const contentId = useId(\"jkl-tooltip-content\");\n    const { prefersReducedMotion } = useBrowserPreferences();\n    const { isMounted, styles: animationStyles } = useTransitionStyles(\n        context,\n        {\n            duration: {\n                open: prefersReducedMotion ? 0 : 250,\n                close: prefersReducedMotion ? 0 : 150,\n            },\n            initial: ({ side }) => ({\n                opacity: 0,\n                translate: getTranslation(side, 5),\n            }),\n            open: ({ side }) => ({\n                opacity: 1,\n                translate: getTranslation(side, 0),\n            }),\n            close: ({ side }) => ({\n                opacity: 0,\n                translate: getTranslation(side, -5),\n            }),\n        },\n    );\n\n    // Siden tooltipet rendres på rot må vi hente lokal dark/light-verdi fra triggeren\n    // Vi må gjøre dette for å ta hensyn til at tema kan styres lokalt for deler av UIet\n    const { size, theme } = getThemeAndSize(\n        refs.reference.current as HTMLElement,\n    );\n\n    const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n    React.useEffect(() => {\n        floatingPortalRef.current =\n            context.elements.domReference?.closest<HTMLElement>(\n                \"[data-portal]\",\n            ) || document.body;\n    }, [context.elements.domReference]);\n\n    return (\n        <FloatingPortal root={floatingPortalRef.current}>\n            <FloatingFocusManager\n                initialFocus={triggerOn === \"click\" ? 0 : -1}\n                returnFocus={true}\n                context={context}\n                modal={false}\n                closeOnFocusOut={true}\n            >\n                <>\n                    {/* For å kunne bruke tekstinnholdet i tooltip som beskrivende tekst, selv når ikke\n            tooltip er synlig, må vi rendre et skjult element å referere til for å hente innholdet. */}\n                    {triggerOn === \"hover\" && (\n                        <span\n                            ref={refs.setDescription}\n                            hidden\n                            key={`${contentId}-trigger`}\n                        >\n                            {children}\n                        </span>\n                    )}\n                    {isMounted && (\n                        <span className=\"jkl\" key={`${contentId}-wrapper`}>\n                            <span\n                                key={contentId}\n                                ref={ref}\n                                data-placement={placement}\n                                data-testid={\"tooltip-content\"}\n                                data-theme={theme}\n                                data-size={size}\n                                className={clsx(\n                                    \"jkl-tooltip-content\",\n                                    className,\n                                )}\n                                {...getFloatingProps({\n                                    ...props,\n                                    id: contentId,\n                                })}\n                                style={{\n                                    ...floatingStyles,\n                                    ...animationStyles,\n                                }}\n                            >\n                                {children}\n                                <FloatingArrow\n                                    context={context}\n                                    ref={arrowElement}\n                                    width={24}\n                                    height={12}\n                                    fill=\"var(--background-color)\"\n                                />\n                            </span>\n                        </span>\n                    )}\n                </>\n            </FloatingFocusManager>\n        </FloatingPortal>\n    );\n});\n"],"names":["getTranslation","side","value","TooltipContent","forwardRef","className","children","isPopup","props","forwardedRef","triggerOn","arrowElement","getFloatingProps","placement","floatingStyles","refs","context","useTooltipContext","ref","useMergeRefs","setFloating","contentId","useId","prefersReducedMotion","useBrowserPreferences","isMounted","styles","animationStyles","useTransitionStyles","duration","open","close","initial","opacity","translate","size","theme","getThemeAndSize","reference","current","floatingPortalRef","React","useRef","useEffect","elements","domReference","closest","document","body","jsx","FloatingPortal","root","FloatingFocusManager","initialFocus","returnFocus","modal","closeOnFocusOut","jsxs","Fragment","setDescription","hidden","clsx","id","style","FloatingArrow","width","height","fill"],"mappings":"8YAeA,SAASA,EAAeC,EAAYC,EAAQ,GACxC,OAAQD,GACJ,IAAK,MASL,QACI,MAAO,KAAKC,MARhB,IAAK,OACD,MAAO,GAAGA,QACd,IAAK,SACD,MAAO,MAAMA,MACjB,IAAK,QACD,OAAWA,EAAJ,OAKnB,CAEO,MAAMC,EAAiBC,EAAAA,WAG5B,UACIC,UAAAA,EAAWC,SAAAA,EAAU,eAAkBC,KAAYC,GACrDC,GAEA,MACIC,UAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,UAAAA,EACAC,eAAAA,EACAC,KAAAA,EACAC,QAAAA,GACAC,sBACEC,EAAMC,EAAAA,aAAa,CAACV,EAAcM,EAAKK,cACvCC,EAAYC,EAAAA,MAAM,wBAChBC,qBAAAA,GAAyBC,2BACzBC,UAAAA,EAAWC,OAAQC,GAAoBC,EAAAA,oBAC3CZ,EACA,CACIa,SAAU,CACNC,KAAMP,EAAuB,EAAI,IACjCQ,MAAOR,EAAuB,EAAI,KAEtCS,QAAS,EAAG/B,KAAAA,OACRgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC6B,KAAM,EAAG7B,KAAAA,OACLgC,QAAS,EACTC,UAAWlC,EAAeC,EAAM,KAEpC8B,MAAO,EAAG9B,KAAAA,OACNgC,QAAS,EACTC,UAAWlC,EAAeC,GAAM,QAOpCkC,KAAAA,EAAMC,MAAAA,GAAUC,EAAAA,gBACpBtB,EAAKuB,UAAUC,SAGbC,EAAoBC,EAAMC,OAA2B,MAE3D,OAAAD,EAAME,UAAU,KACZH,EAAkBD,QACdvB,EAAQ4B,SAASC,cAAcC,QAC3B,kBACCC,SAASC,MACnB,CAAChC,EAAQ4B,SAASC,eAGjBI,EAAAA,IAACC,EAAAA,eAAA,CAAeC,KAAMX,EAAkBD,QACpCjC,SAAA2C,EAAAA,IAACG,EAAAA,qBAAA,CACGC,aAA4B,UAAd3C,EAAwB,KACtC4C,aAAa,EACbtC,QAAAA,EACAuC,OAAO,EACPC,iBAAiB,EAEjBlD,SAAAmD,EAAAA,KAAAC,WAAA,CAGKpD,SAAA,CAAc,UAAdI,GACGuC,EAAAA,IAAC,OAAA,CACG/B,IAAKH,EAAK4C,eACVC,QAAM,EAGLtD,SAAAA,GAFI,GAAGe,aAKfI,GACGwB,EAAAA,IAAC,OAAA,CAAK5C,UAAU,MACZC,SAAAmD,EAAAA,KAAC,OAAA,CAEGvC,IAAAA,EACA,iBAAgBL,EAChB,cAAa,kBACb,aAAYuB,EACZ,YAAWD,EACX9B,UAAWwD,EAAAA,KACP,sBACAxD,MAEAO,EAAiB,IACdJ,EACHsD,GAAIzC,IAER0C,MAAO,IACAjD,KACAa,GAGNrB,SAAA,CAAAA,EACD2C,EAAAA,IAACe,EAAAA,cAAA,CACGhD,QAAAA,EACAE,IAAKP,EACLsD,MAAO,GACPC,OAAQ,GACRC,KAAK,8BAzBJ9C,IAFc,GAAGA,mBAoCtD"}