@yamada-ui/highlight 1.0.39-dev-20241005220629 → 1.0.39-dev-20241006000212
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-4S6MZZ6P.mjs → chunk-RHTZJRTC.mjs} +11 -11
- package/dist/chunk-RHTZJRTC.mjs.map +1 -0
- package/dist/highlight.d.mts +14 -9
- package/dist/highlight.d.ts +14 -9
- package/dist/highlight.js +7 -7
- package/dist/highlight.js.map +1 -1
- package/dist/highlight.mjs +1 -1
- package/dist/index.js +7 -7
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +4 -4
- package/dist/chunk-4S6MZZ6P.mjs.map +0 -1
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
// src/highlight.tsx
|
|
4
4
|
import {
|
|
5
|
-
ui,
|
|
6
5
|
forwardRef,
|
|
7
|
-
|
|
8
|
-
|
|
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 = ({
|
|
19
|
+
var highlightWords = ({ query, text }) => {
|
|
20
20
|
const regex = buildRegex(isArray(query) ? query : [query]);
|
|
21
|
-
if (!regex) return [{
|
|
22
|
-
return text.split(regex).filter(Boolean).map((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 = ({
|
|
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
|
|
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-
|
|
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"]}
|
package/dist/highlight.d.mts
CHANGED
|
@@ -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: ({
|
|
14
|
+
declare const useHighlight: ({ query, text }: Options) => Chunk[];
|
|
15
15
|
interface HighlightProps extends Omit<TextProps, "children"> {
|
|
16
16
|
/**
|
|
17
|
-
* If `
|
|
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
|
-
|
|
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
|
-
*
|
|
25
|
+
* If `true`, `Fragment` is used for rendering.
|
|
26
|
+
*
|
|
27
|
+
* @default false
|
|
28
28
|
*/
|
|
29
|
-
|
|
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.d.ts
CHANGED
|
@@ -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: ({
|
|
14
|
+
declare const useHighlight: ({ query, text }: Options) => Chunk[];
|
|
15
15
|
interface HighlightProps extends Omit<TextProps, "children"> {
|
|
16
16
|
/**
|
|
17
|
-
* If `
|
|
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
|
-
|
|
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
|
-
*
|
|
25
|
+
* If `true`, `Fragment` is used for rendering.
|
|
26
|
+
*
|
|
27
|
+
* @default false
|
|
28
28
|
*/
|
|
29
|
-
|
|
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 = ({
|
|
39
|
+
var highlightWords = ({ query, text }) => {
|
|
40
40
|
const regex = buildRegex((0, import_utils.isArray)(query) ? query : [query]);
|
|
41
|
-
if (!regex) return [{
|
|
42
|
-
return text.split(regex).filter(Boolean).map((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 = ({
|
|
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
|
|
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";
|
package/dist/highlight.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/highlight.tsx"],"sourcesContent":["
|
|
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"]}
|
package/dist/highlight.mjs
CHANGED
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 = ({
|
|
41
|
+
var highlightWords = ({ query, text }) => {
|
|
42
42
|
const regex = buildRegex((0, import_utils.isArray)(query) ? query : [query]);
|
|
43
|
-
if (!regex) return [{
|
|
44
|
-
return text.split(regex).filter(Boolean).map((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 = ({
|
|
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
|
|
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","
|
|
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
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/highlight",
|
|
3
|
-
"version": "1.0.39-dev-
|
|
3
|
+
"version": "1.0.39-dev-20241006000212",
|
|
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-dev-
|
|
40
|
-
"@yamada-ui/typography": "1.0.39-dev-
|
|
41
|
-
"@yamada-ui/utils": "1.5.
|
|
39
|
+
"@yamada-ui/core": "1.15.2-dev-20241006000212",
|
|
40
|
+
"@yamada-ui/typography": "1.0.39-dev-20241006000212",
|
|
41
|
+
"@yamada-ui/utils": "1.5.3-dev-20241006000212"
|
|
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"]}
|