Update dependency @chakra-ui/react to v3.31.0

[renovate]

This PR contains the following updates:

Package	Change	Age	Confidence
@chakra-ui/react (source)	3.26.0 → 3.31.0

---

Release Notes

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

v3.31.0

Compare Source

Minor Changes

• 756b385
  Thanks @​segunadebayo! - - ActionBar
  • Add placement variant to configure bar position: bottom, bottom-start,
    bottom-end
  • Add --action-bar-offset CSS variable to configure offset from edges

Patch Changes

• 4fcf302
  Thanks @​segunadebayo! - - ColorPicker,
  Select, Combobox: Fix z-index stacking when used inside dialogs

  • Theme: Export the listboxSlotRecipe slot recipe

• #​10512
  cc0d202
  Thanks @​teunlao! - cva: Normalize base
  styles to prevent shorthand properties from overwriting variant styles

• cac7cb0
  Thanks @​segunadebayo! - Fix menu content
  background not rendering by using full token path for CSS variable

• 4364995
  Thanks @​segunadebayo! - Fix SkeletonText
  duplicating children when loading is set to false

• 1cc185d
  Thanks @​segunadebayo! - - Slider

  • Add markerLabel to component anatomy for theming marker labels
  • Export Slider.MarkerLabel component for custom marker label rendering
  • Improve focus ring styles for Slider.Thumb

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 "@​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

---

Configuration

📅 Schedule: Branch creation - "before 4am on the first day of the month" in timezone Europe/Paris, 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.