chore(deps): update dependency @ark-ui/react to v5 #54
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR contains the following updates:
^1.2.1->^5.0.0Release Notes
chakra-ui/ark (@ark-ui/react)
v5.30.0Compare Source
Added
requiredandinvalidpropsonValueCommitcallback that fires when the input loses focus or Enter is pressedFirstTriggerandLastTriggercomponents for navigating to first/last pageboundaryCountparameter for controlling boundary pages (start/end)invalidandrequiredprops with correspondingdata-*andaria-*attributesscrollToIndexFnprop to enable keyboard navigation in virtualized treesFixed
aria-controlsattribute could fail when lazy mounting the contentrole="dialog"to content andaria-haspopup="dialog"to trigger when not inline for better accessibilitydirprop now properly delegated to all panel partsevent.defaultPreventedfor custom behaviorflushSync was called from inside a lifecycle methodwarningdata-highlightedwasn't applied to the first item when usingautoHighlightwith input filteringformatOptionschanges dynamicallyEnterkey is pressed and formatting is triggeredChanged
getVisibleNodes()now returns{ node, indexPath }[]instead ofnode[]v5.29.1Compare Source
Fixed
aria-describedbyresolution to correctly reference helper text and error text IDsnaxis by explicitly settingtop: 0draggableandresizableoptions not being respected when set tofalsev5.29.0Compare Source
Added
valuetoOpenChangeDetailsfor better contextwhen handling open state changes
autoSizeprop to allow variable width/height slide itemsSplitter.ResizeTriggerIndicatorto render an indicator when resizinggetLayoutandgetSplitterLayoutfunctions for calculating splitter panel layoutsFixed
allowMouseDragis enabledonHighlightChangenot being invoked when collection is filtered to emptyfield multiple times
picker
data-focus-visibleanddata-focusattributesdata-*attachedv5.28.0Compare Source
Added
InteractOutsideEvent,FocusOutsideEvent, andPointerDownOutsideEventtypes for better typesafety
Carousel.AutoplayIndicatorcomponent for conditionally rendering content based on autoplay stateCarousel.ProgressTextcomponent for displaying current page progress (e.g., "1 / 5")ToastOptionsandToastStorePropstypes for better type safetyChanged
initialItemsto acceptreadonlyarrays for better compatibility with immutable datapatterns.
Fixed
aria-hiddenbehavior to allow interaction with other page elementsv5.27.1Compare Source
Fixed
scrollbar-gutter: stablein CSSonValueChangeEndcallback not triggering for programmatic value changesv5.27.0Compare Source
Added
Fixed
Angle Slider: Resolved an issue where dragging the thumb from non-center positions caused unexpected value jumps.
The thumb now maintains consistent positioning relative to the initial click point.
Slider: Fixed a problem where the thumb offset shifted dynamically during dragging, resulting in value jumps. The
offset now remains constant from the pointer throughout the drag operation.
Date Picker: Resolved a crash in the range date picker occurring when users typed the end date first by
implementing
null/undefinedchecks for date property access.Radio Group: Reverted to
offsetLeft/offsetTopcalculations to restore correct indicator positioning withinscrollable container contexts.
Tabs: Reverted to
offsetLeft/offsetTopcalculations to fix indicator positioning issues in scrollablecontainers.
Tour:
v5.26.2Compare Source
Fixed
Angle Slider: Fix accessibility violation where the slider thumb element lacked an accessible name. The thumb now
supports
aria-labelandaria-labelledbyprops, and automatically falls back to the label element's ID for properARIA labeling.
Select: Fix accessibility violation where the required state was not set correctly to on the trigger.
Tags Input: Fix issue where entering a custom tag with combobox integration required pressing
Entertwice. Thetags-input now correctly handles custom values when the combobox has no highlighted item (
aria-activedescendantisempty), allowing the tag to be added on the first
Enterpress.v5.26.1Compare Source
Fixed
Checkbox
indeterminatedoesn't workapi.checkedStatereturns the correct checked state (boolean | "indeterminate")Collapsible: Fix issue where
dirprop value was hardcoded toltrinstead of using the provided valueCombobox: Fix issue where controlled single-select combobox does not propagate its initial value to
inputValueListbox: Fix issue where pressing Enter key when no highlighted item still calls
event.preventDefault()Radio Group: Refactor to use
getBoundingClientRect()for precise indicator positioningSlider
minStepsBetweenThumbsTabs: Refactor to use
getBoundingClientRect()for precise indicator positioningTags Input: Fix issue where
maxLengthdoesn't apply to the edit input as wellv5.26.0Compare Source
Added
Collapsible: Add support for
collapsedHeightandcollapsedWidthprops to control the dimensions of thecollapsible content when in its collapsed state.
Focus Trap: Allow elements referenced by
aria-controlsto be included in the trap scope. This makes it possiblefor menus, popovers, etc. to be portalled and work correctly.
Pagination: Add
getPageUrlprop for generatinghrefattributes when using pagination as links.Select: Add
SelectRootComponentPropstype export for better component type composition.Listbox: Add
ListboxRootComponentPropstype export for better component type composition.Combobox: Add
ComboboxRootComponentPropstype export for better component type composition.TreeView:
TreeViewRootComponentPropstype export for better component type composition.TreeViewNodeRenameInputcomponent for inline node label editingcanRenameprop to control which nodes can be renamedonRenameStart,onBeforeRename, andonRenameCompletecallbacks for rename lifecycleCheckedChangeDetails,LoadChildrenErrorDetails,RenameStartDetails, andRenameCompleteDetailstypeexports
Fixed
Scroll Area: Fix RTL horizontal scrollbar positioning on Safari
Slider: Fix issue where slider continues dragging when disabled during drag operation.
Switch: Fix issue where
data-activeis inconsistently applied whendisabledstate changes at runtimev5.25.1Compare Source
Fixed
Date Picker
FormatByte: Add support for
unitSystemproperty to allow changing between decimal (1000 bytes) and binary (1024bytes) systems.
Number Input: When
formatOptionsis used (likestyle: "currency"), the cursor would jump to the end of theinput when typing in the middle. The cursor now maintains its relative position during formatting changes.
Pin Input: Fix issue where using the keyboard shortcuts
Cmd+BackspaceandCmd+Deleteto delete text in pininputs would insert "undefined" instead of clearing the field.
Scroll Area: Fix issue where resize tracking was not observing the root element, which caused the scrollbar to not
update when the root element's size changed.
v5.25.0Compare Source
Added
mergePropsutility for combining multiple props objects with proper event handler and className merging.createContextutility for creating typed React contexts with improved DX.Fixed
angleSliderAnatomyfrom the anatomy exportsv5.24.1Compare Source
Fixed
mergePropsthrows whenpropsisundefinedornullv5.24.0Compare Source
Added
Combobox: Add
alwaysSubmitOnEnterprop to allow bypassing the default two-step behavior (Enter to closecombobox, then Enter to submit form) and instead submit the form immediately on Enter press. This is useful for
single-field autocomplete forms where Enter should submit the form directly.
Dismissable: Add support for layer types in dismissable layer stack. Layers can now be categorized as
dialog,popover,menu, orlistbox. This enables:data-nestedattribute on nested layers of the same typedata-has-nestedattribute on parent layers with nested children of the same type--nested-layer-countCSS variable indicating the number of nested layers of the same typeChanged
Hover Card: Change default delay values for hover card to improve accessibility.
openDelay: from700msto600msTooltip: Change default delay values for tooltip to improve accessibility.
Learn more
openDelay: from1000msto400mscloseDelay: from500msto150msRemoved
TimePicker: The TimePicker component has been removed from this release. This component was never part of the
public API and was considered experimental. It had significant bugs and usability issues across all frameworks and
locales, making it unsuitable for production use.
Migration: We recommend building a custom time picker using the Select component for simple use cases, or
implementing a time grid pattern for more complex scenarios.
Fixed
Editable: Allow text selection in editable preview when
autoResizeis enabledPreviously, when
autoResizewas set totrue, the preview element haduserSelect: "none"applied, preventingusers from selecting text. This has been fixed by removing the
userSelectstyle property.File Upload: Fix regression where clicking the trigger doesn't open the file picker when used within the dropzone
Menu:
target="_blank"would open two tabsTabs: Fix issue where
idsforitemandcontentcould not be customizedToast: Allow creating a toast store without any arguments
v5.23.0Compare Source
Added
data-requiredattribute toField.LabelRootComponentandRootProviderComponenttypes which are usefulwhen building compositions that wrap the
RootandRootProvidercomponents and you still want type-safety for thecollection.
Fixed
Menu: Fix
Menu.ItemTextnot working insideMenu.TriggerItemv5.22.0Compare Source
Added
Combobox: Add
ComboboxEmptycomponent to display content when the combobox has no itemsListbox: Add
ListboxEmptycomponent to display content when the listbox has no itemsHover Card: Add support for
disabledpropFixed
Collection: Fix issue where disabled items could be reached via typeahead
Color Picker: Fix issue where color picker was not working correctly in RTL mode
Date Picker: Fix issue where datepicker doesn't revert to a valid value when the input value exceeds the min/max
and blurred
Dismissable: Expose
onRequestDismisscustom event handler for event a parent layer requests the child layer todismiss. If prevented via
event.preventDefault(), the child layer will not dismiss when the parent layer isdismissed.
Number Input
patternwhenformatOptionsis provided. This prevents native pattern validation from conflictingwith formatted values (e.g., currency or percent).
data-scrubbingattribute to the number input parts.Tags Input: Fix issue where highlighted item doesn't clear when tabbing out of the input to an external button
within the
controlpart.Tooltip
closeOnPointerdowntofalsewhencloseOnClickis set tofalse@zag-js/storedependency with a lightweight store implementation.v5.21.0Compare Source
Added
useAsyncListanduseCollatorhooks for managing asynchronous list operations and locale-awarestring comparison
ToastActionOptions,ToastPlacement,ToastPromiseOptions,ToastStatus,ToastStatusChangeDetails, andToastTypeChanged
divinstead oflegendelement for improved styling flexibilityaria-labelledbyattribute to fieldset root for better accessibility by linking to legendFixed
Date Picker
area.
min/maxconstraints.disabledonapi.getMonths()andapi.getYears()results to indicate options out of range for currentconstraints.
Listbox
currently highlighted.
getElementtoscrollToIndexFndetailshighlightedValueif the item is no longer in the collection.Scroll Area
data-draggingattribute to scroll area parts.Select: Add
getElementtoscrollToIndexFndetailsCombobox: Add
getElementtoscrollToIndexFndetailsTabs: Fix inconsistent keyboard navigation where TabPanel intermittently receives focus before focusable elements
v5.20.0Compare Source
Added
exactMatchoption that enables whole-word matching using regex word boundaries.Fixed
Menu: Fix context menu repositioning logic
ScrollArea: Add
data-hoverto scroll areav5.19.0Compare Source
Added
Fixed
ListCollection
at()andindexOf()find()method (was checking!= nullinstead of!== -1)GridCollection: Avoid recomputing rows on every call to
getRows()Menu
data-stateattribute for context menu triggerv5.18.4Compare Source
Fixed
Listbox: Add support for navigating grid collections
Carousel:
slideCountorautoplayprops change.loop: falsewas ignored when using autoplay. Now, the carousel will stop when it gets to thelast slide.
Date Picker: Expose
data-inlineattribute on Content part to enable distinct styling for inline date pickersversus popover date pickers.
Menu: Fix issue where
onCheckedChangecould be called twice on checkbox or radio itemRadio Group: Fixed issue where arrow key navigation doesn't apply
data-focus-visibleon the newly focused item.TagsInput: Export
InputValueChangeDetailstypeChanged
v5.18.3Compare Source
Fixed
Factory: Check if
childrenis a valid React element before callingChildren.only()Carousel: Fix issue where controlled carousel ignores last slide
v5.18.2Compare Source
Fixed
--layer-indexwith positioner and backdroptrapFocusfrommodalso it's possible to setmodal=falseandtrapFocus=truev5.18.1Compare Source
Fixed
Date Picker: Fixed issue where hovered range was connect to selected values, when it shouldn't
Tree View: Fixed issue where tree view doesn't scroll into view when content overflows.
v5.18.0Compare Source
Added
Collection: Add
useListSelectionhook for managing collection item selection with support for single/multipleselection modes
File Upload: Add support for programmatically controlling the accepted files via
acceptedFilesanddefaultAcceptedFilesSignature Pad: Add support for programmatically controlling the paths via
pathsanddefaultPathsprops.Date Picker: Added hover range preview support for date picker range selection. Added
inHoveredRange,firstInHoveredRange, andlastInHoveredRangeproperties toDayTableCellStatewith corresponding data attributesdata-in-hover-range,data-hover-range-start, anddata-hover-range-end.Hover range states are only active when not overlapping with actual selected range, enabling distinct styling for
hover preview vs actual selection in range mode.
Fixed
comparison operations when different date types (
CalendarDate,CalendarDateTime,ZonedDateTime) are mixed,particularly in scenarios involving time components.
v5.17.0Compare Source
Added
CheckboxGroupProvidercomponent for external checkbox group state managementFixed
Carousel: Fix issue where full page carousel could trap scrolling
ListCollection:Export
UseListCollectionReturntypeTreeCollection: Fix issue where the
filtermethod completely deletes the children key from the node when thereare no matching children
Number Input: Fix issue where default pattern does not allow negative numbers with decimal point
File Upload
FileError,FileMimeType, andFileRejectiontypesapi.setFilesinvokes validation with incorrectacceptedFilessecurity restrictions. As a fallback in the file validation logic, we now infer the mime type from the file
extension.
v5.16.1Compare Source
Fixed
Combobox
reasontoonOpenChangeandonInputValueChangecallbacksapi.clearHighlightedValuefunction to clear highlighted valueDate Picker
selectionMode=rangeandminView=yearfocusedValuecould not be fully controlledToast: Fix issue where toast
titleordescriptioncould not accept React elementListbox: Select highlighted item only if it exists in the collection
Progress: Improve
valueAsStringformattingSelect
api.clearHighlightedValuefunction to clear highlighted valueTour: Fix an issue where the
gotofunction inStepActionMapdoesn't work when passing step IDs (string)Tree View: Expose
idin the tree node stateClientOnly: Support
childrenas a functionv5.16.0Compare Source
Added
inlineprop to render color picker inlineinlineprop to render the date calendar inlineFixed
#if missing when using thehexchannel inputv5.15.4Compare Source
Fixed
defaultValueorvalueafter fetching items doesn'tupdate the
valueAsStringv5.15.3Compare Source
Fixed
v5.15.2Compare Source
Fixed
Date Picker: Fix issue with keyboard selection where setting unavailable date causes month view to behave
differently from clicking with mouse
Toast: Fix issue where app crashes when
toaster.promiseis called without loading option. Theloadingoptionis now required. A warning will be logged if it is not provided
Tree View
aria-busyattribute from branch trigger when not loading childrenonExpandChange,onSelectionChangeandonFocusChangeAngle Slider: Fix issue where scrubbing doesn't feel smooth on touch devices
Timer:
targetMswhen window is not visiblestartMsandtargetMsare configured correctlyprogressPercentcalculation for countdown timersv5.15.1Compare Source
Fixed
Listbox.ItemContextwas not exportedv5.15.0Compare Source
Added
defaultCheckedValue,checkedValue,onCheckedChangepropsloadChildrenfails viaonLoadChildrenErrorpropFixed
verticaldon't workdefaultValuetonulldoesn't show indeterminate statev5.14.2Compare Source
Fixed
TreeViewNodeStateandTreeViewNodePropstypes from@zag-js/tree-viewChanged
Collection: Improve the APIs around
tree.flatten(...)andflattenedToTreeto ensure the original nodeproperties are preserved.
v5.14.1Compare Source
Fixed
onOpenChangecould be called twice when controlleddownloadFilefunction to handle webview scenariosonInputValueChangecould be called twice when selecting an itemallowCustomValue: trueused within in a form requires two enter keypress to submitv5.14.0Compare Source
Added
activationMode=nonecopymethodgetParentNodesto accept a value or index pathFixed
@ark-ui/react/collectionwas not working as expectedslidesPerPageis 0undefinedinacceptedFileswhen no files acceptedMenu.ItemTextcould not be used withMenu.Itemv5.13.0Compare Source
Added
useListCollectionhook to create a dynamic list collection.Fixed
ProgressValueChangeDetailsandProgressValueTranslationDetailstypes from@zag-js/progressv5.12.0Compare Source
Added
loadChildrenis a function that is used to load the children of a node.onLoadChildrenCompleteis a callback that is called when the children of a node are loaded. Used to update thetree collection.
childrenCountto the node object to indicate the number of children.Fixed
Shift+ArrowRightset value to0instead ofmaxwhen step is too large (e.g.20)onValueChangeEnddoesn't return the latest value when dragging very fastv5.11.0Compare Source
Added
transformFilescontext property.Fixed
minStepsBetweenThumbsisn't computed correctly when interacting with pointer orkeyboard.
v5.10.0Compare Source
Added
PasswordInputcomponent for creating password inputsonSelectcallback that gets fired when an item is selected via keyboard/mouse.Fixed
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.
v5.9.2Compare Source
Fixed
Collection: Export
CollectionOptions,TreeCollectionOptions,GridCollectionOptionstypes.Carousel
allowMouseDragis set where carousel no longer snaps after mouse interactionCombobox: Fixed issue where
onInputValueChangedoesn't get called whenautoFocusis set totrueSlider: Fixed issue where slider could throw a error when rendered in an popover or dialog
Tour: Fixed issue where calling
api.start(<id>)with a step id doesn't work as expectedv5.9.1Compare Source
Fixed
Combobox: Fixed issue where
focusableprop was not being applied to the trigger element.Collection: Fixed issue where
getNextValueandgetPreviousValuedoesn't work as expected whengroupByisused.
v5.9.0Compare Source
Added
useFilterhook to filter data based on the current locale.FormatRelativeTimecomponent for formatting relative time.v5.8.0Compare Source
Added
outsideDaySelectableprop to allow selecting days outside the current month (onthe same visible date range)
Fixed
v5.7.0Compare Source
Added
Listboxcomponent for selecting a single or multiple items from a list. See thedocumentation for details.
Listbox,SelectorComboboxdocumentation for moredetails.
Changed
package.jsontoexportsfor improved compatibility with tools like Vite.v5.6.0Compare Source
Added
AngleSlidercomponent for selecting an angle. See thedocumentation for details.
FloatingPanelcomponent for creating floating windows. See thedocumentation for details.
data-emptyattribute to indicate an empty listbox or contentv5.5.0Compare Source
Added
disclosure components (e.g.,
Dialog,DatePicker,Menuetc).Fixed
Tabs: Fixed issue where tabs indicator animation behaves inconsistently.
Date Picker
Disclosure Components
v5.4.0Compare Source
Added
Slider
origin: endto align the thumb to the end of the track.thumbSizeas CSS variables in the root element. Can be useful for styling the slider.Menu
onSelectevent to theMenu.Itemcomponent.Fixed
tabIndexfor better dialog support.v5.3.1Compare Source
Fixed
v5.3.0Compare Source
Added
Indicatorpart to display whether the collapsible was open or closed.ValueTextcomponent.Fixed
onOpenChangewas called with the sameopenvalue.use clientdirective.onResizeStartandonResizeEndcallbacks weren't triggered during keyboardinteractions.
v5.2.0Compare Source
Added
asynchronously.
Changed
0.01whenformatOptions.stylewas set topercent.Splitter documentation for more details.
Fixed
offsetstoundefinedcaused the machine to throw.valueAsStringlost reactivity.v5.1.0Compare Source
Added
ref.Fixed
useFieldhook.onValueChangecorrectly receivedvalueAsNumber.minwas set to a non-zero value.v5.0.1Compare Source
Fixed
data-invalidis no longer set wheninvalidisfalse.intervalfrom250to1000.v5.0.0Compare Source
Ark UI just got a major performance boost! 🚀
What’s new in v5?
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:
Added
slideCounttoCarousel.Rootcomponent.onValueChangeanddefaultValueprops.defaultFormatprop.defaultHighlightedValueanddefaultInputValueprops.defaultFocusedValueprop,getViewProps, andvisibleRangeText.defaultHighlightedValueprop.defaultPageSizeprop.countprop for better SSR aria-label.localeandformatOptionsprops.pixelSizeprop.defaultHighlightedValueprop.defaultInputValueprop.Fixed
api.setSrcnot working.directory: true.valueprop not being consumed.multiple: truedidn't work.<li>elements correctly within<ul>or<ol>.ResizeObserverwarning.actionprop was passed toActionTrigger.data-focusnot being removed on blur.v4.9.2Compare Source
Fixed
FocusTrapcomponent to theindexfile.data-disabledattribute wasn't set on the field helpertext when the field is disabled.
v4.9.1Compare Source
Fixed
operation.
defaultViewproperty did not correctly switch to thespecified view.
v4.9.0Compare Source
Added
minViewandmaxViewoptions for better control over the displayed views, allowing tocreate Month and Year pickers.
parsemethod to convert input values into valid dates, complementing theformatoption for enhanced UXlocaleandtimeZoneoptions to theformatmethodplaceholdercontext property to customize the input's placeholder textFixed
data-placementattributedropzone
context.setClipboardFiles(...)was called despite file upload beingdisabled
draggingstate even when disabledcontext.disabledminandmaxdates were less than one year apart and overlapped two distinct years
v4.8.1Compare Source
Fixed
disableClickprop.v4.8.0Compare Source
Added
Tourcomponent to guide users through the interface. For moredetails, check the Tour documentation.
FocusTrapcomponent to confine focus within a specifiedcontainer.
Fixed
inconsistent during the
openingorclosingphases.v4.7.0Compare Source
Added
Clipboard.ValueTextto display clipboard content.preventDropOnDocumentto block file drops on the document when the file upload component is active.setClipboardFilesto the API for setting files from clipboard data.onValueChangeanddefaultValue.navigateproperty for custom router navigation when selections render as links.onValueChangeanddefaultValue.QrCode.DownloadTriggerto enable QR code image downloads.Fixed
endvalue whenpageSizeexceededcount.getDataUrlto generate a properly sized QR code.v4.6.0Compare Source
Added
Fixed
acceptattribute wasn’t applied to the hidden input.Configuration
📅 Schedule: Branch creation - At any time (no schedule defined), 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.
This PR was generated by Mend Renovate. View the repository job log.