@yamada-ui/highlight 1.0.27-next-20240612062634 → 2.0.0-next-20240613232518
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-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-next-
|
|
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",
|