fix(layout): highlight works with empty query (#6357)

.changeset/slow-insects-sing.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/layout": patch
+---
+
+Adjust `Highlight` to not show any highlights if `query` is empty

packages/layout/src/highlight.tsx

@@ -23,12 +23,21 @@ const escapeRegexp = (term: string): string =>
   term.replace(/[|\\{}()[\]^$+*?.-]/g, (char: string) => `\\${char}`)
 
 function buildRegex(query: string[]) {
-  const _query = query.map((text) => escapeRegexp(text.trim()))
+  const _query = query
+    .filter((text) => text.length !== 0)
+    .map((text) => escapeRegexp(text.trim()))
+  if (!_query.length) {
+    return null
+  }
+
   return new RegExp(`(${_query.join("|")})`, "ig")
 }
 
 function highlightWords({ text, query }: Options): Chunk[] {
   const regex = buildRegex(Array.isArray(query) ? query : [query])
+  if (!regex) {
+    return []
+  }
   const result = text.split(regex).filter(Boolean)
   return result.map((str) => ({ text: str, match: regex.test(str) }))
 }

packages/layout/tests/layout.test.tsx

@@ -7,7 +7,16 @@ import {
 } from "@chakra-ui/test-utils"
 import * as React from "react"
 import { ChakraProvider, extendTheme } from "@chakra-ui/react"
-import { Box, Badge, Container, Divider, Flex, Stack } from "../src"
+import {
+  Box,
+  Badge,
+  Container,
+  Divider,
+  Flex,
+  Stack,
+  useHighlight,
+} from "../src"
+import { renderHook } from "@testing-library/react-hooks"
 
 describe("<Box />", () => {
   test("passes a11y test", async () => {
@@ -165,3 +174,44 @@ describe("<Divider />", () => {
     render(<Divider variant="dashed" />)
   })
 })
+
+describe("<Highlight/>", () => {
+  test.each([[], ""])(
+    "useHighlight returns no matches if queries is empty %p ",
+    (query) => {
+      const { result } = renderHook(() =>
+        useHighlight({
+          query: query,
+          text: "this is an ordinary text which should not have any matches",
+        }),
+      )
+      expect(result.current).toHaveLength(0)
+    },
+  )
+
+  test("useHighlight matches correctly", () => {
+    const query = ["", "text"]
+    const { result } = renderHook(() =>
+      useHighlight({
+        query: query,
+        text: "this is an ordinary text which should have one match ",
+      }),
+    )
+    expect(result.current).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "match": false,
+          "text": "this is an ordinary ",
+        },
+        Object {
+          "match": true,
+          "text": "text",
+        },
+        Object {
+          "match": false,
+          "text": " which should have one match ",
+        },
+      ]
+    `)
+  })
+})