{"version":3,"file":"2119.chunk.6b155a3eeb3e1c0622cf.js","mappings":"6JAiBA,MAAMA,EAAaC,GACXA,GAAWA,EAAQC,SAAWD,EAAQC,QAAQC,aACvC,GAAPC,OAAUH,EAAQC,QAAQC,aAAY,MAGnC,M,m5BCNJ,MAAME,EAAoCC,IAC7C,MAAM,SAAEC,EAAQ,OAAEC,EAAM,OAAEC,GAAS,EAAK,UAAEC,EAAS,qBAAEC,GAAkCL,EAATM,E,6WAAIC,CAAKP,EAAKQ,GAEtFb,EAAUc,EAAAA,OAAa,OAEvB,aAAEC,EAAY,MAAEC,GDIEX,KACxB,MAAM,OAAEG,EAAM,QAAER,GAAYK,GAErBY,EAAQC,IAAaC,EAAAA,EAAAA,UAASX,EAAS,OAAS,MAChDY,EAAUC,IAAeF,EAAAA,EAAAA,UAAmBX,EAAS,UAAY,WACjEc,EAAYC,IAAiBJ,EAAAA,EAAAA,UAAqBX,OAASgB,EAAY,UACxEC,GAAYC,EAAAA,EAAAA,KAqClB,OAzBAC,EAAAA,EAAAA,YAAU,KACFnB,GACAe,OAAcC,GAETC,EAIDP,EAAUnB,EAAUC,KAHpBkB,EAAU,QACVG,EAAY,aAITI,IACPP,EAAUnB,EAAUC,IAKpB4B,YAAW,KACPC,OAAOC,uBAAsB,KACzBT,EAAY,UACZH,EAAU,IAAI,GAChB,IAEV,GACD,CAACV,IAEG,CACHO,aApCiBA,KACbP,GACAU,EAAU,QACVG,EAAY,WACZE,OAAcC,IAEdD,EAAc,SAClB,EA8BAP,MAAO,CACHI,WACAE,aACAL,UAEP,ECtD+Bc,CAAY,CACxCvB,SACAR,YAWEgC,E,+VAAMC,CAAA,CACRC,WAAYxB,EAAuB,iBAAmB,UACnDM,GAGP,OACIF,EAAAA,cAAA,MAAAqB,EAAA,GAASxB,EAAI,CAAEyB,IAAKpC,EAASgB,MAAOgB,EAAQvB,UAAWA,EAAW4B,gBAd7CC,IACjBA,EAAMC,SAAWvC,EAAQC,SAAkC,WAAvBqC,EAAME,eAC1CzB,IAEAR,SAAAA,IACJ,IAUKD,EACC,C","sources":["webpack://Kristiania.Web/./Features/Partials/Collapse/useCollapse.ts","webpack://Kristiania.Web/./Features/Partials/Collapse/Collapse.tsx"],"sourcesContent":["import type { RefObject } from 'react';\nimport { useEffect, useState } from 'react';\nimport { useIsMounted } from '~/Utils/Hooks/useIsMounted';\n\nexport interface UseCollapseProps {\n    isOpen: boolean;\n    content: RefObject<HTMLDivElement>;\n}\n\n// In case of nested collapse components, we need to inherit the visibility from the parent so that\n// focusable children inside expanded collapses nested inside collapsed collapses are not focusable.\n// Unfortunately, jest is not able to simulate this behavior thus we are not able to test it.\ntype InheritVisibility = undefined;\n\ntype Visibility = 'hidden' | InheritVisibility;\ntype Overflow = 'hidden' | 'visible';\n\nconst getHeight = (content: RefObject<HTMLDivElement>) => {\n    if (content && content.current && content.current.scrollHeight) {\n        return `${content.current.scrollHeight}px`;\n    }\n\n    return '0px';\n};\n\nexport const useCollapse = (props: UseCollapseProps) => {\n    const { isOpen, content } = props;\n\n    const [height, setHeight] = useState(isOpen ? 'auto' : '0');\n    const [overflow, setOverflow] = useState<Overflow>(isOpen ? 'visible' : 'hidden');\n    const [visibility, setVisibility] = useState<Visibility>(isOpen ? undefined : 'hidden');\n    const isMounted = useIsMounted();\n\n    const toggleStyles = () => {\n        if (isOpen) {\n            setHeight('auto');\n            setOverflow('visible');\n            setVisibility(undefined);\n        } else {\n            setVisibility('hidden');\n        }\n    };\n\n    useEffect(() => {\n        if (isOpen) {\n            setVisibility(undefined);\n\n            if (!isMounted) {\n                setHeight('auto');\n                setOverflow('visible');\n            } else {\n                setHeight(getHeight(content));\n            }\n        } else if (isMounted) {\n            setHeight(getHeight(content));\n\n            // The magic:\n            // Setting collapsed style after setting height to enable smooth transition based on height.\n            // It must be wrapped with setTimeout to ensure that the state update is not batched with the height update.\n            setTimeout(() => {\n                window.requestAnimationFrame(() => {\n                    setOverflow('hidden');\n                    setHeight('0');\n                });\n            });\n        }\n    }, [isOpen]);\n\n    return {\n        toggleStyles,\n        style: {\n            overflow,\n            visibility,\n            height,\n        },\n    };\n};\n","/*\n * Based on: https://github.com/SparebankenVest/react-css-collapse\n */\n\nimport * as React from 'react';\nimport type { AriaAttributes } from 'react';\nimport { useCollapse } from './useCollapse';\n\nexport interface CollapseProps extends AriaAttributes {\n    children: React.ReactNode;\n    isOpen?: boolean;\n    onRest?: () => void;\n    className?: string;\n    withMarginTransition?: boolean;\n}\n\nexport const Collapse: React.FC<CollapseProps> = props => {\n    const { children, onRest, isOpen = false, className, withMarginTransition, ...rest } = props;\n\n    const content = React.useRef(null);\n\n    const { toggleStyles, style } = useCollapse({\n        isOpen,\n        content,\n    });\n\n    const onTransitionEnd = (event: React.TransitionEvent<HTMLDivElement>) => {\n        if (event.target === content.current && event.propertyName === 'height') {\n            toggleStyles();\n\n            onRest?.();\n        }\n    };\n\n    const styles = {\n        willChange: withMarginTransition ? 'height, margin' : 'height',\n        ...style,\n    };\n\n    return (\n        <div {...rest} ref={content} style={styles} className={className} onTransitionEnd={onTransitionEnd}>\n            {children}\n        </div>\n    );\n};\n"],"names":["getHeight","content","current","scrollHeight","concat","Collapse","props","children","onRest","isOpen","className","withMarginTransition","rest","_objectWithoutProperties","_excluded","React","toggleStyles","style","height","setHeight","useState","overflow","setOverflow","visibility","setVisibility","undefined","isMounted","useIsMounted","useEffect","setTimeout","window","requestAnimationFrame","useCollapse","styles","_objectSpread","willChange","_extends","ref","onTransitionEnd","event","target","propertyName"],"sourceRoot":""}