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

renovate · 2024-12-16T03:22:49Z

This PR contains the following updates:

Package	Change	Age	Confidence
@chakra-ui/react (source)	`^2.8.1` -> `^3.30.0`

Warning

Some dependencies could not be looked up. Check the Dependency Dashboard for more information.

Release Notes

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

`v3.30.0`

Compare Source

Minor Changes

#10425
0168a04
Thanks @Adebesin-Cell! - - Splitter
[NEW]: Introduce new resizable splitter component

<Splitter.Root panels={[{ id: "a" }, { id: "b" }]}>
  <Splitter.Panel id="a">Panel A</Splitter.Panel>
  <Splitter.ResizeTrigger id="a:b" />
  <Splitter.Panel id="b">Panel B</Splitter.Panel>
</Splitter.Root>

7b9aa97
Thanks @segunadebayo! - ### Added
- Carousel: Added autoSize prop for variable width/height slides

Changed

useListCollection: initialItems now accepts readonly arrays
Types: Exported InteractOutsideEvent, FocusOutsideEvent,
PointerDownOutsideEvent types

Fixed

Carousel: Fixed dragging after tab switch/scroll and mouse wheel scroll
with allowMouseDrag
Combobox:
- Fixed onHighlightChange not firing when filtered to empty;
- Fixed focus stealing in controlled mode
- Removed problematic aria-hidden behavior
File Upload: Fixed non-interactive children in dropzone not opening file
picker
Radio Group: Fixed inconsistent data-focus-visible/data-focus
attributes; fixed indicator showing before rect resolved (with Tabs)
Tabs: Fixed indicator showing before rect resolved (with Radio Group);
fixed position not updating when inactive tabs resize
503e11a
Thanks @segunadebayo! - ### Added
- Semantic Tokens: Add new border semantic token to all color palettes
  (gray.300/gray.700 for gray, color.500/color.400 for colored
  palettes) to improve outline component appearance

Changed

Button, Badge, Tag, Checkbox: Update outline variants to use
colorPalette.border instead of colorPalette.muted or global border
token for better appearance, especially for non-gray color palettes.

NOTE: All changes include CSS variable fallbacks to
colorPalette.muted for backward compatibility.

Patch Changes

fd15569
Thanks @segunadebayo! - - HoverCard,
Tooltip, Popover: Fix arrow direction in RTL layouts
81ec4e7
Thanks @segunadebayo! - - TagsInput:
Fix overflow issue where very long tags would overflow the container instead
of truncating with ellipsis.
- CheckboxGroup: Fix type issue where CheckboxGroupProps could not be
  passed to the CheckboxGroup component.

`v3.29.0`

Compare Source

Minor Changes

#10391
1580aeb
Thanks @Adebesin-Cell! - feat: add
carousel component

Patch Changes

69aabbf
Thanks @segunadebayo! - - Combobox:
Refactor recipe for smarter padding management to prevent input text from
overflowing unto triggers
- CodeBlock: Add missing use client directive

`v3.28.1`

Compare Source

Patch Changes

fad9a2e
Thanks @segunadebayo! - Fix CodeBlock right
padding when scrolling long code lines horizontally
37d166a
Thanks @segunadebayo! - - Tabs:
Refactor to use css variables for styling indicator (--tabs-indicator-bg )
for better customization.
- SegmentedControl: Refactor to use css variables for styling indicator
  (--segment-indicator-bg and --segment-indicator-shadow) for better
  customization.
7067c95
Thanks @segunadebayo! - Fix Shadow DOM and
Web Component selector handling in globalCss. The :host,
:host-context(), and ::slotted() pseudo-classes now correctly transform to
top-level selectors with case-insensitive matching.
c7060de
Thanks @segunadebayo! - Improve
styled-system performance with multiple optimizations
- Token cloning: Replace structuredClone() with efficient shallow clone
  (75x faster)
- Memoization: Improve cache key generation with efficient hashing and LRU
  cache (1.4x faster baseline, up to 585x faster for cached operations)
- Object allocation: Use singleton empty objects instead of creating new
  ones in hot paths
- Array operations: Optimize responsive value normalization with for loops
  instead of reduce
- Performance impact: Significant improvement in style computation speed
  with the memoization layer providing 100-500x gains for repeated operations

`v3.28.0`

Compare Source

Minor Changes

#10374
e62bae7
Thanks @Adebesin-Cell! - Add new
TagsInput component for entering multiple values as tags with features like
tag creation, deletion, and keyboard navigation.

import { Span, TagsInput } from "@&#8203;chakra-ui/react"

export const TagsInputBasic = () => {
  return (
    <TagsInput.Root defaultValue={["React", "Chakra", "TypeScript"]}>
      <TagsInput.Label>Tags</TagsInput.Label>
      <TagsInput.Control>
        <TagsInput.Items />
        <TagsInput.Input placeholder="Add tag..." />
      </TagsInput.Control>
    </TagsInput.Root>
  )
}

bf31e2a
Thanks @segunadebayo! - - Checkbox
- Fix issue where setting initial checked state to indeterminate doesn't
  work
- Ensure api.checkedState returns the correct checked state
- Collapsible
  - Add support for collapsedHeight and collapsedWidth props to control
    the dimensions of the collapsible content when in its collapsed state
  - Fix issue where dir prop value doesn't get applied correctly
  - Update the recipe styling as needed (when data-has-collapsed-size is
    set)
- Combobox: Fix issue where controlled single-select combobox does not
  propagate its initial value to inputValue
- Dialog, Popover: In modal mode, allow elements referenced by
  aria-controls to be included in the focus trap scope
- Listbox: Fix issue where pressing Enter key when no highlighted item
  still calls event.preventDefault()
- Number Input: Fix cursor jumping to end when typing in the middle with
  formatOptions like style: "currency"
- Pagination: Add getPageUrl prop for generating href attributes when
  using pagination as links
- Pin Input: Fix issue where keyboard shortcuts Cmd+Backspace and
  Cmd+Delete would insert "undefined" instead of clearing the field
- Scroll Area
  - Fix horizontal scrollbar positioning on Safari in RTL mode
  - Fix issue where resize tracking was not observing the root element
- Select: Fix accessibility violation where the required state was not set
  correctly on the trigger
- Slider: Fix issue where slider continues dragging when disabled during
  drag operation
- Switch: Fix issue where data-active is inconsistently applied when
  disabled state changes at runtime
- Tabs: Refactor to use getBoundingClientRect() for precise indicator
  positioning

`v3.27.1`

Compare Source

Patch Changes

e1774c8
Thanks @segunadebayo! - Expose
Collapsible.Indicator component to provide visual indicator for collapsible
state
f9d66f4
Thanks @segunadebayo! - - CodeBlock
- Fix issue in diff mode where the wrong lines were being highlighted
- Fix highlight.js adapter to properly handle diff attributes for
  added/removed lines

f26e863
Thanks @segunadebayo! - - Styled
System:

Fix issue where bracket syntax for responsive styles didn't work in recipe
variants

// This now works correctly
const recipe = defineRecipe({
  variants: {
    variant: {
      primary: {
        color: ["red", "green"], // ✅ Now converts to breakpoints
      },
    },
  },
})

Improve style resolution performance

#10325
3e6d1f7
Thanks @wo-o29! - Fix issue where refs don't
support cleanup function (React 19 compatibility)
#10328
451209e
Thanks @megos! - fix(table): ensure stickyHeader
works with outline variant
56a4501
Thanks @segunadebayo! - Timeline: Add
showLastSeparator variant to control visibility of the last separator

`v3.27.0`

Compare Source

Minor Changes

16fb3cc
Thanks @segunadebayo! - Enhanced
composition types with comprehensive CSS property support

Text Style Properties: Added these properties to theme.textStyles:
- Basic properties (color, direction, font, fontFamily,
  fontFeatureSettings, fontKerning, fontLanguageOverride,
  fontOpticalSizing, fontPalette)
- Typography properties (hangingPunctuation, hyphens,
  hyphenateCharacter, hyphenateLimitChars, lineBreak, quotes,
  overflowWrap, tabSize)
- Text alignment (textAlign, textAlignLast, textCombineUpright,
  textJustify)
- Text decoration (textDecorationSkip, textDecorationSkipBox,
  textDecorationSkipInk, textDecorationSkipInset,
  textDecorationThickness, textEmphasis)
- Text formatting (textShadow, textStroke, textStrokeColor,
  textStrokeWidth, textUnderlineOffset, textUnderlinePosition,
  textWrap, textWrapMode, textWrapStyle)
- Text layout (unicodeBidi, verticalAlign, whiteSpace, wordBreak,
  wordSpacing, writingMode)
Layer Style Properties: Added these properties to theme.layerStyles:
- Layout properties (aspectRatio, display, contain, contentVisibility,
  isolation)
- Visual effects (clipPath, mixBlendMode, maskClip, maskComposite,
  maskImage, maskMode, maskOrigin, maskPosition, maskRepeat,
  maskSize)
- Modern properties (objectFit, objectPosition, pointerEvents, resize,
  visibility, willChange)
- Border properties (borderImage, borderImageOutset, borderImageRepeat,
  borderImageSlice, borderImageSource, borderImageWidth)
- Overflow properties (overflow, overflowX, overflowY)

Patch Changes

c741fe9
Thanks @segunadebayo! - - CodeBlock:
Fix issue where Line numbers display incorrectly when meta.wordWrap is true
in code blocks
- Hover Card: Change default delay values for hover card to improve
  accessibility.
  - openDelay: from 700ms to 600ms
- Tooltip: Change default delay values for tooltip to improve
  accessibility.
  Learn more
  - openDelay: from 1000ms to 400ms
  - closeDelay: from 500ms to 150ms
- Menu
  - Fix issue where keyboard activation of menu items with target="_blank"
    would open two tabs
  - Fix issue where hovering a partially visible item with pointer causes it
    to scroll into view
- Combobox: Add alwaysSubmitOnEnter prop to allow forcing the form to be
  submitted immediately on Enter press.
#10312
6189068
Thanks @itushh! - - CodeBlock: Allow
horizontal scrolling when code block overflows

`v3.26.0`

Compare Source

Minor Changes

b9eede5
Thanks @segunadebayo! - - Listbox
[New]: Add new component with support for single/multi-select, grouping,
virtualization, controlled state, icons, descriptions, and accessibility
features.

This component can be used to build command palettes, dropdowns with search,
and much more.
```
<Listbox.Root collection={frameworks} width="320px">
  <Listbox.Label>Select framework</Listbox.Label>
  <Listbox.Content>
    {frameworks.items.map((framework) => (
      <Listbox.Item item={framework} key={framework.value}>
        <Listbox.ItemText>{framework.label}</Listbox.ItemText>
        <Listbox.ItemIndicator />
      </Listbox.Item>
    ))}
  </Listbox.Content>
</Listbox.Root>
```
- Hover Card: Add support for disabled prop
- Select, Menu: Fix issue where disabled items could be reached via
  typeahead
- Color Picker: Fix issue where color picker was not working correctly in
  RTL mode
- Number Input
  - Omit the input pattern when formatOptions is provided. This prevents
    native pattern validation from conflicting with formatted values (e.g.,
    currency or percent).
  - Handle empty values consistently across all format options.
  - Add data-scrubbing attribute to the number input parts.

Patch Changes

b9eede5
Thanks @segunadebayo! - CodeBlock: Add
configurable theme support and sync loading for Shiki adapter
- Theme configuration is now required - The theme property must be
  explicitly provided to createShikiAdapter
- Removed hard-coded theme fallbacks - Missing themes now throw
  descriptive errors
- Optional sync loading with loadSync method for better performance
```
// Before
const adapter = createShikiAdapter({
  async load() { /* ... */ },
})

// After
const adapter = createShikiAdapter({
  async load() { /* ... */ },
  theme: {
    light: "github-light",
    dark: "github-dark",
  },
})
```

`v3.25.0`

Compare Source

Minor Changes

#10254
3fb9d7c
Thanks @segunadebayo! - Add new scroll area
component

<ScrollArea.Root>
  <ScrollArea.Viewport>
    <ScrollArea.Content>{/* Scrolling content */}</ScrollArea.Content>
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar>
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner />
</ScrollArea.Root>

Patch Changes

d3a1064
Thanks @segunadebayo! - Fix nested token
override issue during theme merging

const defaultConfig = {
  theme: {
    tokens: {
      colors: {
        black: { value: "#&#8203;000000" },
      },
    },
  },
}

const userConfig = {
  theme: {
    tokens: {
      colors: {
        black: {
          100: { value: "#EE0F0F" },
          200: { value: "#CC0C0C" },
        },
      },
    },
  },
}

// Before: This would return undefined
const system = createSystem(defaultConfig, userConfig)
system.token("colors.black.100") // undefined

// After: This will return merged correctly, preserving the default value
system.token("colors.black.100") // "#EE0F0F"
system.token("colors.black.200") // "#CC0C0C"
system.token("colors.black") // "#&#8203;000000"

#10244
9501179
Thanks @isBatak! - - System: Implement
preset for table border-spacing property and improve documentation
- Menu
  - Fix issue where onCheckedChange could be called twice on checkbox or
    radio item
  - Add data-state attribute for context menu trigger
  - Fix context menu positioning bug where reopening at the same coordinates
    fails to reposition
- Radio Group: Fixed issue where arrow key navigation doesn't apply
  data-focus-visible on the newly focused item.
- Highlight: Add exactMatch prop that enables whole-word matching using
  regex word boundaries.

`v3.24.2`

Compare Source

Patch Changes

333b063
Thanks @segunadebayo! - Fix issue where
using asChild with invalid child elements or React.lazy components would
throw an error.

This issue more commonly occurs when composing with Next.js Link
component.

import { Breadcrumb } from "@&#8203;chakra-ui/react"
import Link from "next/link"

export default function Page() {
  return (
    <Breadcrumb.Root>
      {/* 🧨 Throws an error */}
      <Breadcrumb.Link asChild>
        <Link href="#">aaaa</Link>
      </Breadcrumb.Link>
    </Breadcrumb.Root>
  )
}

`v3.24.1`

Compare Source

Patch Changes

e81a6ae
Thanks @segunadebayo! - Provide a way to
exclude components from prose styling by using not-prose
9b7bf1d
Thanks @segunadebayo! - Fix issue where
_fullscreen returns the wrong css selector

`v3.24.0`

Compare Source

Minor Changes

#10164
79971c0
Thanks @segunadebayo! - Add new codeblock
component with support for highlight.js and shiki.

<CodeBlock.AdapterProvider value={shikiAdapter}>
  <CodeBlock.Root code="console.log('Hello, world!')" language="tsx">
    <CodeBlock.Content>
      <CodeBlock.Code>
        <CodeBlock.CodeText />
      </CodeBlock.Code>
    </CodeBlock.Content>
  </CodeBlock.Root>
</CodeBlock.AdapterProvider>

Patch Changes

#10199
5e7831f
Thanks @ponharu! - fix: check if separator is
a valid React element

`v3.23.0`

Compare Source

Minor Changes

86ca96a
Thanks @segunadebayo! - - System: Add
unstyled prop support to compound component children to opt-out of recipe
styles per component.

<Accordion.Root defaultValue={["a"]}>
  <Accordion.Item value="a">
    {/* Opt-out of recipe styles */}
    <Accordion.ItemTrigger unstyled bg="red.500" />
    <Accordion.ItemContent>
      <Accordion.ItemBody />
    </Accordion.ItemContent>
  </Accordion.Item>
</Accordion.Root>

Group: Add support changing group gap globally via --group-gap CSS
variable

Patch Changes

dd3af62
Thanks @segunadebayo! - - Tree View
- Fixed issue where tree view doesn't scroll into view when content overflows
- Fix issue where the filter method completely deletes the children key from
  the node when there are no matching children
- File Upload
  - Add support for programmatically controlling the accepted files via
    acceptedFiles and defaultAcceptedFiles
  - Export FileError, FileMimeType, and FileRejection types and fix
    validation issues

dc02076
Thanks @segunadebayo! - Fix HTML semantic
structure for Breadcrumb.Ellipsis component by changing the underlying
element from <span> to <li>.

// Before: <span> inside <ol> (invalid HTML)
<Breadcrumb.List>
  <Breadcrumb.Ellipsis /> {/* rendered as <span> */}
</Breadcrumb.List>

// After: <li> inside <ol> (valid HTML)
<Breadcrumb.List>
  <Breadcrumb.Ellipsis /> {/* now renders as <li> */}
</Breadcrumb.List>

4da48e3
Thanks @segunadebayo! - - Tabs: Export
missing types
- Hooks: Export entrypoint for better tree-shaking
  @chakra-ui/react/hooks
- Theme: Expose smaller bits of the theme in the entrypoint for better
  tree-shaking @chakra-ui/react/theme. We now expose recipes,
  slotRecipes, breakpoints, keyframes, textStyles, layerStyles,
  animationStyles, globalCss, cssVarsPrefix, cssVarsRoot,
  semanticTokens, tokens as dedicated modules.
- Dialog: Use dvh and dvw units instead of vh and vw to
  dynamically adjust to viewport size changes.
- Native Select: Ensure height is consistent with input and select across
  sizes.

`v3.22.0`

Compare Source

Minor Changes

#10111
32967aa
Thanks @segunadebayo! - Add new TreeView
component that is used to represent hierarchical data in a tree structure.

Patch Changes

#10126
ca40993
Thanks @isBatak! - - Clipboard: Fix issue
where clipboardAnatomy was not exported from @chakra-ui/react/anatomy
- Combobox
  - Expose reason to onOpenChange and onInputValueChange callbacks
  - Expose api.clearHighlightedValue function to clear highlighted value
- Toast: Fix issue where toast title or description could not accept
  React element
- Progress: Improve valueAsString formatting
- Select
  - Select highlighted item only if it exists in the collection
  - Expose api.clearHighlightedValue function to clear highlighted value
- ClientOnly: Support children as a function

`v3.21.1`

Compare Source

Patch Changes

8ddeb0b
Thanks @segunadebayo! - - Popover:
Fixed issue where onOpenChange could be called twice when controlled
- Combobox
  - Fixed issue where onInputValueChange could be called twice when
    selecting an item
  - Fixed issue where combobox with allowCustomValue: true used within in a
    form requires two enter keypress to submit
- Progress
  - Fix issue where setting orientation to vertical don't work
  - Fix issue where setting defaultValue to null doesn't show
    indeterminate state
- Toast: Fix issue where app crashes when toaster.promise is called
  without loading option. The loading option is now required. A warning will
  be logged if it is not provided
- Combobox, Select, Listbox: Fix issue where rehydrating defaultValue or
  value after fetching items doesn't update the valueAsString
#10119
6cf8cc6
Thanks @isBatak! - - improve Drawer recipe to
better support conditional variants.
- add Drawer conditional variants example to the docs and storybook.
#10101
2b4fa6d
Thanks @isBatak! - - Select: Export missing
SelectRootComponent type export
d7914ad
Thanks @segunadebayo! - Fix inconsistent
handling of null and undefined for skipping breakpoints using array syntax

`v3.21.0`

Compare Source

Minor Changes

3df43ba
Thanks @segunadebayo! - Add support new
entrypoint for /theme which allows for incremental loading of component
recipes to avoid bloating the theme with unused components.

This is mostly for bundle size optimization.

For example, if you want just the button recipe to be included in your
bundle, you can cherry-pick the recipe you need like this:
```
import { createSystem, defaultBaseConfig } from "@&#8203;chakra-ui/react"
import { buttonRecipe } from "@&#8203;chakra-ui/react/theme"

export const system = createSystem(defaultBaseConfig, {
  theme: {
    recipes: {
      button: buttonRecipe,
    },
  },
})
```

Patch Changes

010f256
Thanks @segunadebayo! - - File Upload:
Prevented undefined in acceptedFiles when no files accepted
- Select: Fixed issue where highlighted item could be cleared when
  navigating up/down the list with keyboard
- Tabs: Fixed issue where tabs with links should not trigger tab change
  upon cmd/middle click
- Menu: Fixed issue where Menu.ItemText could not be used with
  Menu.Item

`v3.20.0`

Compare Source

Minor Changes

65020dd
Thanks @segunadebayo! - - System: Allow
undefined for optional properties in CSS and recipe types
- Color Picker: Fixed issue where value change end event is invoked when
  committing via an input.
- Toast: Fixed issue where calling toast.remove() without an id shows a
  TypeScript error.
- Field: Fixed issue where helper text and error text could not be
  detected in shadow DOM environments.
- Slider
  - Fixed issue where minStepsBetweenThumbs isn't computed correctly when
    interacting with pointer or keyboard.
  - Fixed issue where Shift + ArrowRight set value to 0 instead of max
    when step is too large (e.g. 20).
  - Fixed issue where onValueChangeEnd doesn't return the latest value when
    dragging very fast.
  - Fixed issue where slider could throw a error when rendered in an popover
    or dialog.
- File Upload: Added support for transforming uploaded files via
  transformFiles context property.
- Combobox: Fixed issue where onInputValueChange doesn't get called when
  autoFocus is set to true
- Pin Input: Fixed issue where input padding could cause clipping of the
  text when fontSize is increased.

Patch Changes

#10081
c2f650b
Thanks @isBatak! - - export
CheckboxRootProviderProps type
#10075
63c267f
Thanks @isBatak! - - export Quote typography
component and its types

`v3.19.2`

Compare Source

Patch Changes

#10059
a289c3c
Thanks @isBatak! - - System: add explicit
undefined to generated types to support TS exactOptionalPropertyTypes
#10064
10d0a8e
Thanks @mhsattarian! - - Drawer: Fix
drawer close animation in RTL
- Button
  - Fix layout issue when in loading state with icons by using
    display: contents and visibility: hidden
  - Add data-loading attribute when loading is true so allow styling
    loading state with _loading pseudo prop

`v3.19.1`

Compare Source

Patch Changes

aa9c2b0
Thanks @segunadebayo! - - System: Fix
issue where some svg element props tend to be treated as style props
- Checkbox: Use consistent cursor for checkbox and radio group

`v3.19.0`

Compare Source

Minor Changes

#9464
d860d48
Thanks @segunadebayo! - - [New]
Combobox Add combobox component for autocomplete text entry.
- Progress Circle: Make progress circle transition smoother.

`v3.18.0`

Compare Source

Minor Changes

e91ec7e
Thanks @segunadebayo! - - DownloadTrigger
[New] Add DownloadTrigger component to help download file contents.
- System
  - Fix issue where passing d prop to chakra.path adds it to styles not as
    a direct attribute.
  - Fix issue where responsive semantic tokens did not get applied.
- Select: Fix issue where indicator group doesn't align correctly in RTL
  layouts.

`v3.17.0`

Compare Source

Minor Changes

#9977
ad8cc44
Thanks @seongminn! - - Breadcrumb: Prevent
screen reader from reading the separator
- Toast: Added toast queuing when the max limit is reached:
  - New toasts were queued instead of dropped
  - Queued toasts were shown when space became available
  - Queue cleared when all toasts were removed
- SegmentGroup: Fix issue where disabled prop was not being applied to
  SegmentGroup.Items
- RatingGroup: Fix issue where half-filled icons were not being displayed
  correctly in RTL
- Collapsible: Fixed issue in React.js <= v18.x where collapse animation
  might not work as expected

`v3.16.1`

Compare Source

Patch Changes

46075ba
Thanks @segunadebayo! - - Dialog,
Drawer: Use correct z-index for dialog and drawer backdrop
- SegmentGroup: Fix issue where orientation prop to SegmentGroup.Root
  doesn't work as expected

`v3.16.0`

Compare Source

Minor Changes

529244d
Thanks @segunadebayo! - - Global CSS:
Improve text selection contrast
- System
  - Fix issue where borderEnd shorthand was not working despite
    borderStart being present
  - Fix issue where system.cva return type was incorrect
  - Soften the focus ring for all color palettes
- Dialog, Drawer: Fix issue where z-index was not being applied
  correctly
- [Beta] createOverlay: Add createOverlay utility for programmatically
  controlling overlay components (Dialog, Drawer, etc.)

`v3.15.1`

Compare Source

Patch Changes

e3d7db7
Thanks @segunadebayo! - - Fix issue where
backdrop could overlap positioner when reopened quickly
- Ensure types are consistent with React 19

`v3.15.0`

Compare Source

Minor Changes

2f4ea3b
Thanks @segunadebayo! - -
useMediaQuery: Fix type signature to allow skipping the second argument
- RadioCard: Fix accessibility issue due to html structure
- Slider
  - Add support for origin: end to align the thumb to the end of the track.
  - Expose thumbSize as CSS variables in the root element. Can be useful for
    styling the slider.
- Menu
  - Added onSelect event to the Menu.Item component.
  - Ensure menu items have unique IDs to improve accessibility and HTML
    validation.

`v3.14.2`

Compare Source

Patch Changes

87a072b
Thanks @segunadebayo! - - Fix potential
import error from @zag-js/utils in @ark-ui/react

`v3.14.1`

Compare Source

Patch Changes

0eb769e
Thanks @segunadebayo! - - System: Fix
issue where output of <system>.css(...) from Chakra UI can't be assigned to
Interpolation<Theme> from @emotion/react.
- General: Bump @ark-ui/react to latest version.

`v3.14.0`

Compare Source

Minor Changes

354eaa6
Thanks @segunadebayo! - Improve render
performance by upgrading to the latest Ark UI v5.

This brings a 1.5x–4x performance improvements across components. Learn
more from the
Ark UI v5 changelog.

`v3.13.0`

Compare Source

Minor Changes

#9797
eba44a3
Thanks @segunadebayo! - - ColorPicker
- Add support for ColorPicker.ChannelText component
- Add ColorPicker.EyeDropper component that wraps IconButton
- Add ColorPicker.Slider and ColorPicker.Input shortcut components to
  reduce LOC.
- InputGroup
  - Export directly from the @chakra-ui/react package
- Pagination
  - Add Pagination.Items shortcut component to render the number of pages
    based on the count and pageSize props.
  - Add Pagination.PageText component to render the current page and total
    pages.

`v3.12.0`

Compare Source

Minor Changes

7abe7e3
Thanks @segunadebayo! - - FileUpload:
- Add FileUpload.FileText to render the list of uploaded file names.
- Add FileUpload.Items shorcut component to render the list of uploaded
  files.
- Add FileUpload.List shortcut component that combines FileUpload.Items
  and FileUpload.ItemGroup.

`v3.11.0`

Compare Source

Minor Changes

8789401
Thanks @segunadebayo! - - Accordion
- Fix issue where Accordion.ItemTrigger doesn't apply textAlign: start
- SegmentGroup
  - Add new SegmentGroup.Items shortcut component to render multiple
    SegmentGroup.Item components based on the items prop

`v3.10.0`

Compare Source

Minor Changes

11bdf77
Thanks @segunadebayo! - - Menu
- Set the default children of Menu.Arrow to Menu.ArrowTip
- HoverCard
  - Set the default children of HoverCard.Arrow to HoverCard.ArrowTip
- Dialog, Drawer
  - Update recipe to include absolute positioning styles for close trigger,
    instead of relying on snippet styles.

`v3.9.0`

Compare Source

Minor Changes

52a97d0
Thanks @segunadebayo! - - Skeleton
Bring back SkeletonCircle and SkeletonText components.
- Switch
  - Transition background color when checked
  - Set the default children for Switch.Control to Switch.Thumb to
    reduce LOC for common use cases.
- Checkbox
  - Set the default children for Checkbox.Control to Checkbox.Indicator
    to reduce LOC for common use cases.
- NumberInput
  - Set the default children for NumberInput.Control to
    NumberInput.IncrementTrigger and NumberInput.DecrementTrigger to
    reduce LOC for common use cases.
- QrCode
  - Set the QrCode.Frame component to QrCode.Pattern to reduce LOC for
    common use cases.
- RatingGroup
  - Set the default children for RatingGroup.Control to the array of
    RatingGroup.Item components to reduce LOC for common use cases.
- Slider
  - Add Slider.Marks component to render marks on the slider track. This is
    a closed composition of Slider.MarkerGroup and Slider.Marker to reduce
    LOC for common use cases.
  - Add Slider.Thumbs component to render thumbs on the slider track. This
    is a closed composition of Slider.Thumb to reduce LOC for common use
    cases.
- PinInput
  - Add support for attached variant prop to render a pin input with
    attached inputs. This removes the need for the Group component to wrap
    the inputs.

`v3.8.2`

Compare Source

Patch Changes

91945b7
Thanks @segunadebayo! - Fix issue where
mt alias to marginBlockStart instead of marginTop
#9712
f733a87
Thanks @CerealeZ! - AspectRatio: Fix issue
where css prop was not respected

`v3.8.1`

Compare Source

Patch Changes

cdb9459
Thanks @segunadebayo! - - Fix performance
regression from v3.5.x by reverting memoization logic
- Add useMemo to provider components and styling hooks to avoid unnecessary
  recomputations

`v3.8.0`

Compare Source

Minor Changes

fa5e966
Thanks @segunadebayo! - - Add new hooks
useElementRect, useForceUpdate, useLiveRef,usePrevious and
useSafeLayoutEffect
- Add new FocusTrap component for trapping focus within a container

Patch Changes

#9616
54a73a7
Thanks @mhsattarian! - - Breadcrumb: Fix
issue where breadcrumb arrow don't flip in RTL
- Snippets / Color Mode: Add LightMode and DarkMode components to
  force light and dark color mode in a subtree
- Docs / Testing: Add testing guideline for Vitest
- Group: Fix issue where Group component doesn't skip invalid children

`v3.7.0`

Compare Source

Minor Changes

cb0ffc9
Thanks @segunadebayo! - - Avatar: Add
support for passing name to the AvatarFallback to render the initials. If
no name or children is passed, it'll render either the initials or a
fallback icon.
- Hooks: Add useConst and useUpdateEffect hooks from v2.
- Wrap: Bring back the Wrap component from v2.

`v3.6.0`

Compare Source

Minor Changes

04a1a07
Thanks @segunadebayo! - - Styled
System:
- Boost performance of style resolution by removing JSON.stringify in memo
  function and avoid memoizing non-primitive arguments.
- Connect assets token to backgroundImage and listStyleImage css
  properties.
- Menu, Tooltip: Set lazyMount and unmountOnExit to true in the
  Root component to improve initial rendering performance.
- AbsoluteCenter: Fix issue where axis doesn't work in RTL mode.
- Snippets / QRCode: Remove snippet in favor of compound component
  pattern.
- List: Fix issue where list items don't wrap correctly.
- Stat: Bring back StatGroup component from v2.
- Close Button: Add CloseButton component.

`v3.5.1`

Compare Source

Patch Changes

34d46e3
Thanks @segunadebayo! - - Button: Fix
issue where button is not disabled when loading props is passed
- ColorPicker, HoverCard, Tooltip: Fixed intermittent placement shifts
  caused by updates to the data-placement attribute
- Snippets / Alert: Deprecate the Alert snippet in favor of using the
  Alert component directly from @chakra-ui/react.

`v3.5.0`

Compare Source

Minor Changes

30a12d0
Thanks @segunadebayo! - - Native Select
- Fix issue where disabled and invalid props were not being passed to the
  NativeSelectField component.
- Persist error focus ring when invalid prop is set.
- Fix issue where native select isn't readable in dark mode for Windows/Linux
  devices.
- [New] Loader: Add new Loader and LoaderOverlay components.
- [New] Button Group: Add new ButtonGroup component similar to v2 for
  grouping similar buttons.
- Button: Add loading and loadingText props to the Button component.
- Snippets / Menu: Refactor checkbox item to fix rendering
- Snippets / Button: Removed the button snippet in favor of built-in
  component.

`v3.4.0`

Compare Source

Minor Changes

375e05f
Thanks [@se

Configuration

📅 Schedule: Branch creation - Between 12:00 AM and 03:59 AM, only on Monday ( * 0-3 * * 1 ) (UTC), Automerge - At any time (no schedule defined).

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

♻ Rebasing: Whenever PR becomes conflicted, 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.

renovate bot added the dependencies label Dec 16, 2024

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 2 times, most recently from 564d957 to f1c8c6b Compare January 5, 2025 23:32

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 3 times, most recently from 27b3a07 to 10a3911 Compare January 16, 2025 17:34

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 2 times, most recently from a23581e to 00ccbc3 Compare January 19, 2025 08:59

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 2 times, most recently from 71c3549 to 4764935 Compare January 24, 2025 17:23

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 3 times, most recently from 32a9091 to 6750c24 Compare February 9, 2025 17:14

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 6750c24 to e94c730 Compare February 19, 2025 23:08

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 5 times, most recently from 6531ab6 to 885f4c7 Compare March 10, 2025 22:44

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 885f4c7 to 1b93c83 Compare March 13, 2025 21:47

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 3 times, most recently from ae15ea2 to 6d6effb Compare March 29, 2025 22:39

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 6d6effb to 45b6b9d Compare April 7, 2025 17:09

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 2 times, most recently from b75fb1e to cba88e1 Compare April 20, 2025 18:30

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from cba88e1 to ff25e3d Compare May 1, 2025 18:24

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 3 times, most recently from bc8829e to b9e259f Compare May 17, 2025 14:31

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 2 times, most recently from 967fcc6 to b0f42d6 Compare June 6, 2025 22:02

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from b0f42d6 to 21b5798 Compare June 11, 2025 23:28

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 21b5798 to 0e43085 Compare June 28, 2025 12:37

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 0e43085 to 16f6932 Compare July 7, 2025 16:45

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 16f6932 to 7853de3 Compare July 26, 2025 22:14

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 2 times, most recently from 73e1c3f to 9cc9c42 Compare August 10, 2025 13:23

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 9cc9c42 to c487338 Compare August 20, 2025 18:57

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 2 times, most recently from e669b55 to e3019c8 Compare August 31, 2025 13:26

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from e3019c8 to 7c9898d Compare September 14, 2025 21:45

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 7c9898d to 7271e55 Compare September 25, 2025 14:36

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 7271e55 to ef8e111 Compare October 7, 2025 01:59

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 2 times, most recently from 456ba6a to 70cd387 Compare October 22, 2025 01:06

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch 2 times, most recently from e90e21e to 76de9f5 Compare November 6, 2025 17:46

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 76de9f5 to 9759b2f Compare November 10, 2025 20:57

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 9759b2f to 7ddfc7c Compare November 18, 2025 23:01

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

b98e811

renovate bot force-pushed the renovate/major-chakra-ui-monorepo branch from 7ddfc7c to b98e811 Compare November 22, 2025 20:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

renovate bot commented Dec 16, 2024 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

renovate bot commented Dec 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release Notes

Minor Changes

Changed

Fixed

Changed

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Patch Changes

Minor Changes

Minor Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Patch Changes

Patch Changes

Minor Changes

Minor Changes

Minor Changes

Minor Changes

Minor Changes

Minor Changes

Patch Changes

Patch Changes

Minor Changes

Patch Changes

Minor Changes

Minor Changes

Patch Changes

Minor Changes

Minor Changes

Configuration

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

renovate bot commented Dec 16, 2024 •

edited

Loading