@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.
- 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-next-
|
|
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-
|
|
40
|
-
"@yamada-ui/typography": "1.0.39-next-
|
|
41
|
-
"@yamada-ui/utils": "1.5.
|
|
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"]}
|