[useBreakpoint/useBreakpointValue] API partially broken

As reported on Discord, the return value of useBreakpoint and useBreakpointValue is undefined if no matching breakpoint is currently active; it should fallback to base if given.

Also, the passed argument must currently match array indices: {base: 'column', 0: 'column', 1: 'row', 2: 'row', 3: 'row'} instead of, following the docs, {base: 'column', sm: 'column', md: 'row', lg: 'row', lg: 'row'}.

It’s also broken in the docs; variant is always undefined according to the devtools:

https://codesandbox.io/s/distracted-bird-3ifkq?file=/src/App.tsx

Expected Behavior API works as expected.

Suggested solution(s)

Investigate what goes wrong here.

[with-heart]

@nassimbenkirane See #1467

[nassimbenkirane]

https://github.com/chakra-ui/chakra-ui/blob/3352c105f99c4264d47ee9dc9787b8d6d1334110/packages/media-query/src/create-media-query.ts#L14

In here the descending order sorted breakpoint keys (sorted) used to be ['xl', 'lg', 'md', 'sm', 'base'] when the breakpoint was defined as an object.

Since then the theme breakpoint definition was changed to an array with additional keys, here : https://github.com/chakra-ui/chakra-ui/commit/5677f1a4501e4c862c541fdfcd43fcd49c6f4e84, so now the descending order breakpoint keys look like this ['3', 'xl', '2' ,'lg', '1', 'md', '0', 'base']

So I would either filter out the numerical values to produce the same values as before

sorted.filter(isNaN)

Or adapt the next computation so it gets the actual next values :

const next = breakpoints[sorted[index - 1]] === breakpoints[breakpoint] ? sorted[index - 2] : sorted[index - 1] as string | undefined

First case would yield :

mediaQueries = [
  'xl': (min-width: 400px)',
  'lg': (min-width: 300px) and (max-width: 399.99px)',
  'md': (min-width: 200px) and (max-width: 299.99px)',
  'sm': (min-width: 100px) and (max-width: 199.99px)',
  'base': (min-width: 0px) and (max-width: 99.99px)',
]

Second case would yield :

mediaQueries = [
  '3': (min-width: 400px)',
  'xl': (min-width: 400px)',
  '2': (min-width: 300px) and (max-width: 399.99px)',
  'lg': (min-width: 300px) and (max-width: 399.99px)',
  '1': (min-width: 200px) and (max-width: 299.99px)',
  'md': (min-width: 200px) and (max-width: 299.99px)',
  '0': (min-width: 100px) and (max-width: 199.99px)',
  'sm': (min-width: 100px) and (max-width: 199.99px)',
  'base': (min-width: 0px) and (max-width: 99.99px)',
]

but then it would probably not be enough for useBreakpoint to work, since it tries to find the first breakpoint that matches https://github.com/chakra-ui/chakra-ui/blob/9ed9d3aea959f38198b1ba0d48c24686630aee90/packages/media-query/src/use-breakpoint.ts#L61

I would go with 1) but I don’t know if it can break things elsewhere …

P.S. I didn’t try any of the code so it might be very wrong ^^