{"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<HTMLElement>, 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    <StyledToggleTip className={className} direction={direction} type={type}>\n      <button\n        type=\"button\"\n        className=\"toggletip-button\"\n        aria-label=\"more info\"\n        data-test={`${dataTest}-toggle-tip`}\n        data-analytics-id={dataAnalyticsId ? `${dataAnalyticsId}-tooltip` : undefined}\n        onClick={(e) => {\n          e.stopPropagation();\n\n          if (open) {\n            setOpen(false);\n            setTimeout(() => setOpen(true), 100);\n          } else {\n            setOpen(true);\n          }\n        }}\n      >\n        <FontAwesomeIcon icon={icon} size=\"1x\" className=\"icon\" />\n      </button>\n\n      <span role=\"status\">\n        {open && (\n          <span className=\"toggletip-bubble\" ref={bubbleRef}>\n            {title && <strong className={\"title\"}>{title}</strong>}\n            {children}\n          </span>\n        )}\n      </span>\n    </StyledToggleTip>\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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"}