Skip to content

Releases: chakra-ui/ark

@ark-ui/vue@4.0.1

26 Sep 15:48
a863f77
Compare
Choose a tag to compare

Fixed

  • Corrected an issue where Vue 3.5.x was not properly declared as a peer dependency.

@ark-ui/vue@4.0.0

25 Sep 15:21
Compare
Choose a tag to compare

In this major release, we shifted from primitive data types like strings to more structured types
such as Collection, Color, and DateValue. This enhanced flexibility and control by offering advanced
methods and properties.

The new APIs introduced helper functions like parseColor, parseDate, and createListCollection
to simplify working with the new types and make code more concise.

Changed

  • Ark UI Vue now required Vue 3.5.x or later, as it leveraged the useId() helper introduced in this version.

  • ColorPicker [Breaking]: Updated value and defaultValue types from string to Color. Use
    the exported parseColor function to convert between strings and color objects.

    Before

    import { ColorPicker } from '@ark-ui/react/color-picker'
    
    const Demo = () => {
      return <ColorPicker.Root defaultValue="#000" />
    }

    After

    import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
    
    const Demo = () => {
      return <ColorPicker.Root defaultValue={parseColor('#000')} />
    }

    This change allows direct access to color object methods and properties.

  • Select, Combobox [Breaking]: Removed the items, itemToString, and itemToValue props.
    Introduced a collection prop instead. Use the createListCollection helper to generate a
    collection from items.

    Before

    import { Select } from '@ark-ui/react/select'
    
    const Demo = () => {
      return <Select.Root items={['Option 1', 'Option 2', 'Option 3']} />
    }

    After

    import { Select, createListCollection } from '@ark-ui/react/select'
    
    const collection = createListCollection({
      items: ['Option 1', 'Option 2', 'Option 3'],
    })
    
    const Demo = () => {
      return <Select.Root collection={collection} />
    }
  • DatePicker [Breaking]: Changed value and defaultValue types from string to Date. To
    convert between strings and dates, use the parseDate function.

    Before

    import { DatePicker } from '@ark-ui/react/date-picker'
    
    const Demo = () => {
      return <DatePicker.Root defaultValue="2024-01-01" />
    }

    After

    import { DatePicker, parseDate } from '@ark-ui/react/date-picker'
    
    const Demo = () => {
      return <DatePicker.Root defaultValue={parseDate('2024-01-01')} />
    }

@ark-ui/solid@4.0.0

25 Sep 15:20
Compare
Choose a tag to compare

In this major release, we shifted from primitive data types like strings to more structured types
such as Collection, Color, and DateValue. This enhanced flexibility and control by offering advanced
methods and properties.

The new APIs introduced helper functions like parseColor, parseDate, and createListCollection
to simplify working with the new types and make code more concise.

Changed

  • ColorPicker [Breaking]: Updated value and defaultValue types from string to Color. Use
    the exported parseColor function to convert between strings and color objects.

    Before

    import { ColorPicker } from '@ark-ui/solid'
    
    const Demo = () => {
      return <ColorPicker.Root defaultValue="#000" />
    }

    After

    import { ColorPicker, parseColor } from '@ark-ui/solid'
    
    const Demo = () => {
      return <ColorPicker.Root defaultValue={parseColor('#000')} />
    }

    This change allows direct access to color object methods and properties.

  • Select, Combobox [Breaking]: Removed the items, itemToString, and itemToValue props.
    Introduced a collection prop instead. Use the createListCollection helper to generate a
    collection from items.

    Before

    import { Select } from '@ark-ui/solid'
    
    const Demo = () => {
      return <Select.Root items={['Option 1', 'Option 2', 'Option 3']} />
    }

    After

    import { Select, createListCollection } from '@ark-ui/solid'
    
    const collection = createListCollection({
      items: ['Option 1', 'Option 2', 'Option 3'],
    })
    
    const Demo = () => {
      return <Select.Root collection={collection} />
    }
  • DatePicker [Breaking]: Changed value and defaultValue types from string to Date. To
    convert between strings and dates, use the parseDate function.

    Before

    import { DatePicker } from '@ark-ui/solid'
    
    const Demo = () => {
      return <DatePicker.Root defaultValue="2024-01-01" />
    }

    After

    import { DatePicker, parseDate } from '@ark-ui/solid'
    
    const Demo = () => {
      return <DatePicker.Root defaultValue={parseDate('2024-01-01')} />
    }

@ark-ui/react@4.0.0

25 Sep 15:20
Compare
Choose a tag to compare

In this major release, we shifted from primitive data types like strings to more structured types
such as Collection, Color, and DateValue. This enhanced flexibility and control by offering
advanced methods and properties.

The new APIs introduced helper functions like parseColor, parseDate, and createListCollection
to simplify working with the new types and make code more concise.

Changed

  • ColorPicker [Breaking]: Updated value and defaultValue types from string to Color. Use
    the exported parseColor function to convert between strings and color objects.

    Before

    import { ColorPicker } from '@ark-ui/react/color-picker'
    
    const Demo = () => {
      return <ColorPicker.Root defaultValue="#000" />
    }

    After

    import { ColorPicker, parseColor } from '@ark-ui/react/color-picker'
    
    const Demo = () => {
      return <ColorPicker.Root defaultValue={parseColor('#000')} />
    }

    This change allows direct access to color object methods and properties.

  • Select, Combobox [Breaking]: Removed the items, itemToString, and itemToValue props.
    Introduced a collection prop instead. Use the createListCollection helper to generate a
    collection from items.

    Before

    import { Select } from '@ark-ui/react/select'
    
    const Demo = () => {
      return <Select.Root items={['Option 1', 'Option 2', 'Option 3']} />
    }

    After

    import { Select, createListCollection } from '@ark-ui/react/select'
    
    const collection = createListCollection({
      items: ['Option 1', 'Option 2', 'Option 3'],
    })
    
    const Demo = () => {
      return <Select.Root collection={collection} />
    }
  • DatePicker [Breaking]: Changed value and defaultValue types from string to Date. To
    convert between strings and dates, use the parseDate function.

    Before

    import { DatePicker } from '@ark-ui/react/date-picker'
    
    const Demo = () => {
      return <DatePicker.Root defaultValue="2024-01-01" />
    }

    After

    import { DatePicker, parseDate } from '@ark-ui/react/date-picker'
    
    const Demo = () => {
      return <DatePicker.Root defaultValue={parseDate('2024-01-01')} />
    }

@ark-ui/vue@3.14.0

24 Sep 14:16
Compare
Choose a tag to compare

Fixed

  • FileUpload: Fix issue where directory: true doesn't work

Changed

  • Switch, Checkbox, Radio Group: Added data-focus-visible attribute to the selected radio
    button when it is interacted with the keyboard.

  • Tooltip: Focus behavior only opens when the tooltip trigger is focused with keyboard.

Added

  • FileUpload: Added ClearTrigger to the FileUpload component.

@ark-ui/solid@3.13.0

24 Sep 14:15
Compare
Choose a tag to compare

Fixed

  • FileUpload: Fix issue where directory: true doesn't work

Changed

  • Switch, Checkbox, Radio Group: Added data-focus-visible attribute to the selected radio
    button when it is interacted with the keyboard.

  • Tooltip: Focus behavior only opens when the tooltip trigger is focused with keyboard.

Added

  • FileUpload: Added ClearTrigger to the FileUpload component.

@ark-ui/react@3.13.0

24 Sep 14:14
Compare
Choose a tag to compare

Fixed

  • FileUpload: Fix issue where directory: true doesn't work

Changed

  • Switch, Checkbox, Radio Group: Added data-focus-visible attribute to the selected radio
    button when it is interacted with the keyboard.

  • Tooltip: Focus behavior only opens when the tooltip trigger is focused with keyboard.

Added

  • FileUpload: Added ClearTrigger to the FileUpload component.

@ark-ui/vue@3.13.1

19 Sep 19:21
Compare
Choose a tag to compare

Fixed

  • Field: Fix issue where using v-model in Field.Input, Field.Select, and Field.Textarea
    doesn't work.

  • Frame: Fixed issue where package requires vue@3.5.x due to usage of onWatcherCleanup.

  • DatePicker

    • Fixed issue where the year select dropdown doesn't respect min and max props.
    • Fixed issue where date picker throws when min or max is changed.
    • Fixed issue where typing in date picker input doesn't work.

@ark-ui/solid@3.12.1

19 Sep 19:20
Compare
Choose a tag to compare

Fixed

  • DatePicker

    • Fixed issue where the year select dropdown doesn't respect min and max props.
    • Fixed issue where date picker throws when min or max is changed.

@ark-ui/react@3.12.1

19 Sep 19:20
Compare
Choose a tag to compare

Fixed

  • DatePicker

    • Fixed issue where the year select dropdown doesn't respect min and max props.
    • Fixed issue where date picker throws when min or max is changed.