@yamada-ui/highlight 1.0.39-next-20241005220055 → 1.0.39-next-20241008193728

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,10 +2,10 @@
2
2
 
3
3
  // src/highlight.tsx
4
4
  import {
5
- ui,
6
5
  forwardRef,
7
- useComponentStyle,
8
- omitThemeProps
6
+ omitThemeProps,
7
+ ui,
8
+ useComponentStyle
9
9
  } from "@yamada-ui/core";
10
10
  import { Text } from "@yamada-ui/typography";
11
11
  import { cx, isArray } from "@yamada-ui/utils";
@@ -16,18 +16,18 @@ var buildRegex = (query) => {
16
16
  query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()));
17
17
  if (query.length) return new RegExp(`(${query.join("|")})`, "ig");
18
18
  };
19
- var highlightWords = ({ text, query }) => {
19
+ var highlightWords = ({ query, text }) => {
20
20
  const regex = buildRegex(isArray(query) ? query : [query]);
21
- if (!regex) return [{ text, match: false }];
22
- return text.split(regex).filter(Boolean).map((text2) => ({ text: text2, match: regex.test(text2) }));
21
+ if (!regex) return [{ match: false, text }];
22
+ return text.split(regex).filter(Boolean).map((text2) => ({ match: regex.test(text2), text: text2 }));
23
23
  };
24
- var useHighlight = ({ text, query }) => useMemo(() => highlightWords({ text, query }), [text, query]);
24
+ var useHighlight = ({ query, text }) => useMemo(() => highlightWords({ query, text }), [text, query]);
25
25
  var Highlight = ({
26
+ children: text,
26
27
  isFragment = false,
28
+ lineHeight = "tall",
27
29
  query,
28
- children: text,
29
30
  markProps,
30
- lineHeight = "tall",
31
31
  ...rest
32
32
  }) => {
33
33
  if (typeof text !== "string")
@@ -35,7 +35,7 @@ var Highlight = ({
35
35
  const chunks = useHighlight({ query, text });
36
36
  const Component = isFragment ? Fragment : Text;
37
37
  return /* @__PURE__ */ jsx(Component, { ...!isFragment ? { lineHeight } : {}, ...rest, children: chunks.map(
38
- ({ text: text2, match }, i) => match ? /* @__PURE__ */ jsx(Mark, { ...markProps, children: text2 }, i) : /* @__PURE__ */ jsx(Fragment, { children: text2 }, i)
38
+ ({ match, text: text2 }, i) => match ? /* @__PURE__ */ jsx(Mark, { ...markProps, children: text2 }, i) : /* @__PURE__ */ jsx(Fragment, { children: text2 }, i)
39
39
  ) });
40
40
  };
41
41
  Highlight.displayName = "Highlight";
@@ -66,4 +66,4 @@ export {
66
66
  Highlight,
67
67
  Mark
68
68
  };
69
- //# sourceMappingURL=chunk-4S6MZZ6P.mjs.map
69
+ //# sourceMappingURL=chunk-RHTZJRTC.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/highlight.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { TextProps } from \"@yamada-ui/typography\"\nimport type { ReactNode } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Text } from \"@yamada-ui/typography\"\nimport { cx, isArray } from \"@yamada-ui/utils\"\nimport { Fragment, useMemo } from \"react\"\n\ninterface Options {\n query: string | string[]\n text: string\n}\n\ninterface Chunk {\n match: boolean\n text: string\n}\n\nconst escapeRegexp = (term: string): string =>\n term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nconst buildRegex = (query: string[]): RegExp | undefined => {\n query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()))\n\n if (query.length) return new RegExp(`(${query.join(\"|\")})`, \"ig\")\n}\n\nconst highlightWords = ({ query, text }: Options): Chunk[] => {\n const regex = buildRegex(isArray(query) ? query : [query])\n\n if (!regex) return [{ match: false, text }]\n\n return text\n .split(regex)\n .filter(Boolean)\n .map((text) => ({ match: regex.test(text), text }))\n}\n\nexport const useHighlight = ({ query, text }: Options): Chunk[] =>\n useMemo(() => highlightWords({ query, text }), [text, query])\n\nexport interface HighlightProps extends Omit<TextProps, \"children\"> {\n /**\n * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.\n */\n children: ((props: Chunk[]) => ReactNode) | 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 isFragment?: 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 Docs https://yamada-ui.com/components/typography/highlight\n */\nexport const Highlight: FC<HighlightProps> = ({\n children: text,\n isFragment = false,\n lineHeight = \"tall\",\n query,\n markProps,\n ...rest\n}) => {\n if (typeof text !== \"string\")\n throw new Error(\"The children prop of Highlight must be a string\")\n\n const chunks = useHighlight({ query, text })\n\n const Component: FC = isFragment ? Fragment : Text\n\n return (\n <Component {...(!isFragment ? { lineHeight } : {})} {...rest}>\n {chunks.map(({ match, text }, i) =>\n match ? (\n <Mark key={i} {...markProps}>\n {text}\n </Mark>\n ) : (\n <Fragment key={i}>{text}</Fragment>\n ),\n )}\n </Component>\n )\n}\n\nHighlight.displayName = \"Highlight\"\nHighlight.__ui__ = \"Highlight\"\n\nexport interface MarkProps extends HTMLUIProps<\"mark\">, ThemeProps<\"Mark\"> {}\n\nexport const Mark = forwardRef<MarkProps, \"mark\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Mark\", props)\n const { className, ...rest } = omitThemeProps(mergedProps)\n\n const css: CSSUIObject = {\n bg: \"transparent\",\n whiteSpace: \"nowrap\",\n ...styles,\n }\n\n return (\n <ui.mark\n ref={ref}\n className={cx(\"ui-mark\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n\nMark.displayName = \"Mark\"\nMark.__ui__ = \"Mark\"\n"],"mappings":";;;AAGA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,IAAI,eAAe;AAC5B,SAAS,UAAU,eAAe;AAgFxB;AApEV,IAAM,eAAe,CAAC,SACpB,KAAK,QAAQ,wBAAwB,CAAC,SAAiB,KAAK,IAAI,EAAE;AAEpE,IAAM,aAAa,CAAC,UAAwC;AAC1D,UAAQ,MAAM,OAAO,OAAO,EAAE,IAAI,CAAC,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;AAErE,MAAI,MAAM,OAAQ,QAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC,KAAK,IAAI;AAClE;AAEA,IAAM,iBAAiB,CAAC,EAAE,OAAO,KAAK,MAAwB;AAC5D,QAAM,QAAQ,WAAW,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;AAEzD,MAAI,CAAC,MAAO,QAAO,CAAC,EAAE,OAAO,OAAO,KAAK,CAAC;AAE1C,SAAO,KACJ,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAACA,WAAU,EAAE,OAAO,MAAM,KAAKA,KAAI,GAAG,MAAAA,MAAK,EAAE;AACtD;AAEO,IAAM,eAAe,CAAC,EAAE,OAAO,KAAK,MACzC,QAAQ,MAAM,eAAe,EAAE,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;AA4BvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,UAAU;AAAA,EACV,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,OAAO,SAAS;AAClB,UAAM,IAAI,MAAM,iDAAiD;AAEnE,QAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAE3C,QAAM,YAAgB,aAAa,WAAW;AAE9C,SACE,oBAAC,aAAW,GAAI,CAAC,aAAa,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACrD,iBAAO;AAAA,IAAI,CAAC,EAAE,OAAO,MAAAA,MAAK,GAAG,MAC5B,QACE,oBAAC,QAAc,GAAG,WACf,UAAAA,SADQ,CAEX,IAEA,oBAAC,YAAkB,UAAAA,SAAJ,CAAS;AAAA,EAE5B,GACF;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAIZ,IAAM,OAAO,WAA8B,CAAC,OAAO,QAAQ;AAChE,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,QAAQ,KAAK;AAC7D,QAAM,EAAE,WAAW,GAAG,KAAK,IAAI,eAAe,WAAW;AAEzD,QAAM,MAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;","names":["text"]}
@@ -4,34 +4,39 @@ import { TextProps } from '@yamada-ui/typography';
4
4
  import { ReactNode } from 'react';
5
5
 
6
6
  interface Options {
7
- text: string;
8
7
  query: string | string[];
8
+ text: string;
9
9
  }
10
10
  interface Chunk {
11
- text: string;
12
11
  match: boolean;
12
+ text: string;
13
13
  }
14
- declare const useHighlight: ({ text, query }: Options) => Chunk[];
14
+ declare const useHighlight: ({ query, text }: Options) => Chunk[];
15
15
  interface HighlightProps extends Omit<TextProps, "children"> {
16
16
  /**
17
- * If `true`, `Fragment` is used for rendering.
18
- *
19
- * @default false
17
+ * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.
20
18
  */
21
- isFragment?: boolean;
19
+ children: ((props: Chunk[]) => ReactNode) | string;
22
20
  /**
23
21
  * Can be a single string or an array of strings. These are the terms that are highlighted in the text.
24
22
  */
25
23
  query: string | string[];
26
24
  /**
27
- * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.
25
+ * If `true`, `Fragment` is used for rendering.
26
+ *
27
+ * @default false
28
28
  */
29
- children: string | ((props: Chunk[]) => ReactNode);
29
+ isFragment?: boolean;
30
30
  /**
31
31
  * Properties passed to the Mark component which is used to highlight the matched terms.
32
32
  */
33
33
  markProps?: MarkProps;
34
34
  }
35
+ /**
36
+ * `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.
37
+ *
38
+ * @see Docs https://yamada-ui.com/components/typography/highlight
39
+ */
35
40
  declare const Highlight: FC<HighlightProps>;
36
41
  interface MarkProps extends HTMLUIProps<"mark">, ThemeProps<"Mark"> {
37
42
  }
@@ -4,34 +4,39 @@ import { TextProps } from '@yamada-ui/typography';
4
4
  import { ReactNode } from 'react';
5
5
 
6
6
  interface Options {
7
- text: string;
8
7
  query: string | string[];
8
+ text: string;
9
9
  }
10
10
  interface Chunk {
11
- text: string;
12
11
  match: boolean;
12
+ text: string;
13
13
  }
14
- declare const useHighlight: ({ text, query }: Options) => Chunk[];
14
+ declare const useHighlight: ({ query, text }: Options) => Chunk[];
15
15
  interface HighlightProps extends Omit<TextProps, "children"> {
16
16
  /**
17
- * If `true`, `Fragment` is used for rendering.
18
- *
19
- * @default false
17
+ * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.
20
18
  */
21
- isFragment?: boolean;
19
+ children: ((props: Chunk[]) => ReactNode) | string;
22
20
  /**
23
21
  * Can be a single string or an array of strings. These are the terms that are highlighted in the text.
24
22
  */
25
23
  query: string | string[];
26
24
  /**
27
- * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.
25
+ * If `true`, `Fragment` is used for rendering.
26
+ *
27
+ * @default false
28
28
  */
29
- children: string | ((props: Chunk[]) => ReactNode);
29
+ isFragment?: boolean;
30
30
  /**
31
31
  * Properties passed to the Mark component which is used to highlight the matched terms.
32
32
  */
33
33
  markProps?: MarkProps;
34
34
  }
35
+ /**
36
+ * `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.
37
+ *
38
+ * @see Docs https://yamada-ui.com/components/typography/highlight
39
+ */
35
40
  declare const Highlight: FC<HighlightProps>;
36
41
  interface MarkProps extends HTMLUIProps<"mark">, ThemeProps<"Mark"> {
37
42
  }
package/dist/highlight.js CHANGED
@@ -36,18 +36,18 @@ var buildRegex = (query) => {
36
36
  query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()));
37
37
  if (query.length) return new RegExp(`(${query.join("|")})`, "ig");
38
38
  };
39
- var highlightWords = ({ text, query }) => {
39
+ var highlightWords = ({ query, text }) => {
40
40
  const regex = buildRegex((0, import_utils.isArray)(query) ? query : [query]);
41
- if (!regex) return [{ text, match: false }];
42
- return text.split(regex).filter(Boolean).map((text2) => ({ text: text2, match: regex.test(text2) }));
41
+ if (!regex) return [{ match: false, text }];
42
+ return text.split(regex).filter(Boolean).map((text2) => ({ match: regex.test(text2), text: text2 }));
43
43
  };
44
- var useHighlight = ({ text, query }) => (0, import_react.useMemo)(() => highlightWords({ text, query }), [text, query]);
44
+ var useHighlight = ({ query, text }) => (0, import_react.useMemo)(() => highlightWords({ query, text }), [text, query]);
45
45
  var Highlight = ({
46
+ children: text,
46
47
  isFragment = false,
48
+ lineHeight = "tall",
47
49
  query,
48
- children: text,
49
50
  markProps,
50
- lineHeight = "tall",
51
51
  ...rest
52
52
  }) => {
53
53
  if (typeof text !== "string")
@@ -55,7 +55,7 @@ var Highlight = ({
55
55
  const chunks = useHighlight({ query, text });
56
56
  const Component = isFragment ? import_react.Fragment : import_typography.Text;
57
57
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...!isFragment ? { lineHeight } : {}, ...rest, children: chunks.map(
58
- ({ text: text2, match }, i) => match ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Mark, { ...markProps, children: text2 }, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: text2 }, i)
58
+ ({ match, text: text2 }, i) => match ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Mark, { ...markProps, children: text2 }, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: text2 }, i)
59
59
  ) });
60
60
  };
61
61
  Highlight.displayName = "Highlight";
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/highlight.tsx"],"sourcesContent":["/**\n * `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.\n *\n * @see Docs https://yamada-ui.com/components/typography/highlight\n */\nimport type { FC, HTMLUIProps, ThemeProps, CSSUIObject } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { TextProps } from \"@yamada-ui/typography\"\nimport { Text } from \"@yamada-ui/typography\"\nimport { cx, isArray } from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { Fragment, useMemo } from \"react\"\n\ninterface Options {\n text: string\n query: string | string[]\n}\n\ninterface Chunk {\n text: string\n match: boolean\n}\n\nconst escapeRegexp = (term: string): string =>\n term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nconst buildRegex = (query: string[]): RegExp | undefined => {\n query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()))\n\n if (query.length) return new RegExp(`(${query.join(\"|\")})`, \"ig\")\n}\n\nconst highlightWords = ({ text, query }: Options): Chunk[] => {\n const regex = buildRegex(isArray(query) ? query : [query])\n\n if (!regex) return [{ text, match: false }]\n\n return text\n .split(regex)\n .filter(Boolean)\n .map((text) => ({ text, match: regex.test(text) }))\n}\n\nexport const useHighlight = ({ text, query }: Options): Chunk[] =>\n useMemo(() => highlightWords({ text, query }), [text, query])\n\nexport interface HighlightProps extends Omit<TextProps, \"children\"> {\n /**\n * If `true`, `Fragment` is used for rendering.\n *\n * @default false\n */\n isFragment?: boolean\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 * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.\n */\n children: string | ((props: Chunk[]) => ReactNode)\n /**\n * Properties passed to the Mark component which is used to highlight the matched terms.\n */\n markProps?: MarkProps\n}\n\nexport const Highlight: FC<HighlightProps> = ({\n isFragment = false,\n query,\n children: text,\n markProps,\n lineHeight = \"tall\",\n ...rest\n}) => {\n if (typeof text !== \"string\")\n throw new Error(\"The children prop of Highlight must be a string\")\n\n const chunks = useHighlight({ query, text })\n\n const Component: FC = isFragment ? Fragment : Text\n\n return (\n <Component {...(!isFragment ? { lineHeight } : {})} {...rest}>\n {chunks.map(({ text, match }, i) =>\n match ? (\n <Mark key={i} {...markProps}>\n {text}\n </Mark>\n ) : (\n <Fragment key={i}>{text}</Fragment>\n ),\n )}\n </Component>\n )\n}\n\nHighlight.displayName = \"Highlight\"\nHighlight.__ui__ = \"Highlight\"\n\nexport interface MarkProps extends HTMLUIProps<\"mark\">, ThemeProps<\"Mark\"> {}\n\nexport const Mark = forwardRef<MarkProps, \"mark\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Mark\", props)\n const { className, ...rest } = omitThemeProps(mergedProps)\n\n const css: CSSUIObject = {\n bg: \"transparent\",\n whiteSpace: \"nowrap\",\n ...styles,\n }\n\n return (\n <ui.mark\n ref={ref}\n className={cx(\"ui-mark\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n\nMark.displayName = \"Mark\"\nMark.__ui__ = \"Mark\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,kBAKO;AAEP,wBAAqB;AACrB,mBAA4B;AAE5B,mBAAkC;AA2ExB;AA/DV,IAAM,eAAe,CAAC,SACpB,KAAK,QAAQ,wBAAwB,CAAC,SAAiB,KAAK,IAAI,EAAE;AAEpE,IAAM,aAAa,CAAC,UAAwC;AAC1D,UAAQ,MAAM,OAAO,OAAO,EAAE,IAAI,CAAC,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;AAErE,MAAI,MAAM,OAAQ,QAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC,KAAK,IAAI;AAClE;AAEA,IAAM,iBAAiB,CAAC,EAAE,MAAM,MAAM,MAAwB;AAC5D,QAAM,QAAQ,eAAW,sBAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;AAEzD,MAAI,CAAC,MAAO,QAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;AAE1C,SAAO,KACJ,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAACA,WAAU,EAAE,MAAAA,OAAM,OAAO,MAAM,KAAKA,KAAI,EAAE,EAAE;AACtD;AAEO,IAAM,eAAe,CAAC,EAAE,MAAM,MAAM,UACzC,sBAAQ,MAAM,eAAe,EAAE,MAAM,MAAM,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;AAuBvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,aAAa;AAAA,EACb;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,MAAI,OAAO,SAAS;AAClB,UAAM,IAAI,MAAM,iDAAiD;AAEnE,QAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAE3C,QAAM,YAAgB,aAAa,wBAAW;AAE9C,SACE,4CAAC,aAAW,GAAI,CAAC,aAAa,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACrD,iBAAO;AAAA,IAAI,CAAC,EAAE,MAAAA,OAAM,MAAM,GAAG,MAC5B,QACE,4CAAC,QAAc,GAAG,WACf,UAAAA,SADQ,CAEX,IAEA,4CAAC,yBAAkB,UAAAA,SAAJ,CAAS;AAAA,EAE5B,GACF;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAIZ,IAAM,WAAO,wBAA8B,CAAC,OAAO,QAAQ;AAChE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,QAAQ,KAAK;AAC7D,QAAM,EAAE,WAAW,GAAG,KAAK,QAAI,4BAAe,WAAW;AAEzD,QAAM,MAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;","names":["text"]}
1
+ {"version":3,"sources":["../src/highlight.tsx"],"sourcesContent":["import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { TextProps } from \"@yamada-ui/typography\"\nimport type { ReactNode } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Text } from \"@yamada-ui/typography\"\nimport { cx, isArray } from \"@yamada-ui/utils\"\nimport { Fragment, useMemo } from \"react\"\n\ninterface Options {\n query: string | string[]\n text: string\n}\n\ninterface Chunk {\n match: boolean\n text: string\n}\n\nconst escapeRegexp = (term: string): string =>\n term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nconst buildRegex = (query: string[]): RegExp | undefined => {\n query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()))\n\n if (query.length) return new RegExp(`(${query.join(\"|\")})`, \"ig\")\n}\n\nconst highlightWords = ({ query, text }: Options): Chunk[] => {\n const regex = buildRegex(isArray(query) ? query : [query])\n\n if (!regex) return [{ match: false, text }]\n\n return text\n .split(regex)\n .filter(Boolean)\n .map((text) => ({ match: regex.test(text), text }))\n}\n\nexport const useHighlight = ({ query, text }: Options): Chunk[] =>\n useMemo(() => highlightWords({ query, text }), [text, query])\n\nexport interface HighlightProps extends Omit<TextProps, \"children\"> {\n /**\n * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.\n */\n children: ((props: Chunk[]) => ReactNode) | 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 isFragment?: 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 Docs https://yamada-ui.com/components/typography/highlight\n */\nexport const Highlight: FC<HighlightProps> = ({\n children: text,\n isFragment = false,\n lineHeight = \"tall\",\n query,\n markProps,\n ...rest\n}) => {\n if (typeof text !== \"string\")\n throw new Error(\"The children prop of Highlight must be a string\")\n\n const chunks = useHighlight({ query, text })\n\n const Component: FC = isFragment ? Fragment : Text\n\n return (\n <Component {...(!isFragment ? { lineHeight } : {})} {...rest}>\n {chunks.map(({ match, text }, i) =>\n match ? (\n <Mark key={i} {...markProps}>\n {text}\n </Mark>\n ) : (\n <Fragment key={i}>{text}</Fragment>\n ),\n )}\n </Component>\n )\n}\n\nHighlight.displayName = \"Highlight\"\nHighlight.__ui__ = \"Highlight\"\n\nexport interface MarkProps extends HTMLUIProps<\"mark\">, ThemeProps<\"Mark\"> {}\n\nexport const Mark = forwardRef<MarkProps, \"mark\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Mark\", props)\n const { className, ...rest } = omitThemeProps(mergedProps)\n\n const css: CSSUIObject = {\n bg: \"transparent\",\n whiteSpace: \"nowrap\",\n ...styles,\n }\n\n return (\n <ui.mark\n ref={ref}\n className={cx(\"ui-mark\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n\nMark.displayName = \"Mark\"\nMark.__ui__ = \"Mark\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAKO;AACP,wBAAqB;AACrB,mBAA4B;AAC5B,mBAAkC;AAgFxB;AApEV,IAAM,eAAe,CAAC,SACpB,KAAK,QAAQ,wBAAwB,CAAC,SAAiB,KAAK,IAAI,EAAE;AAEpE,IAAM,aAAa,CAAC,UAAwC;AAC1D,UAAQ,MAAM,OAAO,OAAO,EAAE,IAAI,CAAC,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;AAErE,MAAI,MAAM,OAAQ,QAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC,KAAK,IAAI;AAClE;AAEA,IAAM,iBAAiB,CAAC,EAAE,OAAO,KAAK,MAAwB;AAC5D,QAAM,QAAQ,eAAW,sBAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;AAEzD,MAAI,CAAC,MAAO,QAAO,CAAC,EAAE,OAAO,OAAO,KAAK,CAAC;AAE1C,SAAO,KACJ,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAACA,WAAU,EAAE,OAAO,MAAM,KAAKA,KAAI,GAAG,MAAAA,MAAK,EAAE;AACtD;AAEO,IAAM,eAAe,CAAC,EAAE,OAAO,KAAK,UACzC,sBAAQ,MAAM,eAAe,EAAE,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;AA4BvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,UAAU;AAAA,EACV,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,OAAO,SAAS;AAClB,UAAM,IAAI,MAAM,iDAAiD;AAEnE,QAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAE3C,QAAM,YAAgB,aAAa,wBAAW;AAE9C,SACE,4CAAC,aAAW,GAAI,CAAC,aAAa,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACrD,iBAAO;AAAA,IAAI,CAAC,EAAE,OAAO,MAAAA,MAAK,GAAG,MAC5B,QACE,4CAAC,QAAc,GAAG,WACf,UAAAA,SADQ,CAEX,IAEA,4CAAC,yBAAkB,UAAAA,SAAJ,CAAS;AAAA,EAE5B,GACF;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAIZ,IAAM,WAAO,wBAA8B,CAAC,OAAO,QAAQ;AAChE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,QAAQ,KAAK;AAC7D,QAAM,EAAE,WAAW,GAAG,KAAK,QAAI,4BAAe,WAAW;AAEzD,QAAM,MAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;","names":["text"]}
@@ -3,7 +3,7 @@ import {
3
3
  Highlight,
4
4
  Mark,
5
5
  useHighlight
6
- } from "./chunk-4S6MZZ6P.mjs";
6
+ } from "./chunk-RHTZJRTC.mjs";
7
7
  export {
8
8
  Highlight,
9
9
  Mark,
package/dist/index.js CHANGED
@@ -38,18 +38,18 @@ var buildRegex = (query) => {
38
38
  query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()));
39
39
  if (query.length) return new RegExp(`(${query.join("|")})`, "ig");
40
40
  };
41
- var highlightWords = ({ text, query }) => {
41
+ var highlightWords = ({ query, text }) => {
42
42
  const regex = buildRegex((0, import_utils.isArray)(query) ? query : [query]);
43
- if (!regex) return [{ text, match: false }];
44
- return text.split(regex).filter(Boolean).map((text2) => ({ text: text2, match: regex.test(text2) }));
43
+ if (!regex) return [{ match: false, text }];
44
+ return text.split(regex).filter(Boolean).map((text2) => ({ match: regex.test(text2), text: text2 }));
45
45
  };
46
- var useHighlight = ({ text, query }) => (0, import_react.useMemo)(() => highlightWords({ text, query }), [text, query]);
46
+ var useHighlight = ({ query, text }) => (0, import_react.useMemo)(() => highlightWords({ query, text }), [text, query]);
47
47
  var Highlight = ({
48
+ children: text,
48
49
  isFragment = false,
50
+ lineHeight = "tall",
49
51
  query,
50
- children: text,
51
52
  markProps,
52
- lineHeight = "tall",
53
53
  ...rest
54
54
  }) => {
55
55
  if (typeof text !== "string")
@@ -57,7 +57,7 @@ var Highlight = ({
57
57
  const chunks = useHighlight({ query, text });
58
58
  const Component = isFragment ? import_react.Fragment : import_typography.Text;
59
59
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...!isFragment ? { lineHeight } : {}, ...rest, children: chunks.map(
60
- ({ text: text2, match }, i) => match ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Mark, { ...markProps, children: text2 }, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: text2 }, i)
60
+ ({ match, text: text2 }, i) => match ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Mark, { ...markProps, children: text2 }, i) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: text2 }, i)
61
61
  ) });
62
62
  };
63
63
  Highlight.displayName = "Highlight";
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/highlight.tsx"],"sourcesContent":["export { Highlight, Mark, useHighlight } from \"./highlight\"\nexport type { HighlightProps, MarkProps } from \"./highlight\"\n","/**\n * `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.\n *\n * @see Docs https://yamada-ui.com/components/typography/highlight\n */\nimport type { FC, HTMLUIProps, ThemeProps, CSSUIObject } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { TextProps } from \"@yamada-ui/typography\"\nimport { Text } from \"@yamada-ui/typography\"\nimport { cx, isArray } from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { Fragment, useMemo } from \"react\"\n\ninterface Options {\n text: string\n query: string | string[]\n}\n\ninterface Chunk {\n text: string\n match: boolean\n}\n\nconst escapeRegexp = (term: string): string =>\n term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nconst buildRegex = (query: string[]): RegExp | undefined => {\n query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()))\n\n if (query.length) return new RegExp(`(${query.join(\"|\")})`, \"ig\")\n}\n\nconst highlightWords = ({ text, query }: Options): Chunk[] => {\n const regex = buildRegex(isArray(query) ? query : [query])\n\n if (!regex) return [{ text, match: false }]\n\n return text\n .split(regex)\n .filter(Boolean)\n .map((text) => ({ text, match: regex.test(text) }))\n}\n\nexport const useHighlight = ({ text, query }: Options): Chunk[] =>\n useMemo(() => highlightWords({ text, query }), [text, query])\n\nexport interface HighlightProps extends Omit<TextProps, \"children\"> {\n /**\n * If `true`, `Fragment` is used for rendering.\n *\n * @default false\n */\n isFragment?: boolean\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 * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.\n */\n children: string | ((props: Chunk[]) => ReactNode)\n /**\n * Properties passed to the Mark component which is used to highlight the matched terms.\n */\n markProps?: MarkProps\n}\n\nexport const Highlight: FC<HighlightProps> = ({\n isFragment = false,\n query,\n children: text,\n markProps,\n lineHeight = \"tall\",\n ...rest\n}) => {\n if (typeof text !== \"string\")\n throw new Error(\"The children prop of Highlight must be a string\")\n\n const chunks = useHighlight({ query, text })\n\n const Component: FC = isFragment ? Fragment : Text\n\n return (\n <Component {...(!isFragment ? { lineHeight } : {})} {...rest}>\n {chunks.map(({ text, match }, i) =>\n match ? (\n <Mark key={i} {...markProps}>\n {text}\n </Mark>\n ) : (\n <Fragment key={i}>{text}</Fragment>\n ),\n )}\n </Component>\n )\n}\n\nHighlight.displayName = \"Highlight\"\nHighlight.__ui__ = \"Highlight\"\n\nexport interface MarkProps extends HTMLUIProps<\"mark\">, ThemeProps<\"Mark\"> {}\n\nexport const Mark = forwardRef<MarkProps, \"mark\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Mark\", props)\n const { className, ...rest } = omitThemeProps(mergedProps)\n\n const css: CSSUIObject = {\n bg: \"transparent\",\n whiteSpace: \"nowrap\",\n ...styles,\n }\n\n return (\n <ui.mark\n ref={ref}\n className={cx(\"ui-mark\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n\nMark.displayName = \"Mark\"\nMark.__ui__ = \"Mark\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACMA,kBAKO;AAEP,wBAAqB;AACrB,mBAA4B;AAE5B,mBAAkC;AA2ExB;AA/DV,IAAM,eAAe,CAAC,SACpB,KAAK,QAAQ,wBAAwB,CAAC,SAAiB,KAAK,IAAI,EAAE;AAEpE,IAAM,aAAa,CAAC,UAAwC;AAC1D,UAAQ,MAAM,OAAO,OAAO,EAAE,IAAI,CAAC,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;AAErE,MAAI,MAAM,OAAQ,QAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC,KAAK,IAAI;AAClE;AAEA,IAAM,iBAAiB,CAAC,EAAE,MAAM,MAAM,MAAwB;AAC5D,QAAM,QAAQ,eAAW,sBAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;AAEzD,MAAI,CAAC,MAAO,QAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;AAE1C,SAAO,KACJ,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAACA,WAAU,EAAE,MAAAA,OAAM,OAAO,MAAM,KAAKA,KAAI,EAAE,EAAE;AACtD;AAEO,IAAM,eAAe,CAAC,EAAE,MAAM,MAAM,UACzC,sBAAQ,MAAM,eAAe,EAAE,MAAM,MAAM,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;AAuBvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,aAAa;AAAA,EACb;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,MAAI,OAAO,SAAS;AAClB,UAAM,IAAI,MAAM,iDAAiD;AAEnE,QAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAE3C,QAAM,YAAgB,aAAa,wBAAW;AAE9C,SACE,4CAAC,aAAW,GAAI,CAAC,aAAa,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACrD,iBAAO;AAAA,IAAI,CAAC,EAAE,MAAAA,OAAM,MAAM,GAAG,MAC5B,QACE,4CAAC,QAAc,GAAG,WACf,UAAAA,SADQ,CAEX,IAEA,4CAAC,yBAAkB,UAAAA,SAAJ,CAAS;AAAA,EAE5B,GACF;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAIZ,IAAM,WAAO,wBAA8B,CAAC,OAAO,QAAQ;AAChE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,QAAQ,KAAK;AAC7D,QAAM,EAAE,WAAW,GAAG,KAAK,QAAI,4BAAe,WAAW;AAEzD,QAAM,MAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;","names":["text"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/highlight.tsx"],"sourcesContent":["export { Highlight, Mark, useHighlight } from \"./highlight\"\nexport type { HighlightProps, MarkProps } from \"./highlight\"\n","import type { CSSUIObject, FC, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type { TextProps } from \"@yamada-ui/typography\"\nimport type { ReactNode } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentStyle,\n} from \"@yamada-ui/core\"\nimport { Text } from \"@yamada-ui/typography\"\nimport { cx, isArray } from \"@yamada-ui/utils\"\nimport { Fragment, useMemo } from \"react\"\n\ninterface Options {\n query: string | string[]\n text: string\n}\n\ninterface Chunk {\n match: boolean\n text: string\n}\n\nconst escapeRegexp = (term: string): string =>\n term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nconst buildRegex = (query: string[]): RegExp | undefined => {\n query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()))\n\n if (query.length) return new RegExp(`(${query.join(\"|\")})`, \"ig\")\n}\n\nconst highlightWords = ({ query, text }: Options): Chunk[] => {\n const regex = buildRegex(isArray(query) ? query : [query])\n\n if (!regex) return [{ match: false, text }]\n\n return text\n .split(regex)\n .filter(Boolean)\n .map((text) => ({ match: regex.test(text), text }))\n}\n\nexport const useHighlight = ({ query, text }: Options): Chunk[] =>\n useMemo(() => highlightWords({ query, text }), [text, query])\n\nexport interface HighlightProps extends Omit<TextProps, \"children\"> {\n /**\n * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.\n */\n children: ((props: Chunk[]) => ReactNode) | 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 isFragment?: 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 Docs https://yamada-ui.com/components/typography/highlight\n */\nexport const Highlight: FC<HighlightProps> = ({\n children: text,\n isFragment = false,\n lineHeight = \"tall\",\n query,\n markProps,\n ...rest\n}) => {\n if (typeof text !== \"string\")\n throw new Error(\"The children prop of Highlight must be a string\")\n\n const chunks = useHighlight({ query, text })\n\n const Component: FC = isFragment ? Fragment : Text\n\n return (\n <Component {...(!isFragment ? { lineHeight } : {})} {...rest}>\n {chunks.map(({ match, text }, i) =>\n match ? (\n <Mark key={i} {...markProps}>\n {text}\n </Mark>\n ) : (\n <Fragment key={i}>{text}</Fragment>\n ),\n )}\n </Component>\n )\n}\n\nHighlight.displayName = \"Highlight\"\nHighlight.__ui__ = \"Highlight\"\n\nexport interface MarkProps extends HTMLUIProps<\"mark\">, ThemeProps<\"Mark\"> {}\n\nexport const Mark = forwardRef<MarkProps, \"mark\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Mark\", props)\n const { className, ...rest } = omitThemeProps(mergedProps)\n\n const css: CSSUIObject = {\n bg: \"transparent\",\n whiteSpace: \"nowrap\",\n ...styles,\n }\n\n return (\n <ui.mark\n ref={ref}\n className={cx(\"ui-mark\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n\nMark.displayName = \"Mark\"\nMark.__ui__ = \"Mark\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACGA,kBAKO;AACP,wBAAqB;AACrB,mBAA4B;AAC5B,mBAAkC;AAgFxB;AApEV,IAAM,eAAe,CAAC,SACpB,KAAK,QAAQ,wBAAwB,CAAC,SAAiB,KAAK,IAAI,EAAE;AAEpE,IAAM,aAAa,CAAC,UAAwC;AAC1D,UAAQ,MAAM,OAAO,OAAO,EAAE,IAAI,CAAC,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;AAErE,MAAI,MAAM,OAAQ,QAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC,KAAK,IAAI;AAClE;AAEA,IAAM,iBAAiB,CAAC,EAAE,OAAO,KAAK,MAAwB;AAC5D,QAAM,QAAQ,eAAW,sBAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;AAEzD,MAAI,CAAC,MAAO,QAAO,CAAC,EAAE,OAAO,OAAO,KAAK,CAAC;AAE1C,SAAO,KACJ,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAACA,WAAU,EAAE,OAAO,MAAM,KAAKA,KAAI,GAAG,MAAAA,MAAK,EAAE;AACtD;AAEO,IAAM,eAAe,CAAC,EAAE,OAAO,KAAK,UACzC,sBAAQ,MAAM,eAAe,EAAE,OAAO,KAAK,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;AA4BvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,UAAU;AAAA,EACV,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,OAAO,SAAS;AAClB,UAAM,IAAI,MAAM,iDAAiD;AAEnE,QAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAE3C,QAAM,YAAgB,aAAa,wBAAW;AAE9C,SACE,4CAAC,aAAW,GAAI,CAAC,aAAa,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACrD,iBAAO;AAAA,IAAI,CAAC,EAAE,OAAO,MAAAA,MAAK,GAAG,MAC5B,QACE,4CAAC,QAAc,GAAG,WACf,UAAAA,SADQ,CAEX,IAEA,4CAAC,yBAAkB,UAAAA,SAAJ,CAAS;AAAA,EAE5B,GACF;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAIZ,IAAM,WAAO,wBAA8B,CAAC,OAAO,QAAQ;AAChE,QAAM,CAAC,QAAQ,WAAW,QAAI,+BAAkB,QAAQ,KAAK;AAC7D,QAAM,EAAE,WAAW,GAAG,KAAK,QAAI,4BAAe,WAAW;AAEzD,QAAM,MAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,eAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,eAAW,iBAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;","names":["text"]}
package/dist/index.mjs CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  Highlight,
4
4
  Mark,
5
5
  useHighlight
6
- } from "./chunk-4S6MZZ6P.mjs";
6
+ } from "./chunk-RHTZJRTC.mjs";
7
7
  export {
8
8
  Highlight,
9
9
  Mark,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/highlight",
3
- "version": "1.0.39-next-20241005220055",
3
+ "version": "1.0.39-next-20241008193728",
4
4
  "description": "Yamada UI highlight component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,9 +36,9 @@
36
36
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.15.2-next-20241005220055",
40
- "@yamada-ui/typography": "1.0.39-next-20241005220055",
41
- "@yamada-ui/utils": "1.5.2"
39
+ "@yamada-ui/core": "1.15.2-next-20241008193728",
40
+ "@yamada-ui/typography": "1.0.39-next-20241008193728",
41
+ "@yamada-ui/utils": "1.5.3-next-20241008193728"
42
42
  },
43
43
  "devDependencies": {
44
44
  "clean-package": "2.2.0",
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/highlight.tsx"],"sourcesContent":["/**\n * `Highlight` is a component that highlights specified strings within text. By default, it renders a `p` element.\n *\n * @see Docs https://yamada-ui.com/components/typography/highlight\n */\nimport type { FC, HTMLUIProps, ThemeProps, CSSUIObject } from \"@yamada-ui/core\"\nimport {\n ui,\n forwardRef,\n useComponentStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { TextProps } from \"@yamada-ui/typography\"\nimport { Text } from \"@yamada-ui/typography\"\nimport { cx, isArray } from \"@yamada-ui/utils\"\nimport type { ReactNode } from \"react\"\nimport { Fragment, useMemo } from \"react\"\n\ninterface Options {\n text: string\n query: string | string[]\n}\n\ninterface Chunk {\n text: string\n match: boolean\n}\n\nconst escapeRegexp = (term: string): string =>\n term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nconst buildRegex = (query: string[]): RegExp | undefined => {\n query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()))\n\n if (query.length) return new RegExp(`(${query.join(\"|\")})`, \"ig\")\n}\n\nconst highlightWords = ({ text, query }: Options): Chunk[] => {\n const regex = buildRegex(isArray(query) ? query : [query])\n\n if (!regex) return [{ text, match: false }]\n\n return text\n .split(regex)\n .filter(Boolean)\n .map((text) => ({ text, match: regex.test(text) }))\n}\n\nexport const useHighlight = ({ text, query }: Options): Chunk[] =>\n useMemo(() => highlightWords({ text, query }), [text, query])\n\nexport interface HighlightProps extends Omit<TextProps, \"children\"> {\n /**\n * If `true`, `Fragment` is used for rendering.\n *\n * @default false\n */\n isFragment?: boolean\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 * Accepts a string or a function. If it's a function, it should return a `ReactNode` and accept an array of `Chunk` objects as its argument.\n */\n children: string | ((props: Chunk[]) => ReactNode)\n /**\n * Properties passed to the Mark component which is used to highlight the matched terms.\n */\n markProps?: MarkProps\n}\n\nexport const Highlight: FC<HighlightProps> = ({\n isFragment = false,\n query,\n children: text,\n markProps,\n lineHeight = \"tall\",\n ...rest\n}) => {\n if (typeof text !== \"string\")\n throw new Error(\"The children prop of Highlight must be a string\")\n\n const chunks = useHighlight({ query, text })\n\n const Component: FC = isFragment ? Fragment : Text\n\n return (\n <Component {...(!isFragment ? { lineHeight } : {})} {...rest}>\n {chunks.map(({ text, match }, i) =>\n match ? (\n <Mark key={i} {...markProps}>\n {text}\n </Mark>\n ) : (\n <Fragment key={i}>{text}</Fragment>\n ),\n )}\n </Component>\n )\n}\n\nHighlight.displayName = \"Highlight\"\nHighlight.__ui__ = \"Highlight\"\n\nexport interface MarkProps extends HTMLUIProps<\"mark\">, ThemeProps<\"Mark\"> {}\n\nexport const Mark = forwardRef<MarkProps, \"mark\">((props, ref) => {\n const [styles, mergedProps] = useComponentStyle(\"Mark\", props)\n const { className, ...rest } = omitThemeProps(mergedProps)\n\n const css: CSSUIObject = {\n bg: \"transparent\",\n whiteSpace: \"nowrap\",\n ...styles,\n }\n\n return (\n <ui.mark\n ref={ref}\n className={cx(\"ui-mark\", className)}\n __css={css}\n {...rest}\n />\n )\n})\n\nMark.displayName = \"Mark\"\nMark.__ui__ = \"Mark\"\n"],"mappings":";;;AAMA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,YAAY;AACrB,SAAS,IAAI,eAAe;AAE5B,SAAS,UAAU,eAAe;AA2ExB;AA/DV,IAAM,eAAe,CAAC,SACpB,KAAK,QAAQ,wBAAwB,CAAC,SAAiB,KAAK,IAAI,EAAE;AAEpE,IAAM,aAAa,CAAC,UAAwC;AAC1D,UAAQ,MAAM,OAAO,OAAO,EAAE,IAAI,CAAC,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;AAErE,MAAI,MAAM,OAAQ,QAAO,IAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC,KAAK,IAAI;AAClE;AAEA,IAAM,iBAAiB,CAAC,EAAE,MAAM,MAAM,MAAwB;AAC5D,QAAM,QAAQ,WAAW,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;AAEzD,MAAI,CAAC,MAAO,QAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;AAE1C,SAAO,KACJ,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAACA,WAAU,EAAE,MAAAA,OAAM,OAAO,MAAM,KAAKA,KAAI,EAAE,EAAE;AACtD;AAEO,IAAM,eAAe,CAAC,EAAE,MAAM,MAAM,MACzC,QAAQ,MAAM,eAAe,EAAE,MAAM,MAAM,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;AAuBvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,aAAa;AAAA,EACb;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,MAAI,OAAO,SAAS;AAClB,UAAM,IAAI,MAAM,iDAAiD;AAEnE,QAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAE3C,QAAM,YAAgB,aAAa,WAAW;AAE9C,SACE,oBAAC,aAAW,GAAI,CAAC,aAAa,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACrD,iBAAO;AAAA,IAAI,CAAC,EAAE,MAAAA,OAAM,MAAM,GAAG,MAC5B,QACE,oBAAC,QAAc,GAAG,WACf,UAAAA,SADQ,CAEX,IAEA,oBAAC,YAAkB,UAAAA,SAAJ,CAAS;AAAA,EAE5B,GACF;AAEJ;AAEA,UAAU,cAAc;AACxB,UAAU,SAAS;AAIZ,IAAM,OAAO,WAA8B,CAAC,OAAO,QAAQ;AAChE,QAAM,CAAC,QAAQ,WAAW,IAAI,kBAAkB,QAAQ,KAAK;AAC7D,QAAM,EAAE,WAAW,GAAG,KAAK,IAAI,eAAe,WAAW;AAEzD,QAAM,MAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,GAAG;AAAA,EACL;AAEA,SACE;AAAA,IAAC,GAAG;AAAA,IAAH;AAAA,MACC;AAAA,MACA,WAAW,GAAG,WAAW,SAAS;AAAA,MAClC,OAAO;AAAA,MACN,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,SAAS;","names":["text"]}