chakra-ui/ark @ark-ui/react@3.0.0

on GitHub

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 forward
compatibility with React 19. Here are some of the 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] Combobox, Select: Made id optional and removed htmlFor from ItemGroupLabel
  for cleaner markup.

- <Combobox.ItemGroup id="framework">
-   <Combobox.ItemGroupLabel htmlFor="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] Environment: Renamed Environment to EnvironmentProvider to align with other
  providers.
• React 19: Improved the ark factory's forward compatibility with React 19 by supporting ref
  as a normal prop.

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.

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.