feat(highlight): add case sensitive prop

.changeset/dry-dolls-beam.md

@@ -0,0 +1,6 @@
+---
+"@chakra-ui/react": minor
+"@chakra-ui/props-docs": minor
+---
+
+add caseSensitive property to the Highlight component

packages/components/src/highlight/highlight-words.ts

@@ -5,24 +5,32 @@ export interface Chunk {
 export interface HighlightOptions {
   text: string
   query: string | string[]
+  caseSensitive?: boolean
 }
 
 const escapeRegexp = (term: string): string =>
   term.replace(/[|\\{}()[\]^$+*?.-]/g, (char: string) => `\\${char}`)
 
-function buildRegex(query: string[]) {
+function buildRegex(query: string[], caseSensitive: boolean) {
   const _query = query
     .filter((text) => text.length !== 0)
     .map((text) => escapeRegexp(text.trim()))
   if (!_query.length) {
     return null
   }
 
-  return new RegExp(`(${_query.join("|")})`, "ig")
+  return new RegExp(`(${_query.join("|")})`, `${caseSensitive ? "" : "i"}g`)
 }
 
-export function highlightWords({ text, query }: HighlightOptions): Chunk[] {
-  const regex = buildRegex(Array.isArray(query) ? query : [query])
+export function highlightWords({
+  text,
+  query,
+  caseSensitive = false,
+}: HighlightOptions): Chunk[] {
+  const regex = buildRegex(
+    Array.isArray(query) ? query : [query],
+    caseSensitive,
+  )
   if (!regex) {
     return [{ text, match: false }]
   }

packages/components/src/highlight/highlight.stories.tsx

@@ -84,3 +84,16 @@ export const MarketingExample = () => {
     </Heading>
   )
 }
+
+export const CaseSensitivity = () => (
+  <Text fontWeight="semibold">
+    <Highlight
+      query={["Human", "Dogs"]}
+      styles={{ px: "2", py: "1", rounded: "full", bg: "green.100" }}
+      caseSensitive
+    >
+      Human beings have many kinds of pets, of which dogs are one. Dogs are
+      often called human's best friends.
+    </Highlight>
+  </Text>
+)

packages/components/src/highlight/highlight.tsx

@@ -8,6 +8,7 @@ export interface HighlightProps {
   query: string | string[]
   children: string | ((props: Chunk[]) => React.ReactNode)
   styles?: SystemStyleObject
+  caseSensitive?: boolean
 }
 
 /**
@@ -16,13 +17,13 @@ export interface HighlightProps {
  * @see Docs https://chakra-ui.com/docs/components/highlight
  */
 export function Highlight(props: HighlightProps): JSX.Element {
-  const { children, query, styles } = props
+  const { children, query, styles, caseSensitive } = props
 
   if (typeof children !== "string") {
     throw new Error("The children prop of Highlight must be a string")
   }
 
-  const chunks = useHighlight({ query, text: children })
+  const chunks = useHighlight({ query, text: children, caseSensitive })
 
   return (
     <>

packages/components/src/highlight/use-highlight.test.ts

@@ -43,4 +43,31 @@ describe("useHighlight", () => {
   ]
   `)
   })
+
+  test("useHighlight matches case-sensitively correctly", () => {
+    const query = ["", "text"]
+    const { result } = hooks.render(() =>
+      useHighlight({
+        query: query,
+        text: "Text: this is an ordinary text which should have one match ",
+        caseSensitive: true,
+      }),
+    )
+    expect(result.current).toMatchInlineSnapshot(`
+  [
+    {
+      "match": false,
+      "text": "Text: this is an ordinary ",
+    },
+    {
+      "match": true,
+      "text": "text",
+    },
+    {
+      "match": false,
+      "text": " which should have one match ",
+    },
+  ]
+  `)
+  })
 })

packages/components/src/highlight/use-highlight.ts

@@ -4,6 +4,9 @@ import { HighlightOptions, highlightWords } from "./highlight-words"
 export interface UseHighlightProps extends HighlightOptions {}
 
 export function useHighlight(props: UseHighlightProps) {
-  const { text, query } = props
-  return useMemo(() => highlightWords({ text, query }), [text, query])
+  const { text, query, caseSensitive } = props
+  return useMemo(
+    () => highlightWords({ text, query, caseSensitive }),
+    [text, query, caseSensitive],
+  )
 }

packages/props-docs/generated/highlight.json

@@ -1,11 +1,13 @@
 {
   "Highlight": {
     "query": { "type": "string | string[]", "required": true },
+    "caseSensitive": { "type": "boolean", "required": false },
     "styles": { "type": "SystemStyleObject", "required": false }
   },
   "Mark": {},
   "UseHighlight": {
     "query": { "type": "string | string[]", "required": true },
-    "text": { "type": "string", "required": true }
+    "text": { "type": "string", "required": true },
+    "caseSensitive": { "type": "boolean", "required": false }
   }
 }