@yamada-ui/highlight 1.0.47-dev-20241214144625 → 1.0.47
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-JI2JLM73.mjs → chunk-3Q7CYCKQ.mjs} +2 -3
- package/dist/chunk-3Q7CYCKQ.mjs.map +1 -0
- package/dist/highlight.js +1 -2
- package/dist/highlight.js.map +1 -1
- package/dist/highlight.mjs +1 -1
- package/dist/index.js +1 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/package.json +4 -4
- package/dist/chunk-JI2JLM73.mjs.map +0 -1
|
@@ -24,8 +24,8 @@ var highlightWords = ({ query, text }) => {
|
|
|
24
24
|
var useHighlight = ({ query, text }) => useMemo(() => highlightWords({ query, text }), [text, query]);
|
|
25
25
|
var Highlight = ({
|
|
26
26
|
children: text,
|
|
27
|
-
fragment,
|
|
28
27
|
isFragment = false,
|
|
28
|
+
fragment = isFragment,
|
|
29
29
|
lineHeight = "tall",
|
|
30
30
|
query,
|
|
31
31
|
markProps,
|
|
@@ -33,7 +33,6 @@ var Highlight = ({
|
|
|
33
33
|
}) => {
|
|
34
34
|
if (typeof text !== "string")
|
|
35
35
|
throw new Error("The children prop of Highlight must be a string");
|
|
36
|
-
fragment != null ? fragment : fragment = isFragment;
|
|
37
36
|
const chunks = useHighlight({ query, text });
|
|
38
37
|
const Component = fragment ? Fragment : Text;
|
|
39
38
|
return /* @__PURE__ */ jsx(Component, { ...!fragment ? { lineHeight } : {}, ...rest, children: chunks.map(
|
|
@@ -68,4 +67,4 @@ export {
|
|
|
68
67
|
Highlight,
|
|
69
68
|
Mark
|
|
70
69
|
};
|
|
71
|
-
//# sourceMappingURL=chunk-
|
|
70
|
+
//# sourceMappingURL=chunk-3Q7CYCKQ.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 fragment?: boolean\n /**\n * If `true`, `Fragment` is used for rendering.\n *\n * @default false\n *\n * @deprecated Use `fragment` instead.\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 fragment = isFragment,\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 = fragment ? Fragment : Text\n\n return (\n <Component {...(!fragment ? { 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;AAyFxB;AA7EV,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;AAoCvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,UAAU;AAAA,EACV,aAAa;AAAA,EACb,WAAW;AAAA,EACX,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,WAAW,WAAW;AAE5C,SACE,oBAAC,aAAW,GAAI,CAAC,WAAW,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACnD,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.js
CHANGED
|
@@ -44,8 +44,8 @@ var highlightWords = ({ query, text }) => {
|
|
|
44
44
|
var useHighlight = ({ query, text }) => (0, import_react.useMemo)(() => highlightWords({ query, text }), [text, query]);
|
|
45
45
|
var Highlight = ({
|
|
46
46
|
children: text,
|
|
47
|
-
fragment,
|
|
48
47
|
isFragment = false,
|
|
48
|
+
fragment = isFragment,
|
|
49
49
|
lineHeight = "tall",
|
|
50
50
|
query,
|
|
51
51
|
markProps,
|
|
@@ -53,7 +53,6 @@ var Highlight = ({
|
|
|
53
53
|
}) => {
|
|
54
54
|
if (typeof text !== "string")
|
|
55
55
|
throw new Error("The children prop of Highlight must be a string");
|
|
56
|
-
fragment != null ? fragment : fragment = isFragment;
|
|
57
56
|
const chunks = useHighlight({ query, text });
|
|
58
57
|
const Component = fragment ? import_react.Fragment : import_typography.Text;
|
|
59
58
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...!fragment ? { lineHeight } : {}, ...rest, children: chunks.map(
|
package/dist/highlight.js.map
CHANGED
|
@@ -1 +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 fragment?: boolean\n /**\n * If `true`, `Fragment` is used for rendering.\n *\n * @default false\n *\n * @deprecated Use `fragment` instead.\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
|
|
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 fragment?: boolean\n /**\n * If `true`, `Fragment` is used for rendering.\n *\n * @default false\n *\n * @deprecated Use `fragment` instead.\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 fragment = isFragment,\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 = fragment ? Fragment : Text\n\n return (\n <Component {...(!fragment ? { 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;AAyFxB;AA7EV,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;AAoCvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,UAAU;AAAA,EACV,aAAa;AAAA,EACb,WAAW;AAAA,EACX,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,WAAW,wBAAW;AAE5C,SACE,4CAAC,aAAW,GAAI,CAAC,WAAW,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACnD,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
|
@@ -46,8 +46,8 @@ var highlightWords = ({ query, text }) => {
|
|
|
46
46
|
var useHighlight = ({ query, text }) => (0, import_react.useMemo)(() => highlightWords({ query, text }), [text, query]);
|
|
47
47
|
var Highlight = ({
|
|
48
48
|
children: text,
|
|
49
|
-
fragment,
|
|
50
49
|
isFragment = false,
|
|
50
|
+
fragment = isFragment,
|
|
51
51
|
lineHeight = "tall",
|
|
52
52
|
query,
|
|
53
53
|
markProps,
|
|
@@ -55,7 +55,6 @@ var Highlight = ({
|
|
|
55
55
|
}) => {
|
|
56
56
|
if (typeof text !== "string")
|
|
57
57
|
throw new Error("The children prop of Highlight must be a string");
|
|
58
|
-
fragment != null ? fragment : fragment = isFragment;
|
|
59
58
|
const chunks = useHighlight({ query, text });
|
|
60
59
|
const Component = fragment ? import_react.Fragment : import_typography.Text;
|
|
61
60
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...!fragment ? { lineHeight } : {}, ...rest, children: chunks.map(
|
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","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 fragment?: boolean\n /**\n * If `true`, `Fragment` is used for rendering.\n *\n * @default false\n *\n * @deprecated Use `fragment` instead.\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
|
|
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 fragment?: boolean\n /**\n * If `true`, `Fragment` is used for rendering.\n *\n * @default false\n *\n * @deprecated Use `fragment` instead.\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 fragment = isFragment,\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 = fragment ? Fragment : Text\n\n return (\n <Component {...(!fragment ? { 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;AAyFxB;AA7EV,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;AAoCvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,UAAU;AAAA,EACV,aAAa;AAAA,EACb,WAAW;AAAA,EACX,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,WAAW,wBAAW;AAE5C,SACE,4CAAC,aAAW,GAAI,CAAC,WAAW,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACnD,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.47
|
|
3
|
+
"version": "1.0.47",
|
|
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.16.2
|
|
40
|
-
"@yamada-ui/typography": "1.1.5
|
|
41
|
-
"@yamada-ui/utils": "1.6.2
|
|
39
|
+
"@yamada-ui/core": "1.16.2",
|
|
40
|
+
"@yamada-ui/typography": "1.1.5",
|
|
41
|
+
"@yamada-ui/utils": "1.6.2"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"clean-package": "2.2.0",
|
|
@@ -1 +0,0 @@
|
|
|
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 fragment?: boolean\n /**\n * If `true`, `Fragment` is used for rendering.\n *\n * @default false\n *\n * @deprecated Use `fragment` instead.\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 fragment,\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 fragment ??= isFragment\n\n const chunks = useHighlight({ query, text })\n\n const Component: FC = fragment ? Fragment : Text\n\n return (\n <Component {...(!fragment ? { 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;AA2FxB;AA/EV,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;AAoCvD,IAAM,YAAgC,CAAC;AAAA,EAC5C,UAAU;AAAA,EACV;AAAA,EACA,aAAa;AAAA,EACb,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,MAAI,OAAO,SAAS;AAClB,UAAM,IAAI,MAAM,iDAAiD;AAEnE,2CAAa;AAEb,QAAM,SAAS,aAAa,EAAE,OAAO,KAAK,CAAC;AAE3C,QAAM,YAAgB,WAAW,WAAW;AAE5C,SACE,oBAAC,aAAW,GAAI,CAAC,WAAW,EAAE,WAAW,IAAI,CAAC,GAAK,GAAG,MACnD,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"]}
|