@ark-ui/[email protected]

Highlights

The 3.0 release brings significant enhancements and some breaking changes for a more streamlined and
flexible API. Key updates include new components and types, improved form integration, and enhanced
forward compatibility. Here are some highlights:

Added

• Context Components: Introduced the Context component for easier access to internal machine
  APIs, improving component composition. See the example below:

export const Basic = () => (
  <Popover.Root>
    <Popover.Trigger>Open</Popover.Trigger>
    <Popover.Positioner>
      <Popover.Context>
        {(popover) => (
          <Popover.Content>
            <Popover.Title onClick={() => popover().setOpen(false)}>Title</Popover.Title>
            <Popover.Description>Description</Popover.Description>
          </Popover.Content>
        )}
      </Popover.Context>
    </Popover.Positioner>
  </Popover.Root>
)

• Format: Added a Format component for formatting bytes and numbers.

<Format.Byte value={120904} unit="byte" unitDisplay="short" />
<Format.Number value={1204} unit="centimeter" />

• Tooltip: Added defaultOpen prop for cases where you do not need to control its open state.
• Types: Exported Assign and Optional types to enhance type handling.
• Toast: Added support for overlapping and stacked toast.

Changed

• [BREAKING]: Exposed hidden inputs in Checkbox, ColorPicker, FileUpload, PinInput,
  RatingGroup, Select, Switch, and TagsInput for better form library compatibility. Please
  ensure to include the hidden input in your component like shown below:

<Checkbox.Root>
  <Checkbox.Label>Checkbox</Checkbox.Label>
  <Checkbox.Control>
    <Checkbox.Indicator>
      <CheckIcon />
    </Checkbox.Indicator>
  </Checkbox.Control>
  <Checkbox.HiddenInput /> // [!code highlight]
</Checkbox.Root>

• [BREAKING]: Made id optional and removed for from ItemGroupLabel in Combobox and
  Select for cleaner markup.

- <Combobox.ItemGroup id="framework">
-   <Combobox.ItemGroupLabel for="framework">Frameworks</Combobox.ItemGroupLabel>
+ <Combobox.ItemGroup>
+   <Combobox.ItemGroupLabel>Frameworks</Combobox.ItemGroupLabel>

• [BREAKING] Popover, Tooltip: Renamed closeOnEsc to closeOnEscape to be consistent with
  dialog machine.
• [BREAKING]: Renamed Environment to EnvironmentProvider to align with other providers.
• Refined the as prop implementation for improved type merging and performance.

// before
<Button as={Dialog.Trigger} variant="solid" size="sm">
  Open Dialog
</Button>

// after
<Dialog.Trigger asChild={(props) => <Button {...props()} />}>
  Open Dialog
</Dialog.Trigger>

Fixed

• DatePicker: Resolved issues with min and max props not supporting date strings.
• Accordion: Fixed initial flicker of content.
• TagsInput: Replaced HTMLInputElement with HTMLDivElement in TagsInput.Root.
• Select, Combobox: Fixed an issue with reactivity.
• Toast: Resolved an issue with Toast not updating its toasts and count properties when
  creating one or more toasts.
• ColorPicker: Added missing HTMLArkProps<'div'> to ColorPicker.View.

Removed

• [BREAKING]: Dropped direct internal API access from Root components. Use the new Context
  component for more flexible and cleaner API integration.
• [BREAKING]: Simplified component APIs by removing dir and getRootNode attributes. Use
  LocaleProvider and
  EnvironmentProvider for these settings.