{"version":3,"file":"ErrorText.mjs","sources":["../../../../../../../../../web/src/ui/components/molecules/ErrorText.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactNode, useMemo, useState } from 'react';\n\nimport { useMountEffect } from '../../hooks/useMountEffect';\nimport Typography from '../atoms/Typography';\n\nconst DASHBOARD_REGEX = /https:\\/\\/stytch\\.com\\/[#a-zA-Z0-9/-]+/g;\n\nconst mapURLsToLinks = (str: string) => {\n  const nonLinkChunks = str.split(DASHBOARD_REGEX);\n  const linkChunks = Array.from(str.matchAll(DASHBOARD_REGEX)).map((el) => el[0]);\n\n  const chunkResults: ReactNode[] = [];\n\n  while (nonLinkChunks.length || linkChunks.length) {\n    if (nonLinkChunks.length) {\n      chunkResults.push(nonLinkChunks.shift());\n    }\n    if (linkChunks.length) {\n      const chunk = linkChunks.shift();\n\n      chunkResults.push(\n        <a key={chunk + '__' + String(linkChunks.length)} href={chunk} target=\"_blank\" rel=\"noreferrer\">\n          {chunk}\n        </a>,\n      );\n    }\n  }\n\n  return chunkResults;\n};\n\ntype ErrorTextProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & { children: string };\n\nconst ErrorText = ({ children, ...props }: ErrorTextProps) => {\n  const tokens = useMemo(() => mapURLsToLinks(children), [children]);\n\n  // HACK: Screen readers only read elements in aria-live regions if they are new or changed. We first render the\n  // aria-live div, then render the inner children second so the error message is \"new\" and therefore read out\n  const [render, setRender] = useState(false);\n  useMountEffect(() => setRender(true));\n\n  return (\n    <div aria-live=\"polite\">\n      {render && (\n        <Typography {...props} variant=\"helper\" color=\"destructive\" key={children}>\n          {tokens}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nexport default ErrorText;\n"],"names":["DASHBOARD_REGEX","mapURLsToLinks","str","nonLinkChunks","split","linkChunks","Array","from","matchAll","map","el","chunkResults","length","push","shift","chunk","React","a","key","String","href","target","rel","ErrorText","children","props","tokens","useMemo","render","setRender","useState","useMountEffect","div","aria-live","Typography","variant","color"],"mappings":";;;;;AAKA,MAAMA,eAAAA,GAAkB,yCAAA;AAExB,MAAMC,iBAAiB,CAACC,GAAAA,GAAAA;IACtB,MAAMC,aAAAA,GAAgBD,GAAAA,CAAIE,KAAK,CAACJ,eAAAA,CAAAA;AAChC,IAAA,MAAMK,UAAAA,GAAaC,KAAAA,CAAMC,IAAI,CAACL,IAAIM,QAAQ,CAACR,eAAAA,CAAAA,CAAAA,CAAkBS,GAAG,CAAC,CAACC,EAAAA,GAAOA,EAAE,CAAC,CAAA,CAAE,CAAA;AAE9E,IAAA,MAAMC,eAA4B,EAAE;AAEpC,IAAA,MAAOR,aAAAA,CAAcS,MAAM,IAAIP,UAAAA,CAAWO,MAAM,CAAE;QAChD,IAAIT,aAAAA,CAAcS,MAAM,EAAE;YACxBD,YAAAA,CAAaE,IAAI,CAACV,aAAAA,CAAcW,KAAK,EAAA,CAAA;AACvC,QAAA;QACA,IAAIT,UAAAA,CAAWO,MAAM,EAAE;YACrB,MAAMG,KAAAA,GAAQV,WAAWS,KAAK,EAAA;YAE9BH,YAAAA,CAAaE,IAAI,eACfG,EAAA,CAAA,aAAA,CAACC,GAAAA,EAAAA;AAAEC,gBAAAA,GAAAA,EAAKH,KAAAA,GAAQ,IAAA,GAAOI,MAAAA,CAAOd,UAAAA,CAAWO,MAAM,CAAA;gBAAGQ,IAAAA,EAAML,KAAAA;gBAAOM,MAAAA,EAAO,QAAA;gBAASC,GAAAA,EAAI;AAChFP,aAAAA,EAAAA,KAAAA,CAAAA,CAAAA;AAGP,QAAA;AACF,IAAA;IAEA,OAAOJ,YAAAA;AACT,CAAA;AAIA,MAAMY,YAAY,CAAC,EAAEC,QAAQ,EAAE,GAAGC,KAAAA,EAAuB,GAAA;AACvD,IAAA,MAAMC,MAAAA,GAASC,CAAAA,CAAQ,IAAM1B,cAAAA,CAAeuB,QAAAA,CAAAA,EAAW;AAACA,QAAAA;AAAS,KAAA,CAAA;;;AAIjE,IAAA,MAAM,CAACI,MAAAA,EAAQC,SAAAA,CAAU,GAAGC,CAAAA,CAAS,KAAA,CAAA;AACrCC,IAAAA,cAAAA,CAAe,IAAMF,SAAAA,CAAU,IAAA,CAAA,CAAA;AAE/B,IAAA,qBACEb,EAAA,CAAA,aAAA,CAACgB,KAAAA,EAAAA;QAAIC,WAAAA,EAAU;AACZL,KAAAA,EAAAA,MAAAA,kBACCZ,EAAA,CAAA,aAAA,CAACkB,UAAAA,EAAAA;AAAY,QAAA,GAAGT,KAAK;QAAEU,OAAAA,EAAQ,QAAA;QAASC,KAAAA,EAAM,aAAA;QAAclB,GAAAA,EAAKM;AAC9DE,KAAAA,EAAAA,MAAAA,CAAAA,CAAAA;AAKX;;;;"}