v2.2.0.mdx

title	description	releaseUrl	releaseDate	version
Version 2.2.0	Explore the changelog for Chakra UI version 2.2.0. Learn about the latest features, bug fixes, and improvements.	chakra-ui#6125	June 6, 2022	2.2.0

@chakra-ui/[email protected]

Minor Changes

• #6153 bcbfcbcce Thanks @segunadebayo! - Remove annoying focus outline by leveraging focus visible

• #6153 bcbfcbcce Thanks @segunadebayo! - Track focus visible and add data-focus-visible to getCheckboxProps

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd, 7de782f04]

@chakra-ui/[email protected]

Minor Changes

• #6157 95bcaf1ff Thanks @segunadebayo! - Add support for client-side rendered (CSR) apps to get the correct value on first render.

  Affected hooks: useMediaQuery, useBreakpoint, useBreakpointValue.

  These hooks are built work in server-side rendering (SSR) applications by default. You might notice a quick flash of incorrect media query value when you use them.

  If you're creating a CSR-only app, you can now leverage the ssr argument to get the correct value on first render.

  const [isMobile] = useMediaQuery("(max-width: 768px)", {
    // you can now pass `ssr: false`
    ssr: false,
  })
  
  const buttonSize = useBreakpointValue(
    { base: "sm", lg: "md" },
    // you can now pass `ssr: false`
    { ssr: false },
  )
  
  // you can now pass `ssr: false`
  const breakpoint = useBreakpoint({ ssr: false })

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Minor Changes

• #6153 400a2091a Thanks @segunadebayo! - - Ensure components show focus outline only when interacting with the keyboard.

  • Migrate components to use _focusVisible instead of _focus selectors to indicate focus.

  🚨 NOTE: This might be a potential breaking change for consumers who use the extendTheme with the _focus styles. Kindly migrate to _focusVisible.

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [bcbfcbcce, b6083bb16, 95bcaf1ff, 06f29f8cd, 7de782f04, 424090429, bcbfcbcce]

@chakra-ui/[email protected]

Minor Changes

• #6153 bcbfcbcce Thanks @segunadebayo! - Remove annoying focus outline by leveraging focus visible

• #6153 bcbfcbcce Thanks @segunadebayo! - Add support for styling data-focus-visible using the _focusVisible pseudo prop

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Minor Changes

• #6153 bcbfcbcce Thanks @segunadebayo! - Remove annoying focus outline by leveraging focus visible

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Minor Changes

• #6117 154fee7f1 Thanks @TimKolberger! - New watch flag for the tokens command. You can specify a directory path to watch for changes. It defaults to the parent dir of <source>, e.g. src/theme/theme.ts => src/theme.

  > chakra-cli tokens src/theme/theme.ts --watch
  
  > chakra-cli tokens --help
  Usage: chakra-cli tokens [options] <source>
  
  Options:
    --out <path>              output file e.g. node_modules/@chakra-ui/styled-system/dist/declarations/src/theming.types.d.ts
    --strict-component-types  Generate strict types for props variant and size
    --watch [path]            Watch directory for changes and rebuild
    -h, --help                display help for command
  

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6117 5ce803dde Thanks @TimKolberger! - Fixed an issue where the tokens command failed with SyntaxError: Undefined label 'e'.

• Updated dependencies [06f29f8cd]

[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd, 06a09312a]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd, 7de782f04]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• #6155 b6083bb16 Thanks @itkrt2y! - Fix shifting screen when opening modal

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd, 7de782f04]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd, 7de782f04]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6119 424090429 Thanks @itkrt2y! - Fix a bug in chromium browsers where the modal position would change when focusing on the radio button in the modal which has some long content.

• Updated dependencies [06f29f8cd, 7de782f04]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd, 7de782f04]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [95bcaf1ff, 06f29f8cd, 7de782f04]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [bcbfcbcce, 06f29f8cd, bcbfcbcce]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [bcbfcbcce, 06f29f8cd, bcbfcbcce]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6137 7de782f04 Thanks @Patrick-Ullrich! - Improve error messaging around style provider factory by creating a custom createStylesContext function.

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd, 7de782f04]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [bcbfcbcce, 06f29f8cd, 7de782f04]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [06f29f8cd]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [bcbfcbcce, 400a2091a, 06f29f8cd, bcbfcbcce]

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• #6152 06a09312a Thanks @itkrt2y! - Update storybook dependency

• Updated dependencies [400a2091a, 06f29f8cd]

[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [400a2091a, 06f29f8cd]

[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [400a2091a, 06f29f8cd]

[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [400a2091a, 06f29f8cd]

[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [400a2091a, 06f29f8cd]

[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

@chakra-ui/[email protected]

Patch Changes

• 06f29f8cd Thanks @segunadebayo! - Bump all packages to resolve deps issues

• Updated dependencies [400a2091a, 06f29f8cd]