{"version":3,"file":"index-CHbAxToy.js","sources":["../../app/javascript/components/shared/use_outside_alerter.ts","../../app/javascript/components/components/layout/toggle_tip/index.tsx"],"sourcesContent":["import { useEffect, RefObject, MouseEvent } from \"react\";\n\n/**\n * Hook that alerts clicks outside of the passed ref\n */\nexport default function useOutsideAlerter(ref: RefObject, callback: () => void) {\n /**\n * Alert if clicked on outside of element\n */\n function handleClickOutside(event: MouseEvent) {\n // eslint-disable-next-line\n // @ts-ignore Something's not right with the typescript mousedown event object, butthis is correct\n if (ref.current && !ref.current.contains(event.target)) {\n callback();\n }\n }\n\n useEffect(() => {\n // Bind the event listener\n // eslint-disable-next-line\n // @ts-ignore Something's not right with the typescript mousedown event object, but this is correct\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n // Unbind the event listener on clean up\n // eslint-disable-next-line\n // @ts-ignore Something's not right with the typescript mousedown event object, but this is correct\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n });\n}\n","import { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport React, { ReactNode, useEffect, useRef, useState } from \"react\";\nimport styled from \"styled-components\";\nimport useOutsideAlerter from \"../../../shared/use_outside_alerter\";\n\nexport type ToggleTipProps = {\n children: ReactNode;\n className?: string;\n direction?: ToggleTipDirection;\n title?: string;\n icon?: IconProp;\n type?: ToggleTipType;\n dataTest?: string;\n dataAnalyticsId?: string;\n};\n\nexport enum ToggleTipDirection {\n left,\n right,\n topRight,\n}\n\nexport enum ToggleTipType {\n info,\n danger,\n}\n\nconst StyledToggleTip = styled.span<{ direction: ToggleTipDirection; type: ToggleTipType }>`\n position: relative;\n display: inline-block;\n\n .toggletip-button {\n border-radius: 50%;\n border: 0;\n padding: 0;\n background: transparent;\n color: ${({ theme }) => theme.deprecatedColors.primary.extraDark};\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n color: ${({ theme }) => theme.deprecatedColors.primary.normal};\n }\n }\n\n .toggletip-bubble {\n display: inline-block;\n position: absolute;\n z-index: 1;\n left: ${({ direction }) =>\n direction === ToggleTipDirection.left ? undefined : \"calc(100% + 6px)\"};\n right: ${({ direction }) =>\n direction === ToggleTipDirection.left ? \"calc(100% + 6px)\" : undefined};\n top: ${({ direction }) =>\n direction === ToggleTipDirection.topRight ? \"calc(100% - 70px)\" : \"-6\"};\n width: max-content;\n max-width: 15em;\n padding: 0.5rem;\n border-radius: ${({ theme }) => theme.deprecatedBorder.radius.normal};\n box-shadow: ${({ theme }) => theme.deprecatedElevation.three};\n background-color: ${({ theme, type }) => {\n return type === ToggleTipType.danger\n ? theme.deprecatedColors.error\n : theme.deprecatedColors.gray.five;\n }};\n color: ${({ theme }) => theme.deprecatedColors.white};\n font-family: ${({ theme }) => theme.font.family.body};\n font-size: ${({ theme }) => theme.font.size.body.two};\n }\n\n .title {\n font-weight: bold;\n display: block;\n margin-bottom: ${({ theme }) => theme.deprecatedSpacing.component.four};\n }\n\n .icon {\n color: ${({ theme, type }) => {\n return type === ToggleTipType.danger ? theme.deprecatedColors.error : \"inherit\";\n }};\n }\n`;\n\nexport default function ToggleTip({\n children,\n className,\n direction = ToggleTipDirection.right,\n title,\n icon = \"info-circle\",\n type = ToggleTipType.info,\n dataTest = \"\",\n dataAnalyticsId,\n}: ToggleTipProps) {\n const [open, setOpen] = useState(false);\n const bubbleRef = useRef(null);\n useOutsideAlerter(bubbleRef, () => {\n setOpen(false);\n });\n useEffect(() => {\n function onKeyDown(e: { key: string }) {\n if (e.key === \"Escape\") setOpen(false);\n }\n document.addEventListener(\"keydown\", onKeyDown);\n\n return () => {\n document.removeEventListener(\"keydown\", onKeyDown);\n };\n });\n\n return (\n \n {\n e.stopPropagation();\n\n if (open) {\n setOpen(false);\n setTimeout(() => setOpen(true), 100);\n } else {\n setOpen(true);\n }\n }}\n >\n \n \n\n \n {open && (\n \n {title && {title}}\n {children}\n \n )}\n \n \n );\n}\n"],"names":["useOutsideAlerter","ref","callback","handleClickOutside","event","useEffect","ToggleTipDirection","ToggleTipDirection2","ToggleTipType","ToggleTipType2","StyledToggleTip","styled","theme","direction","type","ToggleTip","children","className","title","icon","dataTest","dataAnalyticsId","open","setOpen","useState","bubbleRef","useRef","onKeyDown","e","jsxs","jsx","FontAwesomeIcon"],"mappings":"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"}