CHANGELOG

All notable changes to this project will be documented in this file.

[Unreleased]

See the Changesets for the latest changes.

0.68.0 - 2024-09-15

Fixed

DatePicker
- Fix issue where partial YY format in date string was not parsed correctly.
- Fix issue in Vue.js where input value could not be changed by typing.
- Fix issue where setting controlled min and max values throws an error.
TreeView
- Fix issue where programmatic selection does not account for singular selection

0.68.0 - 2024-09-12

Fixed

Combobox
- Fix issue where highlighted item was persistent when the collection is empty

Changed

Timer
- Introduces new area and control parts for better anatomy and structure.
- [BREAKING] Move role"timer to new area part.
- Automatically hide the action triggers based on the action prop passed.

BEFORE:

<div>
  <div {...api.getRootProps()}>
    <div {...api.getItemProps({ type: "days" })}>{api.formattedTime.days}</div>
    <div {...api.getSeparatorProps()}>:</div>
    <div {...api.getItemProps({ type: "hours" })}>{api.formattedTime.hours}</div>
    <div {...api.getSeparatorProps()}>:</div>
    <div {...api.getItemProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
    <div {...api.getSeparatorProps()}>:</div>
    <div {...api.getItemProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
  </div>
  <div>
    <button {...api.getActionTriggerProps({ action: "start" })}>START</button>
    <button {...api.getActionTriggerProps({ action: "pause" })}>PAUSE</button>
    <button {...api.getActionTriggerProps({ action: "resume" })}>RESUME</button>
    <button {...api.getActionTriggerProps({ action: "reset" })}>RESET</button>
  </div>
</div>

AFTER:

<div {...api.getRootProps()}>
  <div {...api.getAreaProps()}>
    <div {...api.getItemProps({ type: "days" })}>{api.formattedTime.days}</div>
    <div {...api.getSeparatorProps()}>:</div>
    <div {...api.getItemProps({ type: "hours" })}>{api.formattedTime.hours}</div>
    <div {...api.getSeparatorProps()}>:</div>
    <div {...api.getItemProps({ type: "minutes" })}>{api.formattedTime.minutes}</div>
    <div {...api.getSeparatorProps()}>:</div>
    <div {...api.getItemProps({ type: "seconds" })}>{api.formattedTime.seconds}</div>
  </div>
  <div {...api.getControlProps()}>
    <button {...api.getActionTriggerProps({ action: "start" })}>START</button>
    <button {...api.getActionTriggerProps({ action: "pause" })}>PAUSE</button>
    <button {...api.getActionTriggerProps({ action: "resume" })}>RESUME</button>
    <button {...api.getActionTriggerProps({ action: "reset" })}>RESET</button>
  </div>
</div>

Popper
- Add support for hideWhenDetached positioning option. This can be used in the positioning options for floating components (select, popover, dialog, etc.)

0.67.0 - 2024-09-10

Added

Highlight
- Released @zag-js/highlight-word package to help with highlighting text in a string.

Fixed

Date Utils
- Fixed issue where getWeekDays had inconsistent behavior when both locale and startOfWeekProp were set
Menu
- Fixed issue where lazy mounting the content caused the first menu item to not be focused when opened with keyboard

0.66.0 - 2024-09-05

Fixed

Floating Components
- Fix issue where clicking outside of a dialog on mobile passes click events through
Popover
- Fix issue where popover does not restore focus when open state is changed programmatically
Avatar
- Fix issues where avatar could throw when the fallback inner text changes.
Steps
- Improve 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 in toast options, 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.

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

Changed

Floating Components
- Refactor boundary to only support function that returns an element.
Select
- Refactor opening and selection to be based on click events rather than pointerdown/up cycles.
- Improve usability and accessibility of the select component.
- Fix issue where controlled multiple selects open state behaved unexpectedly.
File Upload
- Add 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.

0.65.1 - 2024-08-20

Fixed

Popover
- Fix issue where popover doesn't restore focus when controlled
- Fix issue where clicking the close button doesn't restore focus to the trigger
Svelte
- Fix issue where peerDependencies were configured incorrectly

0.65.0 - 2024-08-08

Fixed

Dialog
- Fix issue where closing a nested dialog focuses the first focusable element in the parent dialog instead of the previously focused element.

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

0.64.0 - 2024-08-01

Fixed

NumberInput
- Fix issue where pressing enter key, doesn't make arrow up and down work as expected

Added

Collection
- Introduce new GridCollection to manage grid base navigation and selection

Changed

Collection [BREAKING]
- Rename Collection class to ListCollection to better reflect its intent

0.63.0 - 2024-07-28

Fixed

DatePicker
- Fix issue where selected date doesn't reflect in input when you click trigger then focus input
- Fix SSR issue when using getPresetTrigger
Slider
- Fix issue where onValueChangeEnd gets called with incorrect value
Timer
- Fix an issue that action trigger did not emit an event

Added

DatePicker
- Add support for index in getLabelProps

0.62.1 - 2024-07-27

Fixed

TimePicker
- Export missing TimePicker types
Toast
- Add missing aria-labelledby and aria-describedby attributes on the toast root element
React
- Fix regression with useMachine where HMR could lead to Maximum call stack exceeded error

Added

Changed

0.62.0 - 2024-07-23

Fixed

Combobox
- Improve accessibility by removing aria-selected and aria-disabled when false
- Prefer click over pointerup for consistent experience between screen readers and pointers.
React
- Improve HMR behavior in React with components like Dialog, Select, and Menu

Changed

Steps
- Rename skippable to linear prop to better communicate its intent
- Set default orientation to horizontal

0.61.1 - 2024-07-15

Fixed

Tags Input
- Fix issue where tag input does not allow for repeat pasting and undo
- Fix issue where deleting a pasted value completely disables pasting
- Ensure value set in the machine are always unique, discarding duplicates
Select
- Fix issue where closeOnSelect could not be customized when multiple is set to true

0.61.0 - 2024-07-08

Fixed

RadioGroup
- Ensure consistent click events for radio group item.
- Fix issue where data-readonly attribute was misspelt

Added

Tooltip
- Add support for closeOnClick to determine if the tooltip should close when trigger is clicked.

0.60.0 - 2024-07-05

Fixed

All Machines
- Improve reliability in web runtime by wrapping the process.env check in a function
Combobox
- Fix issue where Combobox doesn't update the input on selection with pointer

Added

[NEW] Steps
- Add new steps machine to create a step-by-step wizard or onboarding experience

0.59.0 - 2024-06-29

Fixed

Select, Combobox
- Improve reliability of select and combobox by redesigning the collection interface
TreeView
- Fix issue where inputs could not be used within tree

Added

ColorPicker, Select, NumberInput
- Add support for valueText part for rendering internal state value

0.58.3 - 2024-06-27

Fixed

Combobox
- Fix issue where input shows values when multiple is set to true. The design intent is that when combobox is set to multiple, values should be rendered outside the
- Expose data-placement on Content
Progress
- Fix issue where progress circle throws warning due to incorrect viewBox attribute on <svg>
Carousel
- Fix issue where next and previous buttons don't loop currently when using setting both slidesPerView and loop
Presence
- Fix issue where presence doesn't close if close animation has duration of 0s
Select, Combobox
- Expose data-invalid on Combobox and Select triggers
Menu
- Fix context menu losing position data on close
- Fix issue where context menu doesn

0.58.0 - 2024-06-21

Fixed

All Machines
- Ensure consistent application of form related properties like invalid, required, and readOnly.
- Export Service from all machines for use in Lit based components.
Tooltip
- Fix issue where closeOnScroll=false doesn't work consistently in Safari

Added

Alert
- Expose more functions to programmatically change the page like api.goToNextPage(), api.goToPrevPage(), api.goToFirstPage(), api.goToLastPage()
DatePicker
- Add support for customizing date picker accessibility labels
FileUpload
- Add support for api.clearRejectedFiles to allow clearing the rejected files programmatically.
- Improve DX of the accept context property by providing autocompletions for common file type

0.57.0 - 2024-06-14

Fixed

Editable
- Fix issue where setting activationMode=dblclick clears the input value unexpectedly.
SignaturePad
- Add role=application to signature pad control. This fixes the accessibility violation with aria-roledescription
Menu
- Fix issue where sibling menus or popovers don't work well on iOS mobile devices.
- Fix issue where context menu trigger shows the magnifier and iOS context menu on long press.

Added

Select
- Add support for selecting all values using api.selectAll()
Tooltip
- Add support for closeOnScroll to control whether the tooltip should close when the trigger's overflow parent scrolls.
ColorPicker
- Add support for channel slider label and value text parts
- Allow passing format to channel slider parts. Useful for building slider only color pickers
- Add api.getChannelValueText to get the formatted value text for specific channel slider
Slider
- Expose data-dragging to the component parts when dragging the slider thumb. This allows you to style the slider parts differently when the thumb is being dragged.

0.56.1 - 2024-06-11

Fixed

All Machines: Ensure consistent handling of readOnly and disabled context properties
QrCode: Fix issue where QrCode types are not exported

0.56.0 - 2024-06-10

Fixed

Menu
- Fix issue where using anchor as menuitem hijacks focus prematurely

Added

Presence
- Add support for immediate to synchronize the present change immediately instead of deferring to next tick. This should be used when composing components like Tabs.
RadioGroup, Tabs
- Add data-ssr to item as a style hook to mimick the indicator styles while in ssr. This improves the visual experience and prevents the indicator flashing on hydration

Changed

Timer [Breaking]
- Refactor anatomy for timer machine.
  - Before: root, segment, control, separator
  - After: root, item, itemValue, itemLabel, actionTrigger, separator,

0.55.0 - 2024-06-07

Fixed

FileUpload
- Fix issue where onFileAccept gets called when deleting an item via the delete trigger. Now, only onFileChange is called when deleting or calling api.clearFiles
Combobox, Select
- Add missing list part

Added

[NEW]: Added new QR Code machine to generate QR codes from text or URLs.

Changed

0.54.0 - 2024-06-05

Changed

All Machines

Update all machines to use prop getters everywhere. This helps to improve render performance and reduce breaking changes in the future.
```
rootProps -> getRootProps()
labelProps -> getLabelProps()
```

0.53.0 - 2024-06-03

Fixed

Removed stray console.log

Added

Svelte
- Fix svelte runes warning for $state usage in useMachine hook
- Add reflect utility to help design system maintainers manage api reactivity
- Add and expose PropTypes type to improve type safety in spread props

0.52.0 - 2024-06-02

Fixed

Solid.js
- Fix SSR issue in Solid.js where spreading readOnly: false adds the readonly attribute on editable elements, making them uneditable.
Popover
- Fix issue where autoFocus was not implemented. Now, it determines whether the popover should autofocus on open
  - when true, the first focusable element or the content is focused
  - when false, the content is focused
- Fix the issue where page scroll resets on opening popover
Select
- Fix issue where changing the label of a collection item doesn't trigger a change in select and combobox components.

Added

Editable
- Allow using textarea as the input element in edit mode.

0.51.2 - 2024-05-28

Fixed

General
- Fix events merging in mergeProps utility
- Fix issue where keydown event might not fire in React due to nativeEvent currentTarget not been set sometimes.
Avatar
- Improve image load check to use naturalWidth|Height instead of currentSrc

0.51.0 - 2024-05-23

Fixed

FileUpload
- Fix issue where hidden input doesn't include the file list when dropping files on the dropzone
Progress
- Fix issue where using a smaller max than 50 throws due to the fact the default value is set to 50. Now we set the default value to mid value between the min and max

Added

[NEW]: Added new Timer machine to create a timer (countdown or stopwatch) that can be paused, resumed, and reset.
[NEW]: Added new TimePicker machine to that allows selecting a time and day period.
Pagination
- Add api.pageSize to allow retrieving the current page size
- Add onPageSizeChange to listen for page size change
Editable
- Add api.valueText that returns the current value or placeholder if empty

Changed

0.50.0 - 2024-05-15

Fixed

React
- Fix issue where controlled context can sometimes not be synced correctly
Collection
- Ensure collection are considered different when item's disabled property changes
Popover, Menu, Select
- Fix issue where positioner does not respect the offset.crossAxis

Added

Dialog, Popover:
- Add support for persistElements to prevent third-party elements from having pointer-events: none applied to them and closing when you interact with them.
Dialog
- Prevent closing dialog on outside click when role=alertdialog is set.
- Set the initial focus to the close trigger, when role=alertdialog is set to prevent accidental selection of destructive action.
Slider
- Invoke onValueChangeEnd when using keyboard to interact with slider thumb
Tabs, Combobox, Select, Menu:
- Add new composite prop to allow for composing these components within themselves.

Changed

Combobox
- Rename triggerProps to getTriggerProps() to allow for more flexible compositions
Popover, Tooltip
- Rename closeOnEsc to closeOnEscape to be consistent with dialog machine
Tabs
- When using the pointer, prefer click based selection when using activationMode=automatic over focus triggering selection. For keyboard, selection follows focus as usual

0.49.0 - 2024-04-26

Fixed

Store, React
- Fix issue where multiple versions of @zag-js/store could lead to "proxy state is not iterable" errors
Collapsible
- Fix issue where initial height animation can sometimes run
DatePicker
- Fix issue where date picker content doesn't register as a dismissable when lazy mounted
- Fix issue where changing focused value doesn't update the date picker's visible range
Splitter
- Fix issue where onResize was not called
TagsInput
- Fix issue where editing a tag and clearing it's value leaves an empty tag. Now, empty tags will be deleted
- Fix issue where deleting a tag with pointer and navigating with keyboard doesn't work

Added

Presence
- Add api.unmount to programmatically unmount the component
- Add api.skip to skip initial animation

0.48.0 - 2024-04-22

This release marks the journey to a more stable and consistent API across all components. We've made significant changes.

Fixed

Collapsible
- Resolve an issue that sometimes the collapsible height was not measured correctly
Toast
- Fix an issue where toast hide immediately after updating
- Fix an issue that the height was not exactly measured
Select, Combobox
- Fix issue where value is unintentionally sorted when highlighting item

Added

Checkbox, RadioGroup, Switch
- Add support for readOnly prop to prevent user interaction from changing the checkbox state
Combobox
- Add support for controlling the open state of the combobox via open and onOpenChange
- Add new openOnChange property to automatically open the combobox when the value changes. Value can be a boolean or a function that returns a boolean.
```
const [state, send] = useMachine(
  combobox.machine({
    openOnChange: ({ inputValue }) => inputValue.length > 2,
  }),
)
```
- Add new openOnKeypress property to automatically open the combobox when the arrow keys (up and down) are pressed.
- Add persistFocus to the item props to determine whether to clear the highlighted item on pointer leave.

Changed

All machines
- Rename all api to return consistent boolean properties. This means going from is<X> to <x>. For example, isDisabled -> disabled, isFocused -> focused, isOpen -> open, etc.
- Rename open(), close() methods to setOpen(true|false)
- Remove selectOnBlur to prevent accidental selection of options. Prefer explicit selection by user via click or enter key.
Accordion
- Rename getItemState properties
  - isOpen -> expanded
  - isDisabled -> disabled
  - isFocused -> focused
Avatar
- Rename api.isLoaded to api.loaded
- Remove api.showFallback since it's equivalent to !api.loaded
Carousel
- Rename isCurrent to current
- Rename isNext and isPrevious to next and previous respectively
- Rename isPrevious to previous
Clipboard
- Rename api.isCopied to api.copied
File Upload
- Rename api.open() -> api.openFilePicker()
Menu
- Menu now focuses the first tabbable element when it opens. This allows for composition with combobox
- Rename loop to loopFocus to better reflect its purpose
TagsInput
- Rename allowTagEdit to editable
- Add onInputValueChange to machine context

0.47.0 - 2024-04-19

Fixed

Select
- Prevent tab key interaction when the select is open. This keeps focus within the select and ensures keyboard interactions work consistently

Changed

Toast [BREAKING]:

Simplify toast api methods

<ToastContext.Provider value={api}>
-    {Object.entries(api.getToastsByPlacement()).map(([placement, toasts]) => (
+    {api.getPlacements().map((placement) => (
        <div key={placement} {...api.getGroupProps({ placement })}>
-           {toasts.map((toast) => (
+           {api.getToastsByPlacement(placement).map((toast) => (
                <Toast key={toast.id} actor={toast} />
            ))}
        </div>
    ))}
    {children}
</ToastContext.Provider>

Fix issue where toast closes when you update the same toast type

0.46.0 - 2024-04-12

Fixed

Checkbox, Switch
- Fix issue where data-active doesn't get removed when pointer is release outside the element
Toast
- Fix issue where toast closes when updated without type or duration

Added

Signature Pad [NEW]
- Add new signature pad machine to allow capturing user signature
Svelte
- Add support for useActor hook to be consistent with other frameworks

Changed

Avatar [Breaking]
- Change onLoadingStatusChange to onStatusChange to match naming convention across machines
Clipboard [Breaking]
- Change onCopyStatusChange to onStatusChange to match naming convention across machines
Toasts [Breaking]
- Add support for overlapping toasts by setting overlap: true in the toast.group machine context
- Remove pauseOnInteraction in favor of always pausing on hover. This is required for accessibility reasons (there should always be a way to pause the widgets with time-based interactions)
- Remove onOpen, onClose and onClosing in favor of onStatusChange which reports the lifecycle status of the toast
- Impose new required styling for toast to work as designed. Here's a quick example of the required styling:
```
[data-scope="toast"][data-part="root"] {
  translate: var(--x) var(--y);
  scale: var(--scale);
  z-index: var(--z-index);
  height: var(--height);
  opacity: var(--opacity);
  will-change: translate, opacity, scale;
  transition:
    translate 400ms,
    scale 400ms,
    opacity 400ms;
}

[data-scope="toast"][data-state="closed"] {
  transition:
    translate 400ms,
    scale 400ms,
    opacity 200ms;
}
```
- Require new ghostBeforeProps and ghostAfterProps props to ensure the hover interaction works as expected

0.45.0 - 2024-04-04

Changed

Solid: Rewrite mergeProps to prevent issues with children that read from context, and ensure props are always up-to-date.

0.44.0 - 2024-04-03

Added

Tags Input: Support for RegExp in delimiter

Changed

Avatar: Remove hardcoded style to allow more flexible styling

0.43.0 - 2024-04-02

Changed

Menu [Breaking]
- Rename getOptionItemIndicatorProps to getItemIndicatorProps
- Rename getOptionItemTextProps to getItemTextProps
- Changed data-part to match new anatomy
  - option-item -> item
  - option-item-indicator -> item-indicator
  - option-item-text -> item-text
File Upload [Breaking]
- Remove files form user defined context. File upload, just like <input type=file>, is largely a readonly operation that can't be set by the user.
  
  Consider using the onFileChange event to handle file changes.
- Rename api.files to api.acceptedFiles
- Rename onFilesChange to onFileChange

0.42.0 - 2024-04-01

Added

File Upload
- Add support selecting directories via directory prop
- Add support for capture property that specifies which camera to use for capture of image or video

Changed

Menu [Breaking]
- Removed value and onValueChange in favor of using explicit state to manage option items, and passing checked and onCheckedChange to the getOptionItemProps callback.
- Prefer value over id in getItemProps and getOptionItemProps for consistency with other machine.
- onSelect now provides value not id in its details.

0.41.0 - 2024-04-01

Fixed

Select
- Fix issue where select doesn't work in forms when readOnly: true is set
- Fix issue where initial value was not synced with hidden select element

Added

Dialog: Sync zIndex of content with positioner and backdrop via --z-index css variable. This helps with stacking order when using multiple dialogs.
Dismissable: Improve interaction outside logic when layer rendering is deferred (via Portals or unmounted)
Utilities: Add support for formatDate and formatList functions that use the underlying Intl.* implementations

Changed

Tooltip: Set tooltip interactive to false by default

0.40.0 - 2024-03-26

Fixed

Circular Progress: Fix issue where circular progress circle diameter doesn't get calculated correctly
Combobox:
- Fix issue where input doesn't clear when selectionBehavior is set to clear
- Fix issue where input doesn't show initially selected value
- Fix issue where empty input was replaced by selected value string when typing

Added

[NEW] Introduce new floating panel machine for draggable and resizable panels
Select
- Add data-placement to the select content to make it easier to style
- Add support for scrollToIndexFn to be used with virtualization libraries
- Add support for highlightedIndex in the onHighlightChange callback

Changed

Svelte: Unify API for useService and useMachine with other frameworks

0.39.0 - 2024-03-19

Fixed

Select: Fix issue where multiple select doesn't work correctly in forms.
DatePicker: Remove unused parse function
TagsInput: Fix issue where setting addOnPaste to false and pasting text prevents subsequent tags from being added
Progress: Fix issue where progress throws when value is initially set to null
Popper: Fix issue where crossAxis positioning property doesn't work in some cases.
Combobox: Fix issue where clear trigger remains hidden when initial value is set.

Added

Slider: Add support for custom name attribute on the thumb element
Splitter: Add data-orientation attribute to splitter panel
Menu: Expose onEscapeKeyDown event handler

Changed

💥 Breaking changes

Tabs: Rename api.tablistProps to api.listProps to match naming convention
Dismissable: Use capture phase for escape keydown handling

0.38.1 - 2024-03-08

Fixed

DatePicker
- Fix issue where next and previous had the wrong aria labels
- Fix an issue wher close on click outside does not get called when conditionally rendered
FileUpload: Fix an issue where onFileReject would not be called
Switch: Fix accessibility issue where aria-readonly was incorrectly set on the wrong element.

0.38.0 - 2024-02-26

Added

Collapsible: Add onExitComplete to listen for exit animation completion.

0.37.2 - 2024-02-25

Fixed

Collapsible: Fix issue where collapsible doesn't work when content is initially unmounted, or no animation is attached.

0.37.1 - 2024-02-24

Fixed

Collapsible: Fix issue where collapsible doesn't work when content is initially unmounted, or no animation is attached.

0.37.0 - 2024-02-21

Added

Tour: Add new Tour component to guide users through a series of steps in an application.
Expose all machine context properties as array to improve DX of building design system components.

Fixed

TreeView: Add missing getBranchIndicator function and other minor fixes.

0.36.3 - 2024-02-16

Fixed

Collapsible: Export missing types for clipboard machine
Tooltip: Fix issue where disabled tooltip flashes when hovering and clicking the trigger

0.36.2 - 2024-02-13

Fixed

Clipboard: Export missing types for clipboard machine

0.36.1 - 2024-02-13

Fixed

HoverCard: Remove superfluous log message when card was hovered

0.36.0 - 2024-02-13

Fixed

Refactor scroll utilities to safely handle null element values in test environment
Dialog: Prevent calling interaction outside logic when scrollbar is clicked

Added

TreeView: Extend anatomy to include tree item text and indicator parts.
Clipboard: Add api.copy() to copy text to clipboard

0.35.0 - 2024-02-11

Fixed

All components
- Improve runtime performance when using watchers by subscribing to context once.
- Fix issue where restoring scroll causes a smooth scroll transition back to the initial scroll point.
Fix issue where scrolling into view could result in scrolling the body element.

Affected components: Select, Menu, Combobox
Select:
- Fix issue where item group's label id pointed to the wrong element
- Fix issue where select uses the incorrect id for aria-activedecesendant field
DatePicker: Fix issue where date picker does not show correct number of weeks when startOfWeek is set

Added

[NEW] Clipboard: Add Clipboard machine for copying text to clipboard.
[NEW] Collapsible: Add Collapsible machine for interactive component which expands/collapses a panel.
Add support for open.controlled in the machine context as a way to fully control the machine's open state programmatically.

Affected components: Dialog, HoverCard, Popover, ColorPicker, DatePicker, Tooltip, Menu, HoverCard, and Combobox.
Combobox: Expose api.collection for better control over the collection of items in combobox.

Changed

DatePicker
- [BREAKING] Change date picker from api.inputProps to api.getInputProps(...) to support multiple inputs.
- Added a new prop getPresetTriggerProps to support custom trigger for common date presets (e.g. Last 7 days, Last 30 days, etc.)

0.34.0 - 2024-01-19

Fixed

All components: Fix issue where positioning doesn't work as expected when combined with entry/exit animations in the presence component

Changed

Radio, Tabs: Make it possible to override indicator's transition duration by setting the --transition-duration css variable.

0.33.2 - 2024-01-26

Fixed

React: Fix context reactivity issue where updates were not sent to the machine

Added

Changed

0.33.1 - 2024-01-26

Fixed

= Core: Fix issue where context mutation updates were missed due to the underlying proxy-compare regression.

TreeView: Fix issue where tree view machine types were not exported.

Added

Select: Add data-disabled, data-invalid, and data-readonly to indicator props

0.33.0 - 2024-01-23

Fixed

All Machines:
- Improve runtime performance by only creating a machine instance once, and updating the context with setContext(...) instead of withContext(...).
- Fix issue on touch devices where selecting an item within combobox, menu, select triggers click event on element behind the portalled content.

PinInput: Fix an issue where paste in pin input would fill the input with all pasted characters instead of 1 per input

Added

TreeView: Add new TreeView component to render a tree view of items. This component is useful for rendering nested data structures like a file system.

This component is still in beta and is subject to change.

Changed

TagsInput:Improve TagsInput component design by introducing a new item-preview part. See the diff below for more details.

<div {...api.rootProps}>
  {api.value.map((value, index) => (
-    <span key={index}>
+    <span key={index} {...api.getItemProps({ index, value })}>
-     <div {...api.getItemProps({ index, value })}>
+     <div {...api.getItemPreviewProps({ index, value })}>
        <span>{value} </span>
        <button {...api.getItemDeleteTriggerProps({ index, value })}>&#x2715;</button>
      </div>
      <input {...api.getItemInputProps({ index, value })} />
    </span>
  ))}
  <input placeholder="Add tag..." {...api.inputProps} />
</div>

Progress: Rename indicator part to view to better communicate the purpose of the part.

0.32.1 - 2024-01-10

Fixed

ColorPicker: Fix issue where some change details typings were no exported
Combobox:
- Fix an issue that breaks the combobox when clicking on the input while the menu is open
- Fix issue where some change details typings were no exported

0.31.1 - 2023-12-01

Fixed

NumberInput: Fix issue where formatting on blur doesn't work as expected

0.31.0 - 2023-11-27

Fixed

ColorPicker: Fix issue where swatch indicator had incorrect data attributes
NumberInput:
- Fix issue when value updates due to intl formatting does not trigger onValueChange
- Fix issue where increment and decrement buttons doesn't respect locales (esp. when locales uses decimal commas and not decimal points)
Menu: Fix issue in non-portalled, nested menus where keyboard interactions within submenu bubble to parent menu

Added

FileUpload
- Add support for onFileAccept and onFileReject callbacks.
- Add support customizing ids and aria labels using messages context property.
- Add item preview image part
- Breaking: Update file error types
  - TOO_MANY_FILES_REJECTION > TOO_MANY_FILES
  - TOO_LARGE > FILE_TOO_LARGE
  - TOO_SMALL > FILE_TOO_SMALL

Changed

DatePicker: Rename messages context property to translations. This property was previously unused

0.30.0 - 2023-11-14

Fixed

RadioGroup: Fix issue where indicator isn't positioned relative to the root

Added

ColorPicker:
- Add support for setting the desired output format. This format will be used in the details.valueAsString for onValueChange callback
- Add support for format trigger and select parts to help control the format of the output value
- Add onFormatChange callback to listen for format changes
- Add closeOnSelect prop to control whether the color picker should close when a swatch color is selected
Toast: Add generic support to toast types to support framework-specific types.

0.28.1 - 2023-11-09

Fixed

Dialog: Fix issue where dialog positioner applied the hidden attribute when closed leading to pre-mature exit of css animations applied to the dialog content.

Only the backdrop and content should use the hidden attribute.
Combobox: Fix a case where item highlight was looping even though loop property was false

0.28.0 - 2023-11-08

Fixed

Menu: Fix issue issue where link is not clickable on mobile
Accordion: Fix issue where onValueChange is not called when multiple is set to true
NumberInput
- Fix issue where "." cannot be entered due to virtual dom timing between frameworks
- Fix issue where decrement and increment triggers don't work for touch devices
ColorPicker, DatePicker: Fix issue where aria-controls was not added to trigger
Combobox: Fix autocomplete input behavior not working in Vue.js
Select: Fix issue where the loop property is not respected
Slider: Fix issue where slider thumb throws if index is not provided. We now set 0 as the default index.

Added

Menu: Add support for controlling menu's open state via the open context property

0.27.0 - 2023-10-30

Fixed

ColorPicker:
- Fix issue where entering empty value in alpha sets value to NaN. Now, it reverts back to the previous alpha value
- Fix issue where channel inputs within control and content have similar ids, violating the accessibility tree
Select: Fix issue where collection is not returned in the api
React: Refactor types to reference react use directly
DatePicker: Fix issue where api.isOpen returned undefined in some cases

Added

RadioGroup: Set default orientation to vertical

Changed

Slider: Rename output part to valueText to match naming convention
DatePicker
- Remove support for inline in datepicker and replace with closeOnSelect for API consistency.
- Add data-placement to trigger and content parts for position-aware styling.

0.25.0 - 2023-10-17

Fixed

ColorPicker
- Fix issue where channel inputs within control doesn't get synced
- Fix issue where area selection doesn't work when the value is not hsl
- Add default 12px size for transparency grid
RadioGroup: Fix issue where indicator stays visibile when the value is null
Combobox: Fix issue where combobox positioner is hidden when combobox is not open

Changed

Toast: Redesign toast render apis to allow for framework control.
- defaultOptions can now be passed directly to the toast.group machine context.
- You can now pass the default render function to the toast.group machine context.
- Removed api.render in favor of userland control. This eliminates the bug in Solid.js for custom toasts.
Carousel: Rename onSlideChange to onIndexChange
Slider, RangeSlider: Merge the slider and range slider machines into one to prevent logic duplication.
- value and onValueChange type has been updated to be number[]
- Update api.getThumbProps(index) to api.getThumbProps({ index })
Dialog: Rename dialog container to dialog positioner for better API consistency. This means api.containerProps is now api.positionerProps

0.24.0 - 2023-10-12

Fixed

FileUpload: Issue where api.setFiles and api.clearFiles does not work
NumberInput: Fix issue where before input gets called with incorrect event data
Popover: Fix issue where popover shows a DOMException warning when third party iframes are present

Added

DatePickcer: Add new table head component to allow for customizing the table head

Changed

💥 Breaking changes

Combobox, Select, HoverCard: Rename api.setPositioning(...) to api.reposition(...)
Carousel: Refactor components to ensure consistent naming convention
- slideGroupProps -> itemGroupProps
- getSlideProps -> getItemProps
- nextSlideTrigger -> nextTrigger
- prevSlideTrigger -> prevTrigger
ColorPicker:
- Redesigned components to ensure consistent naming convention
- Added support for trigger and content parts to control the open/close behavior
- Add new api.getChannelValue API to get the value of a specific color channel
Pagination: Rename component anatomy and parts
- getPageTriggerProps => getTriggerProps
- getNextPageTriggerProps => getNextTriggerProps
- getPrevPageTriggerProps => getPrevTriggerProps

0.23.0 - 2023-10-02

Fixed

All Machines: Ensure dir is applied to all positioner elements
FileUpload: Fix reopening the system file picker in file-upload on browsers other than Chrome
PinInput: Fix issue where multiple values can be entered in a single input

Changed

💥 Breaking changes

FileUpload:
- Redesign the file-upload component to include new parts:
  - Item: The element that represents a file
  - ItemSizeText: The element that represents the size of a file
  - ItemName: The element that represents the name of a file
  - ItemDeleteTrigger: The buttonelement used to delete a file
- Added new api.getFileSize method to get the size of a file in a human readable format
RatingGroup:
- Rename api.sizeArray to api.items
- Rename max to count

0.22.0 - 2023-09-26

Fixed

All machines: Ensure the dir attribute is applied consistently across all component parts.
ColorPicker:
- Fix issue where color area changes format when you type custom hex values
- Fix issue where alpha channel input resets to 1 after blurring hex channel input
Dialog:
- Fix issue where focusing outside closes the dialog despite closeOnInteractOutside being set to false
Editable:
- Fix issue where the input value doesn't get synced correctly when controlled

Added

Combobox: Add support for api.setPositioning(...) to allow for repositioning the combobox content
Menu:
- Add new optionItemIndicator and optionItemText part
- Add api.optionItemIndicatorProps(...), api.optionItemTextProps(...) support
- Add api.getOptionItemState and api.getItemState
- Export OptionItemState and ItemState types
ColorPicker: Add support for entering native color names (e.g. red, blue, green, etc.)

Changed

Menu:
- Removed api.isOptionChecked in favor of api.getOptionItemState
NumberInput:
- Refactor number input machine to handle number parsing correctly
- Fix issue where value doesn't listen to form reset events
- BREAKING: Removed the following context properties in favor of the new formatOptions: validateCharacter, parse, format, minFractionDigits, maxFractionDigits
Dialog:
- Fix issue where modal: false doesn't disable focus trap
- Rename closeOnEsc to closeOnEscapeKeyDown
- Rename onEsc to onEscapeKeyDown
- Rename closeOnOutsideClick to closeOnInteractOutside
Editable:
- Hide submit and cancel trigger when not in editing mode
- Hide edit trigger when in editing mode

0.21.0 - 2023-09-19

Fixed

ToggleGroup: Fix issue where anatomy was not exported
Pagination: Fix bug where pagination returns inconsistent pages
Select, Combobox: Fix issue where readonly items could not be used in the collection
Focus Visible: Fix issue where focus visible was not working when clicked inside element with tabindex attribute
Toast: Fix accessibility issue where toast placement region labels were not unique
Menu: Fix issue where menu does not scroll highlighted item into view

Added

Add indicator part to some components for ease of styling. Added AccordionItemIndicator, SelectIndicator, MenuIndicator, PopoverIndicator

Changed

Popper: Ensure positioner uses the same zIndex as the content element

💥 Breaking changes

Refactor component anatomy to use consistent naming convention across all machines.
- Accordion
  - getTriggerProps => getItemTriggerProps
  - getContentProps => getItemContentProps
- Radio
  - getRadioProps => getItemProps
  - getRadioControlProps => getItemControlProps
  - getRadioLabelProps => getItemTextProps
  - getRadioHiddenInputProps => getItemHiddenInputProps
  - getRatingState => getItemState
  - getRatingProps => getItemProps
- TagsInput
  - getTagProps => getItemProps
  - getTagDeleteTriggerProps => getItemDeleteTriggerProps
  - getTagInputProps => getItemInputProps
- Toggle Group
  - getToggleProps => getItemProps
ToggleGroup: Allow deselecting item when multiple is false.

0.20.0 - 2023-09-14

Fixed

Pagination: Fix issue where change callback does not get called when clicking the page button.

Added

DatePicker: Add onOpenChange callback to listen for changes in the open state
[New]: Add @zag-js/file-utils package to help with file related operations
Editable: Autofocus the editable input element when startsWithEditView is set to true
Tabs: Add api.getTriggerState(...) to get the current state of the tab trigger

Changed

💥 Breaking changes

All machines: Unify all callbacks to follow a consistent naming convention
- onOpen and onClose => onOpenChange
- onChange => onValueChange
- onFocus => onFocusChange
- onHighlight => onHighlightChange
- onLoad and onError => onLoadingStatusChange
- onInputChange => onInputValueChange
Remove toggle machine in favor of userland implementation. For more advanced toggle functionality, use the ToggleGroup machine.
RadioGroup: Remove api.blur() from radio group machine. Prefer to use document.activeElement.blur() instead.
FileUpload
- Rename api.setValue to api.setFiles
- Rename api.clearValue to api.clearFiles
Tabs: Changed api.setIndicatorRect(id) to api.setIndicatorRect(value) for better userland control

0.19.1 - 2023-09-11

Fixed

All machines: Fix issue where onChange callbacks could be executed excessively when no value changed.
Combobox, Select:
- Fix issue where clear trigger was incorrectly shown when value is empty
- Export CollectionItem type
- Ensure consistent usage of generics across the connect and machine functions

0.19.0 - 2023-09-07

Fixed

Popper: Fix issue where passing the offset positioning option to popper-related components causes undesired placement in each render cycle.
RadioGroup: Fix issue where change event doesn't get dispatched when value changes programmatically.

Added

Combobox, Selected
- Add control and root parts to select and combobox components

Changed

Combobox, Select
- Loosen the collection item types to allow string item
- Add generic to select and combobox context and api
- Use dismissable layer to better manage layering when used in a popover or dialog
Checkbox, Switch: Dispatch change event when checked state is set programmatically to get it working in Solid.js form libraries

0.18.0 - 2023-09-05

Fixed

DatePicker
- Fix issue where datepicker value onChange returned a proxy array
- Fix issue where clearing the date picker value prevent selecting a new date when inline: true is set
Menu: Fix issue where closeOnSelect on menu item props isn't respected in machine
NumberInput: Fix issue where number input goes into infinite update cycles due to additional input event

Added

React: Export PropTypes from react package for consistency
Select, Combobox: Add support for selecting multiple items
Combobox: Add support for closeOnSelect

Changed

RadioGroup: Remove unsupported readOnly property from types

💥 Breaking changes

Redesign select and combobox API to allow passing value as string and collection

Prior to this change, Zag computes the label and value from the DOM element. While this worked, it makes it challenging to manage complex objects that don't match the label and value convention.

// Create the collection
const collection = select.collection({
  items: [],
  itemToString(item) {
    return item.label
  },
  itemToValue(item) {
    return item.value
  },
})

// Pass the collection to the select machine
const [state, send] = useMachine(
  select.machine({
    collection,
    id: useId(),
  }),
)

0.17.0 - 2023-08-26

Fixed

React: Fix issue where spreading props on a forwardRef element show a LegacyRef error
Slider: Fix issue where slider marks are not aligned to the thumb position in "contain" alignment mode
TagsInput: Ignore key during composition in onKeyDown event
Combobox, Select, Menu
- Fix issue where select clicks underlying element on mobile.
- Fix issue where combobox and menu option item triggers double click.
Form Elements: Re-enable the input after removing disabled attribute from the parent fieldset

Added

Slider: Add support for passing the thumbSize in the machine context to avoid first-render flicker due to DOM measurement.

Changed

💥 Breaking changes

All machines: Rename exported PublicApi to Api
Combobox: Remove selectInputOnFocus option in favor of userland control
Accordion: Remove support for passing value as string. The value property must be an array of strings string[]
Tabs
- Rename onHighlight to onFocusChange
- Remove onTagUpdate, use onChange instead

0.16.0 - 2023-08-13

Fixed

Select: Fix issue where interaction outside and positioning does not work when select content is conditionally rendered

Changed

Pressable: Remove id usage for better composition
Radio: Rename getRadioInputProps to getRadioHiddenInputProps
Tabs: Rename tablist part to list to match naming convention

0.15.0 - 2023-08-08

Changed

Checkbox: Rename inputProps to hiddenInputProps
All machines: Remove hiddenInput from machine anatomy
Combobox: Add optionGroupLabel part to Combobox
Tabs: Remove content group part

0.14.0 - 2023-08-07

Fixed

Dialog: Improve outside interaction logic to avoiding closing when interacting with browser extensions like grammarly or 1password.
File Upload
- Rename minSize and maxSize to minFileSize and maxFileSize respectively
- Rename api.openFilePicker to api.open

Changed

💥 Breaking changes

Carousel: Rename nextTrigger, prevTrigger to nextSlideTrigger and prevSlideTrigger parts
DatePicker: Add positioner part to allow dynamic positioning

Added

Combobox, Editable, Menu, Select, TagsInput: Provide interaction event handlers (onPointerdownOutside, onFocusOutside and onInteractOutside) to better manage outside interaction

0.13.0 - 2023-07-25

Fixed

ColorPicker
- Fix issue where isEqual doesn't consider alpha channel.
- Fix keyboard navigation in Color Picker between area and channel slider thumb.
Popper Components
- Fix issue in Combobox, Select, Menu, Hover Card where sameWidth doesn't work consistently during re-render.
File Upload: Add data-disabled to all element parts
NumberInput: Add data-focus to all element parts
Popover: Set portalled attribute to be true by default
RadioGroup:
- Add data-orientation to all parts
- Remove unimplemented setPreviousValue action

Changed

Core: Add support for transforming context before settings it in the machine's context. This is useful when some values need to passed to ref function
Toast: Add option to set toast default options like placement, removeDelay, duration, etc

Added

New ToggleGroup machine

0.12.0 - 2023-07-16

Fixed

Avatar: Fix issue where avatar doesn't show fallback when image src is initially empty
ColorPicker: Fix issue where focusing on area thumb doesn't transition to focused state, making keyboard navigation not work.
Checkbox, Switch: Fix issue　where api.setChecked does not work

Changed

💥 Breaking changes

All machines:
- Add data-state attribute to allow styling the open/closed state or checked/unchecked states
- We replaced data-expanded or data-checked to data-state attribute
  - data-expanded maps to data-state="open" or data-state="closed"
  - data-checked maps to data-state="checked" or data-state="unchecked"
  - data-indeterminate maps to data-state="indeterminate"
  - data-open maps to data-state="open"

0.11.2 - 2023-07-13

Fixed

All machines: Fix issue where machine types were not being properly inferred

0.11.1 - 2023-07-12

Fixed

Carousel: Expose the types and add onClick to carousel indicator
ColorPicker: Fix types exports

0.11.0 - 2023-07-11

Fixed

Editable: Fix issue where initially cancelling the value by pressing the escape key doesn't work
Tooltip: Fix issue where it re-opens after clicking the trigger and moving the cursor slightly

Changed

Tooling: Revert build tooling from vite to tsup

Added

New presense machine to manage mount/unmount animation.

0.10.5 - 2023-07-06

Fixed

All machines: Fix an issue where type declarations aren't inferred correctly

0.10.4 - 2023-07-05

Fixed

RadioGroup: Fix issue where indicator part does not transition its size and position after first render

0.10.3 - 2023-06-30

Fixed

All machines: Improve DOM detection code to rely on document instead of window
Popper: Fix issue where offset is ignored from default gutter

0.10.2 - 2023-06-01

Fixed

Avatar: Fix issue where anatomy was not exported
Splitter: Set the panel's default minSize to 0

0.10.1 - 2023-05-31

Fixed

Splitter: Fix issue where api for controlling panel sizes wasn't implemented

0.10.0 - 2023-05-31

Fixed

Checkbox, Switch: Fix issue where root element emits onClick twice when parent element is clicked
Combobox
- Fix issue where entering value in between input character moves cursor to the end
- Fix issue where non-ascii characters could not be entered
DatePicker, Dialog
- Fix scroll hijacking issue during initial and return focus
- Upgrade focus-trap package to ensure that trap works when the active element within the content is removed
- Fix scroll hijacking issue during initial and return focus
Pressable: Ensure consistent behavior between space and enter key

Changed

Anatomy: Update createAnatomy to return an array of the anatomy instance's part names

Added

New Avatar machine

0.9.2 - 2023-05-18

Fixed

All machines: Fix issue where event point calculation is incorrect when the page is scrolled
Dialog: Fix issue where setReturnFocus used in focus-trap throws a console error
PinInput: Fix issue where defaultValue is always overriden with an array with empty strings when mounted

0.9.0 - 2023-05-16

Fixed

DatePicker: Fix inconsistencies in api methods and naming conventions
Switch: Remove unused attributes and make it consistent with checkbox
Tabs
- Remove unneeded style property in the indicator (depending on orientation)
- Fix bug where keyboard navigation doesn't work in manual activation mode

Changed

Anatomy: Add support for renaming component scope/name

0.7.0 - 2023-05-03

Fixed

All machines: Ensure ids of underlying elements can customized based on ids` context property.
Editable: Fix issue where focus is hijacked on blur when interacting outside on a focusable element
Core: Refactor regex for mergeProps in zag core.
Solid.js: Improve reactivity of mergeProps function
Carousel: Improve support for spacing and slides per view
ColorPicker: Export types for color channel and swatch parts
Popover, Menu, Tooltip, HoverCard
- Update the setPositioning api method to allow empty arguments
Slider, RangeSlider: Ensure consistent props for marker
Splitter: Export types for panel and resize trigger props

Changed

Editable: Add finalFocusEl to allow for better return focus management
Pagination: Add type property to the pagination's context to control properties used in trigger element

0.6.0 - 2023-04-15

Fixed

Vue: Fix issue where defaultValue does not get applied to input element
Checkbox: Fix issue where checkbox toggleChecked was not defined
DatePicker
- Fix issue where focusedValue was not synced with value property
- Fix issue where input value was not updated when locale and value changed
RatingGroup, Splitter
- Update point calculations based on changes in getRelativePointPercent output

Changed

Rename HoverCard and Popover onOpenChange to onOpen and onClose

Added

New ColorPicker machine

[0.5.0] - 2023-04-11

Fixed

Changed

All machines: Ensure all packages are versioned together
Checkbox: Remove the defaultChecked property in favor of the checked property that can now be controlled.

// the checkbox will be checked initially
const [state, send] = useMachine(
  checkbox.machine({
    id: "1",
    checked: true,
  }),
)

// this will update the checkbox when the `checked` value changes
const [state, send] = useMachine(checkbox.machine({ id: "1" }), {
  context: {
    // when this value changes, the checkbox will be checked/unchecked
    checked: true,
  },
})

Dialog: Remove the defaultOpen property in favor of the open property that can now be controlled.

// this is will open the dialog initially
const [state, send] = useMachine(dialog.machine({ id: "1", open: true }))

// this will open the dialog when the `open` value changes
const [state, send] = useMachine(dialog.machine({ id: "1" }), {
  context: {
    // when this value changes, the dialog will open/close
    open: true,
  },
})

HoverCard: Remove the defaultOpen property in favor of the open property that can now be controlled.

// this is will open the hoverCard initially
const [state, send] = useMachine(hoverCard.machine({ id: "1", open: true }))

// this will open the hoverCard when the `open` value changes
const [state, send] = useMachine(hoverCard.machine({ id: "1" }), {
  context: {
    // when this value changes, the hoverCard will open/close
    open: true,
  },
})

Popover: Remove the defaultOpen property in favor of the open property that can now be controlled.

// this is will open the popover initially
const [state, send] = useMachine(popover.machine({ id: "1", open: true }))

// this will open the popover when the `open` value changes
const [state, send] = useMachine(popover.machine({ id: "1" }), {
  context: {
    // when this value changes, the popover will open/close
    open: true,
  },
})

Switch: Remove the defaultChecked property in favor of the checked property that can now be controlled.

// the switch will be checked initially
const [state, send] = useMachine(
  switch.machine({
    id: "1",
    checked: true,
  }),
)

// this will update the switch when the `checked` value changes
const [state, send] = useMachine(switch.machine({ id: "1" }), {
  context: {
    // when this value changes, the switch will be checked/unchecked
    checked: true,
  },
})

Tooltip: Remove defaultOpen property in favor of the open property that can now be controlled.

// this is will open the tooltip initially
const [state, send] = useMachine(tooltip.machine({ id: "1", open: true }))

// this will open the tooltip when the `open` value changes
const [state, send] = useMachine(tooltip.machine({ id: "1" }), {
  context: {
    // when this value changes, the tooltip will open/close
    open: true,
  },
})

Files

CHANGELOG.md

Latest commit

History

CHANGELOG.md

File metadata and controls

CHANGELOG

[Unreleased]

0.68.0 - 2024-09-15

Fixed

0.68.0 - 2024-09-12

Fixed

Changed

0.67.0 - 2024-09-10

Added

Fixed

0.66.0 - 2024-09-05

Fixed

Added

Changed

0.65.1 - 2024-08-20

Fixed

0.65.0 - 2024-08-08

Fixed

Added

Changed

0.64.0 - 2024-08-01

Fixed

Added

Changed

0.63.0 - 2024-07-28

Fixed

Added

0.62.1 - 2024-07-27

Fixed

Added

Changed

0.62.0 - 2024-07-23

Fixed

Changed

0.61.1 - 2024-07-15

Fixed

0.61.0 - 2024-07-08

Fixed

Added

0.60.0 - 2024-07-05

Fixed

Added

0.59.0 - 2024-06-29

Fixed

Added

0.58.3 - 2024-06-27

Fixed

0.58.0 - 2024-06-21

Fixed

Added

0.57.0 - 2024-06-14

Fixed

Added

0.56.1 - 2024-06-11

Fixed

0.56.0 - 2024-06-10

Fixed

Added

Changed

0.55.0 - 2024-06-07

Fixed

Added

Changed

0.54.0 - 2024-06-05

Changed

0.53.0 - 2024-06-03

Fixed

Added

0.52.0 - 2024-06-02

Fixed

Added

0.51.2 - 2024-05-28

Fixed

0.51.0 - 2024-05-23