fix(media-query): change logic of judging if break point values has s…

…pecific break point key (#6308)

.changeset/moody-planets-float.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/media-query": minor
+---
+
+fix getClosestValue to return nullable closest break point value

packages/media-query/src/media-query.utils.ts

@@ -16,7 +16,7 @@ export function getClosestValue<T = any>(
   while (stopIndex >= 0) {
     const key = breakpoints[stopIndex]
 
-    if (values[key] != null) {
+    if (values.hasOwnProperty(key)) {
       index = stopIndex
       break
     }

packages/media-query/tests/utils.test.ts

@@ -8,6 +8,12 @@ test("should get the closest responsive value", () => {
   expect(getClosestValue({ sm: "40px", md: "500px" }, "base")).toBe(undefined)
   expect(getClosestValue({}, "")).toBe(undefined)
 })
+test("should get the closest responsive value even if values contains nullable value", () => {
+  expect(getClosestValue({ base: "40px", md: undefined }, "xl")).toBe(undefined)
+  expect(getClosestValue({ base: "40px", md: null }, "xl")).toBe(null)
+  expect(getClosestValue({ sm: "40px", md: undefined }, "xl")).toBe(undefined)
+  expect(getClosestValue({ sm: "40px", md: null }, "xl")).toBe(null)
+})
 test("should get the closest responsive value with custom breakpoints", () => {
   const customBreakPoints = ["base", "sm", "md", "custom", "xl"]
   expect(