fix: use sorted breakpoints in useBreakpointValue (#5625)

* fix: useBreakpointValue with custom breakpoints
Closes #5555

* fix: use ChakraProvider in Skeleton test

.changeset/wicked-turkeys-travel.md

@@ -0,0 +1,6 @@
+---
+"@chakra-ui/media-query": patch
+---
+
+Fixed an issue where the `useBreakpointValue` hook did not work as expected with
+custom breakpoints

packages/media-query/src/use-breakpoint-value.ts

@@ -27,9 +27,9 @@ export function useBreakpointValue<T = any>(
   if (!breakpoint) return undefined
 
   /**
-   * Get the non-number breakpoint keys from the provided breakpoints
+   * Get the sorted breakpoint keys from the provided breakpoints
    */
-  const breakpoints = Object.keys(theme.breakpoints)
+  const breakpoints = Array.from(theme.__breakpoints?.keys || [])
 
   const obj = isArray(values)
     ? fromEntries<Partial<Record<string, T>>>(

packages/media-query/stories/media-query.stories.tsx

@@ -2,6 +2,7 @@ import { EnvironmentProvider } from "@chakra-ui/react-env"
 import { chakra } from "@chakra-ui/system"
 import * as React from "react"
 import Frame from "react-frame-component"
+import { ChakraProvider, extendTheme } from "@chakra-ui/react"
 import { Hide, Show, useBreakpoint, useBreakpointValue } from "../src"
 
 export default {
@@ -75,3 +76,27 @@ const BreakpointValue = () => {
   })
   return <p>Breakpoint: {breakpoint}</p>
 }
+
+const NestedBreakpointValueWithCustomBreakpoint = () => {
+  const bp = useBreakpoint()
+  const isMobile = useBreakpointValue({
+    base: true,
+    md: false,
+  })
+
+  return (
+    <>
+      <p>Breakpoint: {bp}</p>
+      <p>isMobile: {String(isMobile)}</p>
+      <i>Expect isMobile to be true util "md" breakpoint is hit</i>
+    </>
+  )
+}
+
+export const BreakpointValueWithCustomBreakpoint = () => (
+  <ChakraProvider
+    theme={extendTheme({ breakpoints: { preSm: "28em", postSm: "36em" } })}
+  >
+    <NestedBreakpointValueWithCustomBreakpoint />
+  </ChakraProvider>
+)

packages/skeleton/tests/skeleton.test.tsx

@@ -1,9 +1,11 @@
 import * as React from "react"
-import { ThemeProvider } from "@chakra-ui/system"
 import { render } from "@chakra-ui/test-utils"
 import MatchMediaMock from "jest-matchmedia-mock"
+import { extendTheme, ChakraProvider } from "@chakra-ui/react"
 import { Skeleton, SkeletonText } from "../src"
-import { queries, theme } from "./test-data"
+import { queries, theme as testTheme } from "./test-data"
+
+const theme = extendTheme(testTheme)
 
 let matchMedia: any
 
@@ -37,9 +39,9 @@ test("Change in parent state does not cause animation if already loaded", () =>
       setState(true)
     }, [])
     return (
-      <ThemeProvider theme={theme}>
+      <ChakraProvider theme={theme}>
         <Skeleton isLoaded />
-      </ThemeProvider>
+      </ChakraProvider>
     )
   }
 
@@ -53,5 +55,5 @@ test("Change in parent state does not cause animation if already loaded", () =>
 
 function renderWithQuery(query: string, ui: React.ReactElement) {
   matchMedia.useMediaQuery(query)
-  return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>)
+  return render(<ChakraProvider theme={theme}>{ui}</ChakraProvider>)
 }

packages/skeleton/tests/test-data.ts

@@ -6,6 +6,7 @@ export const breakpoints = createBreakpoints({
   md: "200px",
   lg: "300px",
   xl: "400px",
+  "2xl": "600px",
   customBreakpoint: "500px",
 })