Core logic for the accordion widget implemented as a state machine
Core logic for the accordion widget implemented as a state machine
chakra-ui
yarn add @zag-js/accordion
# or
npm i @zag-js/accordionYes please! See the contributing guidelines for details.
This project is licensed under the terms of the MIT license.
All notable changes to this project will be documented in this file.
For v0.x changelog, see the v0 branch
outsideDaySelectable prop to allow selecting days outside the current month (on the
same visible date range)SelectionMode interfaceToggle Group: Add support for deselectable prop to ensure one or more toggle is selected at any time.
Splitter:
api.resetSizes() to reset the size to the initial specified sizeSelect: Fix issue where machine doesn't leave focus state when interacting outside with another editable element.
This leads to the data-focus attribute not being removed from the trigger element.
Floating Panel: Fix issue where clicking the trigger when panel is open, doesn't close the panel
Floating Panel
absolute to fixed to improve positioning consistencyStageTriggerProps and AnchorPositionDetails was not exportedFloating Panel
Toast: Add support for queuing toasts that exceed the maximum limit. When the maximum number of toasts is reached:
Listbox
api.clearHighlightedValue function to clear the highlighted valuedata-empty attribute to indicate when the listbox is emptyCollection: Add filter function to collection methods
data-empty attribute to the listbox and content to indicate when the listbox is emptydefaultValue is set.Listbox
loopFocus was not set.extended selection mode was not working as expected.Dom Query: Improve platform detection logic to detect macOS and iOS correctly.
ListCollection instead of mutating
the internal itemsTabs: Fix issue where tabs indicator animation behaves inconsistently.
Date Picker
Interact Outside
Slider
origin: end to align the thumb to the end of the track.thumbSize as CSS variables in the root element. Can be useful for styling the slider.Menu: Fix issue where addItemListener doesn't work as expected.
thumbSize CSS variable is not applied.addItemListener function to allow listening for dispatched custom event on menu item.tabIndex to improve usage within dialogsmenu:select event on the menu item when it is selectedSplitter: Fix issue where onResizeStart and onResizeEnd callbacks are not called when using keyboard
Combobox: Fix issue where onOpenChange with the same open value
ColorStringFormat typedownloadFile where name is not considered in some casesNumber Input: Set the default step to 0.01 when formatOptions.style is set to percent
[Breaking] Splitter: Redesign splitter machine to support more use cases and improve DX.
Before:
const service = useMachine(splitter.machine, {
id: useId(),
defaultSize: [
{ id: "a", size: 50 },
{ id: "b", size: 50 },
],
})After:
const service = useMachine(splitter.machine, {
id: useId(),
panels: [{ id: "a" }, { id: "b" }],
defaultSize: [50, 50],
})The also comes with new features such as:
Toast: Fix issue where setting offsets to undefined causes machine to throw
Select: Fix issue where select valueAsString loses reactivity
api.setSizes to set the size of multiple panelsapi.getSize to get the size of a panelNumber Input: Fix issue where number input onValueChange is called with incorrect valueAsNumber
Slider: Fix issue where setting min to value other than 0 causes incorrect initial placement of thumbs
Combobox: Fix issue where cursor moves unexpected when editing input value
Tags Input: Improve caret detection logic to prevent unwanted tag removal
Timer
interval value from 250 to 1000Pin Input: Fix issue where OTP SMS autofill doesn't work as expected.
Date Picker: Fix issue where Svelte throws a state_unsafe_mutation error when controlling the datepicker range
mode.
Rating Group: Fix issue where rating group label places focus incorrectly.
React: Flush effects synchronously rather than within a microtask.
Checkbox: Fix issue where checkbox incorrectly sets data-invalid when invalid is false.
Radio Group, Switch: Improve focus behavior in Safari browser.
Accordion: Fix issue in Safari where clicking triggers doesn't show the content as expected.
Auto Resize:
maxHeight, overflowY, and boxSizing CSS properties.Date Picker:
api.getViewProps.visibleRangeText property to api.offset() return value.Progress: Add support for locale and formatOptions to properly format the api.percentAsString result.
Framework Adapters (React, Svelte, Solid, Vue): Support reenter:true in machine transitions.
Progress: Allow for more precise (decimal) values.
Scroll Snap: Fix issue where getScrollPadding could return NaN in test environments.
Date Picker: Fix issue where onValueChange doesn't get called when value is cleared.
Number Input: Fix issue where allowOverflow was not implemented.
Signature Pad
readOnly or onChange.getDataUrl in the onDrawEnd callback after clearing the signature pad does not return an
empty string.React: Improve Hot Module Replacement such that effects are replayed correctly. This removes the need to refresh the page for changes to take effect.
Toggle Group: Fix issue where calling api.setValue with an array doesn't work as expected.
Pin Input: Fix flushSync was called from inside a lifecycle method warning.
Vue: Fix issue where choose is not a function error could be thrown for some machines.
File Upload: Fix issue where win.DataTransfer could throw in testing environments.
Time Picker: Fix [@zag-js/dismissable] node is null or undefined warning when lazy mounting the content.
count prop to improve SSR aria-label attribute.Pin Input: Fix issue where editing existing values don't work as expected.
Number Input: Fix issue where value prop wasn't consumed in the machine.
Carousel: Fix issue where page was not consumed in the machine.
Textarea: Fix issue where ResizeObserver loop could throw undelivered notifications warning.
Toggle: Bring back toggle machine.
Hover Card: Expose interaction outside handlers to hover card.
Collection: Widen items type to allow Iterable instead of just Array since we internally convert iterables
to an array.
Carousel: Enforce required slideCount to ensure machine works as expected.
Framework Bindings: Fix issue where undefined values were not filtered out before resolving props.
React: Fix issue where flushSync warnings could be shown when unmounting a component.
Select: Fix regression where multiple: true doesn't work.
Timer: Fix issue where timer doesn't restart when startMs changes.
Toggle Group: Fix issue where data-focus doesn't get removed after blurring the toggle group.
Toast: Fix keyboard navigation issue where toast group skips the close button within the toast item and moves to the next focusable element in the document.
<component>.Machine type to help when typecasting generic components like combobox and select.Core: Rewrite machines for increased performance and initial mount time. The results show roughly 1.5x - 4x performance improvements across components.
[Breaking] Toast
createStore<Key> component to render toastsMenu: Fix issue where context menu doesn't update positioning on subsequent right clicks.
Avatar: Fix issue where api.setSrc doesn't work.
File Upload: Fix issue where drag-and-drop doesn't work when directory is true.
Carousel
Timer: Fix issue where timer stops when switching tabs.