Version 2.2.0

v2.2.0

@chakra-ui/checkbox@2.1.0#

Minor Changes#

Patch Changes#

@chakra-ui/media-query@3.1.0#

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#

@chakra-ui/react@2.2.0#

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#

@chakra-ui/styled-system@2.2.0#

Minor Changes#

Patch Changes#

@chakra-ui/theme@2.1.0#

Minor Changes#

Patch Changes#

@chakra-ui/cli@2.1.0#

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#

storybook-addon@2.0.6#

Patch Changes#

@chakra-ui/accordion@2.0.3#

Patch Changes#

@chakra-ui/alert@2.0.2#

Patch Changes#

@chakra-ui/anatomy@2.0.1#

Patch Changes#

@chakra-ui/avatar@2.0.3#

Patch Changes#

@chakra-ui/breadcrumb@2.0.2#

Patch Changes#

@chakra-ui/button@2.0.2#

Patch Changes#

@chakra-ui/clickable@2.0.2#

Patch Changes#

@chakra-ui/close-button@2.0.2#

Patch Changes#

@chakra-ui/color-mode@2.0.4#

Patch Changes#

@chakra-ui/control-box@2.0.2#

Patch Changes#

@chakra-ui/counter@2.0.2#

Patch Changes#

@chakra-ui/css-reset@2.0.1#

Patch Changes#

@chakra-ui/descendant@3.0.2#

Patch Changes#

@chakra-ui/editable@2.0.2#

Patch Changes#

@chakra-ui/react-env@2.0.2#

Patch Changes#

@chakra-ui/focus-lock@2.0.3#

Patch Changes#

@chakra-ui/form-control@2.0.2#

Patch Changes#

@chakra-ui/hooks@2.0.2#

Patch Changes#

@chakra-ui/icon@3.0.2#

Patch Changes#

@chakra-ui/icons@2.0.2#

Patch Changes#

@chakra-ui/image@2.0.3#

Patch Changes#

@chakra-ui/input@2.0.2#

Patch Changes#

@chakra-ui/layout@2.0.2#

Patch Changes#

@chakra-ui/live-region@2.0.2#

Patch Changes#

@chakra-ui/menu@2.0.3#

Patch Changes#

@chakra-ui/modal@2.0.3#

Patch Changes#

@chakra-ui/number-input@2.0.2#

Patch Changes#

@chakra-ui/pin-input@2.0.3#

Patch Changes#

@chakra-ui/popover@2.0.2#

Patch Changes#

@chakra-ui/popper@3.0.2#

Patch Changes#

@chakra-ui/portal@2.0.2#

Patch Changes#

@chakra-ui/progress@2.0.2#

Patch Changes#

@chakra-ui/provider@2.0.5#

Patch Changes#

@chakra-ui/radio@2.0.2#

Patch Changes#

@chakra-ui/react-utils@2.0.1#

Patch Changes#

@chakra-ui/select@2.0.2#

Patch Changes#

@chakra-ui/skeleton@2.0.5#

Patch Changes#

@chakra-ui/skip-nav@2.0.2#

Patch Changes#

@chakra-ui/slider@2.0.2#

Patch Changes#

@chakra-ui/spinner@2.0.2#

Patch Changes#

@chakra-ui/stat@2.0.2#

Patch Changes#

@chakra-ui/switch@2.0.3#

Patch Changes#

@chakra-ui/system@2.1.2#

Patch Changes#

@chakra-ui/table@2.0.2#

Patch Changes#

@chakra-ui/tabs@2.0.3#

Patch Changes#

@chakra-ui/tag@2.0.2#

Patch Changes#

@chakra-ui/textarea@2.0.3#

Patch Changes#

@chakra-ui/theme-tools@2.0.2#

Patch Changes#

@chakra-ui/toast@2.0.6#

Patch Changes#

@chakra-ui/tooltip@2.0.2#

Patch Changes#

@chakra-ui/transition@2.0.2#

Patch Changes#

@chakra-ui/utils@2.0.2#

Patch Changes#

@chakra-ui/visually-hidden@2.0.2#

Patch Changes#

@chakra-ui/babel-plugin@1.0.3#

Patch Changes#

@chakra-ui/cra-template@2.0.2#

Patch Changes#

@chakra-ui/cra-template-typescript@2.0.2#

Patch Changes#

@chakra-ui/gatsby-plugin@3.0.1#

Patch Changes#

@chakra-ui/props-docs@2.0.6#

Patch Changes#

@chakra-ui/storybook-addon@4.0.0#

Patch Changes#

create-react-app-ts@2.0.6#

Patch Changes#

gatsby-starter-default@1.0.6#

Patch Changes#

chakra-nextjs@2.0.6#

Patch Changes#

chakra-nextjs-ts@2.0.6#

Patch Changes#

vite-ts@1.0.1#

Patch Changes#

@chakra-ui/test-utils@2.0.6#

Patch Changes#

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel