chore(deps): update dependency @ark-ui/react to v5 #3202

renovate · 2025-03-24T01:58:18Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@ark-ui/react (source)	`2.1.1` -> `5.5.0`

Release Notes

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

`v5.5.0`

Compare Source

Added

Presence: Added support for skipping the initial animation when the component is mounted. This can be used in all
disclosure components (e.g., Dialog, DatePicker, Menu etc).

Fixed

Tabs: Fixed issue where tabs indicator animation behaves inconsistently.
Date Picker
- Fixed issue where datepicker throws error when navigating month view.
- Fixed issue where range selection doesn't reset correctly when clicking the same start date.
Disclosure Components
- Fixed issue where pointerdown outside doesn't work consistently on mobile devices.
- Improved pointerdown outside click detection in shadow DOM environments.

`v5.4.0`

Compare Source

Added

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.

Fixed

Ensured each component's state machine starts before processing events.
HoverCard, ColorPicker: Added missing tabIndex for better dialog support.
Menu: Assigned unique IDs to menu items to improve accessibility and HTML validation.

`v5.3.1`

Compare Source

Fixed

Fixed an issue where a function was imported from a package that wasn't declared as a dependency.

`v5.3.0`

Compare Source

Added

Collapsible: Added an Indicator part to display whether the collapsible was open or closed.
ColorPicker: Added support for formatting the ValueText component.

<ColorPicker.ValueText format="hex" /> // #ff0000

Fixed

Combobox: Fixed an issue where onOpenChange was called with the same open value.
DownloadTrigger: Added the missing use client directive.
Splitter: Fixed an issue where onResizeStart and onResizeEnd callbacks weren't triggered during keyboard
interactions.

`v5.2.0`

Compare Source

Added

[NEW] DownloadTrigger: Added Component for downloading a blob or file, whether retrieved synchronously or
asynchronously.

import { DownloadTrigger } from '@&#8203;ark-ui/react/download-trigger'

export const DownloadImage = () => {
  async function fetchImage() {
    const response = await fetch('https://picsum.photos/200/300')
    return response.blob()
  }

  return (
    <DownloadTrigger data={fetchImage} fileName="avatar.jpeg" mimeType="image/jpeg">
      Download Image
    </DownloadTrigger>
  )
}

Changed

NumberInput: Set the default step to 0.01 when formatOptions.style was set to percent.
[Breaking] Splitter: Redesigned splitter machine to support more use cases and improve DX. Check out the
Splitter documentation for more details.

Fixed

Toast: Fixed issue where setting offsets to undefined caused the machine to throw.
Select: Fixed issue where select valueAsString lost reactivity.

`v5.1.0`

Compare Source

Added

Added support for a cleanup function in ref.

Fixed

Field: Exported the missing useField hook.
NumberInput: onValueChange correctly received valueAsNumber.
Slider: Thumbs initialized correctly when min was set to a non-zero value.

`v5.0.1`

Compare Source

Fixed

Effects now flush synchronously instead of using a microtask.
Checkbox: data-invalid is no longer set when invalid is false.
Combobox: Fixed unexpected cursor movement when editing input.
PinInput: OTP SMS autofill now works as expected.
RatingGroup: Fixed incorrect focus placement on the label.
TagsInput: Improved caret detection to prevent unintended tag removal.
Timer
- Fixed slowdown when switching tabs/windows.
- Changed default interval from 250 to 1000.

`v5.0.0`

Compare Source

Ark UI just got a major performance boost! 🚀

What’s new in v5?

Blazing-fast performance – Every component runs smoother and renders faster.
Smaller bundle size – Leaner components and adapters for a more efficient build.

We made this happen by using React’s native reactive primitives instead of external stores.

In our stress tests with 10,000 components, Ark v5 delivered 1.5x–4x better performance across the board.

A quick note on tests

Most component updates are non-breaking, but due to this change, some tests may need adjustments. For example:

// Before
it('should open by default', () => {
  render(<ComponentUnderTest defaultOpen />)
  expect(screen.getByRole('dialog')).toBeInTheDocument()
})

// After
it('should open by default', async () => {
  render(<ComponentUnderTest defaultOpen />)
  expect(await screen.findByRole('dialog')).toBeInTheDocument()
})

Added

Carousel: ⚠️ Breaking change: Added required prop slideCount to Carousel.Root component.
Clipboard: Added onValueChange and defaultValue props.
ColorPicker: Added defaultFormat prop.
Combobox: Added defaultHighlightedValue and defaultInputValue props.
DatePicker: Added defaultFocusedValue prop, getViewProps, and visibleRangeText.
HoverCard: Expanded interaction handlers.
Menu: Added defaultHighlightedValue prop.
Pagination: Added defaultPageSize prop.
PinInput: Added count prop for better SSR aria-label.
Progress: Added locale and formatOptions props.
QrCode: Added pixelSize prop.
Select: Added defaultHighlightedValue prop.
TagsInput: Added defaultInputValue prop.
Toggle: Reintroduced toggle machine.

Fixed

Accordion: Fixed issue in Safari where clicking triggers didn't show content.
Avatar: Fixed api.setSrc not working.
Carousel: Fixed pagination sync and initial page issues.
File Upload: Fixed drag-and-drop when directory: true.
Menu: Fixed context menu positioning not updating on right-click.
Number Input: Fixed value prop not being consumed.
Pin Input: Fixed focus warnings and editing issues.
Progress: Allowed more precise (decimal) values.
Radio Group, Switch: Improved focus behavior in Safari.
Select: Fixed regression where multiple: true didn't work.
Steps: Ensured ARIA attributes use valid values and wrapped <li> elements correctly within <ul> or <ol>.
Textarea: Fixed ResizeObserver warning.
Timer: Fixed stopping issue when switching tabs; resolved issue where action prop was passed to ActionTrigger.
Toast: Fixed keyboard navigation skipping close button.
Toggle Group: Fixed data-focus not being removed on blur.

`v4.9.2`

Compare Source

Fixed

FocusTrap: Added missing FocusTrap component to the index file.
Field: Resolved an issue where the data-disabled attribute wasn't set on the field helper
text when the field is disabled.

`v4.9.1`

Compare Source

Fixed

FileUpload: Resolved an issue where multiple files were added during a single upload
operation.
DatePicker: Fixed an issue where the defaultView property did not correctly switch to the
specified view.

`v4.9.0`

Compare Source

Added

DatePicker:
- Added minView and maxView options for better control over the displayed views, allowing to
  create Month and Year pickers.
- Introduced a new parse method to convert input values into valid dates, complementing the
  format option for enhanced UX
- Added locale and timeZone options to the format method
- Introduced placeholder context property to customize the input's placeholder text

Fixed

ColorPicker, HoverCard, Tooltip:
- Fixed intermittent placement shifts caused by updates to the data-placement attribute
FileUpload:
- Resolved an issue where the change event wasn’t triggered when files were dropped into the
  dropzone
- Fixed an issue where context.setClipboardFiles(...) was called despite file upload being
  disabled
- Addressed an issue where the machine transitioned to the dragging state even when disabled
- Fixed an issue preventing rejected files from being deleted via the item delete trigger
- Exposed the disabled state via context.disabled
Tour:
- Fixed an issue where the dialog tour step did not synchronize its z-index with the content
Date Picker:
- Fixed a crash that occurred when entering very large invalid dates in the input field
- Fixed an issue in the year view where selecting a year was not possible when the min and max
  dates were less than one year apart and overlapped two distinct years

`v4.8.1`

Compare Source

Fixed

Resolved an issue where form-related components reset despite the reset event being cancelled.
FileUpload:
- Fixed a brief warning display when a new image file is added to the preview.
- Enhanced click detection for the dropzone and added support for the disableClick prop.

`v4.8.0`

Compare Source

Added

[NEW] Tour: Introduced the Tour component to guide users through the interface. For more
details, check the Tour documentation.
[NEW] FocusTrap: Implemented the FocusTrap component to confine focus within a specified
container.

Fixed

HoverCard, Tooltip: Resolved an issue where the controlled open state could become
inconsistent during the opening or closing phases.

`v4.7.0`

Compare Source

Added

Clipboard: Introduced Clipboard.ValueText to display clipboard content.
FileUpload:
- Added preventDropOnDocument to block file drops on the document when the file upload component is active.
- Added setClipboardFiles to the API for setting files from clipboard data.
Progress: Added support foronValueChange and defaultValue.
Tabs, Menu, Combobox: Added navigate property for custom router navigation when selections render as links.
QrCode:
- Added support for onValueChange and defaultValue.
- Added QrCode.DownloadTrigger to enable QR code image downloads.

Fixed

Collapsible: Fixed a bug where the opening animation replayed when an open collapsible was re-rendered.
Dialog, Popover: Resolved an issue causing dialogs or popovers to close if the focused element was removed from the DOM.
FileUpload: Fixed a bug causing the hidden input to desync from accepted files.
Menu, Popover: Fixed inconsistent interaction detection outside the component when the trigger was inside a scrollable container.
Pagination: Corrected an issue where the page range returned an incorrect end value when pageSize exceeded count.
QRCode: Fixed getDataUrl to generate a properly sized QR code.

`v4.6.0`

Compare Source

Added

Carousel [Breaking]: Redesigned the carousel for better touch handling and performance. See the Carousel docs for more info.

Fixed

FileUpload: Resolved an issue where the accept attribute wasn’t applied to the hidden input.
NumberInput: Fixed a bug where the input event wasn’t triggered on the first click of the increment/decrement controls.
TreeView: Addressed a limitation where React elements couldn’t be used in the tree view.
Select: Fixed a regression where scroll restoration didn’t work in overflowing select menus.

`v4.5.0`

Compare Source

Added

ColorPicker: Introduced invalid and openAutoFocus props.
TreeView: Exported the TreeCollection type.
FileUpload: Added acceptedFiles and rejectedFiles outputs to the validate method.

Changed

Environment: Deprecated EnvironmentContext in favor of UseEnvironmentContext.

Fixed

Presence, Collapsible: Fixed a potential memory leak after component unmount.
Environment: Correctly exported EnvironmentContext.
SignaturePad: Resolved an issue where getDataUrl(...) rendered improperly scaled images in
Firefox.
NumberInput: Fixed an issue where the locale provided by LocaleProvider was not applied
correctly.

Removed

DatePicker: Dropped the unimplemented modal prop.

`v4.4.4`

Compare Source

Fixed

TreeView: Exported missing TreeViewContext.

`v4.4.3`

Compare Source

Fixed

Anatomy: Fixed an issue where the anatomy was not properly transpiled.

`v4.4.2`

Compare Source

Fixed

Utility: Updated entrypoint in package.json for /anatomy.

`v4.4.1`

Compare Source

Fixed

Utility: Incorrect entrypoint in package.json for /anatomy.

`v4.4.0`

Compare Source

Added

Utility: Exported createAnatomy for defining custom component anatomy, now accessible via import { createAnatomy } from '@ark-ui/react/anatomy'.

Fixed

ColorPicker
- Added --color CSS variable to swatch and swatch trigger parts.
- Enabled clicking on swatch when in the open state.
Combobox: Fixed a timing issue with the onValueChange callback.
Clipboard: Corrected missing type="button" attribute on clipboard trigger.
Field
- Fixed cleanup issue with resizeObserver on Field.Textarea.
- Triggered resize when rows attribute or fonts change.
TagsInput: Resolved inconsistent delete behavior across states.
TimePicker: Exported missing timePickerAnatomy.

`v4.3.0`

Compare Source

Added

Field: Added autoresize prop to Field.Textarea for auto-resizing the textarea based on
content.

Changed

TreeView: Redesigned using the new tree collection for improved rendering and logic
management. See the TreeView documentation
for details.
QrCode, SignaturePad, Timer: Promoted from preview to stable release.

Fixed

Dialog: Fixed an issue where body styles weren't properly restored when preventScroll was
enabled.
Toast: Corrected type definitions in the createToaster function.

`v4.2.0`

Compare Source

Added

Slider: Introduced Slider.DraggingIndicator for displaying an indicator when dragging a thumb.
Field: Added Field.RequiredIndicator to show a required indicator (e.g., an asterisk) when the required prop is set.

<Field.Root required>
  <Field.Label>
    Username
    <Field.RequiredIndicator />
  </Field.Label>
  <Field.Input placeholder="Enter your username" />
</Field.Root>

Fixed

TagsInput: Resolved an issue where api.addTag(...) was not functioning correctly.
RatingGroup: Fixed a bug where both the rating group and rating item received focus when readOnly was set to true.
Combobox: Corrected behavior where getSelectionValue was called multiple times; it now triggers only when a selection is made.
HoverCard: Removed preventDefault calls on the touchstart event to avoid browser error logs.
Popover: Fixed a race condition in iOS Safari where switching between popovers caused them to close unexpectedly.
Presence: Addressed an issue where elements using the presence machine did not exit the unmounting state if closed with a delay while switching tabs.

Changed

Editable:
- Added data-autoresize attribute to both editable and preview elements when autoResize is enabled.
- Removed the default all: unset style from the input when autoResize is enabled, allowing for user-defined CSS.

`v4.1.2`

Compare Source

Fixed

Resolved an issue causing the Portal component to render twice.
Corrected missing 'use client' annotation in the Frame component.

`v4.1.1`

Compare Source

Changed

TimePicker [Preview]: Updated value and defaultValue types from string to Time. Use
the exported parseTime function to convert between strings and time objects.

Fixed

TagsInput: Resolved an issue where tag navigation was unresponsive after removing tags with
the delete key.
DatePicker: Fixed a bug where selecting a preset and then blurring the input incorrectly reset
the value.

`v4.1.0`

Compare Source

Added

Toggle: Introduced the Toggle component.
Dialog: Added support for detecting outside clicks from parent windows when rendered within an iframe.

Fixed

Resolved a bug where passing a ref to a component occasionally triggered a warning.
Combobox: Fixed an issue where pressing Enter without selecting an option left text in the input.
Dialog: Fixed an issue where the dialog closed when the positioner was scrollable, and the scrollbar was clicked.
File Upload:
- Fixed an issue where acceptedFiles were removed after an invalid file upload.
- Fixed an issue in the preview image where createObjectURL was not cleaned up.

`v4.0.0`

Compare Source

In this major release, we shifted from primitive data types like strings to more structured types
such as Collection, Color, and DateValue. This enhanced flexibility and control by offering
advanced methods and properties.

The new APIs introduced helper functions like parseColor, parseDate, and createListCollection
to simplify working with the new types and make code more concise.

Changed

ColorPicker [Breaking]: Updated value and defaultValue types from string to Color. Use
the exported parseColor function to convert between strings and color objects.

Before

import { ColorPicker } from '@&#8203;ark-ui/react/color-picker'

const Demo = () => {
  return <ColorPicker.Root defaultValue="#&#8203;000" />
}

After

import { ColorPicker, parseColor } from '@&#8203;ark-ui/react/color-picker'

const Demo = () => {
  return <ColorPicker.Root defaultValue={parseColor('#&#8203;000')} />
}

This change allows direct access to color object methods and properties.

Select, Combobox [Breaking]: Removed the items, itemToString, and itemToValue props.
Introduced a collection prop instead. Use the createListCollection helper to generate a
collection from items.

Before

import { Select } from '@&#8203;ark-ui/react/select'

const Demo = () => {
  return <Select.Root items={['Option 1', 'Option 2', 'Option 3']} />
}

After

import { Select, createListCollection } from '@&#8203;ark-ui/react/select'

const collection = createListCollection({
  items: ['Option 1', 'Option 2', 'Option 3'],
})

const Demo = () => {
  return <Select.Root collection={collection} />
}

DatePicker [Breaking]: Changed value and defaultValue types from string to Date. To
convert between strings and dates, use the parseDate function.

Before

import { DatePicker } from '@&#8203;ark-ui/react/date-picker'

const Demo = () => {
  return <DatePicker.Root defaultValue="2024-01-01" />
}

After

import { DatePicker, parseDate } from '@&#8203;ark-ui/react/date-picker'

const Demo = () => {
  return <DatePicker.Root defaultValue={parseDate('2024-01-01')} />
}

`v3.13.0`

Compare Source

Fixed

FileUpload: Fix issue where directory: true doesn't work

Changed

Switch, Checkbox, Radio Group: Added data-focus-visible attribute to the selected radio
button when it is interacted with the keyboard.
Tooltip: Focus behavior only opens when the tooltip trigger is focused with keyboard.

Added

FileUpload: Added ClearTrigger to the FileUpload component.

`v3.12.1`

Compare Source

Fixed

DatePicker
- Fixed issue where the year select dropdown doesn't respect min and max props.
- Fixed issue where date picker throws when min or max is changed.

`v3.12.0`

Compare Source

Added

Frame (Preview): Introduced the Frame component for rendering content within an iframe.
Timer (Preview): Added Area and Control parts to improve structure and anatomy.

Fixed

Combobox: Resolved an issue where the highlighted item remained persistent when the list of items was empty.

`v3.11.1`

Compare Source

Fixed

Highlight: Fixed issue where ignoreCase and matchAll props were not working.

`v3.11.0`

Compare Source

Fixed

Floating Components: Fixed issue where clicking outside of a dialog on mobile passed click
events through.
Popover: Fixed issue where popover did not restore focus when open state was changed
programmatically
Avatar: Fixed issue where avatar could throw when the fallback inner text changed
Steps: Improved accessibility of tablist semantics by using aria-owns

Added

FileUpload: Add support for more file types in file upload accept intellisense
Toast: Add support for action property when creating toasts, giving you the ability to add a
action.label and action.onClick. The onClick function will be called when the user clicks
the action trigger.

toaster.create({
  title: 'Uploaded successfully',
  type: 'success',
  action: {
    label: 'Undo',
    onClick: () => {
      console.log('undo')
    },
  },
})

File Upload: Added support for invalid prop in file upload to explicitly mark upload
operation as invalid. This could be paired with the rejectedFiles to show an error message.

Changed

Floating Components: Refactored boundary to only support function that returns an element.
Select
- Refactored opening and selection to be based on click events rather than pointerdown/up cycles.
- Improved usability and accessibility of the select component.
- Fixed issue where controlled multiple selects open state behaved unexpectedly.

`v3.10.0`

Compare Source

Fixed

Steps: Fixed issue where steps context was not exported

Added

Checkbox: Added invalid prop to Checkbox.Group

`v3.9.0`

Compare Source

Added

Editable
- Add support for controlled the editable's state (edit/preview) using edit and onEditChange
Pagination
- Expose api.count property

Changed

Editable
- Removed onEdit in favor of onEditChange
- Removed startsWithEditView in favor of edit prop

Fixed

Dialog
- Fix issue where closing a nested dialog focuses the first focusable element in the parent dialog instead of the
  previously focused element.
Steps: Fixed issue where the steps component was not exported in the index file.

`v3.8.0`

Compare Source

Added

Steps (Preview): Added Steps component.

<Steps.Root count={1}>
  <Steps.List>
    <Steps.Item index={0}>
      <Steps.Trigger>
        <Steps.Indicator>1</Steps.Indicator>
        First
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
  </Steps.List>

  <Steps.Content index={0}>Content</Steps.Content>
  <Steps.CompletedContent>Completed</Steps.CompletedContent>

  <Steps.PrevTrigger>Back</Steps.PrevTrigger>
  <Steps.NextTrigger>Next</Steps.NextTrigger>
</Steps.Root>

Timer (Preview): Added Timer component.

<Timer.Root>
  <Timer.Item type="days" />
  <Timer.Separator>:</Timer.Separator>
  <Timer.Item type="hours" />
  <Timer.Separator>:</Timer.Separator>
  <Timer.Item type="minutes" />
  <Timer.Separator>:</Timer.Separator>
  <Timer.Item type="seconds" />
</Timer.Root>

`v3.7.0`

Compare Source

Changed

Progress: Updated Progress.ValueText to render percentage as string.

Fixed

Field:
- Fixed SSR warning related to useLayoutEffect usage.
- Fixed issue where id of field parts could not be customized, breaking Zag.js composition.
- Added data-* attributes to control part to allow for better styling.
Select: Fixed reactivity issues when items and value are updated.

`v3.6.2`

Compare Source

Changed

DatePicker: Added support for index in getLabelProps.

Fixed

DatePicker:
- Fixed issue where the selected date doesn't reflect in the input when clicking the trigger and then focusing the input.
- Fixed SSR issue when using getPresetTrigger.
Slider: Fixed issue where onValueChangeEnd was called with an incorrect value.
Fixed an import issue with @internationalized/date.

`v3.6.1`

Compare Source

Changed

Highlight:
- Enabled import from @ark-ui/react/highlight.
- Exported HighlightChunk type to enhance type inference in userland code.

Fixed

Select: Fixed HiddenSelect to correctly emit values when a simple string array is used as the value for the Select component.

`v3.6.0`

Compare Source

Added

Fieldset Component: Introduced to help group form fields.

<Fieldset.Root>
  <Fieldset.Legend>Legend</Fieldset.Legend>
  <Fieldset.HelperText>Helper text</Fieldset.HelperText>
  <Fieldset.ErrorText>Error text</Fieldset.ErrorText>
</Fieldset.Root>

Learn more in the documentation.

Highlight Component: Added to highlight text based on a query.

import { Highlight } from '@&#8203;ark-ui/react'

export const App = () => (
  <Highlight
    query={['Ark UI', 'exclusive examples']}
    text="Unlock exclusive examples and support the development by getting Ark UI Plus."
  />
)

Tooltip: Added closeOnClick to control tooltip closure on trigger click.

Changed

Toast: Exported CreateToasterReturn type to improve type inference.
Combobox: Enhanced accessibility by removing unnecessary aria-selected and aria-disabled attributes.

Fixed

Toast: Added missing aria-labelledby and aria-describedby attributes on the root element.
Combobox: Fixed issue where the input didn't update on selection with a pointer.
RadioGroup: Corrected misspelt data-readonly attribute.
Select: Enabled customization of closeOnSelect when multiple is true.
Tags Input:
- Fixed issues with repeat pasting and undo.
- Addressed problem where deleting a pasted value disabled further pasting.
- Ensured values are always unique by discarding duplicates.

`v3.5.0`

Compare Source

Added

All Components: Exported each component's anatomy. For example:
```
import { avatarAnatomy } from '@&#8203;ark-ui/react'
```
NumberInput: Introduced the ValueText part to render the internal state value.
Checkbox: Added the name prop to Checkbox.Group for setting names within the group.

Fixed

TreeView: Resolved an issue preventing input usage within the tree.
Progress: Fixed a warning in Circle due to an incorrect viewBox attribute on the <svg>
element.
Carousel: Corrected looping behavior for next and previous buttons when both slidesPerView
and loop are set.
Menu: Fixed loss of position data in the context menu upon closing.

`v3.4.0`

Compare Source

Added

Field: Introduced the Field component for flexible form input, label, and helper text
container.

All Components: Exposed base props to simplify prop merging for library consumers, especially
in CSS-in-JS environments.

export interface AccordionItemBaseProps extends ItemProps, PolymorphicProps {}
export interface AccordionItemProps extends HTMLProps<'div'>, AccordionItemBaseProps {}

ColorPicker: Added SliderValueText, SliderLabel, and ValueSwatch parts for enhanced
customization.
Tooltip: Introduced the closeOnScroll option to control whether the tooltip should close
when the trigger's overflow parent scrolls.
Portal: Added support for Shadow DOM.
Signature Pad: Introduced HiddenInput to the SignaturePad component for better form
library compatibility.

Fixed

Menu:
- Resolved an issue causing sibling menus or popovers to malfunction on iOS devices.
- Fixed a problem where the context menu trigger showed the magnifier and iOS context menu on long
  press.
- Fixed an issue where RadioOptionItem did not provide the checked state in context.
Editable: Fixed a bug where setting activationMode to dblclick unexpectedly cleared the
input value.
Checkbox: Added the missing group role for the Checkbox group component.
Progress: Converted Circle, CircleTrack, and CircleRange components to use React's
forwardRef for improved ref handling.
RootProvider: Added the missing RootProvider for the ColorPicker, NumberInput,
RatingGroup, SegmentGroup, and ToggleGroup components.

`v3.3.0`

Compare Source

Added

Signature Pad: Introduced the SignaturePad component for capturing signatures.
QR Code: Added the QRCode component for generating QR codes.
CheckboxGroup: Added the CheckboxGroup component for managing multiple checkboxes.
Presence: Added support for immediate to synchronize presence changes immediately instead of deferring to the next tick.

Fixed

TreeView: Resolved an issue where the tree view state could be updated after setting defaultSelectedValue or defaultExpandedValue.
Popover, HoverCard: Fixed an issue where defaultOpen did not work.
Tabs: Resolved an issue where rapidly changing the selected tab could briefly show previous tab content.
FileUpload: Fixed an issue where the onFileAccept event was triggered when deleting an item via the delete trigger.
Select: Exported missing SelectList component.

`v3.2.1`

Compare Source

Fixed

Combobox: Exported missing ComboboxList component.

`v3.2.0`

Compare Source

Added

All Components: Introduced the Provider component for easier access to internal machine
APIs, improving component composition. See the example below:

import { Avatar, useAvatar } from '@&#8203;ark-ui/react'

export const Provider = () => {
  const avatar = useAvatar({
    onStatusChange: (e) => console.log('status changed', e),
  })

  return (
    <Avatar.RootProvider value={avatar}>
      <Avatar.Fallback>PA</Avatar.Fallback>
      <Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
    </Avatar.RootProvider>
  )
}

`v3.1.0`

Compare Source

Added

Editable: Supported textarea as the input element in edit mode.

Fixed

Select: Fixed an issue where changing the label of a collection item did not trigger a change
event.
Popover:
- Implemented autoFocus to determine whether the popover should autofocus on open:
  - When true, the first focusable element or the content is focused.
  - When false, the content is focused.
- Fixed an issue where the page scroll resets on opening the popover.

`v3.0.2`

Compare Source

Fixed

Added the missing 'use client' annotation to the Portal component.
Fixed an issue where the keydown event might not fire in React due to nativeEvent.currentTarget not being set consistently.

Changed

Avatar: Improved image load check by using naturalWidth and naturalHeight instead of currentSrc.

`v3.0.1`

Compare Source

Fixed

Added missing export for HiddenInput in Slider.
Added missing export for ItemHiddenInput in RadioGroup and SegmentGroup.

`v3.0.0`

Compare Source

Highlights

The 3.0 release brings significant enhancements and some breaking changes for a more streamlined and
flexible API. Key updates include new components and types, improved form integration, and forward
compatibility with React 19. Here are some of the highlights:

Added

Context Components: Introduced the Context component for easier access to internal machine
APIs, improving component composition. See the example below:

export const Basic = () => (
  <Popover.Root>
    <Popover.Trigger>Open</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Context>
        {(popover) => (
          <Popover.Content>
            <Popover.Title onClick={() => popover.setOpen(false)}>Title</Popover.Title>
            <Popover.Description>Description</Popover.Description>
          </Popover.Content>
        )}
      </Popover.Context>
    </Popover.Positioner>
  </Popover.Root>
)

Format: Added a Format component for formatting bytes and numbers.

<Format.Byte value={120904} unit="byte" unitDisplay="short" />
<Format.Number value={1204} unit="centimeter" />

Tooltip: Added defaultOpen prop for cases where you do not need to control its open state.
Types: Exported Assign and Optional types to enhance type handling.
Toast: Added support for overlapping and stacked toast.

Changed

[BREAKING]: Exposed hidden inputs in Checkbox, ColorPicker, FileUpload, PinInput,
RatingGroup, Select, Switch, and TagsInput for better form library compatibility. Please
ensure to include the hidden input in your component like shown below:

<Checkbox.Root>
  <Checkbox.Label>Checkbox</Checkbox.Label>
  <Checkbox.Control>
    <Checkbox.Indicator>
      <CheckIcon />
    </Checkbox.Indicator>
  </Checkbox.Control>
  <Checkbox.HiddenInput /> // [!code highlight]
</Checkbox.Root>

[BREAKING] Combobox, Select: Made id optional and removed htmlFor from ItemGroupLabel
for cleaner markup.

- <Combobox.ItemGroup id="framework">
-   <Combobox.ItemGroupLabel htmlFor="framework">Frameworks</Combobox.ItemGroupLabel>
+ <Combobox.ItemGroup>
+   <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>

[BREAKING] Popover, Tooltip: Renamed closeOnEsc to closeOnEscape to be consistent with
dialog machine.
[BREAKING] Environment: Renamed Environment to EnvironmentProvider to align with other
providers.
React 19: Improved the ark factory's forward compatibility with React 19 by supporting ref
as a normal prop.

Fixed

DatePicker: Resolved issues with min and max props not supporting date strings.
Accordion: Fixed initial flicker of content.
TagsInput: Replaced HTMLInputElement with HTMLDivElement in TagsInput.Root.

Removed

[BREAKING]: Dropped direct internal API access from Root components. Use the new Context
component for more flexible and cleaner API integration.
[BREAKING]: Simplified component APIs by removing dir and getRootNode attributes. Use
LocaleProvider and
EnvironmentProvider for these settings.

`v2.2.3`

Compare Source

Fixed

Resolved an issue with using Locale in Next.js projects.
Resolved an issue with Toast not updating its toasts and count properties when creating one or more toasts.

`v2.2.2`

Compare Source

Fixed

Resolved an issue that a disabled Accordion.Item could still be opened.̊

`v2.2.1`

Compare Source

Changed

Updated to latest @ark-ui/anatomy version.

`v2.2.0`

Compare Source

Added

Added Collapsible component.
Added support for defaultExpandedIds in the TreeView component.

Changed

Enhanced the performance of the Ark factory by utilizing memo to avoid unnecessary re-renders.
Integrated Collapsible into Accordion, allowing the Accordion component to utilize Collapsible for animating the opening and closing of content.d

@&#8203;keyframes slideDown {
  from {
    height: 0;
  }
  to {
    height: var(--height);
  }
}

@&#8203;keyframes slideUp {
  from {
    height: var(--height);
  }
  to {
    height: 0;
  }
}

[data-scope='accordion'][data-part='item-content'][data-state='open'] {
  animation: slideDown 250ms;
}

[data-scope='accordion'][data-part='item-content'][data-state='closed'] {
  animation: slideUp 200ms;
}

Fixed

Updated the return type of createToaster for comprehensive IntelliSense support when styling the Toaster component.
Revised TreeView to utilize defaultSelectedIds instead of defaultFocusedId.
Resolved an issue with using factory in Next.js projects.
Fixed a bug where the disabled Tooltip would flash upon hovering and clicking the trigger.

Configuration

📅 Schedule: Branch creation - "* 0-3 * * 1" in timezone 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.

changeset-bot · 2025-03-24T01:58:22Z

⚠️ No Changeset found

Latest commit: 6e34533

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2025-03-24T01:58:22Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
panda-docs	❌ Failed (Inspect)		Apr 5, 2025 1:47pm
panda-playground	❌ Failed (Inspect)		Apr 5, 2025 1:47pm
panda-studio	✅ Ready (Inspect)	Visit Preview	Apr 5, 2025 1:47pm

renovate bot added the dependencies Pull requests that update a dependency file label Mar 24, 2025

vercel bot deployed to Preview – panda-studio March 24, 2025 02:19 View deployment

vercel bot had a problem deploying to Preview – panda-docs March 24, 2025 02:23 Failure

vercel bot had a problem deploying to Preview – panda-playground March 24, 2025 02:28 Failure

renovate bot force-pushed the renovate/ark-ui-react-5.x branch from e175fe9 to 76f19bc Compare March 24, 2025 23:50

vercel bot had a problem deploying to Preview – panda-playground March 25, 2025 00:00 Failure

vercel bot deployed to Preview – panda-studio March 25, 2025 00:02 View deployment

vercel bot had a problem deploying to Preview – panda-docs March 25, 2025 00:06 Failure

renovate bot force-pushed the renovate/ark-ui-react-5.x branch from 76f19bc to 224232e Compare March 28, 2025 16:05

vercel bot had a problem deploying to Preview – panda-playground March 28, 2025 16:10 Failure

vercel bot had a problem deploying to Preview – panda-docs March 28, 2025 16:13 Failure

vercel bot deployed to Preview – panda-studio March 28, 2025 16:15 View deployment

renovate bot force-pushed the renovate/ark-ui-react-5.x branch from 224232e to 510bd8a Compare April 5, 2025 09:35

vercel bot had a problem deploying to Preview – panda-playground April 5, 2025 10:17 Failure

vercel bot deployed to Preview – panda-studio April 5, 2025 10:19 View deployment

vercel bot had a problem deploying to Preview – panda-docs April 5, 2025 10:21 Failure

chore(deps): update dependency @ark-ui/react to v5

6e34533

renovate bot force-pushed the renovate/ark-ui-react-5.x branch from 510bd8a to 6e34533 Compare April 5, 2025 13:37

vercel bot had a problem deploying to Preview – panda-playground April 5, 2025 13:42 Failure

vercel bot had a problem deploying to Preview – panda-docs April 5, 2025 13:46 Failure

vercel bot deployed to Preview – panda-studio April 5, 2025 13:47 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(deps): update dependency @ark-ui/react to v5 #3202

chore(deps): update dependency @ark-ui/react to v5 #3202

renovate bot commented Mar 24, 2025 •

edited

Loading

changeset-bot bot commented Mar 24, 2025 •

edited

Loading

vercel bot commented Mar 24, 2025 •

edited

Loading

chore(deps): update dependency @ark-ui/react to v5 #3202

Are you sure you want to change the base?

chore(deps): update dependency @ark-ui/react to v5 #3202

Conversation

renovate bot commented Mar 24, 2025 • edited Loading

Release Notes

Added

Fixed

Added

Fixed

Fixed

Added

Fixed

Added

Changed

Fixed

Added

Fixed

Fixed

What’s new in v5?

A quick note on tests

Added

Fixed

Fixed

Fixed

Added

Fixed

Fixed

Added

Fixed

Added

Fixed

Added

Fixed

Added

Changed

Fixed

Removed

Fixed

Fixed

Fixed

Fixed

Added

Fixed

Added

Changed

Fixed

Added

Fixed

Changed

Fixed

Changed

Fixed

Added

Fixed

Changed

Fixed

Changed

Added

Fixed

Added

Fixed

Fixed

Fixed

Added

Changed

Fixed

Added

Added

Changed

Fixed

Added

Changed

Fixed

Changed

Fixed

Changed

Fixed

Added

Changed

renovate bot commented Mar 24, 2025 •

edited

Loading