{"version":3,"sources":["../src/highlight.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLChakraProps,\n  omitThemingProps,\n  SystemStyleObject,\n  ThemingProps,\n  useStyleConfig,\n} from \"@chakra-ui/system\"\nimport { Fragment, useMemo } from \"react\"\nimport { Box } from \"./box\"\n\ntype Chunk = {\n  text: string\n  match: boolean\n}\n\ntype HighlightOptions = {\n  text: string\n  query: string | string[]\n}\n\nconst escapeRegexp = (term: string): string =>\n  term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nfunction buildRegex(query: string[]) {\n  const _query = query\n    .filter((text) => text.length !== 0)\n    .map((text) => escapeRegexp(text.trim()))\n  if (!_query.length) {\n    return null\n  }\n\n  return new RegExp(`(${_query.join(\"|\")})`, \"ig\")\n}\n\nfunction highlightWords({ text, query }: HighlightOptions): Chunk[] {\n  const regex = buildRegex(Array.isArray(query) ? query : [query])\n  if (!regex) {\n    return [{ text, match: false }]\n  }\n  const result = text.split(regex).filter(Boolean)\n  return result.map((str) => ({ text: str, match: regex.test(str) }))\n}\n\nexport type UseHighlightProps = HighlightOptions\n\nexport function useHighlight(props: UseHighlightProps) {\n  const { text, query } = props\n  return useMemo(() => highlightWords({ text, query }), [text, query])\n}\n\nexport type HighlightProps = {\n  query: string | string[]\n  children: string | ((props: Chunk[]) => React.ReactNode)\n  styles?: SystemStyleObject\n}\n\nexport type MarkProps = ThemingProps<\"Mark\"> & HTMLChakraProps<\"mark\">\n\nexport const Mark = forwardRef<MarkProps, \"mark\">(function Mark(props, ref) {\n  const styles = useStyleConfig(\"Mark\", props)\n  const ownProps = omitThemingProps(props)\n  return (\n    <Box\n      ref={ref}\n      {...ownProps}\n      as=\"mark\"\n      __css={{ bg: \"transparent\", whiteSpace: \"nowrap\", ...styles }}\n    />\n  )\n})\n\n/**\n * `Highlight` allows you to highlight substrings of a text.\n *\n * @see Docs https://chakra-ui.com/docs/components/highlight\n */\nexport function Highlight(props: HighlightProps): JSX.Element {\n  const { children, query, styles } = props\n\n  if (typeof children !== \"string\") {\n    throw new Error(\"The children prop of Highlight must be a string\")\n  }\n\n  const chunks = useHighlight({ query, text: children })\n\n  return (\n    <>\n      {chunks.map((chunk, index) => {\n        return chunk.match ? (\n          <Mark key={index} sx={styles}>\n            {chunk.text}\n          </Mark>\n        ) : (\n          <Fragment key={index}>{chunk.text}</Fragment>\n        )\n      })}\n    </>\n  )\n}\n"],"mappings":";;;;;;AAAA;AAAA,EACE;AAAA,EAEA;AAAA,EAGA;AAAA,OACK;AACP,SAAS,UAAU,eAAe;AAuD9B,SAwBA,YAAAA,WAxBA;AA1CJ,IAAM,eAAe,CAAC,SACpB,KAAK,QAAQ,wBAAwB,CAAC,SAAiB,KAAK,IAAI,EAAE;AAEpE,SAAS,WAAW,OAAiB;AACnC,QAAM,SAAS,MACZ,OAAO,CAAC,SAAS,KAAK,WAAW,CAAC,EAClC,IAAI,CAAC,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;AAC1C,MAAI,CAAC,OAAO,QAAQ;AAClB,WAAO;AAAA,EACT;AAEA,SAAO,IAAI,OAAO,IAAI,OAAO,KAAK,GAAG,CAAC,KAAK,IAAI;AACjD;AAEA,SAAS,eAAe,EAAE,MAAM,MAAM,GAA8B;AAClE,QAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;AAC/D,MAAI,CAAC,OAAO;AACV,WAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;AAAA,EAChC;AACA,QAAM,SAAS,KAAK,MAAM,KAAK,EAAE,OAAO,OAAO;AAC/C,SAAO,OAAO,IAAI,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,MAAM,KAAK,GAAG,EAAE,EAAE;AACpE;AAIO,SAAS,aAAa,OAA0B;AACrD,QAAM,EAAE,MAAM,MAAM,IAAI;AACxB,SAAO,QAAQ,MAAM,eAAe,EAAE,MAAM,MAAM,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;AACrE;AAUO,IAAM,OAAO,WAA8B,SAASC,MAAK,OAAO,KAAK;AAC1E,QAAM,SAAS,eAAe,QAAQ,KAAK;AAC3C,QAAM,WAAW,iBAAiB,KAAK;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,IAAG;AAAA,MACH,OAAO,EAAE,IAAI,eAAe,YAAY,UAAU,GAAG,OAAO;AAAA;AAAA,EAC9D;AAEJ,CAAC;AAOM,SAAS,UAAU,OAAoC;AAC5D,QAAM,EAAE,UAAU,OAAO,OAAO,IAAI;AAEpC,MAAI,OAAO,aAAa,UAAU;AAChC,UAAM,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEA,QAAM,SAAS,aAAa,EAAE,OAAO,MAAM,SAAS,CAAC;AAErD,SACE,oBAAAD,WAAA,EACG,iBAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,WAAO,MAAM,QACX,oBAAC,QAAiB,IAAI,QACnB,gBAAM,QADE,KAEX,IAEA,oBAAC,YAAsB,gBAAM,QAAd,KAAmB;AAAA,EAEtC,CAAC,GACH;AAEJ;","names":["Fragment","Mark"]}