@ark-ui/[email protected]

Added

• Implemented support for reactive props in use-*.ts functions.

const value = ref(['React'])

const accordionProps = computed<UseAccordionProps>(() => ({
  multiple: true,
  value: value.value,
  onValueChange: (e) => (value.value = e.value),
}))

const accordion = useAccordion(accordionProps)

Fixed

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

@ark-ui/[email protected]

Added

• Implemented support for reactive props in use-*.ts functions.

  const accordionProps = createMemo<UseAccordionProps>(() => ({
    multiple: true,
    value: value(),
    onValueChange: (e) => setValue(e.value),
  }))
  
  const accordion = useAccordion(accordionProps)

Fixed

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

@ark-ui/[email protected]

Fixed

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

@ark-ui/[email protected]

Fixed

• Steps: Fixed issue where Steps.X namespace was not exported.

@ark-ui/[email protected]

Ark UI just got a major performance boost! 🚀

What’s new in v5?

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

We made this happen by using Vue's native reactive primitives instead of external stores.

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

A quick note on tests

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

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

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

Added

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

Fixed

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

@ark-ui/[email protected]

Ark UI just got a major performance boost! 🚀

What’s new in v5?

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

We made this happen by using Solid's native reactive primitives instead of external stores.

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

A quick note on tests

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

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

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

Added

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

Fixed

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

@ark-ui/[email protected]

Ark UI just got a major performance boost! 🚀

What’s new in v5?

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

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

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

A quick note on tests

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

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

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

Added

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

Fixed

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

@ark-ui/[email protected]

Fixed

• Field: Resolved an issue where the data-disabled attribute wasn't set on the field helper
  text when the field is disabled.

@ark-ui/[email protected]

Fixed

• Field: Resolved an issue where the data-disabled attribute wasn't set on the field helper
  text when the field is disabled.

@ark-ui/[email protected]

Fixed

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