@yamada-ui/highlight 1.0.27 → 2.0.0-next-20240613232518
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-YDZB75QT.mjs → chunk-NYCY7ENX.mjs} +1 -3
- package/dist/{chunk-YDZB75QT.mjs.map → chunk-NYCY7ENX.mjs.map} +1 -1
- package/dist/highlight.js +0 -2
- package/dist/highlight.js.map +1 -1
- package/dist/highlight.mjs +1 -1
- package/dist/index.js +0 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +4 -4
|
@@ -44,8 +44,6 @@ var Mark = forwardRef((props, ref) => {
|
|
|
44
44
|
const [styles, mergedProps] = useComponentStyle("Mark", props);
|
|
45
45
|
const { className, ...rest } = omitThemeProps(mergedProps);
|
|
46
46
|
const css = {
|
|
47
|
-
bg: "transparent",
|
|
48
|
-
whiteSpace: "nowrap",
|
|
49
47
|
...styles
|
|
50
48
|
};
|
|
51
49
|
return /* @__PURE__ */ jsx(
|
|
@@ -64,4 +62,4 @@ export {
|
|
|
64
62
|
Highlight,
|
|
65
63
|
Mark
|
|
66
64
|
};
|
|
67
|
-
//# sourceMappingURL=chunk-
|
|
65
|
+
//# sourceMappingURL=chunk-NYCY7ENX.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
|
|
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;AAAQ,WAAO,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;AAAO,WAAO,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
|
@@ -64,8 +64,6 @@ var Mark = (0, import_core.forwardRef)((props, ref) => {
|
|
|
64
64
|
const [styles, mergedProps] = (0, import_core.useComponentStyle)("Mark", props);
|
|
65
65
|
const { className, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
|
|
66
66
|
const css = {
|
|
67
|
-
bg: "transparent",
|
|
68
|
-
whiteSpace: "nowrap",
|
|
69
67
|
...styles
|
|
70
68
|
};
|
|
71
69
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
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
|
|
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;AAAQ,WAAO,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;AAAO,WAAO,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
|
@@ -66,8 +66,6 @@ var Mark = (0, import_core.forwardRef)((props, ref) => {
|
|
|
66
66
|
const [styles, mergedProps] = (0, import_core.useComponentStyle)("Mark", props);
|
|
67
67
|
const { className, ...rest } = (0, import_core.omitThemeProps)(mergedProps);
|
|
68
68
|
const css = {
|
|
69
|
-
bg: "transparent",
|
|
70
|
-
whiteSpace: "nowrap",
|
|
71
69
|
...styles
|
|
72
70
|
};
|
|
73
71
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
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
|
|
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;AAAQ,WAAO,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;AAAO,WAAO,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": "
|
|
3
|
+
"version": "2.0.0-next-20240613232518",
|
|
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.1",
|
|
40
|
-
"@yamada-ui/
|
|
41
|
-
"@yamada-ui/
|
|
39
|
+
"@yamada-ui/core": "1.7.1-next-20240613232518",
|
|
40
|
+
"@yamada-ui/typography": "1.0.27-next-20240613232518",
|
|
41
|
+
"@yamada-ui/utils": "1.2.1-next-20240613232518"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"react": "^18.0.0",
|