Version 2.5.0
v2.5.0@chakra-ui/react@2.5.0#
Minor Changes#
-
231c92ef0
Thanks @segunadebayo! - ExportFocusLock
for easy consumption -
12811f264
Thanks @segunadebayo! - - AddhideFrom
andhideBelow
style props to styled system. This allows more control over when to show/hide elements without requiring explicitdisplay: none
every time.- Remove experimental style props
experimental_spaceX
andexperimental_spaceY
- Remove experimental style props
Patch Changes#
- Updated dependencies
[
91130dc89
,3548c6fb7
,b078cfc44
,2e07db479
,403513380
,6619ee1a9
,12811f264
,db3fa510f
]
@chakra-ui/styled-system@2.6.0#
Minor Changes#
-
12811f264
Thanks @segunadebayo! - - AddhideFrom
andhideBelow
style props to styled system. This allows more control over when to show/hide elements without requiring explicitdisplay: none
every time.- Remove experimental style props
experimental_spaceX
andexperimental_spaceY
- Remove experimental style props
Patch Changes#
- #7318
3548c6fb7
Thanks @idootop! - Update the regex ofparseGradient
to make it works on legacy Firefox browser.
@chakra-ui/system@2.5.0#
Minor Changes#
-
12811f264
Thanks @segunadebayo! - - AddhideFrom
andhideBelow
style props to styled system. This allows more control over when to show/hide elements without requiring explicitdisplay: none
every time.- Remove experimental style props
experimental_spaceX
andexperimental_spaceY
- Remove experimental style props
Patch Changes#
@chakra-ui/accordion@2.1.9#
Patch Changes#
-
91130dc89
Thanks @segunadebayo! - Fix regression whereExpandedIndex
was no longer exported.Note: this will be removed in future versions.
-
Updated dependencies
@chakra-ui/avatar@2.2.5#
Patch Changes#
- #7276
6619ee1a9
Thanks @LuizCristino! - AvatarGroup: Fixed issue where settingmax
to0
lead to unexpected behavior. - Updated dependencies
@chakra-ui/input@2.0.20#
Patch Changes#
-
#7339
db3fa510f
Thanks @TylerAPfledderer! - Adddata-group
attribute toInputGroup
component.This will allow uniform styling changes for
Input
,InputElement
, andInputAddon
to occur when detecting state changes such as:hover
and:focus-within
.Example gif below with a left and right
InputElement
-
Updated dependencies
@chakra-ui/layout@2.1.16#
Patch Changes#
- Updated dependencies
[
12811f264
]
@chakra-ui/media-query@3.2.12#
Patch Changes#
- Updated dependencies
[
12811f264
]
@chakra-ui/menu@2.1.9#
Patch Changes#
- #7315
403513380
Thanks @mantariksh! - Fix issue whereMenu
schedules focus too frequently and leads to infinite rerenders. - Updated dependencies
@chakra-ui/provider@2.1.1#
Patch Changes#
- Updated dependencies
[
12811f264
]
@chakra-ui/skeleton@2.0.24#
Patch Changes#
- #7300
b078cfc44
Thanks @GKosheev! - Fix regression whereSkeletonText
component doesn't show its shimmer animation. - Updated dependencies
@chakra-ui/slider@2.0.21#
Patch Changes#
- Updated dependencies
[
ba7be75c2
]
@chakra-ui/toast@6.0.0#
Patch Changes#
@chakra-ui/react-use-size@2.0.9#
Patch Changes#
@chakra-ui/next-js@2.0.1#
Patch Changes#
-
#7329
b2b5d3545
Thanks @segunadebayo! - Introducing a new Next.js integration package that provides a smoother experience when using Chakra UI in your Next.js 13 apps.This package provides 2 main features:
-
CacheProvider: This component composes the Emotion.js' cache provider with the
useServerInsertedHTML
hook fromnext/navigation
.This is necessary to ensure that computed styles are included in the initial server payload (during streaming).
The
use client
directive is still required to be added to the top of the page-related file. This is a limitation of CSS-in-JS libraries and Emotion for now.Note: Make sure to include the
<head>
tag in your layout component otherwise it will not work.// app/layout.tsx"use client"import { CacheProvider } from "@chakra-ui/next-js"import { ChakraProvider } from "@chakra-ui/react"export default function RootLayout({children,}: {children: React.ReactNode,}) {return (<html lang="en"><head /><body><CacheProvider><ChakraProvider>{children}</ChakraProvider></CacheProvider></body></html>)} -
Link: This component combines the functionality of the Next.js
Link
and Chakra UILink
components.
// app/page.tsx"use client"import { Link } from "@chakra-ui/next-js"export default function Page() {return (<Link href="/about" color="blue.400" _hover={{ color: "blue.500" }}>About</Link>)}Support for
next/image
coming soon! -
@chakra-ui/hooks@2.1.6#
Patch Changes#
2e07db479
Thanks @segunadebayo! - useClipboard: Improve reactivity by ensuring it uses the latest reference of the passedvalue
@chakra-ui/breakpoint-utils@2.0.8#
Patch Changes#
12811f264
Thanks @segunadebayo! - Addget
method to breakpoint return to query details of a specific breakpoint
@chakra-ui/theme-utils@2.0.10#
Patch Changes#
@chakra-ui/test-utils@2.0.34#
Patch Changes#
- Updated dependencies