@yamada-ui/react/dist/cjs/components/highlight/highlight.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"highlight.cjs","names":["Highlight: FC<HighlightProps>","useHighlight","Mark","text","Fragment","Text"],"sources":["../../../../src/components/highlight/highlight.tsx"],"sourcesContent":["import type { FC } from \"react\"\nimport type { MarkProps } from \"../mark\"\nimport type { TextProps } from \"../text\"\nimport { Fragment } from \"react\"\nimport { Mark } from \"../mark\"\nimport { Text } from \"../text\"\nimport { useHighlight } from \"./use-highlight\"\n\nexport interface HighlightProps extends Omit<TextProps, \"children\"> {\n  /**\n   * The text used for searching.\n   */\n  children: string\n  /**\n   * Can be a single string or an array of strings. These are the terms that are highlighted in the text.\n   */\n  query: string | string[]\n  /**\n   * If `true`, `Fragment` is used for rendering.\n   *\n   * @default false\n   */\n  fragment?: boolean\n  /**\n   * Properties passed to the Mark component which is used to highlight the matched terms.\n   */\n  markProps?: MarkProps\n}\n\n/**\n * `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.\n *\n * @see https://yamada-ui.com/docs/components/highlight\n */\nexport const Highlight: FC<HighlightProps> = ({\n  children: text,\n  fragment = false,\n  query,\n  markProps,\n  ...rest\n}) => {\n  const chunks = useHighlight({ query, text })\n  const { colorScheme } = rest\n\n  if (fragment) {\n    return (\n      <>\n        {chunks.map(({ match, text }, index) =>\n          match ? (\n            <Mark key={index} colorScheme={colorScheme} {...markProps}>\n              {text}\n            </Mark>\n          ) : (\n            <Fragment key={index}>{text}</Fragment>\n          ),\n        )}\n      </>\n    )\n  } else {\n    return (\n      <Text {...rest}>\n        {chunks.map(({ match, text }, index) =>\n          match ? (\n            <Mark key={index} colorScheme={colorScheme} {...markProps}>\n              {text}\n            </Mark>\n          ) : (\n            <Fragment key={index}>{text}</Fragment>\n          ),\n        )}\n      </Text>\n    )\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,MAAaA,aAAiC,EAC5C,UAAU,MACV,WAAW,OACX,OACA,UACA,GAAG,WACC;CACJ,MAAM,SAASC,mCAAa;EAAE;EAAO;EAAM,CAAC;CAC5C,MAAM,EAAE,gBAAgB;AAExB,KAAI,SACF,QACE,mFACG,OAAO,KAAK,EAAE,OAAO,gBAAQ,UAC5B,QACE,2CAACC;EAA8B;EAAa,GAAI;YAC7CC;IADQ,MAEJ,GAEP,2CAACC,4BAAsBD,UAAR,MAAwB,CAE1C,GACA;KAGL,QACE,2CAACE;EAAK,GAAI;YACP,OAAO,KAAK,EAAE,OAAO,gBAAQ,UAC5B,QACE,2CAACH;GAA8B;GAAa,GAAI;aAC7CC;KADQ,MAEJ,GAEP,2CAACC,4BAAsBD,UAAR,MAAwB,CAE1C;GACI"}