@ark-ui/[email protected]

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

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

@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.

@ark-ui/[email protected]

Fixed

• Resolved an issue where the package.json is missing export specifiers.

@ark-ui/[email protected]

Changed

• Update to the latest @zag-js

@ark-ui/[email protected]

Fixed

• Resolved an issue where the Clipboard component was not exported correctly.

@ark-ui/[email protected]

Added

• Introduced Clipboard component. Refer to the documentation for details.
• Implemented programmable control over the open state for ColorPicker, DatePicker, Dialog, HoverCard, Menu, Popover, Select, and Tooltip.
• Exported SelectionDetails type for the Menu component.
• Added a PresetTrigger part to the DatePicker component, enabling custom triggers for common date presets (e.g., Last 7 days, Last 30 days).
• Enhanced the DatePicker.Control component to support multiple inputs by introducing an optional index attribute to DatePicker.Input. Example usage:

<DatePicker.Control>
  <DatePicker.Input index={0} />
  <DatePicker.Input index={1} />
</DatePicker.Control>

Changed

• Refined the TreeView component API for streamlined component usage. See the documentation for details.
• Updated Dialog.Description and Popover.Description elements from p to div for better paragraph handling.
• Altered TreeView.BranchTrigger element from button to div for accessibility enhancements.

Fixed

• Resolved unintentional interactions when clicking the scrollbar.
• Addressed an issue where positioned components failed to adjust to window resizing.
• Corrected a behavior where restoring scroll position triggered a smooth scroll effect back to the starting point.
• Rectified a problem in Combobox, Menu, and Select where scrolling into view inadvertently scrolled the body element.
• Fixed a discrepancy in DatePicker regarding the incorrect display of weeks when setting startOfWeek.
• Solved an issue in the Editable preventing text deletion upon reaching maxLength.
• Corrected an issue in the Select where an item group's label id was misdirected.
• Adjusted Select to use the correct id for the aria-activedescendant attribute.

@ark-ui/[email protected]

Fixed

• Resolved an issue where the Clipboard component was missing a specifier in the @ark-ui/react package.

@ark-ui/[email protected]

Added

• Introduced Clipboard component. Refer to the documentation for details.
• Implemented programmable control over the open state for ColorPicker, DatePicker, Dialog, HoverCard, Menu, Popover, Select, and Tooltip.
• Added a PresetTrigger part to the DatePicker component, enabling custom triggers for common date presets (e.g., Last 7 days, Last 30 days).
• Enhanced the DatePicker.Control component to support multiple inputs by introducing an optional index attribute to DatePicker.Input. Example usage:

<DatePicker.Control>
  <DatePicker.Input index={0} />
  <DatePicker.Input index={1} />
</DatePicker.Control>

Changed

• Refined the TreeView component API for streamlined component usage. See the documentation for details.

Fixed

• Resolved unintentional interactions when clicking the scrollbar.
• Addressed an issue where positioned components failed to adjust to window resizing.
• Corrected a behavior where restoring scroll position triggered a smooth scroll effect back to the starting point.
• Rectified a problem in Combobox, Menu, and Select where scrolling into view inadvertently scrolled the body element.
• Fixed a discrepancy in DatePicker regarding the incorrect display of weeks when setting startOfWeek.
• Solved an issue in the Editable preventing text deletion upon reaching maxLength.
• Corrected an issue in the Select where an item group's label id was misdirected.
• Adjusted Select to use the correct id for the aria-activedescendant attribute.

@ark-ui/[email protected]

Added

• Added Clipboard anatomy
• Added Collapsible anatomy

@ark-ui/[email protected]

Added

• Exported SelectionDetails type for Menu component

Changed

• Changed Dialog.Description and Popover.Description from p to div to allow for multiple paragraphs.
• Changed TreeView.BranchTrigger from button to div for the accessibility reasons.

Fixed

• Fix issue where @types/[email protected] broke current typings in Portal
• Fix issue where Select component submits its first option when used in a form, even if there is no value selected.

@ark-ui/[email protected]

Added

• Added TreeView component
• Updated @zag-js dependencies to their latest versions, enhancing performance for all components.
• Exported SelectionDetails type for Menu component

Changed

• Breaking Change: Renamed the root types for all components to <ComponentName>RootProps. Like shown for the Avatar component below:

- import type { AvatarProps } from "@ark-ui/vue"
+ import type { AvatarRootProps } from "@ark-ui/vue"

• Breaking Change: Removed the .Root suffix for provider component like Presence and Environment.

- <Presence.Root>...</Presence.Root>
+ <Presence>...</Presence>

• Breaking Change: Renamed the indicator part to view in the Progress component to more accurately reflect its functionality.

• Added the ItemPreview component to the TagsInput component. See the example below:

<TagsInput.Item key={index} index={index} value={value}>
+  <TagsInput.ItemPreview>
    <TagsInput.ItemText>{value}</TagsInput.ItemText>
    <TagsInput.ItemDeleteTrigger>Delete</TagsInput.ItemDeleteTrigger>
+ </TagsInput.ItemPreview>
  <TagsInput.ItemInput />
</TagsInput.Item>

• Changed Dialog.Description and Popover.Description from p to div to allow for multiple paragraphs.

Fixed

• Added the missing minStepsBetweenThumbs prop to Slider component.
• Fixed an issue where emitted event caused "not declared" warning
• Fixed an issue on touch devices where selecting an item within Combobox, Menu, or Select triggered a click event on the element behind the portalled content.
• Fixed an issue in PinInput where pasting a value filled all inputs instead of populating them one per input.
• Fix issue where Select component submits its first option when used in a form, even if there is no value selected.