Fix/media query default breakpoint unused

[ishowta]

📝 Description

Since matchMedia always returns false during SSR, the code to check defaultBreakpoint was not reached by this refactor
Also, the test was not able to set up the same situation as SSR, so it was not failed.

chakra-ui/packages/media-query/src/use-breakpoint.ts

Lines 27 to 45 in 60fc221

	const [currentBreakpoint, setCurrentBreakpoint] = React.useState(() => {
	if (env.window.matchMedia) {
	// set correct breakpoint on first render
	const matchingBreakpointDetail = queries.find(
	({ query }) => env.window.matchMedia(query).matches,
	)
	return matchingBreakpointDetail?.breakpoint
	}
	if (defaultBreakpoint) {
	// use fallback if available
	const fallbackBreakpointDetail = queries.find(
	({ breakpoint }) => breakpoint === defaultBreakpoint,
	)
	return fallbackBreakpointDetail?.breakpoint
	}
	return undefined
	})

⛳️ Current behavior (updates)

Always return undefined during SSR

🚀 New behavior

return defaultValue when SSR

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

[changeset-bot]

🦋 Changeset detected

Latest commit: 84ca354

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@chakra-ui/media-query	Patch
@chakra-ui/react	Patch
@chakra-ui/skeleton	Patch
@chakra-ui/props-docs	Patch
@chakra-ui/test-utils	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-storybook/4nY5VVPxxpqx2mk8EHYhGCLVDPUt
✅ Preview: https://chakra-ui-storybook-git-fork-aidealab-fix-medi-e4b164-chakra-ui.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 84ca354:

Sandbox	Source
create-react-app-ts	Configuration

[TimKolberger]

Thank you for this PR @ishowta 💖
Especially for the updated test suite!

[TimKolberger]

Thank you again for you work @ishowta

I used the changes to fix another SSR / CSR issue with the useBreakpointValue hook.

Your commits + history are still intact and all credits are going to you for fixing this bug!
I'll close this PR in favor of #5651.

@all-contributors please add @ishowta for code.

[allcontributors]

@TimKolberger

I've put up a pull request to add @ishowta! 🎉