@yamada-ui/highlight 2.0.0-next-20240613232518 → 2.0.0-next-20240615222442
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.
- package/dist/{chunk-NYCY7ENX.mjs → chunk-DVN6VTI4.mjs} +3 -5
- package/dist/{chunk-NYCY7ENX.mjs.map → chunk-DVN6VTI4.mjs.map} +1 -1
- package/dist/highlight.js +2 -4
- package/dist/highlight.js.map +1 -1
- package/dist/highlight.mjs +1 -1
- package/dist/index.js +2 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +4 -4
|
@@ -14,13 +14,11 @@ import { jsx } from "react/jsx-runtime";
|
|
|
14
14
|
var escapeRegexp = (term) => term.replace(/[|\\{}()[\]^$+*?.-]/g, (char) => `\\${char}`);
|
|
15
15
|
var buildRegex = (query) => {
|
|
16
16
|
query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()));
|
|
17
|
-
if (query.length)
|
|
18
|
-
return new RegExp(`(${query.join("|")})`, "ig");
|
|
17
|
+
if (query.length) return new RegExp(`(${query.join("|")})`, "ig");
|
|
19
18
|
};
|
|
20
19
|
var highlightWords = ({ text, query }) => {
|
|
21
20
|
const regex = buildRegex(isArray(query) ? query : [query]);
|
|
22
|
-
if (!regex)
|
|
23
|
-
return [{ text, match: false }];
|
|
21
|
+
if (!regex) return [{ text, match: false }];
|
|
24
22
|
return text.split(regex).filter(Boolean).map((text2) => ({ text: text2, match: regex.test(text2) }));
|
|
25
23
|
};
|
|
26
24
|
var useHighlight = ({ text, query }) => useMemo(() => highlightWords({ text, query }), [text, query]);
|
|
@@ -62,4 +60,4 @@ export {
|
|
|
62
60
|
Highlight,
|
|
63
61
|
Mark
|
|
64
62
|
};
|
|
65
|
-
//# sourceMappingURL=chunk-
|
|
63
|
+
//# sourceMappingURL=chunk-DVN6VTI4.mjs.map
|
|
@@ -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 { 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 { FC, ReactNode } from \"react\"\nimport { Fragment, useMemo } from \"react\"\n\ntype Options = { text: string; query: string | string[] }\n\ntype Chunk = { text: string; match: boolean }\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 type HighlightProps = TextProps & {\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\nexport type MarkProps = 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 ...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"],"mappings":";;;AAMA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,YAAY;AACrB,SAAS,IAAI,eAAe;AAE5B,SAAS,UAAU,eAAe;AAqExB;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
|
|
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 { 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 { FC, ReactNode } from \"react\"\nimport { Fragment, useMemo } from \"react\"\n\ntype Options = { text: string; query: string | string[] }\n\ntype Chunk = { text: string; match: boolean }\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 type HighlightProps = TextProps & {\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\nexport type MarkProps = 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 ...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"],"mappings":";;;AAMA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,YAAY;AACrB,SAAS,IAAI,eAAe;AAE5B,SAAS,UAAU,eAAe;AAqExB;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;AAIO,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,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;","names":["text"]}
|
package/dist/highlight.js
CHANGED
|
@@ -34,13 +34,11 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
34
34
|
var escapeRegexp = (term) => term.replace(/[|\\{}()[\]^$+*?.-]/g, (char) => `\\${char}`);
|
|
35
35
|
var buildRegex = (query) => {
|
|
36
36
|
query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()));
|
|
37
|
-
if (query.length)
|
|
38
|
-
return new RegExp(`(${query.join("|")})`, "ig");
|
|
37
|
+
if (query.length) return new RegExp(`(${query.join("|")})`, "ig");
|
|
39
38
|
};
|
|
40
39
|
var highlightWords = ({ text, query }) => {
|
|
41
40
|
const regex = buildRegex((0, import_utils.isArray)(query) ? query : [query]);
|
|
42
|
-
if (!regex)
|
|
43
|
-
return [{ text, match: false }];
|
|
41
|
+
if (!regex) return [{ text, match: false }];
|
|
44
42
|
return text.split(regex).filter(Boolean).map((text2) => ({ text: text2, match: regex.test(text2) }));
|
|
45
43
|
};
|
|
46
44
|
var useHighlight = ({ text, query }) => (0, import_react.useMemo)(() => highlightWords({ text, query }), [text, query]);
|
package/dist/highlight.js.map
CHANGED
|
@@ -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 { 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 { FC, ReactNode } from \"react\"\nimport { Fragment, useMemo } from \"react\"\n\ntype Options = { text: string; query: string | string[] }\n\ntype Chunk = { text: string; match: boolean }\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 type HighlightProps = TextProps & {\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\nexport type MarkProps = 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 ...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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,kBAKO;AAEP,wBAAqB;AACrB,mBAA4B;AAE5B,mBAAkC;AAqExB;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
|
|
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 { 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 { FC, ReactNode } from \"react\"\nimport { Fragment, useMemo } from \"react\"\n\ntype Options = { text: string; query: string | string[] }\n\ntype Chunk = { text: string; match: boolean }\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 type HighlightProps = TextProps & {\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\nexport type MarkProps = 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 ...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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,kBAKO;AAEP,wBAAqB;AACrB,mBAA4B;AAE5B,mBAAkC;AAqExB;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;AAIO,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,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;","names":["text"]}
|
package/dist/highlight.mjs
CHANGED
package/dist/index.js
CHANGED
|
@@ -36,13 +36,11 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
36
36
|
var escapeRegexp = (term) => term.replace(/[|\\{}()[\]^$+*?.-]/g, (char) => `\\${char}`);
|
|
37
37
|
var buildRegex = (query) => {
|
|
38
38
|
query = query.filter(Boolean).map((text) => escapeRegexp(text.trim()));
|
|
39
|
-
if (query.length)
|
|
40
|
-
return new RegExp(`(${query.join("|")})`, "ig");
|
|
39
|
+
if (query.length) return new RegExp(`(${query.join("|")})`, "ig");
|
|
41
40
|
};
|
|
42
41
|
var highlightWords = ({ text, query }) => {
|
|
43
42
|
const regex = buildRegex((0, import_utils.isArray)(query) ? query : [query]);
|
|
44
|
-
if (!regex)
|
|
45
|
-
return [{ text, match: false }];
|
|
43
|
+
if (!regex) return [{ text, match: false }];
|
|
46
44
|
return text.split(regex).filter(Boolean).map((text2) => ({ text: text2, match: regex.test(text2) }));
|
|
47
45
|
};
|
|
48
46
|
var useHighlight = ({ text, query }) => (0, import_react.useMemo)(() => highlightWords({ text, query }), [text, query]);
|
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 { 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 { FC, ReactNode } from \"react\"\nimport { Fragment, useMemo } from \"react\"\n\ntype Options = { text: string; query: string | string[] }\n\ntype Chunk = { text: string; match: boolean }\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 type HighlightProps = TextProps & {\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\nexport type MarkProps = 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 ...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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACMA,kBAKO;AAEP,wBAAqB;AACrB,mBAA4B;AAE5B,mBAAkC;AAqExB;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
|
|
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 { 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 { FC, ReactNode } from \"react\"\nimport { Fragment, useMemo } from \"react\"\n\ntype Options = { text: string; query: string | string[] }\n\ntype Chunk = { text: string; match: boolean }\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 type HighlightProps = TextProps & {\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\nexport type MarkProps = 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 ...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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACMA,kBAKO;AAEP,wBAAqB;AACrB,mBAA4B;AAE5B,mBAAkC;AAqExB;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;AAIO,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,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;","names":["text"]}
|
package/dist/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/highlight",
|
|
3
|
-
"version": "2.0.0-next-
|
|
3
|
+
"version": "2.0.0-next-20240615222442",
|
|
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.7.
|
|
40
|
-
"@yamada-ui/
|
|
41
|
-
"@yamada-ui/
|
|
39
|
+
"@yamada-ui/core": "1.7.2",
|
|
40
|
+
"@yamada-ui/utils": "1.2.1",
|
|
41
|
+
"@yamada-ui/typography": "1.0.28"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"react": "^18.0.0",
|