chore(deps): update dependency @chakra-ui/react to v3 #466

renovate · 2024-10-25T20:05:32Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@chakra-ui/react (source)	`^2.10.3` -> `^3.0.1`

Release Notes

chakra-ui/chakra-ui (@chakra-ui/react)

`v3.0.1`

Compare Source

Patch Changes

c0020c9
Thanks @segunadebayo! - Fix issue where
using keyframe interpolation in animation prop doesn't work
7d4f898
Thanks @segunadebayo! - Fix issue where
scrollBehavior=outside doesn't allow scrolling outside the dialog content

`v3.0.0`

Major Changes

#8153
7b6e66a
Thanks @segunadebayo! - Prepares the ground
for the next version Chakra that leverages Ark UI.

User Facing
- Consolidate all component packages into a single package
- Remove all deprecated components and APIs
- Simplify the Changelogs for all v2 releases
Infrastructure
- Simplify the repo infrastructure and release process
- Migrate from jest to vitest
- Migrate from tsup to custom rollup setup for better bundling strategy
#8815
806be96
Thanks @isBatak! - Remove the @chakra-ui/hooks
package in favour of using dedicated, robust libraries like react-use and
usehooks-ts

Minor Changes

#8121
170198f
Thanks @kkieninger! - ### Fixed
- Fix hard-coded z-index for Menu in favor of one defined from the theme
- Fix problem with leading and trailing spaces when getting initials for the
  Avatar component
- Suppress unnecessary re-renders of Checkbox and Radio component

Added

Add CSS accentColor property to style props
Add support for asChild in chakra factory
Export toastStore from toast component
Upgrade framer-motion to allow for skipAnimations
Add component namespace to reduce imports and provide better composition
Modal, Drawer: Add default preserveScrollBarGap

Changed

Redesign the component themes and anatomy

192c6b1
Thanks @segunadebayo! - Add new fieldset
component
07b04b1
Thanks @segunadebayo! - - [NEW]: Add
RatingGroup, SegmentControl
- [NEW]: Add EmptyState component for empty states
- [NEW]: Add RadioCard and CheckboxCard components for card-based
  selection
#8568
5fd993b
Thanks @isBatak! - Add Collapsible recipe with
default open/close animation
3fc49ca
Thanks @segunadebayo! - Add support for
FormatNumber and FormatByte components

3ccbbdf
Thanks @segunadebayo! - ### Motion Styles

Add support for motionStyle props.

The idea is to pair them with text styles and layer styles to create this
three-part mixin that can make your styles a lot cleaner.

Motion styles focus solely on animations, allowing you to orchestrate
animation properties.

import { defineMotionStyles } from "@&#8203;chakra-ui/react"

export const motionStyles = defineMotionStyles({
  "slide-fade-in": {
    value: {
      transformOrigin: "var(--transform-origin)",
      animationDuration: "fast",
      "&[data-placement^=top]": {
        animationName: "slide-from-top, fade-in",
      },
      "&[data-placement^=bottom]": {
        animationName: "slide-from-bottom, fade-in",
      },
      "&[data-placement^=left]": {
        animationName: "slide-from-left, fade-in",
      },
      "&[data-placement^=right]": {
        animationName: "slide-from-right, fade-in",
      },
    },
  },
})

Built-in Keyframe Animations

Chakra new provides built-in keyframe animations that you can use to create
your own motion styles.

Slide: slide-from-top, slide-from-bottom, slide-from-left,
slide-from-right, slide-to-top, slide-to-bottom, slide-to-left,
slide-to-right

Slide Full: slide-from-top-full, slide-from-bottom-full,
slide-from-left-full, slide-from-right-full, slide-to-top-full,
slide-to-bottom-full, slide-to-left-full, slide-to-right-full

Fade: fade-in, fade-out

Scale: scale-in, scale-out

You can compose these animations using the animationName property in your
motion styles to create really cool animations. No JS required.

<Box animationName="slide-from-top, fade-in" animationDuration="fast">
  Slide from top and fade in
</Box>

3ccbbdf
Thanks @segunadebayo! - Add support for
built-in layer styles to help prototype faster with automatic dark mode.
Paired with colorPalette, you can create beautiful designs with little code
that adapts to dark mode automatically.

Fill Layer Styles: fill.muted, fill.solid, fill.surface
```
<Box layerStyle="fill.muted" colorPalette="red">
  This is a subtle fill layer
</Box>
```
Border Layer Styles: outline.muted, outline.solid
```
<Box layerStyle="outline.muted" colorPalette="red">
  This is a subtle outline layer
</Box>
```
Indicator Styles: indicator.top, indicator.end, indicator.bottom,
indicator.start
```
<Box layerStyle="indicator.top" colorPalette="red">
  This is a top indicator layer
</Box>
```
Disabled Styles: disabled
```
<Box _disabled={{ layerStyle: "disabled" }}>Disabled Button</Box>
```
You can combine these layer styles to create very complex designs with little
code.
```
<Box
  layerStyle="fill.muted"
  _hover={{ layerStyle: "outline.solid" }}
  colorPalette="red"
>
  This is a complex layer
</Box>
```
de9c0a0
Thanks @segunadebayo! - Add DataList
component
e77a9b8
Thanks @segunadebayo! - - Add new Timeline
component to presenting chronological information or activities.
- Trim generated className in the DOM.
- Add neutral status to Alert component
763329e
Thanks @segunadebayo! - Add preset and
preset-base entrypoints.
- The preset entrypoint exposes the default theme and recipes for Chakra.
- The preset-base entrypoint exposes the base utilities and conditions used
  internally.
925cfd9
Thanks @segunadebayo! - Add ActionBar,
Status, Rating, Pagination components
e9a1537
Thanks @segunadebayo! - BREAKING: Change
signature of useRecipe, useSlotRecipe, createSlotRecipeContext

createSlotRecipeContext

Before:

const { withProvider, withContext } = createSlotRecipeContext("accordion")

After:

const { withProvider, withContext } = createSlotRecipeContext({
  key: "accordion",
})

useSlotRecipe

Before:

const recipe = useSlotRecipe("accordion")

After:

const recipe = useSlotRecipe({ key: "accordion" })

3908155
Thanks @segunadebayo! - Rename
createStyleContext to createSlotRecipeContext
c654ee3
Thanks @segunadebayo! - Improve performance
of styled components to avoid unneeded re-renders.
edec8f7
Thanks @segunadebayo! - Add clipboard
composition
5093e18
Thanks @segunadebayo! - Add cursor pointer
to button
4c6838c
Thanks @segunadebayo! - - Rename onLabel
and offLabel to trackLabel
- Add support for thumbLabel prop for rendering an icon within thumb
#8393
623e558
Thanks @segunadebayo! - - Integrate Ark UI
components to reduce maintenance surface.
- Add FileUpload component
- Remove trigger=hover in favor of HoverCard
- Replace Tooltip, Popover and HoverCard with those from Ark UI
945a777
Thanks @segunadebayo! - BREAKING: Integrate
Ark v4. This mostly affects the custom select component that requires the use
of createListCollection now.
c26acf0
Thanks @segunadebayo! - Add support for
cursor token type
55c0839
Thanks @segunadebayo! - Move the Prose
component to snippets so it can be customized by the user.
952647a
Thanks @segunadebayo! - Add CardTitle and
CardDescription components

f4762bf
Thanks @segunadebayo! - Add support for
merging multiple system configs into one within createSystem

Before:

const config = mergeConfigs(defaultConfig, customConfig)
export const system = createSystem(config)

After:

const system = createSystem(defaultConfig, customConfig)

#8218
a89c598
Thanks @segunadebayo! - Add support for
custom theme conditions or pseudo props via theme.conditions
```
// theme.ts

const theme = extendTheme({
  conditions: {
    _closed: "[data-state='closed']", // pseudo prop
  },
})
```
This allows you to use the pseudo prop in your components
```
<Box data-state="closed" _closed={{ bg: "red.200" }}>
  This box is closed
</Box>
```
For TypeScript users, you need to use the Chakra CLI to generate the types
for your custom conditions.
```
pnpm chakra-cli tokens src/theme/index.ts
```
c2f45ca
Thanks @segunadebayo! - Rename
Fieldset.Control to Fieldset.Content
1738b90
Thanks @segunadebayo! - - Icon: Set
asChild to true by default to reduce repetition
- All components
  - Ensure consistent sizing convention (units of 4px). Smaller elements start
    at 20px, larger elements start at 40px
  - Ensure focus ring matches the colorPalette
- Input, Textarea: Rename filled variant to subtle
- Tags: Add new Tag.StartElement and Tag.EndElement components to allow
  for easier styling of the start and end elements

3ccbbdf
Thanks @segunadebayo! - Redesign Stepper
component. It's now called Steps and manages the state internally, no need
to use useSteps anymore.

We've also improved the accessibility of the component by leveraging the tabs
pattern and adding the required ARIA attributes.

<Steps.Root defaultIndex={0} count={2}>
  <Steps.List>
    <Steps.Item index={0}>
      <Steps.Trigger>
        <Steps.Title>Step 1</Steps.Title>
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>

    <Steps.Item index={1}>
      <Steps.Trigger>
        <Steps.Title>Step 2</Steps.Title>
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
  </Steps.List>

  <Steps.Content index={0}>Step 1</Steps.Content>
  <Steps.Content index={1}>Step 2</Steps.Content>
  <Steps.CompleteContent>Complete</Steps.CompleteContent>
</Steps.Root>

Using the CLI, you can also scaffold an already composed stepper component

chakra composition add steps

548470d
Thanks @segunadebayo! - Add custom select
from Ark UI and design recipe
8b110da
Thanks @segunadebayo! - Support inlining
recipe in createRecipeContext and createSlotRecipeContext for better DX
when shipping libraries based on Chakra.

This reduces the need for using the Chakra CLI to generate types for custom
components.
05793a2
Thanks @segunadebayo! - - Make gray the
default color palette.
- Change avatar sm size to 36px for consistency.
- Move bg for outline component variants.

43f2c7d
Thanks @segunadebayo! - - CheckboxCard
[New]

Add support for a new CheckboxCard component that can be used to render a
card with a checkbox.

<CheckboxCard.Root>
  <CheckboxCard.Control>
    <Stack gap="0" flex="1">
      <CheckboxCard.Label>Checkbox</CheckboxCard.Label>
      <Text>Some description</Text>
    </Stack>

    <CheckboxCard.HiddenInput />
    <CheckboxCard.Indicator />
  </CheckboxCard.Control>
</CheckboxCard.Root>

Checkmark [New]

Add new checkmark component for rendering a static checkmark icon with the
checked, disabled, and indeterminate state baked in.

<Stack>
  <Checkmark />
  <Checkmark checked />
  <Checkmark indeterminate />
  <Checkmark disabled />
  <Checkmark checked disabled />
  <Checkmark indeterminate disabled />
</Stack>

EmptyState [New]

Add new EmptyState component for rendering an empty state message with a
title, description, and optional action button.

<EmptyState.Root>
  <EmptyState.Content>
    <EmptyState.Indicator>
      <HiTemplate />
    </EmptyState.Indicator>

    <VStack textAlign="center">
      <Text fontWeight="medium">No template found</Text>
      <Text fontSize="sm" color="fg.muted">
        Try creating a new template with the button below
      </Text>
    </VStack>

    <Button variant="outline">
      <HiPlus /> Create Template
    </Button>
  </EmptyState.Content>
</EmptyState.Root>

e119ae9
Thanks @segunadebayo! - Rename
motionStyle to animationStyle for better intuitiveness
#8575
d4522d9
Thanks @isBatak! - Align theme recipe name with
panda
3ccbbdf
Thanks @segunadebayo! - Add support for
focusRing and focusRingColor style props that allow to quickly style focus
visible state of form controls.

The focus ring values can be either extend or contain
```
<Box asChild focusRing="extend" focusRingColor="pink.500">
  <input type="text" />
</Box>
```
4ff153f
Thanks @segunadebayo! - Speed up
intellisence for style props, and add support for strictTokens in the CLI.
47a8a9e
Thanks @segunadebayo! - - Add inherit to
Spinner recipe size
- Refactor button and link button snippets
b6d1d0d
Thanks @segunadebayo! - Simplify spinner
component to use less custom props.
- Removed emptyColor, prefer to use --spinner-track-color
- Removed speed, prefer to use animationDuration
- Removed thickness, prefer to use borderWidth
#8218
a89c598
Thanks @segunadebayo! - Add support for
_open and _closed pseudo props for styling their respective selectors.
- _open: &[data-state=open], &[open]
- _closed: &[data-state=closed]
- _groupOpen: [data-group][data-state=open] &
- _groupClosed: [data-group][data-state=closed] &
Extend the existing pseudo props to support new selectors`
- _placeholder now supports &[data-placeholder]
- _placeholderShow now supports &[data-placeholder-shown]
- _fullscreen now supports &[data-fullscreen]
- _empty now supports &[data-empty]
- _expanded now supports &[data-state=expanded]
- _checked now supports &[data-state-checked]
#8569
eb26857
Thanks @isBatak! - Fix the boxSize type to
allow number values.
47b3b5a
Thanks @segunadebayo! - Support array in
conditions object. This matches the API in Panda CSS and allow users to define
complex selectors like media hover queries.
e4f2df0
Thanks @segunadebayo! - Add Prose
component to help style markdown content.
c243698
Thanks @segunadebayo! - - Add
referrerPolicy to Avatar component.
- Add CheckboxDescription, CheckboxCardDescription and RadioCardDescription
- Swap muted and subtle color tokens

Patch Changes

be98566
Thanks @segunadebayo! - Fix checkbox and
toast on mobile
c941971
Thanks @segunadebayo! - - Convert Tabs
component to use Ark UI
- Convert NumberInput to use Ark UI
#8795
4408573
Thanks @TylerAPfledderer! - Adds style
prop names to LayerStyleProperty union type
83366c4
Thanks @segunadebayo! - - Fix regression in
mergeConfigs
- Decompose Field components into smaller components, which can be
  optionally used with Field
  - Label which is a generic label component
  - ErrorMessage which is a generic error message component
  - HelpText which is a generic help text component
- Refactor components to use Ark UI: Avatar, Progress, CircularProgress,
  PinInput
0ae054d
Thanks @segunadebayo! - Fix issue where
hideFrom and hideBelow doesn't show any autocompletions
0a03bcc
Thanks @segunadebayo! - - Fix circular
progress element types
- Ensure consistent exports in components
#8617
7e9fbf0
Thanks @isBatak! - Refactor text-styles to use
tokens instead of raw values.
6d4cbbe
Thanks @segunadebayo! - Fix ES module
interop for @emotion/is-prop-value that makes Jest throw error.
#8857
fdc2b9b
Thanks @stevensecreti! - update mapObject
util to not call fn provided on nullish values
788f493
Thanks @segunadebayo! - Fix issue where
media query css order is inconsistent with v2
87cf70c
Thanks @segunadebayo! - Revert text recipe
to prevent color regressions
#8740
d5a225f
Thanks @Pagebakers! - Use correct extension
for ESM exports
#8905
807a581
Thanks @stevensecreti! - Added transform
function to backgroundClip to appropriately handle 'text' value
#8739
651561b
Thanks @Pagebakers! - Added /anatomy to
exports
#8792
4dd77ec
Thanks @TylerAPfledderer! - Updates the
exposed list of slot anatomy to ensure all anatomy is included for use in
type-checking extend recipe configs.
bffb68f
Thanks @segunadebayo! - - Pagination:
Fix issue page props were not forwarded correctly.
- PinInput: Fix issue mask props were not forwarded correctly.
#8601
1867d66
Thanks @isBatak! - Fix blur property token
conversion to CSS variable.
32a454d
Thanks @segunadebayo! - Add missing
use client directives to several components
#8854
388716d
Thanks @codebutler! - Fix issue where target
was not passed to link overlay
#8475
9224f4e
Thanks @ryo-manba! - Add aria-current
attribute to stepper

Configuration

📅 Schedule: Branch creation - "after 1pm on Friday" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

chore(deps): update dependency @chakra-ui/react to v3

deaecb6

renovate bot added the deploy Enables frontend deployment on PRs label Oct 25, 2024

renovate bot requested a review from hiletmis October 25, 2024 20:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(deps): update dependency @chakra-ui/react to v3 #466

chore(deps): update dependency @chakra-ui/react to v3 #466

renovate bot commented Oct 25, 2024

chore(deps): update dependency @chakra-ui/react to v3 #466

Are you sure you want to change the base?

chore(deps): update dependency @chakra-ui/react to v3 #466

Conversation

renovate bot commented Oct 25, 2024

Release Notes

v3.0.1

Patch Changes

v3.0.0

Major Changes

Minor Changes

Added

Changed

Built-in Keyframe Animations

createSlotRecipeContext

useSlotRecipe

Patch Changes

Configuration

`v3.0.1`

`v3.0.0`